SVG

Animated Clocks for SVG and Silverlight

Ryan Van Slooten — Wed, 30 Dec 2009 07:17:17 GMT

At one point in time I found a cool clock graphic and I was looking for it again because it gave a fairly detailed explanation on making a nice looking vector based clock (it was the Codeproject article by Marc Clifton). During my search I found numerous implementations of both SVG and Silverlight clocks and I decided to catalog my findings.

The animated clocks are not necessarily practical to display on web pages, but an interesting exercise and fun as well.

SVG Clocks

Adobe SVG Clock

by Adobe (unknown date)

A very basic looking clock that uses three <animateTransform type="rotate"> for the hour, minute, and second hands along with a load script to initialize the hands. Note that Adobe has discontinued their SVG Viewer and there are conflicts between SVG and Flash.

Experiments: SVG Clock

by Shelley Powers on November 30, 2007

This is an improvement on a very simple SVG clock by Jason Davis (the original link was not working). This implementation supports displaying time in a different time zone rather than the user’s current time using the statement: setInterval("setClock(calcTime(-6))", 1000);. The code is licensed with LGPL.

I had to download the file directly as it was not shown in FF 3.5. The author has a rather appropriate statement in the article:

Is the clock worth the extra burden on the client's machine? Yes, and no. As a demonstration of what you can do with SVG and simple animation, I think it's a valuable tool. There is a Catch 22 about SVG: we don't use SVG because browser support is incomplete or inefficient; effort to better incorporate SVG is of secondary importance because SVG is little used. The only way to break this cycle is to actually start using the specification, and pushing a bit at the edges while we go about it.

Binary Clock

by Alexander Jones & Eric Pierce from Wikipedia on October 14, 2006

This is Wikipedia entry that I thought was animated but it turns out it is not animated. Bummer. It wouldn’t be hard to animate though.

SVG + Javascript Analogue Clocks

by Kam-Hung Soh

This example uses Javascript at the DOM document level rather than inside the SVG document to rotate the clock hands. It also uses a regular expression to change the rotation angle.

Animated SVG Clock Gears

by Tavmjong Bah (unknown date)

This is a really cool example created with Inkscape where every gear is independent and does not interfere with other gears. According to the author, the gears outlines were generated with a Python script by Aaron Spike.

Siemens Wall Clock

by Stefan Oskamp (unknown date)

A nice looking clock that uses inline SVG along with a Javascript setInterval function to adjust the rotate attributes for the hour, minute, and second hands. The actual background is a 256 x 256 PNG file, rather than a vector based image.

An SVG Clock

by Damien Dawber (ibuildstuff.net)

This clock is a self generated SVG image using JavaScript and the Raphael JavaScript Vector Library.

SVG Clock Gallery

by G. Wade Johnson

A clock with a sunburst effect that uses an external script to drive the animation. The author also has a version that runs backwards by simply changing a parameter in the initialization script.

24-Hour '12'-at-the-top Analog Clock

by Steve Pomery

A nice looking clock created using Inkscape. Now at version 2.2.

SVG Resurgent

by Chris W. Johnson on April 29, 2008

An inline base64 encoded SVG clock. The SVG has a version of the Google analytics tracking script "because it's nice to know if people care."

Silverlight Clocks

Microsoft Silverlight Clock Samples

by Microsoft

A clock sample from the Silverlight 1.0 SDK which uses clock.xaml and clock.js to create the clock. The result is actually very similar to some of the SVG implementations since Silverlight 1.0 did not have codebehind capability.

Version 2.0 of the clock uses codebehind along with a XAP file. There is also a version using IronRuby although the XAP file is significantly larger (11KB vs 1MB!) because it includes several assemblies in the XAP. Then there is the Python version as well which is almost identical to the Ruby version except for the language substitution.

There is also a Microsoft walk-through: Creating a Silverlight Clock by Using Expression Blend or Code, which has a detailed step by step guide for Expression Blend.

A Vector Graphics Rendered Animated Clock

by Marc Clifton on April 18, 2004

A very nice looking clock complete with a walkthrough on how to create the look and feel of the clock. Technically this isn’t a Silverlight clock as it is intended for the (now defunct) MyXaml and then improved upon by VG.net. The graphics should be mostly compatible with Silverlight though I haven’t tested it yet.

