Difference between revisions of "Universal Digital Clock"

From A-SMIL.org
Jump to: navigation, search
(Summary)
Line 3: Line 3:
 
  a. Shows time for Los Angeles, New York, Amsterdam, Tokyo and Taipei.
 
  a. Shows time for Los Angeles, New York, Amsterdam, Tokyo and Taipei.
 
  b. Shows time in HH:MM:SS AM/PM format , Daylight saving time (DST) is correctly reflected
 
  b. Shows time in HH:MM:SS AM/PM format , Daylight saving time (DST) is correctly reflected
  c. Shows date in YY/M/D format  
+
  c. Shows date in YY/M/DD format  
  d. Animation clock background  
+
  d. Animation clock background
 +
 
 
== Compose the clock interface ==
 
== Compose the clock interface ==
 
The digital clock interface is composed by images.
 
The digital clock interface is composed by images.

Revision as of 09:14, 11 February 2011

Summary

This sample implement a universal digital clock with the following features:

a. Shows time for Los Angeles, New York, Amsterdam, Tokyo and Taipei.
b. Shows time in HH:MM:SS AM/PM format , Daylight saving time (DST) is correctly reflected
c. Shows date in YY/M/DD format 
d. Animation clock background

Compose the clock interface

The digital clock interface is composed by images. To display 5 clocks, define region for each clock as below :

<region id="CLK1" left="160" top="60" width="960" height="64" z-index="1"/>
<region id="CLK2" left="160" top="188" width="960" height="64" z-index="1"/>
<region id="CLK3" left="160" top="316" width="960" height="64" z-index="1"/>
<region id="CLK4" left="160" top="444" width="960" height="64" z-index="1"/>
<region id="CLK5" left="160" top="562" width="960" height="64" z-index="1"/>

Display digit in the clock

The digit display position is controlled by image “left” attribute. To display year digit:

<img begin="wallclock(2000-01-01T00:00:00{STD1})" src="0.png" region="CLK1" left="{W*Y10}" dur="indefinite"/>


Define schedule

The wallclock module has been widely adapted to implement the schedule setting for updating the clock. Following script indicate how to update the “day” value. "Display day “01” on 1st day of every month,started from 2001/01/01, 00:00 , Repeat Period is 1 month".

<par begin="wallclock(R/2000-01-01T00:00:00{STD1}/P1M)">
     <img src="0.png" region="CLK1" left="{W*D10}" dur="indefinite"/>
     <img src="1.png" region="CLK1" left="{W*D1}" dur="indefinite"/>
</par>


Deal with Daylight Saving Time (DST)

It is necessary to know the DST time change date first since this is vary with location and year. Please check wiki for definition : http://en.wikipedia.org/wiki/Daylight_saving_time

DST in United States [quote from Wiki] : Starting in 2007, most of the United States and Canada observe DST from the second Sunday in March to the first Sunday in November.

To define the DST timezone offset , Ex. New York City

<!-- time zone offsets -->
      <STD1>-05:00</STD1>
      <DST1>-04:00</DST1>
      <DST1-BEGIN>wallclock(R/2007-03-08+w7T02:00:00-05:00/P1Y)</DST1-BEGIN>
      <!-- DST begins from 2nd Sunday in March -->
      <DST1-END>wallclock(R/2007-11-01+w7T02:00:00-04:00/P1Y)</DST1-END>
      <!-- DST last to 1st Sunday in November -->

Create clock animation

The clock background animation is done by using SMIL animation module. Animation applied to clock background: Fade in and fade out by changing the mediaOpacity attribute. Shrink and Grow by changing the left , top ,width and height attribute.

<!-- time zone offsets -->
        <img src="{CITY1}.png" region="CLK1-BG" dur="10s" mediaAlign="center" mediaOpacity="0.2">
          <animate attributeName="mediaOpacity" values="0;30;45;50;45;30;0" dur="10s" />
          <animate targetElement="CLK1-BG" attributeName="width" values="960;240;960" dur="10s"/>
          <animate targetElement="CLK1-BG" attributeName="height" values="128;32;128" dur="10s"/>
          <animate targetElement="CLK1-BG" attributeName="left" values="160;520;160" dur="10s"/>
          <animate targetElement="CLK1-BG" attributeName="top" values="28;76;28" dur="10s"/>
	</img>



Download Full Sample