Simple {countdown} Timer App

Here's a simple timer, created with the {countdown} package.

countdown(id = "countdown")
01:00

The countdown timer reports the state of the timer whenever key actions are performed. On the Shiny side, the input ID is the same as the timer's ID - in this case input$countdown — and the data sent to Shiny reports both the action taken by the user and the current state of the timer.


            

You may also use the countdown_action() button to trigger actions with the timer from Shiny. Interact with the timer directly or use the buttons below to start, stop, reset, or bump the timer up or down.

Countdown Timers in Shiny
by Garrick Aden-Buie

show with app
library(shiny)
library(countdown)

server <- function(input, output, session) {
  output$debug <- renderPrint({
    str(input$countdown)
  })

  timer_is_running <- reactiveVal(FALSE)

  observeEvent(input$countdown, {
    req(input$countdown)
    is_running <- input$countdown$timer$is_running
    if (is_running != timer_is_running()) {
      timer_is_running(is_running)
    }
  })

  output$buttons <- renderUI({
    is_running <- timer_is_running()

    div(
      class = "btn-group",
      actionButton("start", "Start", icon = icon("play")),
      actionButton("stop",  "Stop",  icon = icon("pause")),
      actionButton("reset", "Reset", icon = icon("sync")),
      if (is_running) {
        actionButton("bumpUp", "Bump Up", icon = icon("arrow-up"))
      },
      if (is_running) {
        actionButton("bumpDown", "Bump Down", icon = icon("arrow-down"))
      }
    )
  })

  observeEvent(input$start,    countdown_action("countdown", "start"))
  observeEvent(input$stop,     countdown_action("countdown", "stop"))
  observeEvent(input$reset,    countdown_action("countdown", "reset"))
  observeEvent(input$bumpUp,   countdown_action("countdown", "bumpUp"))
  observeEvent(input$bumpDown, countdown_action("countdown", "bumpDown"))
}
library(shiny)
library(countdown)

ui <- fluidPage(
  title = "{countdown} - Example Shiny App",
  div(
    class = "container",
    h2("Simple {countdown} Timer App"),
    p("Here's a simple timer, created with the {countdown} package."),
    HTML('<pre><code>countdown(id = "countdown")</code></pre>'),
    countdown(
      id = "countdown",
      style = "position:relative;width: 5em;max-width: 100%;"
    ),
    p(
      "The countdown timer reports the state of the timer whenever key actions",
      "are performed. On the Shiny side, the input ID is the same as the timer's",
      "ID - in this case", code("input$countdown"), "— and the data sent to",
      "Shiny reports both the action taken by the user and the current state",
      "of the timer."
    ),
    verbatimTextOutput("debug"),
    p(
      "You may also use the", code("countdown_action()"), "button to trigger",
      "actions with the timer from Shiny. Interact with the timer directly or",
      "use the buttons below to start, stop, reset, or bump the timer up or down."
    ),
    uiOutput("buttons", inline = TRUE),
    tags$style("body, pre, .btn { font-size: 16px }")
  )
)
Code license: GPL-3