Developing Silverlight Analog Clock – pattern oriented approach

by Pencho Popadiyn on October 30, 2008

Version 1 introduces the MVP design pattern and the design of the clock using the MVP pattern.

Version 2 - This implementation uses VS2008, .NET 3.5, Silverlight 2 using an MVP pattern. The sample has a very nice looking graphic and improves upon the Clock view.

Hybrid Clock in Silverlight 2

by Alex Bell on November 7, 2008 (based on SVN timestamps)

A modest clock using Silverlight although the author claims:

Hybrid Clock is, by far, the most sophisticated animated Date/Time visualization control developed for Microsoft Silverlight™ 2.0.

Beauty with Silverlight: Ball Watch Animation

by Michael S. Scherotter on April 24, 2008

This is a gorgeous clock using Silverlight, Expression Blend, and Expression Design. For some reason this is a Silverlight 1.0 applet instead of 2.0 which means it uses some Javascript event triggering for the loading, but it looks great.

Miscellaneous Silverlight Clocks

I was taking way too much time, so here are other implementations without screen shots.

http://www.c-sharpcorner.com/UploadFile/nipuntomar/SilverlightClock08122008132436PM/SilverlightClock.aspx – A good Silverlight clock.

http://pixelplastic.de/2008/01/12/ZoomableUltraHighResolutionSilverlightClock.aspx – A Silverlight clock that allows the user to drag and move the clock. The applet did not work in IE or FF, so I assume it was developed with a pre-release version and has not been updated on the blog article. You can download the source code though. Marcel Hoyer has an older version of the clock as well as other cool Silverlight examples on his blog.

http://weblogs.asp.net/andrewrea/archive/2009/08/12/programmatic-drawing-with-silverlight-2-0-3-0-an-analogue-clock.aspx – A basic looking clock although the clock is mostly generated by code (tick marks, etc.) which is cool. The blog post has a lengthy code listing and downloadable code.

WPF Clocks

Another Xamlifferous Experience (an All-XAML Clock)

by Charles Petzold on April 7, 2006

This is an all XAML clock without any C# or .NET code. It was based on a Microsoft sample and Charles Petzold improved upon that sample by eliminating the C# code, improved the animation technique, and eliminated the repetition in the XAML. The clock graphic is basic and not fancy, but practical.

SVG Building Map (Part 1)

Ryan Van Slooten — Fri, 07 Dec 2007 05:33:04 GMT

Due to blog restrictions, the sample is located on a separate page.

building.html: SVG sample

BuildingSample01.zip: source (6KB)

Note: In my previous blog entry, I stated that SVG is a technology with diminishing support and that ultimately I plan to convert this building map to SilverLight.

The first example is a very basic building map. I created a simple SVG file to represent a building and then created occupants for the building (as if you could keep these crazy rascals in a building -- look at the names and you should know what I mean).

For simplicity this sample does not dynamically load the occupant information nor does it have multiple floors. Instead the occupants are specified in a static JavaScript file although this is identical to the Adobe sample where the occupants are static. Future enhancements will include these features as well as additional functionality.

Step 1: Define the Building Map

I used Inkscape to create the SVG image, but ultimately ended up changing the SVG/XML by hand to create the simplest case for this example.

Step 2: Define a "Room"

This example will only make use of a "room" although future examples will have the concept of a "resource" (printer, conference room, etc.). In order to handle the JavaScript events (well technically ecmascript events), the script handlers need to be able to identify a room and so I simply used added the class "room" to the SVG element:

    <style type="text/css">
/* snip, snip... */
.room {
    fill:#c0c0ff;
    stroke:#222277;
    stroke-width:1;
}
/* snip, snip... */
    </style>
    <!-- more snip, snip... -->
    <g
        id="room101"
        class="room"
    >
        <rect
            id="rect101"
            class="room"
            width="150"
            height="100"
            x="0"
            y="0"
        />
        <text
            id="text101"
            x="50"
            y="55"
            class="label"
            xml:space="preserve"
        >
            <tspan
                x="50"
                y="55"
                id="tspan101"
            >101</tspan>
        </text>
    </g>

