Counter widgets

From SpinetiX Support Wiki

Jump to: navigation, search

This page is related to Elementi 2015 Library, Elementi 2016 Widgets and Elementi 2017 Widgets.

Description

Icon counter widgets.png

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.

Widgets

Counter widgets

Under the "Counters" folder of Elementi 2015 Library, you can find four ready-to-use widgets:

  • CountDown
    Counter starting at the initial time and counting down to 0.
  • CountFrom
    Counter displaying the time pasted from the origin date & time up to the current moment.
  • CountTo
    Counter displaying the time left between the current moment and the expiration date & time.
  • CountUp
    Counter starting at 0 and counting up to the end time.

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

Icon counter widgets.png

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 2015 23:59:59".
  2. Set the count unit property to "Days".
  3. Set the text template to "DD hh mm ss".


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

FIFA World Cup countdown

Fifa World Cup countdown.png

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".
This page was last modified on 9 May 2018, at 16:01.