Difference between revisions of "Universal Digital Clock"

From A-SMIL.org
Jump to: navigation, search
(Summary)
Line 23: Line 23:
 
<img begin="wallclock(2000-01-01T00:00:00{STD1})" src="0.png" region="CLK1" left="{W*Y10}" dur="indefinite"/>
 
<img begin="wallclock(2000-01-01T00:00:00{STD1})" src="0.png" region="CLK1" left="{W*Y10}" dur="indefinite"/>
 
</source>
 
</source>
 
  
 
== Define schedule  ==
 
== Define schedule  ==
Line 35: Line 34:
 
</par>
 
</par>
 
</source>
 
</source>
 
  
 
== Deal with Daylight Saving Time (DST) ==
 
== Deal with Daylight Saving Time (DST) ==
Line 70: Line 68:
 
</img>
 
</img>
 
</source>
 
</source>
 
  
 
----
 
----
  
 
[http://www.a-smil.org/images/3/3f/Universal_Digital_Clock_A-SMIL_20110210.zip Download Full Sample]
 
[http://www.a-smil.org/images/3/3f/Universal_Digital_Clock_A-SMIL_20110210.zip Download Full Sample]

Revision as of 09:17, 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