Timer.png

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:

Note

You can design any base for your digital countdown clock

Create a shape where your clock will live

 

1 - Add Timer Widget

Add a Timer Widget to the Composition from the Widget Library.

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

Note

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!

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.