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.
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
- Node Red: Machine Monitoring System SCADA-Like
- Creating SCADA-Like User Interfaces For Node-RED
- Open Source HTML5 Synoptic Toolkit
- A Node-RED node to host a local DrawSvg service
- A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard
- Easily create data-driven web UI’s for Node-RED using any (or no) front-end library
Descargas
El proyecto completo está accesible en GitHub.