VML Clock

Internet Explorer 5.0 introduces a big missing part in all previous browser and that is Vector Graphics. Vector graphics are graphics based on mathematical formulas instead of pixels. I'll give you an example (the syntax is given in VML):

<v:oval style="width: 100px; height: 100px"/>

With pixel based images I need to open up an image editor and draw the circle which is then saved in a matrix where each cell represent a pixel. If the circle should be the same size as the given example you would need a matrix with 100x100 cells. If I wanted to create a circle with the dimensions 10000x10000 the pixel based image size would become 10000 times larger while the vector based image would be the same size (4 zeros more in the style declaration)

Let's say that I found out that the circle was way too small. In vector graphics I could just change the size but with the pixel based image I would need to open up me image editor and when I resize the image it looks awful due to the fact that the image editor doesn't know more info than is provided by the pixels.

Using VML

VML is used with binary behaviors. The most common way is to set a prefix for all VML tags and through a style sheet assign the binary behavior to these tags. Below is my standard VML include template:

<!-- VML include --><xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/><object id="VMLRender" codebase="vgx.dll" classid="CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E"></object><style><!--v/:* { behavior: url(#VMLRender); }--></style><!-- end VML include -->

VML references can be found at http://www.w3.org/TR/NOTE-VML (although VML will never be a standard, see SVG).

Scripting VML

VML stands for Vector Markup Language and it is an XML application. Due to this fact it can be scripted as easily as ordinary HTML (even easier because XML is more restricted). Below is an analog clock. The pointers are rotated be setting the special VML style rotation but could also be done by updating the to attribute in the line tag. There are some hacks using group tags to make the lines rotate around the right axis.

 

View the VML code

<v:group id="clock" coordsize="100 100" style="width: 200px; height: 200px; position: relative; filter: alpha(opacity=90);"><v:oval style="width: 100%; height: 100%"><v:stroke weight="10px" color="#eeeeee"/><!-- I removed this gradient fill to match the WebFX color theme<v:fill type="gradient" color="white" color2="#eeeeff" angle="225deg"/> --></v:oval><v:group id="secondsPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"><v:line from="50,50" to="50,5"><v:stroke weight="2px" endcap="round" color="navy"/></v:line></v:group><v:group id="minutesPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"><v:line from="50,50" to="50,8"><v:stroke weight="4px" endcap="round" color="navy"/></v:line></v:group><v:group id="hoursPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"><v:line from="50,50" to="50,18"><v:stroke weight="7px" endcap="round" color="navy"/></v:line></v:group></v:group>

View the Javascript code

function updatePointers() {var now = new Date();secondsPointer.style.rotation = now.getSeconds() * 6;minutesPointer.style.rotation = now.getMinutes() * 6 + now.getSeconds() / 10;hoursPointer.style.rotation = now.getHours() * 30  + now.getMinutes() / 2;}window.attachEvent("onload", initVMLClock);function initVMLClock() {updatePointers();window.setInterval("updatePointers()", 1000);}

Reusing VML

There are a lot of ways to reuse your VML images. One is to set the src attribute for the xml tag. Another way is to insert it through a scriptlet. When you need to do scripting this is much better because you can remove all the scripting from the current page. Below is the same clock created through a scriptlet. This scriptlet sets the size of the clock in relative to the window size. Try launching the scriptlet file in a separate window and resize it.

This was include by the following line:

<object type="text/x-scriptlet" data="clockScriptlet.html"style="width: 200px; height: 200px;"></object>