Notice that the room is defined as a group: { rect, text { tspan } }. The JavaScript handler will assume this definition will be consistent for all rooms.

Step 3: Add the Room handler to JavaScript

The JavaScript handler identifies a "room" to avoid processing elements that are "rooms." The line that contains: if (className != "room") will prevent the script from processing non-rooms.

// get room name and ID
///////////////////////
function getRoom(target)
{
    var svgElem = getNodeOrParent(target, "g");
    if (svgElem)
    {
        var thisRm = svgElem;
        var thisType = thisRm.tagName;
        var id = thisRm.getAttribute('id');
        var className = thisRm.getAttribute('class');
        if (className != "room")
            return;

        var num;
        var rect = getChildElem(svgElem, "rect");
        var text = getChildElem(svgElem, "tspan");
        if (text)
            num = text.firstChild.data;

        return { 'num':num, 'id':id, 'rect':rect, 'group':svgElem };
    }
}

Step 4: Handle the mouse events

The base group specifies the event handlers for the entire SVG.

    <g
        id="room-layer"
        onclick="selector(evt);"
        onmouseover="onImg(evt);"
        onmouseout="offImg(evt);"
    >

The local SVG functions are just references to JavaScript functions in the hosted page:

<script type="text/ecmascript"><![CDATA[
function onImg(evt)
{
    if (top && top.onImg)
        top.onImg(evt);
}

function offImg(evt)
{
    if (top && top.offImg)
        top.offImg(evt);
}

function selector(evt)
{
    if (top && top.selector)
        top.selector(evt);
}
]]></script>

Step 5: Handle the onmouseover event

The mouseover event displays the occupant information. If the user has clicked on a room and selected that room, the mouseover event will not update the display information.

// room mouseovers
function onImg(mouseEvt)
{
    // No highlighting when an item is selected
    if (selection && selection.room)
        return;

    // get the room name and ID
    var target = mouseTarget(mouseEvt);
    var room = getRoom(target);
    
    if (room &&
        highlighted && 
        highlighted.room &&
        highlighted.room.id == room.id)
    {
        // Same item as before highlighted
        return;
    }
    
    // save the style object for the rolloff
    var oldStyle = updateStyle(room, rollStyles.rollOver);
    // show the occupant info
    displayRoom(room);
    highlighted = { room: room, oldStyle: oldStyle } ;
}

Step 6: Handle the onmouseout event

When the user moves the mouse off of a room, the display will clear the occupant information. If a user is selected, the display will keep the selected occupant.

function offImg(mouseEvt)
{
    if (highlighted)
    {
        resetStyle(highlighted);
        highlighted = null;
    }
}

Step 7: Handle the room selection (onclick event)

When the user clicks on a room, the page will select that room and stop the automatic display of other information during mouseover and mouseout events.

function selector(mouseEvt) {
    // Turn off any highlighting
    offImg(mouseEvt);

    // get the room name and ID
    var target = mouseTarget(mouseEvt);
    var room = getRoom(target);

    if (room &&
        selection && 
        selection.room &&
        room.id == selection.room.id)
    {
        // Deselect the item
        resetStyle(selection);
        selection = null;
        return;
    }

    resetStyle(selection);
    // save the style object for the rolloff
    var oldStyle = updateStyle(room, rollStyles.selected);

    // show the occupant info
    displayRoom(room);
    selection = { room: room, oldStyle: oldStyle } ;
}

Step 8: Handle the style changes to the SVG elements

A lot of the challenge to get this sample to work in FireFox was with the setProperty function. When I added the last "null" parameter, it started working.

var rollStyles = {
    rollOver: {
        fill            : 'cyan'
       ,"stroke-width"  : '3' }
   ,selected: {
        fill            : 'blue'
       ,"stroke-width"  : '3' }
};
/* snip, snip... */
function updateStyle(elem, styleType) {
    var svgElem = elem ? elem.rect: null;
    if (svgElem && styleType)
    {
        var svgStyle = svgElem.style;
        var oldStyle = { };
        for (var name in styleType) {
            oldStyle[name] = svgStyle.getPropertyValue(name);
            try {
            svgStyle.setProperty(name, styleType[name], null);
            } catch (e) {
                window.alert('Error ' + e.number + ": " + e.message);
            }
        }
        elem["oldStyle"] = oldStyle;
        return oldStyle;
    }
}

