Title: | A Countdown Timer for HTML Presentations, Documents, and Web Apps |
Version: | 0.4.0 |
Description: | A simple countdown timer for slides and HTML documents written in 'R Markdown' or 'Quarto'. Integrates fully into 'Shiny' apps. Countdown to something amazing. |
License: | MIT + file LICENSE |
URL: | https://pkg.garrickadenbuie.com/countdown/, https://github.com/gadenbuie/countdown |
BugReports: | https://github.com/gadenbuie/countdown/issues |
Imports: | htmltools, prismatic (≥ 1.1.0), utils, whisker |
Suggests: | rmarkdown, shiny, testthat (≥ 3.0.0) |
Config/testthat/edition: | 3 |
Encoding: | UTF-8 |
RoxygenNote: | 7.2.1 |
NeedsCompilation: | no |
Packaged: | 2022-08-13 12:46:44 UTC; garrick |
Author: | Garrick Aden-Buie |
Maintainer: | Garrick Aden-Buie <garrick@adenbuie.com> |
Repository: | CRAN |
Date/Publication: | 2022-08-16 09:00:08 UTC |
countdown: A Countdown Timer for HTML Presentations, Documents, and Web Apps
Description
A simple countdown timer for slides and HTML documents written in 'R Markdown' or 'Quarto'. Integrates fully into 'Shiny' apps. Countdown to something amazing.
Author(s)
Maintainer: Garrick Aden-Buie garrick@adenbuie.com (ORCID) [copyright holder]
See Also
Useful links:
Report bugs at https://github.com/gadenbuie/countdown/issues
Countdown Timer
Description
Creates a countdown timer using HTML, CSS, and vanilla JavaScript, suitable
for use in web-based presentations, such as those created by
xaringan::infinite_moon_reader()
.
Usage
countdown(
minutes = 1L,
seconds = 0L,
...,
id = NULL,
class = NULL,
style = NULL,
play_sound = FALSE,
font_size = "3rem",
margin = "0.6em",
padding = "10px 15px",
bottom = if (is.null(top)) "0",
right = if (is.null(left)) "0",
top = NULL,
left = NULL,
warn_when = 0L,
update_every = 1L,
blink_colon = update_every > 1L,
start_immediately = FALSE,
box_shadow = "0px 4px 10px 0px rgba(50, 50, 50, 0.4)",
border_width = "3px",
border_radius = "15px",
line_height = "1",
color_border = "#ddd",
color_background = "inherit",
color_text = "inherit",
color_running_background = "#43AC6A",
color_running_border = prismatic::clr_darken(color_running_background, 0.1),
color_running_text = NULL,
color_finished_background = "#F04124",
color_finished_border = prismatic::clr_darken(color_finished_background, 0.1),
color_finished_text = NULL,
color_warning_background = "#E6C229",
color_warning_border = prismatic::clr_darken(color_warning_background, 0.1),
color_warning_text = NULL
)
countdown_fullscreen(
minutes = 1,
seconds = 0,
...,
class = NULL,
start_immediately = FALSE,
font_size = "30vw",
border_width = "0",
border_radius = "0",
margin = "0",
padding = "0",
top = 0,
right = 0,
bottom = 0,
left = 0
)
Arguments
minutes |
The number of minutes for which the timer should run. This
value is added to |
seconds |
The number of seconds for which the timer should run. This
value is added to |
... |
Ignored by |
id |
A optional unique ID for the |
class |
Optional additional classes to be added to the |
style |
CSS rules to be applied inline to the timer. Use |
play_sound |
Play a sound at the end of the timer? If |
font_size |
The font size of the time displayed in the timer. |
margin |
The margin applied to the timer container, default is
|
padding |
The padding within the timer container, default is |
bottom |
Position of the timer within its container. By default the
timer is bottom-aligned using |
right |
Position of the timer within its container. By default the timer
is right-aligned using |
top |
Position of the timer within its container. By default |
left |
Position of the timer within its container. By default |
warn_when |
Change the countdown to "warning" state when |
update_every |
Update interval for the timer, in seconds. When this
argument is greater than |
blink_colon |
Adds an animation to the blink the colon of the digital
timer at each second. Because the blink animation is handled via CSS and
not by the JavaScript process that decrements the timer, so the animation
may fall out of sync with the timer. For this reason, the blink animation
is only shown, by default, when |
start_immediately |
If |
box_shadow |
Shadow specification for the timer, set to |
border_width |
Width of the timer border (all states). |
border_radius |
Radius of timer border corners (all states). |
line_height |
Line height of timer digits text. Use this value to nudge
the timer digits up or down vertically. The best value generally depends on
the fonts used in your slides or document. The default value is |
color_border |
Color of the timer border when not yet activated. |
color_background |
Color of the timer background when not yet activated. |
color_text |
Color of the timer text when not yet activated. |
color_running_background |
Color of the timer background when running.
Colors are automatically chosen for the running timer border and text
( |
color_running_border |
Color of the timer border when running. |
color_running_text |
Color of the timer text when running. |
color_finished_background |
Color of the timer background when finished.
Colors are automatically chosen for the finished timer border and text
( |
color_finished_border |
Color of the timer border when finished. |
color_finished_text |
Color of the timer text when finished. |
color_warning_background |
Color of the timer background when the timer
is below |
color_warning_border |
Color of the timer border when the timer is below
|
color_warning_text |
Color of the timer text when the timer is below
|
Value
A vanilla JavaScript countdown timer as HTML, with dependencies.
Functions
-
countdown()
: Create a countdown timer for use in presentations and HTML documents. -
countdown_fullscreen()
: A full-screen timer that takes up the entire view port and uses the largest reasonable font size.
See Also
Examples
if (interactive()) {
countdown(minutes = 0, seconds = 42)
countdown(
minutes = 1,
seconds = 30,
left = 0,
right = 0,
padding = "15px",
margin = "5%",
font_size = "6em"
)
# For a stand-alone full-screen countdown timer, use countdown_fullscreen()
# with default parameters.
countdown_fullscreen(1, 30)
# For xaringan slides, use percentages for `margin` to set the distance from
# the edge of the slide and use `font_size` to adjust the size of the digits.
# If you need to nudge the text up or down vertically, increase or decrease
# `line_height`.
countdown_fullscreen(
minutes = 0,
seconds = 90,
margin = "5%",
font_size = "8em",
)
# To position the timer "inline" in R Markdown documents,
# use the `style` argument on each timer:
countdown(1, 30, style = "position: relative; width: min-content;")
}
Perform a Countdown Timer Action in a Shiny App
Description
Performs an action in a countdown timer dynamically in a Shiny app via server
logic. You can start, stop, reset, or bump time time (when the timer is
running) up or down. See countdown_shiny_example()
for an example app
demonstrating the usage of countdown_action()
.
Usage
countdown_action(
id,
action = c("start", "stop", "reset", "bumpUp", "bumpDown"),
session = NULL
)
Arguments
id |
A character vector with one or more |
action |
The action to perform, one of |
session |
The reactive |
Value
Invisibly returns the id
of the updated countdown timer(s).
See Also
Other Shiny functions:
countdown_app()
,
countdown_shiny_example()
,
countdown_update()
Launch Countdown Shiny App
Description
Launches a full screen, interactive countdown timer as a shiny-package app.
Usage
countdown_app(...)
Arguments
... |
Arguments passed on to
|
Value
Runs the countdown timer Shiny app in the current R session.
See Also
Other Shiny functions:
countdown_action()
,
countdown_shiny_example()
,
countdown_update()
Examples
if (interactive()) {
countdown_app()
}
Example Countdown Shiny App
Description
An example app that demonstrates the ways that countdown timers can be integrated into Shiny apps.
Usage
countdown_shiny_example(display.mode = c("showcase", "normal", "auto"))
Arguments
display.mode |
The mode in which to display the application. If set to
the value |
Value
Runs the example Shiny app in the current R session.
See Also
Other Shiny functions:
countdown_action()
,
countdown_app()
,
countdown_update()
Examples
if (interactive()) {
countdown_shiny_example()
}
Update a Countdown Timer in a Shiny App
Description
Updates the settings of a countdown timer dynamically in a Shiny app via
server logic. See countdown_shiny_example()
for an example app
demonstrating the usage of countdown_update()
.
Usage
countdown_update(
id,
...,
minutes = NULL,
seconds = NULL,
warn_when = NULL,
update_every = NULL,
blink_colon = NULL,
play_sound = NULL,
session = NULL
)
Arguments
id |
A character vector with one or more |
... |
Ignored, but included for future compatibility. |
minutes |
The number of minutes for which the timer should run. This
value is added to |
seconds |
The number of seconds for which the timer should run. This
value is added to |
warn_when |
Change the countdown to "warning" state when |
update_every |
Update interval for the timer, in seconds. When this
argument is greater than |
blink_colon |
Adds an animation to the blink the colon of the digital
timer at each second. Because the blink animation is handled via CSS and
not by the JavaScript process that decrements the timer, so the animation
may fall out of sync with the timer. For this reason, the blink animation
is only shown, by default, when |
play_sound |
Play a sound at the end of the timer? If |
session |
The reactive |
Value
Invisibly returns the options sent to update the countdown timer(s).
See Also
Other Shiny functions:
countdown_action()
,
countdown_app()
,
countdown_shiny_example()