Beauty with Silverlight


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.

Comments (17)

  1. Synergist says:

    A few people have asked how I got the second hand to tick in the Silverlight timepiece that I build;

  2. Todd says:

    This is really very nice!! I especially like the night mode. Very nice touch.

    I did find, however, that I had no idea what the icons did until I clicked on them. Having some kind of hover over text might be nice. 🙂 (V2 feature request!)

    Also, it looks like the logo link might have a bug in it — it only works if your mouse cursor is over the text foreground itself (the text background isn’t a link). <IE7, Vista SP1>

  3. Calvin says:

    It’s fantastic! but if users can set the clock or the time zone would be nice:)

  4. Michael Scherotter provides a great SL 1.0 application. From SilverlightCream.com : Beauty with Silverlight

  5. Koen's blog says:

    Michael created this very cool clock in Silverlight. You must see this one ! Nice job !

  6. La verdad es que no tiene mucho mensaje, pero el reloj me ha encantado: V&#237;a Synergist

  7. Bob Meade says:

    Thanks for your great work Michael.  I’ve tried it out in a blog post on typepad, and it works fine.  

    Good choice of the Ball for clarity.  I love the full screen mode and epect to get some good comments about that.

  8. One of my colleagues developed this site – It’s AMAZING! Take a peek… (Click HERE ) &#160; You can

  9. vasudev says:

    Superb !! very nice.

    In the night mode, the one which is shining at hour one seems to be bit larger than all others. Or it has been done that way?

  10. Ian Moulster says:

    Nice work! But I can I second the request for timezone support.

  11. WOW, The Web says:

    希望在你的博客中放入一个全功能的漂亮的手表?你可以通过下面的代码嵌入在你的博客中。 &lt; iframe width =&quot;250&quot; height =&quot;250&quot;

  12. divirta-se: veja que detalhes simpáticos: clique na lua minguante para simular o display fluorescente

  13. Synergist says:

    One of the fun Silverlight 1 applications that I built over the past year was Ball Watch’s Trainmaster