Have you ever wanted a countdown timer for your website, or wondered how long it is until 1st Jan 2012 (local time)? If so, then this component could be for you!  This new CountdownTimer component allows you to specify a countdown date (Year, Month, Day, Hour and minute) in either local time or GMT time. The display then shows the remaining days (max days is 999), hours, minutes and seconds. At the end of the countdown period it will display “End” in the seven segment display.

The countdown component is based on the SevenSegmentCluster component. This new component allows a multiple digit display to be created. The Number of digits is chosen by the user via the Parameters Panel and can range from 1 to 16.

The SevenSegmentCluster component is based on the SevenSegment Data display component that is supplied with SWiSH Max3. However, the SevenSegment component has been modified in the following ways:
1. Added the Colon segments and corresponding Method SetColon(value)
2. Modified the DisplayDigit(n,p) method so that ” ” and “-” are also recognized as valid display values. This allows a digit to be blanked (” “) or set to “-” (only the middle horizontal segment is lit).

The components will be shipped with future releases of SWiSH Max3, but are also available in this .zip file. Copy the contents to your Components\Data display folder. The components require Max3 build 20090904 or later.

Configuration

To configure the CountdownTimer, simply enter the target date and time in the Parameters Panel.

If the parameters panel is not visible, use Menu | Window to display it.

The hours field is 24 hour format so enter a number 0 to 23 (0 = midnight, 23 =11pm). The Parameters Panel also allows the color of the digits and the other text to be altered.

If the GMT checkbox is checked, then the alarm time will be relative to GMT time. This allows users in different locations to see the same countdown indication (assuming their clocks are set correctly and their computer has the local time offset correctly configured).

Technical Description

For those interested, here is a brief description of how it works…

Time Calculations

The target countdown time is inserted into a date object using the setUTC methods in the onSelfEvent (load) script. This sets the target date according to GMT based on the parameters in the parameters panel. The getTime() method is then used to obtain the number of milliseconds since midnight January 1, 1970. This is saved the variable t1, which is used for all future offset calculations.

onSelfEvent (load) {
 d = new Date();

 d.setUTCFullYear(parameters.Year, parameters.Month, parameters.Day);
 d.setUTCHours(parameters.Hour);
 d.setUTCMinutes(parameters.Minute);
 d.setUTCSeconds(0);
 d.setUTCMilliseconds(0);

 t1 = d.getTime();

The SetCounter(t) function calculates the difference between the target time and the current time and then displays the result in the SevenSegmentCluster component.

If local time is being used then the users time zone offset is added to the calculations.

The time difference is then converted from milliseconds to seconds for display in the SevenSegmentCluster.

The time difference is broken into days, hours, minutes and seconds using division and remainder calculations. dd is the variable containing the time difference in seconds.

// convert number of seconds into days, hours, minutes and seconds
 dday = Math.floor(dd / (24*3600));    // get number of days.
 dd -= dday * 24*3600; // calculate remainder
 dhour = Math.floor(dd / 3600);    // get number of hours
 dd -= dhour * 3600; // calculate remainder
 dmin = Math.floor(dd / 60);    // number of minutes
 dd -= dmin *60; // calculate remainder
 dd = Math.round(dd);    // number of seconds

// write out number of seconds
 SevenSegmentCluster.Digit_0.DisplayDigit(dd%10, false);
 SevenSegmentCluster.Digit_1.DisplayDigit(Math.floor(dd/10), false);

 // write out number of minutes
 SevenSegmentCluster.Digit_2.DisplayDigit(dmin%10, false);
 SevenSegmentCluster.Digit_3.DisplayDigit(Math.floor(dmin/10), false);

 // write out number of hours
 SevenSegmentCluster.Digit_4.DisplayDigit(dhour%10, false);
 SevenSegmentCluster.Digit_5.DisplayDigit(Math.floor(dhour/10), false);

 // write out number of days
 SevenSegmentCluster.Digit_7.DisplayDigit(dday%10, false);
 dday = Math.floor(dday/10);
 SevenSegmentCluster.Digit_8.DisplayDigit(dday%10, false);
 dday = Math.floor(dday/10);
 SevenSegmentCluster.Digit_9.DisplayDigit(dday%10, false);

The configuration and use of each of the Digits within the SevenSegmentCluster is shown in the table below:

Timer Routine

The onSelfEvent (load) script also defines an interval function and then sets up an interval timer to call the function on a regular basis (1/4 second, 250mS). A smaller interval could be used to increase accuracy but this would also increase CPU load.

 function UpdateDisplay() {
  SetCounter(t1);
 }
 var intervalID = setInterval(UpdateDisplay, 250);

End Processing

When the SetCounter(t) function calculates a negative time interval, the countdown has expired. When this happens, all digits are blanked, the colons on digits 2 and 4 are turned off, and digits 4, 5 and 6 are set to display the word “End” by setting specific segments. The interval timer is also stopped to reduce CPU load.

if (dd < 0) {
 // time has expired, display "End"
 // turn off all digits
 SevenSegmentCluster.Digit_0.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_1.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_2.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_3.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_4.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_5.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_6.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_7.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_8.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_9.DisplayDigit(" ", false);

 // turn off both colons
 SevenSegmentCluster.Digit_2.SetColon(false);
 SevenSegmentCluster.Digit_4.SetColon(false);

 // display End
 SevenSegmentCluster.Digit_4.SetSegments(false,true,true,false,true,true,true);
 SevenSegmentCluster.Digit_5.SetSegments(false,true,false,false,false,true,true);
 SevenSegmentCluster.Digit_6.SetSegments(true,true,true,true,false,true,false);
 clearInterval(intervalID);
 return;
 }

The SetSegments(a,b,c,d,e,f,g) method allows each individual segment, a to g to be set individually. The segment codes are shown in the diagram to the left.

Unfortunately, the segment codes that are used by the SevenSegment component are not industry standard. We apologize for this error, but cannot correct it as correction would make the revised component incompatible with users that may have deployed the previous version.

The correspondence between the industry standard designation (A to G) and the Max3 designation (a to g) is as follows:

A=a, B=e, C=g, D=c, E=f, F=d, G=b.

Tags: alarm, countdown, segment, seven, timer

This entry was posted on Monday, October 19th, 2009 at 11:17 am and is filed under Max3, components, tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.