An Analog Vector Graphics Clock Using MyXaml and VG.net

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>

Update: version 2.2 of VG.net includes a much more beautiful version of the analog vector graphics clock. See this blog entry for more information, or download and run the clock. A screenshot is below: