заставить анимированный слайдер двигаться назад (справа налево) для имитации обратного отсчета?

Question

Я хочу анимировать блестящий слайдер, чтобы он автоматически перемещался назад при нажатии кнопки воспроизведения, справа налево.Я не могу найти способ сделать это.Ползунок имитирует обратный отсчет времени в 10 секунд, это мой текущий код, он идет не в ту сторону.Я безуспешно пытался возиться с шагом, мин, макс и т. Д. Возможно ли это вообще?

library(shiny); library(shinyjs); library(shinyWidgets)
jscode <- "shinyjs.play = function() {$('.slider-animate-button').trigger('click');}"
ui <- fluidPage(useShinyjs(), extendShinyjs(text = jscode),
  tags$head(tags$style(HTML('.irs-from, .irs-to, .irs-min, .irs-max, .irs-grid-text, .irs-grid-pol, .irs-slider {visibility:hidden !important;}'))),
  h3("countdown"),
  sliderInput("countdown", label = "", width = '300px',min = 0, max = 10,value = 0, step = 0.1, post="secs",
              animate = animationOptions(interval = 50, playButton = "", pauseButton = "")),
  actionButton("start", "start"))
server <- function(input, output,session) {
  disable("slider")
  observeEvent(input$start, priority=10, {js$play()})
}
shinyApp(ui, server)

Спасибо за вашу помощь ..

Примечание : на самом деле главная проблема не столько в том, что она идет не в ту сторону, а в том, что она должна начинаться, заканчиваться и заканчиваться пустым, для обратного отсчета!

Answer 1

Я разработал довольно удовлетворительное решение, сочетающее две идеи:

1. вышеуказанный ответ от @phalteman, который позволяет текстовой метке вести обратный отсчет благодаря sliderTextInput
2. , так как мы не можем сделать ползунок, начинающийся справа, по крайней мере, мы можем заставить его выглядеть так, как будто полоса уменьшается (иначе это не имело бы смысла для обратного отсчета). CSS трюк , чтобы заставить слайдер выглядеть так, как будто он уменьшается, хотя он все еще увеличивается: я переворачиваю цвета ползунка с цветом фона, поэтому то, что кажется полосой, на самом деле является пустым фоном потребляется постепенно (красным на рисунке ниже).

Код CSS для размещения вместо этого в разделе tags$head:

.irs-bar {
    height: 20px !important;
    border-top: 1px solid #CCC !important;
    border-bottom: 1px solid #CCC !important;
    background: #CCC !important;
}

.irs-bar-edge {
    height: 20px !important;
    border: 1px solid #CCC !important;
    background: #CCC !important;
}

.irs-line {
    height: 20px !important;
    border: 1px solid #FF5964 !important;
    background: #FF5964 !important;
}

.irs-single {
    background: #FF5964 !important;
}

.irs-from, .irs-to, .irs-min, .irs-max, .irs-grid-text, .irs-grid-pol, .irs-slider {
    visibility:hidden !important;
}

Таблица стилей CSS будет выглядеть следующим образом (я добавил важный ярлык, потому что по какой-то причине изменения не были приняты во внимание…?

Answer 2

Другой способ, который я подумал, используя совершенно другой подход, это использовать .gif изображение желаемого отсчета.

Я загрузил пример файла 10-секундного GIF, созданного с помощьюggplot2: https://ibb.co/tKQ4xps Приложение будет выглядеть так, используя исправленное изображение при остановке:

library(shiny)
ui <- fluidPage(h3("countdown 10secs"),
                htmlOutput("display.image"),actionButton("start", "start"),actionButton("stop", "stop"))
server <- function(input, output,session) {
  image = reactiveValues(name="full.png")
  observeEvent(input$start, {image$name="gif_timer_10sec.gif"}, ignoreInit = TRUE)
  observeEvent(input$stop, {image$name="full.png"}, ignoreInit = TRUE)
  output$display.image <- renderUI({
    HTML(paste0("<center><img height=25 width=300 align=left src=", image$name, "></center>"))})}
shinyApp(ui, server)

Я также публикую основной код для генерации 100 изображений, составляющих gif:

for (i in 100:1) {
  g = ggplot() + theme(line = element_blank(),text = element_blank(),title = element_blank())
  png(paste0("plot_", 200-i, ".png"))
  g = g + geom_col(aes_string(x=1, y=i), fill="#FF5964") + xlim(0.5,1.5) + ylim(0,100) + coord_flip()
  print(g); dev.off()
}

Окончательное приложение выглядит так:

Answer 3

Вы можете имитировать обратный отсчет, посчитав назад от 10 до 0, используя shinyWidgets::sliderTextInput() и указав нисходящий порядок для ползунка, вместо кодирования ползунка, который перемещается справа налево.

ui <- fluidPage(useShinyjs(), extendShinyjs(text = jscode),
         tags$head(tags$style(HTML('.irs-from, .irs-to, .irs-min, .irs-max, .irs-grid-text, .irs-grid-pol, .irs-slider {visibility:hidden !important;}'))),
         h3("countdown"),
         sliderInput("countdown", label = "", width = '300px', min = 0, max = 10, value = 0, step = 0.1, post="secs",
           animate = animationOptions(interval = 50, playButton = "", pauseButton = "")),
         shinyWidgets::sliderTextInput("countdown2", label = "", width = '300px', 
              choices = seq(from = 10, to = 0, by = -0.1), post="secs", 
              animate = animationOptions(interval = 50, playButton = "", pauseButton = "")),
         actionButton("start", "start")
      )

Не уверенон достигает того же визуального эффекта, но это может быть приемлемым обходным путем ...