Set a countdown timer to remind you when a certain amount of time has elapsed

By @hashV0.2.1

The Timer block provides a countdown timer with a novel UI. The remaining time is communicated with numbers and with a circular gradient, which shrinks in size counterclockwise towards 00:00. The number of minutes can be set by typing or by clicking plus and minus buttons, which add or subtract time in five minute chunks, while a reset button stops the countdown and restores the time remaining.

Programmatic Usage

It accepts the following properties (view the Timer Block entity type to see these in context)

Invalid property values are auto-corrected to prevent runtime errors.

The block uses the Graph Module to persist its countdown through sessions and reloads.

  • When the play button is clicked, the block calls the updateEntities method and sets the Timer Block Progress property to an object containing the current time + the Timer Block Total Duration.
  • When the pause button is clicked, the sets the Timer Block Progress property to an object containing the elapsed duration of the timer, so it can be resumed later (with the new end time being recalculated).
  • When the timer reaches 00:00, the Timer Block Progress is not unset to avoid duplicate entity updates if the timer is rendered in multiple places.
  • If the value of the Timer Block Progress contains a time which points to the past, it is interpreted as undefined.

Ready to build your own blocks?

Anyone can contribute

Anyone can create blocks and contribute to this growing, open-source registry of blocks. Read our quickstart guide to start building your own blocks.

Read the quickstart guide