The Countdown widget is the perfect method to actively show the user a countdown to a special event, sale, etc. This allows you to enter a date & time and it automatically calculates the time it will take to countdown to that specific event. It comes with several customisation options to control the way the Countdown appears.
How to use
The Countdown is available to be dragged from within the Elements pane. It currently rests within the 'Widget' section.
Countdown icon, properties and default output
Within the behaviour section, we have the main properties that need to be set for the countdown to function. Let's go through each of them.
The display type allows you to decide the units of the countdown. The options are:
Select Display Type
DD:HH:MM:SS - Will display based on Days, Hours, Minutes & Seconds
HH:MM:SS - Will display based on Hours, Minutes & Seconds
MM:SS - Will display based on Minutes & Seconds
SS - Will display based on Seconds
The below visual represents the countdown to the same event based on the different display type selected
This is the field where one needs to set the date and time for the actual event. The final output is then the countdown to this event.
Select Date & Time
Select Time Zone:
It is important to select the time zone of the event that the countdown leads to. This is to cater to viewers who are in a different time zone than the actual event. While selection, the time zones are segregated based on continents currently.
Select Time Zone
This is the distance between two tiles. By default this is set to 10px.
The rendered view of the countdown can be customised by tweaking the following parameters within the property pane.
'Tile Border' radius can be used to give the tiles a rounded edge
A very important aspect of the customisation is that the font files can be added to both the Value as well as the Label text.
LED font file applied
Arabic font file applied
The following examples are displayed to show the possible variations that can be achieved by tweaking the available parameters.
No Background & Border
In the above example, the Countdown is placed on an image. From the Countdown properties, there is no Tile background colour set (transparent) and the Tile border is also not set (0px width).
Background set with opacity at 10% & no border
This is a slight variation from image 1. Here the Tile background is set to white at 10% opacity. No Tile border set (0px width).
No Background set. Border colour set and Border radius '0'
In the above examples, the Tile background is not set (transparent). Tile border is set. The thickness of the border can be modified. Also, not border radius is '0'.
Background and Border with radius present
The above example shows how the Countdown would look when the Tile background and border, both are set. One key aspect is that the border radius is also set which determines the curvature of the Tile. In this example the radius set is '10'.
There is no on-canvas preview. So the parameters need to be modified and then checked by previewing the creative.