|ExtGraph - Graph Component and Framework|
Project is hosted by
How to create new dynamic SVG object
ExtGraph is based on SVG and XPascal.Even though both technologies are
feature-rich and powerful, they can be very simple to explain. SVG is
Scalable Vector Graphics defined by W3C consortium. XPascal is scripting
language using Pascal syntax and implementing large subset of Delphi objects,
libraries and components.
If you already know SVG and Delphi, you know most of what is necessary in order to create dynamic graphs. If not there are many good tutorials available on the web.
Learning Object Pascal
There are also many other sources as well as books on both SVG and Pascal/Delphi.
What we want to achieve?
We want to draw an analog clock and make it display the current time.
We will start with simple SVG object and display it on the graph canvas. Then we will add some other SVG objects to create clock shape. Once satisfied with the clock's graphical design, we will write pascal code that will animate the SVG picture.
Step 1 - download XGraph demo application
First you will need XGraph application, only windows version is available
Step 2 - create SVG object
We will make it simple. Because svg is xml and xml is text, create text document with an .svg extension, for example clock.svg. You can use any standard plain text editor like Notepad.exe. Fill it with following content and save it.
This code will draw beige circle with red line in "twelve"
position. Go to main menu and select menu item Objects-SVG, select svg
file, you have just created and place it somewhere on canvas. Now you
should see something like this:
Now let's enhance our clock a little. Add second line that will be shorter and just for fun will be thicker and in a slightly different color. We will also add 'id tags' to lines, so that later we can tell which line is short and which long. The modified svg file will now contain (changes are marked with red):
Do not forget to save your changes, clear graph and re-open changed svg.
Now you should see:
Step 3 - Adding logic.
We have a static svg picture and canvas that displays the vector graphics based on xml code. To make clock dynamic, we have to have read current time, and change coordinates of lines accordingly. We will use XPascal, especially its xml (remember? svg is xml), time and trigonometric routines.
<svg viewBox="0 0 400 400">
After you will re-open clock.svg you should see something like this.
Tip: You can edit XPascal code in integrated
XML editor, even with syntax hi-lighting:
If everything works let's take one final step. Enhance the code so that it shows current time. Code:
<svg viewBox="0 0 400 400">
Final picture will show current time:
Tips for homework
Send us your homework, if it will be good, we would like to publish your design and code here.
Your comments are welcomed. Feel free to send them to my email: Pavel Vrecion.
|©2004 Extgraph developers||About Related projects Case studies Docs|