function resetStyle(elem) 
{
    var svgElem = (elem && elem.room) ? elem.room.rect : null;
    var oldStyle = elem ? elem.oldStyle : null;
    if (svgElem && oldStyle)
    {
        var svgStyle = svgElem.style;
        for (var name in oldStyle) 
        {
            if ( !oldStyle[name] )
                svgStyle.removeProperty(name);
            else
                svgStyle.setProperty(name, oldStyle[name], null);
        }
    }
}

Step 9: Display the occupant information

When the onmouseover event fires on a room, the page displays the occupant information:

// display room info
function displayRoom(room)
{
    var found = false;
    if (room && room.num)
    {
        var id = "Rm_" + room.num;
        if (g_rmData && g_rmData[id]) 
        {
            var person1 = g_rmData[id];
            document.getElementById("tdRoom").innerHTML = person1.room;
            document.getElementById("tdName").innerHTML = person1.name;
            document.getElementById("tdPhone").innerHTML = person1.phone;
            document.getElementById("tdEmail").innerHTML = "<a href='mailto:" + person1.email + "'>" + person1.email + "</a>";
            found = true;
        }
    }
    if (!found) 
    {
            document.getElementById("tdRoom").innerHTML = "&nbsp;";
            document.getElementById("tdName").innerHTML = "&nbsp;";
            document.getElementById("tdPhone").innerHTML = "&nbsp;";
            document.getElementById("tdEmail").innerHTML = "&nbsp;";
    }
}

Step 10: Define the occupant information

For this sample, the data is defined in a static javascript file.

var g_rmRawData = [
 { room : '100', name : 'Bugs Bunny', phone : '1-800-555-0100', email : 'bugs.bunny@looneytunes.null' }
,{ room : '101', name : 'Marvin the Martian', phone : '1-800-555-0101', email : 'marvin.the.martian@looneytunes.null' }
,{ room : '102', name : 'Tweety', phone : '1-800-555-0102', email : 'tweety@looneytunes.null' }
,{ room : '103', name : 'Taz', phone : '1-800-555-0103', email : 'taz@looneytunes.null' }
,{ room : '104', name : 'Daffy Duck', phone : '1-800-555-0104', email : 'daffy.duck@looneytunes.null' }
,{ room : '105', name : 'Foghorn Leghorn', phone : '1-800-555-0105', email : 'foghorn.leghorn@looneytunes.null' }
,{ room : '106', name : 'Miss Prissy', phone : '1-800-555-0106', email : 'miss.prissy@looneytunes.null' }
,{ room : '107', name : 'Chickenhawk', phone : '1-800-555-0107', email : 'chickenhawk@looneytunes.null' }
,{ room : '108', name : 'Dawg', phone : '1-800-555-0108', email : 'dawg@looneytunes.null' }
,{ room : '109', name : 'Wile E Coyote', phone : '1-800-555-0109', email : 'wile.e.coyote@looneytunes.null' }
,{ room : '110', name : 'Road Runner', phone : '1-800-555-0110', email : 'road.runner@looneytunes.null' }
,{ room : '111', name : 'Speedy Gonzalez', phone : '1-800-555-0111', email : 'speedy.gonzalez@looneytunes.null' }
,{ room : '112', name : 'Pepe Le Pew', phone : '1-800-555-0112', email : 'pepe.le.pew@looneytunes.null' }
,{ room : '113', name : 'Penelope', phone : '1-800-555-0113', email : 'penelope@looneytunes.null' }
,{ room : '114', name : 'Porky Pig', phone : '1-800-555-0114', email : 'porky.pig@looneytunes.null' }
,{ room : '115', name : 'Elmer Fudd', phone : '1-800-555-0115', email : 'elmer.fudd@looneytunes.null' }
];

var g_rmData = [];

function loadRoomData()
{
    for (var i = 0; i < g_rmRawData.length; ++i)
        g_rmData['Rm_' + g_rmRawData[i].room] = g_rmRawData[i];
}

