Node-RED integration

Build SCADA-style interfaces on top of Node-RED flows.

Pair UI-Builder with SCADAvis.io to turn operational messages and automation logic into richer browser-based user interfaces.

Integration guide

A practical setup path for bringing Node-RED data into live SVG scenes.

2. Configure the front-end page

Edit the UI-Builder source files and replace index.html with a SCADAvis.io-enabled page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SCADAvis.io Node-RED Example</title>
  <script src="https://scadavis.io/synoptic/synopticapi.js"></script>
</head>
<body>
  <div id="scadavis_display1"></div>
  <script>
    // initialize display, bind click handlers, and push flow values
  </script>
</body>
</html>

3. Configure dependencies

  • Remove or empty the original index.js file.
  • Add jQuery or any required front-end helper libraries through UI-Builder.

4. Send tagged payloads from the flow

Push arrays of tags and values into the page and update the scene in one pass.

[
  { "tag": "KOR1TR1--YTAP", "value": 9 },
  { "tag": "KOR1XSWI1", "value": false },
  { "tag": "KOR1KV230", "value": 231 },
  { "tag": "KOR1TR1MW", "value": 50 }
]

5. Deploy and iterate

  • Deploy the flow.
  • Open the UI-Builder page in the browser.
  • Trigger inject nodes and confirm the visualization updates live.