Reference Material.
Display Development Helper Tool
  • Download and use this free tool to accelerate creation and test of displays. This tool provides a local webserver and can update displays automatically with tagged data while the SVG file is edited.
Getting started with the Synoptic API.

1. Include the API in the HEAD section of the HTML file.
 <script src=""></script> 

2. Create a new graphic object with the new keyword, pass the SVG file (containing animation markup) to be loaded:
  var svgraph = 
    new scadavis({ 

3. Pass data to animate the graphics:
  svgraph.setValue("TAG1", Math.random()*100); 

A speedometer graphic.

1. Prepare the SVG file. You can build your own from scratch, follow some tutorial such as: Or customize this file: Or find and download some other one:

2. Using the Editor, select only the needle object (you may need to ungroup objects). Adjust the center of rotation for the object: SHIFT+S and drag the small cross.

3. Right-click the needle and select "Object Properties", choose "Rotate", put TAG1 in the "Tag" field. In the "Min" and "Max" fields put the values for the measurement that will correspond to 0 and 360 degress of rotation. E.g.: 0 and 120. Save the file somewhere in a server.

4. Use the Synoptic API to render de the SVG file and pass some values.
        var svgraph = new scadavis( { 
          svgurl: "" 
        svgraph.setValue("TAG1", 0);
        // update at each .5 seconds
        setInterval( function() {
          var v = Math.random()*10-2.5*svgraph.getValue("TAG1")/60 +svgraph.getValue("TAG1");
          if (v < 0) v = 0;
          if (v > 120) v = 120;
          svgraph.setValue("TAG1", v);
        }, 500);

Substation Simulation