Counter widgets

This page is about the counter widgets included in Elementi 2015 and later.

Description

The counter widgets can be used to display different counter animations measuring the elapsed time from a date / time or remaining time to a date / time. The counter is refreshed every second.

Widgets

Counter widgets

Elementi software comes with four counter widgets accessible from the "Widgets" tab within the Browse panel of the Elementi GUI.

• CountDown

  Counter starting at the initial time (e.g., 15 minutes) and counting down to 0.

• CountUp

  Counter starting at 0 and counting up to the end time (e.g., 15 minutes).

• CountTo

  Counter displaying the time left between the current moment and the expiration date & time.

• CountFrom

  Counter displaying the time past from the origin date & time up to the current moment.

Configuration

• Initial time / End time

  The starting or ending time duration, expressed using one of the following formats:

  • a number followed by the time unit: ms for milliseconds, s for seconds, min for minutes or h for hours (e.g., 1500ms, 30s, 1min, 2h). If the time unit is missing, it is assumed to be seconds.
  • m:ss, mm:ss, mmm:ss etc. (e.g., 1:30, 10:45, 120:05)
  • h:mm:ss, hh:mm:ss, hhh:mm:ss etc. (e.g., 1:30:45, 20:10:45, 240:00:00)

• Origin date & time / Expiration date & time

  The starting or ending date-time expressed as a date in a format recognized by the parse method (e.g. "20 Oct 2010 14:20:00", "1 Apr 2100 23:59:59", "25 Dec 2015", "2011-10-30", "2016-10-10T14:48:00" etc.).

• Count unit

  The highest time unit used within the "Text template", from seconds to years.

• Text template

  The format used to display the remaining time using the following placeholder characters: "s", "m", "h", "D", "M", "Y". These characters are automatically replaced by the actual values for seconds, minutes ... years, according to the count unit, except for the case when they are between apostrophes (').
  Examples of formats: "h:mm:ss", "Y-M-D", 'D hh:mm:ss', "Y 'years' M 'months' and D 'days' hh:mm:ss".

Examples

New Year's countdown

Let's say that we want to customize the CountTo widget to display the remaining time until the New Year's Day, like in the image on the right. For that, follow these steps:

1. Set the expiration date & time property to "31 Dec 2023 23:59:59".
2. Set the count unit property to "Days".
3. Set the text template to "DD hh mm ss".

Note:

For more details and a sample project, see "New Year's Countdown" project page.

FIFA World Cup countdown

Let's say that we want to customize the CountTo widget to display the remaining time until the FIFA World Cup start, like in the image on the right. For that, follow these steps:

1. Set the expiration date & time property to the time of the first match ("14 Jun 2018 18:00:00").
2. Make sure to adjust the hour according to your time zone.
3. Set the count unit property to "Days".
4. Set the text template to "DD hh mm".