Learn SCADAvis.io

Everything you need to create powerful web visualizations

Getting Started

Quick Start Examples

Learn the basics of SCADAvis.io.

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.

Editor Reference

SCADA Animations

Create interactive SVG animations with SCADAvis.io Synonptic Editor.

Inkscape Tutorials

Standard SVG editor usage for creating vector graphics

API Reference

JavaScript API

Complete API documentation with examples

Getting Started With The API

Simple Example

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 and animate the graphic

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

Speedometer Example

1. Prepare the SVG File

Create your own speedometer or use existing resources:

Tutorials

Ready-to-Use Files

2. Configure the Needle

Using the SCADAvis.io Editor:

Select only the needle object (ungroup if needed)
Adjust rotation center: Press SHIFT+S and drag the small cross
Right-click → Object Properties → Choose "Rotate"
Set Tag field to "TAG1"
Set Min and Max values (e.g., 0 and 120)

3. Implement the Animation

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() {
    let 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);
})