| ui <- fluidPage( | ui <- fluidPage( | ||||
| # textAreaInput("typing", "Type here..."), | # textAreaInput("typing", "Type here..."), | ||||
| typingSpeedInput("typing", "Type here..."), | typingSpeedInput("typing", "Type here..."), | ||||
| actionButton("reset", "Reset"), | |||||
| verbatimTextOutput("debug") | verbatimTextOutput("debug") | ||||
| ) | ) | ||||
| server <- function(input, output, session) { | server <- function(input, output, session) { | ||||
| output$debug <- renderPrint(input$typing) | output$debug <- renderPrint(input$typing) | ||||
| observeEvent(input$reset, { | |||||
| session$sendInputMessage("typing", TRUE) | |||||
| }) | |||||
| } | } | ||||
| shinyApp(ui, server) | shinyApp(ui, server) |
| Find a good delay rate. | Find a good delay rate. | ||||
| ### Almost done: Implement `receiveMessage()` | |||||
| There's not much we'd want to do from the server side | |||||
| in terms of updating the typing area. | |||||
| But maybe we'd like to be able to add a "Reset" button. | |||||
| Write a method that, | |||||
| when it recieves a `true` value from the server, | |||||
| clears the text input area. | |||||
| Add a reset button to your app that uses `shiny$sendInputMessage()` | |||||
| to send `typing` a `TRUE` | |||||
| whenever the button is clicked. |
| // and its elements to reflect the given data. | // and its elements to reflect the given data. | ||||
| // The messages are sent from R/Shiny via | // The messages are sent from R/Shiny via | ||||
| // R> session$sendInputMessage(inputId, data) | // R> session$sendInputMessage(inputId, data) | ||||
| console.error('typingSpeed.receiveMessage() is not yet defined'); | |||||
| // If you want the update to trigger reactivity, trigger a subscribed event | // If you want the update to trigger reactivity, trigger a subscribed event | ||||
| // $(el).trigger("keyup") | |||||
| if (typeof data === 'boolean' && data) { | |||||
| el.value = '' | |||||
| $(el).trigger('keyup') | |||||
| } | |||||
| }, | }, | ||||
| subscribe: function(el, callback) { | subscribe: function(el, callback) { | ||||
| // Listen to events on your input element. The following block listens to | // Listen to events on your input element. The following block listens to |