loadRoomData();

For those who are interested, I copied the names of the characters from the Looney Tunes site and ran this Python script:

def makeemail(s):
    return s.lower().replace(' ','.') + '@looneytunes.null'
    
def makedict(name, num):
    return { 'name':name, 'room':str(num), 'email':makeemail(name) }
    
def makedata(names, num, f):
    for name in names:
        print f % makedict(name, num)
        num = num + 1

n = ["Bugs Bunny",
    "Marvin the Martian",
    "Tweety",
    "Taz",
    "Daffy Duck",
    "Foghorn Leghorn",
    "Miss Prissy",
    "Chickenhawk",
    "Dawg",
    "Wile E Coyote",
    "Road Runner",
    "Speedy Gonzalez",
    "Pepe Le Pew",
    "Penelope",
    "Porky Pig",
    "Elmer Fudd",
]

s = "{ room : '%(room)s', name : '%(name)s', phone : '1-800-555-0%(room)s', email : '%(email)s' }"

makedata(n, 100, s)

Conclusion

This sample demonstrates the simplest case with static data and a very simple building map with a small number of occupants. Part of the challenge I had when I first analyzed the Adobe Visual Building Search sample was the complexity and questionable coding. Hopefully this sample is much simpler.

Part of the challenge in developing for the web is the differences in the browsers -- occasionally it is because one browser will let you get away with something you shouldn't be able to do. That was the case with this example -- I spent a little extra time making it work with FireFox. The eventing model and JavaScript was a little less forgiving in FireFox than IE.

Technorati tags: svg, javascript

SVG Building Map (Part 0)

Ryan Van Slooten — Wed, 05 Dec 2007 05:15:45 GMT

I have been interested in SVG since its inception but it has lost all momentum and support and even Adobe has announced the discontinuation of the Adobe SVG Viewer. SVG is still used with Google maps with FireFox and possibly mobile phone, but as far as I can tell there is not significant industry backing and it appears there will never be.

Microsoft is offering SilverLight and it seems to be very promising. I have several ideas for future tools using SilverLight but I thought it would be useful to first try them in SVG so I can take the experience from that implementation first.

One of the first examples of the possibilities of SVG that I saw was an article written by Nigel McFarlane which showed several accounts (represented rectangles) that could be graphically linked to payment methods (credit card, EFT card, etc.). There were also numerous examples from Adobe although it seems they have reduced the number of samples which coincides with their curtailed support.

The most interesting sample that I saw was the Visual Building Search. The sample showed the east and west towers of the Adobe headquarters and allowed the user to select the tower and floor. It then showed a diagram of the floor plan with offices and conference rooms. When you hovered over or selected an office, it displayed the name and contact information for the occupant. The sample was a very nice proof of concept although it was not designed to be externally adapted. For example, the sample uses framesets extensively, stores personnel and room information in static html files, and the JavaScript used many global variables and needed refactoring (note to programmer: semi-colons should not be treated as optional in JavaScript).

I decided to move the display results into HTML rather than displaying it in the SVG as it will allow for more possibilities as the sample progresses.

Initial problems along the way:

Inkscape saved the SVG namespace with the svg: prefix, however when I copied the script and style nodes I forgot to add the namespace. So the style and script elements were not recognized in Mozilla, but IE+Adobe SVG Viewer did not seem to mind.
When I saved the SVG document in Inkscape as "Plain SVG," it removed all of my class attributes, but that may have been due to operator error and the manual class definition I added being incorrect. (I rewrote the styles after this and it works now.)
There is a difference for the style.setProperty() in IE and Mozilla. I had to add a third parameter with a value of null to use style.setProperty(name, value, null);

Goals:

Display a building map showing room numbers, conference rooms, and other information. Show the occupant information when a room is highlighted or selected. Start with a simple case and expand to a more complex case. It must support FireFox and IE.
Support dynamic generation of building information such as conference room and occupant information.
Add extensions to display LDAP or Active Directory information about occupants and conference rooms.
Eventually add support for displaying information about other resources, especially printers. (The printer location information is not very descriptive at my company.)

In my next post I will show the simple case from Goal #1.

Technorati tags: svg