First example

> > >

Let’s look at a first example of SVG visualization. Here, we use a trivial example, which nonetheless gives a quick overview of what the idea of SVG visualization is all about, and what it looks like.

Note that it is not necessary to fully understand what exactly is going on, or how it works. Those details should become clear after reading the remaining pages of the documentation.

The SVG image

We use an SVG image with a single circle:

The element of the image that represents the circle is given id lamp, to be able to uniquely identify it. The SVG image is saved in a file named lamp.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="70" height="70" xmlns="http://www.w3.org/2000/svg">
  <circle id="lamp" style="fill:black;" cx="35" cy="35" r="25"/>
</svg>

The SVG image has a size of 70 by 70 pixels if not scaled. It contains a single circle, with id lamp, black fill color, its center at x-coordinate 35 and y-coordinate 35, and a radius of 25 pixels.

The CIF model

We use the following CIF model:

svgfile "lamp.svg";

automaton lamp:
  cont t der 1.0;

  location Off:
    initial;
    edge when t >= 1.0 do t := 0.0 goto On;

  location On:
    edge when t >= 2.0 do t := 0.0 goto Off;

  svgout id "lamp" attr "fill" value if Off: "gray" else "yellow" end;
end

This model describes not only the behavior of the lamp using a CIF automaton, but also contains two CIF/SVG declarations.

The SVG file declaration at the start of the model connects the SVG image from the lamp.svg SVG file to the model. For this to work, the lamp.svg file should be in the same folder as the CIF model file.

The CIF/SVG output mapping near the end of the model adapts a property of an element of the image, based on the state of the automaton. It sets the fill attribute of the element with id lamp, the circle of the image, to either of two colors: silver or yellow. If the automaton is in its Off location, the circle is silver. If the automaton is in its On location, the circle is yellow.

Simulation

If we simulate the CIF model, the automaton starts in its Off location, and thus we see a silver circle:

After a bit of time and taking a tau transition, the automaton is in its On location. We then get a yellow circle:

If we let the simulator run for a while, we see that the lamp is turned on and off repeatedly. SVG visualization essentially turns into an SVG movie of a flashing lamp.