Vector Graphics Analog Clock in Morfik
January 22, 2007
I have just finished a new sample Morfik application that contains a lot of interesting stuff including custom controls, browser independent vector graphics, and more. I plan to write a detailed entry about the internal workings in the coming days.
Until then the very short summary:
- it was surprisingly easy to create the custom control (the clock itself): it took a few hours without knowing anything about the new Adapter architecture in Morfik;
- there is no single standard for vector graphics on all browsers, or there is (SVG), but Internet Explorer does not support it (instead it does VML) — so I created a rendering engine that sits above these and provides a browser independent way of doing vector graphics (it should work in recent versions of IE, Firefox, Netscape, Safari, Opera, and other Gecko 1.8+ based browsers).
You can take a look at the application here and download the source code in the Morfik Labs.
To Be Continued…

You know there are a couple of indirect options for
stelt | January 22, 2007You know there are a couple of indirect options for doing SVG in Internet Explorer? The Adobe SVG Viewer is the most wildly used at the moment. See more at http://svg.startpagina.nl
Stelt: thanks for the information! your SVG site is very
piprog | January 22, 2007Stelt: thanks for the information! your SVG site is very informative!
I know about the plugins for IE, but the primary goal is to not have any plugins in the first place so that’s why I consider supporting the native format of the browser important. BTW the Adobe plugin is discontinued (no further support is provided).
[...] I just installed my first 3rd party component in
First 3rd Party Component Install In The WebOS AppsBuilder: Done! at The Morfik Watch | January 22, 2007[...] I just installed my first 3rd party component in WebOS Apps Builder: TAnalogClock. It is build by Peter Illés. I first wrote about him here, when he gave me a hack (then it was a hack), on how to use external JavaScript in Morfik. It is a “browser independent vector graphics”. The cool thing is that when you install the component, following a simple guide in the readme.txt, there is a new icon in the component palette between Google, Zapatec, Dojo and the others. [...]
The Clock 'Custom Control' is very impressive - thank you. I
John Parker | February 12, 2007The Clock ‘Custom Control’ is very impressive – thank you.
I can certainly see the advantage of not having any plugin for IE,
and as an SVG fan I wonder if it might be possible to build a custom control to display SVG content? But I suspect this would still require the Adobe plugin?
BTW SVG is supported (with varying degrees of succes) in Netscape, Opera & FireFox. The latest news on the IE plugin (quote from SVG.org):
‘Adobe have agreed to extend the distribution of their SVG Viewer indefinitely, even though there will not be any new version developed.’
John: what I am doing in the Clock custom control
piprog | February 12, 2007John: what I am doing in the Clock custom control is abstraction: I have an abstract rendering engine to which the clock is drawn.
There are two implementations of that abstract engine: one for SVG, and the other for VML (supported only by IE), and the custom control uses the one that is available on the given platform (browser). And we do not need any plugins.
So in the end there is a common API that will work on all important browsers (IE, FFox, Opera, Safari) without the programmer having to worry about the details.
There are efforts out there to implement SVG over VML for IE but that is difficult, and too complex for most of the cases. Another approach is using Canvas, but that is a pixel-oriented format (while both SVG and VML are vector oriented formats).