I created something cool that I'd like to share with you.  Imagine if your company had a beautiful luxury product that had intricate workings and you wanted to show how it worked as well as have a way for the product's owners and fans to show it off as well - on the web.  I saw such an item advertised in an issue of Wired magazine earlier this year, a watch from the Ball Watch Company.  That's always been one of the promises of the web - to let consumers virtually feel and touch products before they buy them.  So that got me thinking - could Silverlight be used to do this?

Beautiful Design

Most definitely!  I did some digging and got in touch with one of the people at Ball Watch and explained what I wanted to try - all I would need from him was a high-resolution image to use as a guide.  He sent it (4 MB) along with an Adobe Illustrator file which had the company logo.  I used Expression Design to convert the logo to XAML then set out to recreate the timepiece in Silverlight, to be exact the Trainmaster Cannonball watch, a three-dial watch with date and a chronograph.  After about 8 hours of work in Expression Blend and a little JavaScript (It uses Silverlight 1), here's what I came up with: http://xmldocs.net/ball

image

If you want to put in on your Windows Live Spaces, Windows Live Events, or http://my.live.com, go here, because I made it into a Windows Live Gadget using the simple iframe methods (make any web page into a gadget).  In fact, you could embed this on any page - and I welcome you to do so with this simple html code:

<iframe width="250" height="250" src="http://xmldocs.net/ball" frameborder="0"  scrolling="no" >
</iframe>

The Silverlight 1.0 application that you see here starts up quickly (231k of XAML compressed into a 59k zip file) and takes very little processor power to run.  This entire application shown in the vector graphics format of Silverlight, XAML, with no images.  In creating this, I became very adept at path editing and gradients in Expression Blend.

Beautiful Code

Now for the techies that are reading this, this is where it gets even more beautiful.  It turns out that the animation system is Silverlight is perfectly suited for creating periodic animations, like those that go in a watch.  To understand what I mean, the second, minute, and hour hands are all animated as part of a single storyboard.  Each double animation in the storyboard rotates the respective hand (hour, minute, second) 360 degrees over a different period (12 hours, 60 minutes, or 1 minute) and repeats forever.

<Storyboard x:Name="Run" RepeatBehavior="Forever">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
        Storyboard.TargetName="SecondHand" x:Name="SecondAnimation" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" RepeatBehavior="Forever">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:01:00" Value="360"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
        Storyboard.TargetName="MinuteHand" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" RepeatBehavior="Forever">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="01:00:00" Value="360"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
        Storyboard.TargetName="HourHand" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" RepeatBehavior="Forever">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="12:00:00" Value="360"/>
   </DoubleAnimationUsingKeyFrames>
</Storyboard>

The beautiful part of this is how I get the watch to start telling the right time; I begin the animation (Run) and seek it to the current time.  It then starts running forever (as the Storyboard's  and each animations' RepeatBehavior specifies), no looping code, no timers, no threading, just declarative Xaml:

BallWatch.Page.prototype.Run = function()
{
    var run = this.content.Root.findName("Run");
    
    var time = new Date();
    var timeString = time.toTimeString();
    var index = timeString.search(" ");
    timeString = timeString.substr(0, index);
    run.Begin();
    run.Seek(timeString);
}

If you put this on your site, please tell me or if you create a watch of your own in Silverlight, I'd love to see it.  I could imaging taking this to a Silverlight 2 Control and defining the entire look and feel as a style.  With that, you could easily embed the watch in any Silverlight 2 application as well.