The Timer Widget is a powerful widget that utilizes UTC formatting to generate a customizable clock.
In this article, you will learn how to create a simple countdown clock using the Timer Widget. To begin, navigate to the Dashboard and create a brand new Composition. For our digital countdown clock, we added a circle widget to house our numbers:
You can design any base for your digital countdown clock
Create a shape where your clock will live
1 - Add Timer Widget
Select "Widget" from the "Add" dropdown menu
Search and select the "Timer" Widget
Timer Widget added
2 - Populate the Timer Widget
Dig into the Timer Widget to add the desired information
Select the Timer Widget in the Composition Navigator
2A - Add a Text Widget
Add the text widget to the Composition
This text widget will serve as our numbers of the clock.
Add the Text Widget
2B - Connect the Text Widget
Connect the text widget to the Widget Node. Then select "Format".
Connect the Text Widget
Text Widget connected
Navigate back to the top of the composition
3 - Change Timer Widget "Format"
Change the default timer widget "Format" to minutes and seconds (mm:ss)
We just successfully connected our text to the "Format" of the Timer Widget. We want our countdown clock to be in minutes and seconds. Instead of the default hours:minutes:seconds, let's change this to minutes:seconds (mm:ss).
Make sure you are inserting the proper information. To double check your formatting, follow this link.
Change the default Format to "mm:ss"
4 - Select "Use End" Box
Select the "Use End" box
The "Use End" option essentially makes the timer count down instead of up.
Select the "Use End" box
5 - Change Minutes Begin Time
Change the Minute value in the "Begin Time" section to 5.
This will be the number that our countdown clock will start at.
Change Begin Time Minutes to 5
6 - Add "Time Control" Control Node
S elect the Control Node dropdown menu in the Data Interface and Control Panel and select "Time Control"
This control node will allow you to start and stop the timer in a control application.
Add a "Time Control" Control Node
7 - Test the Timer
Test the Time Control control node by clicking on the play and reset buttons. Your clock should begin at 5:00 and count down.
Test the Time Control
8 - Final Touches
A djust the sizing and placement of your newly completed timer widget to finish the exercise!
Resize the Timer
Congratulations, you have just completed your first simple countdown clock!