代码之家 › 专栏 › 技术社区 › agenis

使动画滑块后退(从右向左)以模拟倒计时?

countdown slider shiny r

agenis · 技术社区 · 6 年前

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)

谢谢你的帮助。。

注意

3 回复 | 直到 6 年前

agenis 6 年前

我结合两个想法想出了一个相当令人满意的解决方案:

以上 answer 来自@phalteman,它允许文本标签通过slidertiverput倒数
因为我们不能让滑块从右边开始,至少我们可以让它看起来像是条在减少(否则倒计时就没有意义)。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样式表如下(我添加了 重要的 因为某些原因没有考虑更改而添加标签?

phalteman Andryas Waurzenczak 6 年前

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")
      )

不确定它是否达到了同样的视觉效果,但它可能是一个可以接受的解决方法。。。

agenis 6 年前

另一种方式,我认为,使用完全不同的方法,将是 .gif文件 所需倒计时的图像。

我上传了一个用ggplot2创建的10秒gif示例文件: 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)

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()
}

最后一个应用程序如下: