This post originated from an RSS feed registered with .NET Buzz by Frank Hileman. Original Post: An Analog Vector Graphics Clock Using MyXaml and VG.net Feed Title: Frank Hileman's Blog Feed URL: http://weblogs.asp.net/frank_hileman/rss?containerid=13 Feed Description: Vector Graphics with VG.net, MyXaml, and Visual Studio Integration Latest .NET Buzz Posts Latest .NET Buzz Posts by Frank Hileman Latest Posts From Frank Hileman's Blog

The latest VG.net beta release includes a MyXaml serializer, allowing you to save VG.net Pictures as xml files. Marc Clifton has written an article on CodeProject describing how we created an analog clock using the VG.net designer and a few lines of code for animation.

Download the MyXaml clock sample.

We first created the clock was as a standard VG.net application. We set the new MyXamlExport property to true in the designer, causing the designer to save a copy of the Clock Picture as a .myxaml file every time you click “Save.” Then we copied the animation code to the .myxaml file, to make it self-contained. You can also put dynamically compiled animation code in a separate code-behind file.

Here is another Picture included in the MyXaml sample (not animated yet):

At some point, we will make an animated robot arm.

Here is a small "LED bar" created in the VG.net designer:

Here is the MyXaml output for the image above. It is straightforward and easy to read. Each Ellipse has a separate Fill, so they can be independently animated:

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!--Generated by the VG.net designer at 4/13/2004 5:54:50 PM-->

<MyXaml xmlns:def="Definition" 
        xmlns="Prodige.Drawing, Prodige.Drawing"

       xmlns:pds="Prodige.Drawing.Styles, Prodige.Drawing">

<Picture Name="LedBar">

   <Elements>

     <Rectangle Name="bar" Location="0, 0" Size="120, 30" CornerRadius="20" StyleReference="Bar"
       DrawAction="Fill" />

     <Ellipse Name="led1" Location="12.63158, 6" Size="18.94737, 18" DrawAction="Fill">

       <Fill>

         <pds:SolidFill Color="50, 205, 50" />

       </Fill>

     </Ellipse>

     <Ellipse Name="led2" Location="37.89474, 6" Size="18.94737, 18" DrawAction="Fill">

       <Fill>

         <pds:SolidFill Color="50, 205, 50" />

       </Fill>

     </Ellipse>

     <Ellipse Name="led3" Location="63.1579, 6" Size="18.94737, 18" DrawAction="Fill">

       <Fill>

         <pds:SolidFill Color="50, 205, 50" />

       </Fill>

     </Ellipse>

     <Ellipse Name="led4" Location="88.42103, 6" Size="18.94737, 18" DrawAction="Fill">

       <Fill>

         <pds:SolidFill Color="50, 205, 50" />

       </Fill>

     </Ellipse>

   </Elements>

   <Styles>

     <pds:Style Name="Bar">

       <pds:Fill>

         <pds:LinearGradientFill Angle="90" StartColor="128, 128, 255" />

       </pds:Fill>

     </pds:Style>

   </Styles>

</Picture>

</MyXaml>