Reference Material.
Getting started with the Synoptic API.

1. Include the API in the HEAD section of the HTML file.
 <script src="https://scadavis.io/synoptic/synopticapi.js"></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({ 
          svgurl: 
            "https://raw.githubusercontent.com/riclolsen/displayfiles/master/helloworld.svg" 
          });
        

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 SCADAvis.io 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 SCADAvis.io Synoptic API to render de the SVG file and pass some values.
      
        var svgraph = new scadavis( { 
          svgurl: "https://raw.githubusercontent.com/riclolsen/displayfiles/master/speedometer.svg" 
        });
        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