Release of new version of Windows OS code-named Vista is just around the corner, which supports exciting 2D and 3D graphics rendering technology called WPF/E. Microsoft promises XML based Vector Graphics can be used build “Cinematic User Interfaces” that combines multiple media elements including vectors, pixel images, 3D content, video & audio, high quality text, and animation. Best of all, such graphics intensive applications can be deployed over the web.

Already Vector Graphics (e.g. Adobe’s MXML/Flash and W3C’s SVG) are slowly creeping into the online applications. Couple of friends said they are biding for GIS application, one of which tracks Trains and other tracks Shipments/Trucks on the map. Yet another friend said he might need to build online Game, which contains complex 3D animated Images.

All these applications need to display top quality 2D/3D animated images (i.e. GUI components) in the webpage. Furthermore each of these animated images need to communicate with respective server, so that they can get data to update themselves. For example, the Train collects many pieces of data from internal sensors and sensors along the tracks. It uploads the information to a central server every couple minutes along with its location.

The online GIS application that tracks the Trains, must update respective-image that “virtually represents” each Train. To accomplish that, each image may contain necessary Ajax code to asynchronously communicate with the server and get latest data.

Building such exciting online applications will become very simple, if you understand the following innovative pattern to build 2D/3D vector graphics animated GUI images. The following webpage contains a pattern to build animated Flight-image for Air Traffic Control application. http://www.cbsdf.com/Newbies/Flight-main.htm

This pattern uses SVG to build animated Flight-image. I have written this document for newbies, who has little or no experience in JavaScript and Vector Graphics. If you are Java programmer, you can easily understand very simple JavaScript functions that animate the Image. Also following webpage out lines a pattern, how one may create reusable Java GUI-Class to generate multiple instances of animated Flight-images at server: http://www.cbsdf.com/Newbies/GUI_Class.htm

Although you don’t need SVG experience to understand this pattern, you must download Adobe’s SVG Viewer (from http://www.adobe.com/svg/viewer/install/), if you wish to see prototype test application in action: http://cbsdf.com/misc_docs/gui-api-brief.htm

Although I have used very simple Flight-Image to explain the pattern to newbies, the website contains many complex GUI components to prove that the pattern is highly scalable and easily repeatable to build any complex animated Images.