Getting started

Quick start examples

Start with simple patterns and understand how the runtime attaches to SVG scenes.
Display development helper

Download the local helper tool for serving displays and testing tagged data during design. Use skills files to develop displays and apps with AI assistance.

Editor reference

SCADA animations

Reference how motion and data-driven SVG behavior are authored in the editor.
Inkscape tutorials

Use standard vector-editing tutorials for the foundation of your visual authoring workflow.

API reference

JavaScript API

Read the runtime API details and implementation examples.
Implementation guide
Simple example

Load the API and animate a tagged value.

1. Include the script and scada-vis element in your page.

<script type="module" src="https://scadavis.io/synoptic3/scada-vis.js"></script>
<scada-vis id="scada-vis1" style='height:250px;width:250px;'></scada-vis>

2. On window load, access the element and push values into the scene.

window.onload = async () => {
    // Get reference to component
    const component = document.querySelector('#scada-vis1');
    // load SVG from URL, wait until ready
    await component.loadURL('https://raw.githubusercontent.com/dscsystems/displayfiles/master/donut.svg')
    // update values in the display at each 1.5 seconds
    setInterval(() => {
      component.setValue("TAG1", Math.random()*100); 
      if (component.getValue("TAG1") >= 75)
        component.setValue("TAG2", "alarmed!"); 
      else  
        component.setValue("TAG2", "normal"); 
    },1500); 
  }

See the Pen SCADAvis.io API - Doughnut Graphic (v3) by Ricardo Olsen (@ricardolo) on CodePen.

Guided build

Create a speedometer and wire its needle to a live tag.

1. Prepare the SVG file

Create your own gauge or start from an existing SVG resource.

Tutorials
Resources

2. Configure the needle in the editor

  • Select only the needle object and ungroup if necessary.
  • Adjust the rotation center with Shift+S.
  • Choose Rotate in Object Properties.
  • Set the tag to TAG1 and define a suitable value range.

3. Implement the animation loop

scadavisInit({
  svgurl: "https://raw.githubusercontent.com/dscsystems/displayfiles/master/speedometer.svg"
}).then((sv) => {
  sv.enableMouse(true, true);
  sv.setValue("TAG1", 0);
  setInterval(() => {
    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);
});

See the Pen SCADAvis.io API Speedometer (v3) by Ricardo Olsen (@ricardolo) on CodePen.

Advanced demos

Explore richer examples with denser scenes and more runtime state.

Substation simulation

See the Pen Substation Simulation (v3) by Ricardo Olsen (@ricardolo) on CodePen.

Generic SCADA

See the Pen SCADA (v3) by Ricardo Olsen (@ricardolo) on CodePen.