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.

​

Countdown

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.

Behaviour Section

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

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