SCADA-like con Node-RED

Sistema experimental simil SCADA con Node-RED y manipulación de gráficos vectoriales (SVG). Este proyecto está basado en el trabajo Tutorial SVG Node (SCADA-Like) Machine Monitoring System Node-Red de Yaser Ali Husen.

SCADA, acrónimo de Supervisory Control and Data Acquisition (Control, Supervisión y Adquisición de Datos) es un concepto que se emplea para realizar un software que permite controlar y supervisar procesos industriales a distancia. Facilita retroalimentación en tiempo real con los dispositivos de campo (sensores y actuadores), y controla el proceso automáticamente. Provee de toda la información que se genera en el proceso productivo y permite su gestión e intervención. Más en Wikipedia.

Simulación típica de un SCADA para una planta de proceso, basado en un diagrama de tuberías e instrumentación.

Implementación con Node-RED

Con Node-RED se puede diseñar la lógica de control del sistema mediante el uso de diferentes widgets, y de eventos que disparen las animaciones del dashboard. Respecto a las diferentes animaciones, se utilizó el nodo node-red-contrib-ui-svg que permite interactuar con gráficos vectoriales SVG en el dashboard.

SVG, gráficos vectoriales escalables (del inglés: Scalable Vector Graphics) es un formato de gráficos vectoriales bidimensionales, tanto estáticos como animados, en formato XML (Extensible Markup Language), es decir que se compone por código y cuya especificación es un estándar abierto desarrollado por el W3C desde 1999. A diferencia de aquellos gráficos codificados en webP, JPG, PNG, o TIFF (Rasters), los SVG pueden ser interactivos y dinámicos y esto se debe a que no se componen por mapa de bits, sino que están compuestos por vectores, que son instrucciones matemáticas que se le dan al navegador o programas de ediciones de estos gráficos vectoriales, para escalarlos de manera infinita y sin perder resolución o calidad en el gráfico. Más en Wikipedia.

La estructura básica de un archivo SVG es la siguiente:

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" >
    <title>Estructura basica del SVG</title>
    <style>
        .circle {fill: blue}
    </style>
    <circle class="circle" cx="5" cy="5" r="5" />
</svg>

Y genera la siguiente figura:

Mediante diferentes funciones escritas en JavaScript, e implementadas utilizando el nodo function, es posible modificar el contenido del gráfico SVG que se despliega en el dashboard del sistema.

El nodo que recibe los mensajes procesados por las funciones, y se encarga de manipular el gráfico SVG, es SVG graphics. En el tab SVG se carga el código del gráfico a utilizar.

La idea es poder cambiar el contenido de diferentes variables relacionadas a eventos externos, para luego inyectarlas en el SVG, y así, reemplazar propiedades de alguna parte del gráfico, por ejemplo el contenido de una etiqueta de texto, el color de una línea, etc. A continuación un ejemplo de la implementación:

var color_change;
var text_change;

//set global variable for start/stop
var toogle = context.get('toogle') || "false";

if (toogle == true){
    toogle = false;
    color_change = "#ff0000";
    text_change = "STOP";
}
else {
    toogle = true;
    color_change = "#00ff00";
    text_change = "START";
}
context.set('toogle', toogle);

msg.payload = [
    {
        "command": "set_style",
        "selector": "#path3951",
        "attributeName": "fill",
        "attributeValue": color_change
    },
    {
        "command": "update_text",
        "selector": "#tspan2836-7",
        "textContent": text_change
    }
];

return msg;

Resultados obtenidos, dashboard simil SCADA:

RECURSOS

Descargas

El proyecto completo está accesible en GitHub.