Tuesday, 18. April 2006, 02:09:46
One of the rites of passage, I suppose, for people developing code, is to make a clock. When you're doing SVG, it should look cool, or do something funky. Well, I am not much of a designer. So I am not convinced that I can really claim my clock looks cool. I started playing with it to put it in a widget (I'll post the simple version after a little tweak, and the final version as a widget later when I am happy with it).
Of course, you need an SVG-capable browser that handles simple javascript and a reasonable level of animation to see the full clock. As I write, that rules out Firefox, means that you need a build of Opera Merlin (technical preview 2 or one of the more recent weekly builds), or it should work in any browser with the old Adobe SVG viewer.
The cool thing is that the basic code is simple. There is one javascript (mostly, admittedly, because I am bad at writing javascript), and the rest is done with declarative animation. It has a few nifty features - clicking on the background changes it (this is one short line per skin, although with a couple of lines I could do a funky flip effect), and you can adjust it with the winder button (like a real clock). Because SMIL Animation 1.0 has no pause/resume function, adjusting it multiple times might feel a bit wierd unless you reset it. And it needs some work still - no metadata or description yet 
I made it mostly as a learning exercise for an article that should be ready in a couple of weeks, about SVG animation, but if you can't wait, check out the source code. With some comments, an attempt to keep it reasonably clean, an embedded PNG and no compression the thing is all of 8k. If I wanted to reduce the codesize it would be easy enough to halve that.
And if this all seems too technical and dull, but you still got this far, here are some more screenshots...
Funny thing is, the winder was easy to code, but I spent a long time spec-reading to understand why it behaves funny if you go forward or backward more than once each without resetting. (Because there is no pause - you have to change the old adjustment for a new one if you use it again). Until then, I racked my brains over the reset button and javascript wierdness. But once I understood what was happening, the reset button literally took me less than 15 seconds to code and test. The hard part turned out to be putting the red rectangle in the right place - 3 seconds of thinking time required...
The hardest coding bit of the lot was getting the little dots for minutes and seconds. The price of two short lines of elegant code was half an hour with a calculator. Still, now I know how to do it right the first time, and can repeat it in about 5 minutes. And two lines of code is a cheap way of making it happen.
Hope you enjoy it. There are, of course, other SVG clocks out there. If I had seen Doug Schepers' efforts earlier I might not have been motivated to learn quite as much as I did. So I am glad I started with my head in the sand for this exercise.
)
