I have created a shiny app and it works absolutely fine. But the only problem I have is that every time the speed or interval size is changed, the slider 'pauses'.
Conversely, if I use an actionButton instead, the animation continues.
I would like to give the user a finer control over the animation and so I am using a slider/numericInput instead. But I want the sliderInput to accept the user defined value and start playing the animation with the new value. Like the speed control on YouTube.
Here is my code a sample from the bigger version of the code:
library(shiny)
minimum.slider <- as.POSIXct("2016-08-12 00:00:00", format = "%Y-%m-%d %H:%M:%S")
maximum.slider <- as.POSIXct("2016-08-30 05:29:00 UTC", format = "%Y-%m-%d %H:%M:%S")
ui <- fluidPage(
titlePanel("tester"),
sidebarLayout(
sidebarPanel(id="sidebar",
uiOutput("slider"),
sliderInput("speed",
label = div(style='width:300px;',
div(style='float:left;', 'slower'),
div(style='float:right;', 'faster')),
min = 1,
max = 10,
value = 6,
width = '300px'),
sliderInput("step_size","Time Steps (minutes):",
min = 10, max = 60, value = 1, width = '300px'),
actionButton("hour_3","3 hour jump")
),
mainPanel(
h4(textOutput("selectedtime"))
)
)
)
server <- function(input, output,session) {
output$slider <- renderUI({
## MAIN slider input into the output. The step depends on user defined 'speed' and 'interval depends on user defined 'step size'
sliderInput("timeRange", label = "Date/Time:", width = '600px',
min = minimum.slider,
max = maximum.slider,
value = minimum.slider,
step = (60*input$step_size),
timezone = "UTC",
animate = animationOptions(interval = 3200 - (input$speed*300),
playButton = tags$img(height = 40,width = 45,
src = "https://png.icons8.com/color/1600/circled-play",
tags$p(tags$b("PLAY"))),
pauseButton = tags$img(height = 40, width = 45,
src = "https://cdn2.iconfinder.com/data/icons/perfect-flat-icons-2/512/Pause_button_play_stop_blue.png",
tags$p(tags$b("PAUSE"))))
)
})
observeEvent(input$speed,{
val <- input$timeRange
updateSliderInput(session, "timeRange",value=val)
})
observeEvent(input$speed,{
val <- input$timeRange
updateSliderInput(session, "timeRange",value=val)
})
observeEvent(input$hour_3,{
val <- input$timeRange + 10800
updateSliderInput(session, "timeRange",value=val)
})
##OUTPUT
observe({
output$selectedtime <- renderText({
paste(format(input$timeRange))
})
})
}
shinyApp(ui,server)
Thanks for your help.