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 Scadavis object, pass the SVG file (containing animation markup) to be loaded. Pass data to animate the graphic.
          }).then( sv => {
            sv.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.
        scadavisInit( { 
          svgurl: "" 
        }).then(sv => {
          sv.enableMouse(true, true);
          sv.setValue("TAG1", 0);
          // update at each .25 seconds
          setInterval( function() {
            var v = Math.random()*10-2.5*sv.getValue("TAG1")/60 +sv.getValue("TAG1");
            if ( v < 0 ) v = 0;
            if (v > 120) v = 120;
            sv.setValue("TAG1", v);
          }, 250);

Substation Simulation

Generic SCADA