Node-RED is a popular flow-based programming tool that has powerful IoT capabilities. With this framework, you can visually wire together protocol nodes, like MQTT and Modbus, data manipulation processing nodes, and output nodes like dashboards and user interfaces, creating the so-called “flows”.
Node-RED makes it easy to create dashboard interfaces as it is using the node-red-dashboard node.
But what about SCADA-like graphics that mimic processes like the one below?
Now, this is possible in an efficient manner using the SCADAvis.io HTML5 Synoptic Toolkit combined with the “node-red-contrib-uibuilder” package.
The UIbuilder package provides an easy way to create Node-RED user interfaces using web front-end frameworks.
SCADAvis.io is an HTML5 toolkit that makes it easy to create SCADA-like synoptic graphics to be embedded in webpages code. It is based on SVG vector graphics created using an Inkscape customized editor. This editor allows for the markup of the SVG graphical objects with data-linked animations. Graphical properties like fill/stroke color, text, size, opacity, rotation, position, etc., can be tied to tagged data values for the creation of the SCADA-like graphics. Look at SCADAvis.io site for examples and documentation.
Next, I present a step-by-step example of creating a substation user interface for Node-RED.
Steps to create a UI for Node-RED using SCADAvis.io
1. Add the UI-Builder Package.
- Add the “node-red-contrib-uibuilder” package to Node-RED. See documentation for UI-Builder here.
- Add the uibuilder node to the flow.
2. Edit the UI-Builder source files.
- Double click the node. Click the “Edit Source Files” button.
- Change the index.html file to the code found here:
https://github.com/riclolsen/node-red-scadavis/blob/master/index.html
- The example SVG file is here:
https://raw.githubusercontent.com/riclolsen/displayfiles/master/kor1.svg
3. Insert an Inject node in the flow.
- Connect the output to the UI Builder input. Configure the Inject to JSON payload.
- Add tagged data payload as in this example:
https://github.com/riclolsen/node-red-scadavis/blob/master/inject-tagged-data.json
4. Deploy and Open UI.
- Deploy the flow.
- Open UI-Builder page http://localhost:1880/uibuilder.
5. Develop your own displays.
- Customize the code in index.html and use the SCADAvis.io Synoptic Editor to create new displays.
- Process events generated in the interface and output to other nodes as needed. Customize the .on(“click“) event of the SCADAvis API (line 74 in the example index.html).
Copyright © 2019 Ricardo L. Olsen. All rights reserved.
SCADAvis.io HTML5 Synoptic Toolkit, free plugins for Power BI and Grafana.
DSC Systems – https://dscsys.com
#NODERED #NODE-RED #SCADA #HMI #SYNOPTIC #MIMIC #GRAPHICS
Control + S 
