Creating Web Graphics with VML - 2

In the previous issue, we looked at creating simple shapes on Web pages using the new VML
technology. This time, we’ll look at creating more complex shapes, making templates, assigning special effects and attributes, and how to use VML in practical applications.

Let’s start with the shape element. The shape element allows you to create arbitrary shapes by supplying a path. The path is specified as an attribute of the element. This attribute itself has a very comprehensive and unfortunately, pretty complicated language set of its own. To make things a bit clearer, let’s take an example. 

Try the following code in a page:




style=”position:absolute; top:10; left:10;width:1000; height:1000; z-index:100"

path=”m 0,100 c 200,0, 350, 200, 500, 100 xe”>



The path attribute consists of a set of alphabetical commands and parameters that define the required shape. The first command–m–stands for moveto and defines the parameters that specify the position of the current pixel. Here, it’s defined as 0,100. The next command–c–represents a Bezier curve with six parameters, the first four being the position of the two control points, and the final pair the end point of the curve. The final two commands–x and e–represent close, which draws a line from the end point to the first point, and end, which ends the current path. For a list of commands, see the corresponding table below.

Now suppose you’ve created a great shape that you want to use repeatedly on your Web pages, with only the size, position, or scale being changed. You wouldn’t want to calculate all the positions, command parameters, and other stuff again and again, would you? In this scenario, you can create a “template” shape using the shapetype element and use it to create shapes as you like. Let’s convert the above shape to a template by changing the shape to a shapetype. Change the code to the following:




path=”m 0,100 c 200,0, 350, 200, 500, 100 xe” coordsize=”1000,1000">




style=”position:absolute; top:10; left:10;width:1000; height:1000; z-index:100"/>


style=”position:absolute; top:0; left:0;width:500; height:500; z-index:100; rotation: 90"/>


style=”position:absolute; top:20; left:20;width:1500; height:1500; z-index:100"/>



Now view the page and see the result. You can change the width, size, position, default colors, and even the angle, while keeping the shape the same. You may have noticed a new attribute called coordsize in the shapetype element. This defines the size of the coordinate space that the template can exist in.

Explaining coordinate spaces is beyond the scope of this article, but you can easily brush up on this by referring to any high-school geometry textbook.

VML has a long list of commands, and the number of parameters for each, make detailing every one of them in this article almost impossible. Instead, I’ll introduce you to some of the commonly-used commands and their parameters (see table). For a more detailed look at the list of commands, go to
www.w3.org. 

So how far can you customize the vector graphics you draw? VML has a rich set of tags that let you apply colors, explanatory text, callouts, special effects, and other aspects to the graphics. For example, if you want to put in some explanatory text in the graphics, you can use the element. Just put this within the basic element (like rect, oval, etc), like this:
Hi there!.

You can create shadows using and callouts using , define gradient, image, and other fill effects using , move text into an irregular path using , set up “grab” handles at particular points with , and more. You can also combine and customize these effects, as you want.

For help in coding VML, you can use any of the Office 2000 applications. These output almost all graphics elements as VML (and sometimes this can be pretty annoying. See my article “Drumbeat 2000 vs Frontpage 2000” in PC Quest October 1999, page 131 for more information). You can also use a small tool from Microsoft called VML Generator available at
http://msn.microsoft.com/standards/vml/VML gen
Setup.EXE .

After this lengthy discussion on VML and its features, you might wonder, “Okay, it’s pretty nice. But I can’t think of how I’d ever use it practically.” Well, there are several applications for this technology. For example, suppose you have to output a dynamically generated line graph to the client. Now, you could use expensive (in terms of resources like memory and bandwidth) methods like drawing it to a server side GIF/JPG file and sending that to the user, or sending a huge Java applet and drawing it there. Or, you could simply write the required VML back to the client and let the browser draw it. 

To help you out with this, this month’s PCQ CD contains a Windows Script Component that’ll let you create dynamic line graphs using VML. All you need to do is install the component on an IIS 4/PWS 4-based Web server using the instructions in the README.TXT. There’s a sample ASP file that uses this component, so you can see how simple it is to create the line chart output. The code is also supplied with it–just open the LCHART.WSC file to see how it works. If you do make changes or add some new features, do remember to send me a mail. And as an exercise, try creating a paintbrush equivalent for the Web using VML and client end scripting.