• SCADAvis.io Synoptic API developer_mode
• SCADAvis.io Synoptic Editor format_paint

• 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.

1. Include the API in the HEAD section of the HTML file.

 <script src="https://scadavis.io/synoptic2/synopticapi.js"></script> 

2. Create a new Scadavis object, pass the SVG file (containing animation markup) to be loaded. Pass data to animate the graphic.

  scadavisInit({ 
          svgurl: 
            "https://raw.githubusercontent.com/riclolsen/displayfiles/master/helloworld.svg" 
          }).then( sv => {
            sv.setValue("TAG1", Math.random()*100); 
          })
        

1. Prepare the SVG file. You can build your own from scratch, follow some tutorial such as:

• http://goinkscape.com/how-to-create-a-tachometer-in-inkscape/
• https://www.youtube.com/watch?v=VWFn1LOIScQ
• https://www.youtube.com/watch?v=kPpti6-jHaQ

Or customize this file:

• https://raw.githubusercontent.com/riclolsen/displayfiles/master/speedometer.svg

Or find and download some other one:

• https://www.google.com.br/search?q=svg+speedometer&tbs=itp:clipart&tbm=isch&sa=X&dpr=1

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.

      
        scadavisInit( { 
          svgurl: "https://raw.githubusercontent.com/riclolsen/displayfiles/master/speedometer.svg" 
        }).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);
        })