Project DescriptionHybrid Clock for Microsoft Silverlight 2.0 contains the "best of both worlds": Analog and Digital controls in perfect harmony used for Date/Time visualization. It's written in XAML, C# and JavaScript and could enhance any Silverlight-enabled .NET Web application.
ADDITIONAL ONLINE RESOURCES ON RIA:
- Rich internet applications, part 1: embedding YouTube™ video player into web page
- Rich internet applications, part 2: Silverlight™ media player
- Rich internet applications, part 3: HTML 5 video player
The following demo page adds the button to the Bing Map with functionality to open NASCAR MAP in a full-screen mode. Notice, that in order to put the button control on the top of the map it was placed in "<div>" element with z-index set to 100 (in this particular case, even z-index:1 will do the job; in real-life development project make sure that the object on the top has its z-index properly set).
Overview
Hybrid Clock is, by far, the most sophisticated animated Date/Time visualization control developed for Microsoft Silverlight™ 2.0. Originaly created by Microsoft as analog clock for Silverlight™ 1.0 it was upgraded by Dr. Alexander Bell (the Author) to work with Silverlight 2.0. This revised version (see the working
sample) combines "the best of both worlds", namely: digital and analog UI components. Its original analog design was enhanced by embedding the Date/Time digital scale into clock's face layout. Clock's readings are dynamically updated every 1 sec; time granularity of its digital scale could be reduced to 0.1 sec and further upon necessity. The list of enhancement also includes the animated resizing feature, which properties could be set separately for X or Y axes.
At the core of digital scale is the DateTime.js module, included in this package. It has the value of its own, allowing web developers to add the virtual high-resolution Digital Clock to essentially any type of HTML elements, which supports the innerHTML property (see the working
sample)
Package
Hybrid Clock 2.0 package includes several core components:
1. HybridClock.xaml file located in xaml folder:
2. Script files located in js folder
- Silverlight.js (V 2.0)
- DateTime.js
- HybridClock.js
- HybridClockExt.js
Usage
Hybrid Clock could be addefd to ether .htm or .aspx page in several steps outlined below:
1. Create "xaml" and "js" folders in your web root application directory and copy the core components listed in section "Package"
2. Add the references to .js files to the <head> section of the web page as shown below (note: proper tags should be added):
<script type="text/javascript" src="js/Silverlight.js" ></script>
<script type="text/javascript"; src="js/DateTime.js" ></script>
<script type="text/javascript" src="js/HybridClock.js" ></script>
<script type="text/javascript"src="js/HybridClockExt.js" ></script>
3. Create <div> element on the page and assign it the id="ClockHost".
4. Add function references to onload and onunload event of the opening body tag as show below:
<body onload="CreateSilverlightClock(); StartDigitalClock()" onunload="StopDigitalClock(); StopSilverLightDigitalTimeDate()">
5. Run your page to see the Hybrid Clock working
Customization
In order to customize the animated resizing effect, modify the values of following properties in HybridClock.js file (sample follows):
var scaleXfrom = 0;
var scaleXto =0.7;
var scaleXdur = "00:00:02";
var scaleYfrom = 0;
var scaleYto = 0.7;
var scaleYdur = "00:00:01";
Logo customization (currently showing "Alex Bell" brand name) could be done by modifying the following section in HybridClock.xaml file:
TextBlock x:Name="clockLogo"
FontFamily ="Calibri"
FontWeight="Light"
FontSize="16"
Foreground="Silver"
Opacity="0.5"
Canvas.Top="70"
Canvas.Left="115"
Text="Alex Bell">
Further enhancement
The most obvious Hybrid Clock enhancement could be achieved by adding the gallery of clock face design layout, i.e.. Themes. The project could be also extended by adding the second scale, digital or analog, or both, showing the "World Time", i.e. the time in two different locales. I would assume, that numerous other ehnancements exist and would like to encourage my colleagues to try their own ones. Feel free to drop me a line or two should you have any questions or need for discussion: you can do it right here in comments section, or you can email me at:
AlexBell
References
- Silverlight™ 2.0 community samples: http://silverlight.net/community/gallerydetail.aspx?catsl2
ADDITIONAL ONLINE RESOURCES:
- How to select web browser and check its capabilities
- How to archive and back-up your online content
- Computer mouse triple-click is a convenient feature
- How to use online geocoders and interactive maps
- Search engine optimization and online concordance calculator
| .NET | ASP.NET | Silverlight™ | GUI | Clock | XAML | JavaScript | Analog | Digital | AJAX |