Node-RED es una herramienta de programación para conectar dispositivos de hardware. APIs y servicios en línea de formas nuevas e interesantes.

Proporciona un editor basado en el navegador que facilita el cableado de flujos utilizando la amplia gama de nodos de la paleta que se pueden desplegar en su tiempo de ejecución en un solo clic.

En este post, aprenderás a desarrollar la aplicación Node-RED que se muestra en el post enlazado a continuación: 

Leer >>

Para saber más sobre Node-RED, visita https://nodered.org/

Como dijimos en la introducción, Node-RED proporciona un editor basado en el navegador que facilita la unión de flujos utilizando la amplia gama de nodos de la paleta que pueden ser desplegados en su tiempo de ejecución en un solo clic.

Así pues, vamos a descubrir los aspectos básicos:

1. Node-RED dispone de una amplia gama de nodos que le ofrece muchas posibilidades. Si vas al menú de nodos de la izquierda, encontrarás los nodos que vienen por defecto. Son fáciles de usar; sólo tienes que arrastrarlos y soltarlos en tu flujo para poder empezar a utilizarlos. 
2. Además, si ya sabes qué nodo quieres, hay una barra de búsqueda para filtrar los nodos y encontrar exactamente el que quieres.
3. Si haces doble clic en la pestaña Flow 1 tab, se mostrará una ventana de configuración en la que podrás cambiar su nombre o desactivarlo, por ejemplo. En la misma barra, hay una pestaña + que añade otra pestaña de Flujo, para que puedas utilizar tantos como quieras.
4. Una vez que tengas tus nodos conectados y quieras Desplegar tus cambios, haz clic en el botón Desplegar. 
   Junto al botón Desplegar, hay un menú que te permite importar o exportar tus flujos, o si vas a Gestionar paleta > Instalar, y escribes los nodos que quieres instalar, podrás descargar tantos nodos como quieras, como el node-red-dashboard o el node-red-contrib-ui-media, por ejemplo.
5. Por último, en la barra de la derecha donde se muestra la pestaña de información, hay más pestañas importantes como:
   

• Información: para obtener información general de los flujos.
• Pestaña de ayuda: que te da información sobre el nodo en el que ha hecho clic.
• Mensajes de depuración: es una pestaña muy útil para conocer los errores que se han producido, o para mostrar los mensajes de depuración del nodo.
• Nodos de configuración: Muestra los nodos de configuración de los flujos.
• Panel de control: Esta pestaña te permite establecer el diseño del tablero, la configuración del sitio y el tema.

Ahora que sabes lo básico, vamos a presentar los nodos que vamos a utilizar:

• Nodo Ui_button: Añade un botón a la interfaz de usuario. Al hacer clic en el botón se genera un mensaje con msg.payload establecido en el campo Payload. Si no se especifica ningún payload, se utiliza el id del nodo.
• Nodo de función: Una función JavaScript que se ejecuta contra los mensajes que recibe el nodo. Los mensajes se pasan como un objeto JavaScript llamado msg. Por convención tendrá una propiedad msg.payload que contiene el cuerpo del mensaje.
• Nodo Exec: Ejecuta un comando del sistema y devuelve su salida. El nodo puede ser configurado para esperar hasta que el comando se complete, o para enviar su salida a medida que el comando la genera. El comando que se ejecuta puede ser configurado en el nodo o proporcionado por el mensaje recibido.
• Nodo Change: Establece, cambia, elimina o mueve las propiedades de un mensaje, contexto de flujo o contexto global. El nodo puede especificar múltiples reglas que se aplicarán en el orden en que se definan.
• Switch node: Encamina los mensajes en función de los valores de sus propiedades o de la posición de la secuencia.
• Ui_chart node: Traza los valores de entrada en un gráfico. Puede ser un gráfico de líneas basado en el tiempo, un gráfico de barras (vertical u horizontal) o un gráfico circular.
• Nodo Ui_gauge: Añade un widget de tipo indicador a la interfaz de usuario. Se busca en el msg.payload un valor numérico y se formatea de acuerdo con el Formato de Valor definido.
• Ui_media node: Muestra los archivos multimedia y las URL en el panel de control.
• Status node: Informar de los mensajes de estado de otros nodos en la misma pestaña.

Lo que vamos a hacer es empezar a obtener los valores de un sensor de peso, y cuando la aplicación encuentre el valor que hemos establecido, la cámara USB tomará una foto.

Así que, ¡vamos a empezar a desarrollar nuestra aplicación! 

1. En primer lugar, vas a añadir dos botones del panel de control: el primero para iniciar la aplicación, y el otro para detenerla.

Para ello, ve a la barra de búsqueda de los nodos de filtrado y escribe: botón. Añade dos botones al flujo, y haz doble clic para editarlos. 

En el primero, debes crear un Grupo UI y una Pestaña UI para mostrar nuestro dashboard. Una vez hecho, funcionará para todos los nodos del Dashboard, por lo que sólo es necesario una vez. Después de eso, escribirá una etiqueta para ser mostrada, en nuestro caso: START.

Del mismo modo, el botón STOP tendrá la misma configuración; seleccionaremos el grupo y la pestaña donde queremos mostrarlo, escribiremos: STOP como etiqueta y añadiremos un 0 a la carga útil, para que el valor del indicador se ponga a 0 cuando la aplicación se detenga, en lugar de detenerse en el último valor.

2. Vas a añadir un nodo de función junto al botón de inicio y lo vas a cablear. 

En el nodo de inicio, vas a inicializar una variable de flujo llamada count a 0, que vas a utilizar más adelante cuando nombres las imágenes, y vas a enviar el mensaje con el comando a ejecutar para que la app se inicie.

var count = flow.get('count')||0;
flow.set('count', count);
var newMsg = {payload: "python -u /home/pi/hx711py/example.py"};
return newMsg;

Puedes dar un nombre al nodo de la función tal y como te gustaría verlo en tu flujo. En este caso: start flow.count y send python cmd. Finalmente, cablea un nodo Exec y edítalo. Seleccione la salida: "mientras se ejecuta el comando - modo spawn", y haz clic en la casilla para añadir el msg.payload.

3. Cuando hay un nodo exec ejecutándose como modo spawn, eso genera un pid del proceso en ejecución, que tendrás que obtener para poder matarlo. Así que eso es lo que vas a hacer ahora.

Añade un nodo de estado, ve a "Informar del estado desde" y selecciona "Nodos seleccionados". Elige el nodo exec, y haz clic en Done. Después de eso, cablea un nodo Change, y edítalo para establecer el flow.pid como se muestra a continuación:

Finalmente, añade otro nodo de cambio junto al botón de parada y conéctalos. Como hemos establecido el flow.pid en el nodo de cambio anterior, ahora vamos a establecer el msg.payload al flow.pid. Haciendo esto, al pulsar el botón de parada, el msg.payload se enviará a través del nodo.

Ahora el pid es el msg.payload. Añade un nodo exec como modo exec para matar el pid, y edítalo::

Por el momento, tu flujo se verá así:

[{"id":"2826c4af.400f9c","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"bce0df4f.bc788","type":"ui_button","z":"2826c4af.400f9c","name":"","group":"c4c1bcc1.49c24","order":16,"width":"7","height":"2","passthru":false,"label":"START ","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":140,"y":140,"wires":[["882b392c.ab71b8"]]},{"id":"222e70bc.56f6","type":"ui_button","z":"2826c4af.400f9c","name":"","group":"c4c1bcc1.49c24","order":15,"width":0,"height":0,"passthru":false,"label":"STOP","tooltip":"","color":"","bgcolor":"","icon":"","payload":"0","payloadType":"num","topic":"topic","topicType":"msg","x":130,"y":220,"wires":[["63e42d5b.dee384"]]},{"id":"882b392c.ab71b8","type":"function","z":"2826c4af.400f9c","name":"start flow.count and send python cmd","func":"var count = flow.get('count')||0;\nflow.set('count', count);\n\nvar newMsg = {payload: \"python -u /home/pi/hx711py/example.py\"};\nreturn newMsg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":410,"y":140,"wires":[["9628a2eb.2a5d3"]]},{"id":"2abcf1ce.f1931e","type":"status","z":"2826c4af.400f9c","name":"","scope":["9628a2eb.2a5d3"],"x":140,"y":60,"wires":[["b7fab428.f4fb78"]]},{"id":"9628a2eb.2a5d3","type":"exec","z":"2826c4af.400f9c","command":"","addpay":"payload","append":"","useSpawn":"true","timer":"","oldrc":false,"name":"","x":690,"y":140,"wires":[[],[],[]]},{"id":"b7fab428.f4fb78","type":"change","z":"2826c4af.400f9c","name":"","rules":[{"t":"set","p":"pid","pt":"flow","to":"$number($split(status.text, ':')[1])","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":60,"wires":[[]]},{"id":"63e42d5b.dee384","type":"change","z":"2826c4af.400f9c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"pid","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":220,"wires":[["46ba8b75.815004"]]},{"id":"46ba8b75.815004","type":"exec","z":"2826c4af.400f9c","command":"sudo kill -9","addpay":"payload","append":"","useSpawn":"false","timer":"","oldrc":false,"name":"","x":690,"y":220,"wires":[[],[],[]]},{"id":"c4c1bcc1.49c24","type":"ui_group","name":"Group","tab":"cbda5f28.c75ad","order":1,"disp":true,"width":"20","collapse":false},{"id":"cbda5f28.c75ad","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

4. Ahora, verás los valores de la última 1 hora en un gráfico de líneas, y también en tiempo real en un indicador.

Después, arrastra y suelta un nodo de gráfico y un nodo de indicador, y vamos a editarlos.

En el nodo del gráfico, establece el eje X en la última hora, o en el tiempo que desees registrar, añade la pestaña y el grupo que desees mostrar y haz clic en Listo.

Edita el nodo del indicador eligiendo la misma pestaña y grupo y estableciendo una etiqueta para mostrar como su título, también escriba las unidades. Por último, establezca el valor mínimo y el máximo para fijar el rango:

Por último, conéctalos como se muestra a continuación:

var count = flow.get('count'); count++; 
msg.payload = "fswebcam -r 1280x720 --no-banner /home/pi/images/image" + count + ".jpg";
flow.set('count', count); return msg;

Debes añadir tres parámetros al comando fswebcam:

a. - r para ajustar la resolución de la foto.

b. --no-banner para omitir el banner de la cámara

c. La ruta para decir dónde guardar las imágenes, y qué nombre van a recibir.

7. El nodo de la función enviará un msg.payload, por lo que vas a añadir un nodo exec anexando el msg.payload para ejecutar el comando en tu controlador industrial Raspberry Pi PLC.

8. El modo exec tiene tres salidas. La primera devuelve la stdout, la segunda devuelve la stderr y la última, devuelve el código de retorno. Así que en este caso, conecta la tercera salida, el código de retorno, a un nodo switch para continuar con el flujo si no hubo error.

Por lo tanto, en el nodo switch, establece la propiedad a msg.payload.code y la regla de valor igual al número 0, para asegurarte de que el comando fwwebcam se ejecutó sin errores.

9. Después de eso, conecta un nodo de función para enviar el nombre de la foto que se acaba de tomar, para que se pueda mostrar en el tablero de mando de Node-RED. Una vez editado como se muestra a continuación, conecta un nodo de cambio para mover el msg.payload a msg.src:

let count = flow.get('count');
msg.payload = "/image" + count + ".jpg";
return msg;

10. Por último, añade el nodo de los medios de comunicación y simplemente añade un Grupo a él, o configura el diseño como quieras.

Ahora, tu aplicación Node-RED debería tener este aspecto:

 [{"id":"2826c4af.400f9c","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"9b234a13.0256e8","type":"exec","z":"2826c4af.400f9c","command":"","addpay":"payload","append":"","useSpawn":"false","timer":"","oldrc":false,"name":"","x":510,"y":260,"wires":[[],[],["3f27e8b4.d02378"]]},{"id":"ec5481a.4fbf28","type":"exec","z":"2826c4af.400f9c","command":"","addpay":"payload","append":"","useSpawn":"true","timer":"","oldrc":false,"name":"","x":870,"y":60,"wires":[["36307784.3144e8","372e8f7b.f9752","d4e34cd5.f423e"],[],[]]},{"id":"36307784.3144e8","type":"switch","z":"2826c4af.400f9c","name":"if value is between 50 and 100","property":"payload","propertyType":"msg","rules":[{"t":"btwn","v":"50","vt":"num","v2":"100","v2t":"num"}],"checkall":"true","repair":false,"outputs":1,"x":990,"y":160,"wires":[["fb666c7f.c2ff9"]]},{"id":"3f27e8b4.d02378","type":"switch","z":"2826c4af.400f9c","name":"if picture was taken","property":"payload.code","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":1030,"y":260,"wires":[["7646b60e.83a318"]]},{"id":"7646b60e.83a318","type":"function","z":"2826c4af.400f9c","name":"set path","func":"let count = flow.get('count');\nmsg.payload = \"/image\" + count + \".jpg\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":140,"y":360,"wires":[["a4078c82.e803a"]]},{"id":"a4078c82.e803a","type":"change","z":"2826c4af.400f9c","name":"move payload to src","rules":[{"t":"move","p":"payload","pt":"msg","to":"src","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":560,"y":360,"wires":[["3385b59c.06c81a"]]},{"id":"8771f8be.e44f68","type":"ui_button","z":"2826c4af.400f9c","name":"","group":"c4c1bcc1.49c24","order":5,"width":7,"height":2,"passthru":false,"label":"STOP LOAD CELL","tooltip":"","color":"","bgcolor":"","icon":"","payload":"0","payloadType":"num","topic":"","topicType":"str","x":170,"y":160,"wires":[["e053ecae.bca31","d4e34cd5.f423e"]]},{"id":"d4e34cd5.f423e","type":"ui_gauge","z":"2826c4af.400f9c","name":"","group":"c4c1bcc1.49c24","order":13,"width":6,"height":4,"gtype":"gage","title":"Weight","label":"g","format":"{{value}}","min":"-2000","max":"2000","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":1070,"y":100,"wires":[]},{"id":"372e8f7b.f9752","type":"ui_chart","z":"2826c4af.400f9c","name":"","group":"c4c1bcc1.49c24","order":11,"width":6,"height":4,"label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":1070,"y":60,"wires":[[]]},{"id":"99be7e29.78696","type":"ui_button","z":"2826c4af.400f9c","name":"","group":"c4c1bcc1.49c24","order":3,"width":7,"height":2,"passthru":false,"label":"START LOAD CELL","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","topicType":"str","x":180,"y":60,"wires":[["615b1ef6.53963"]]},{"id":"615b1ef6.53963","type":"function","z":"2826c4af.400f9c","name":"start flow.count and send python cmd","func":"var count = flow.get('count')||0;\nflow.set('count', count);\n\nvar newMsg = {payload: \"sudo python -u /home/pi/hx711py/example.py\"};\nreturn newMsg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":610,"y":60,"wires":[["ec5481a.4fbf28"]]},{"id":"3385b59c.06c81a","type":"ui_media","z":"2826c4af.400f9c","group":"c4c1bcc1.49c24","name":"","width":6,"height":4,"order":15,"category":"","file":"","layout":"expand","showcontrols":true,"loop":true,"onstart":false,"scope":"local","tooltip":"","x":1070,"y":360,"wires":[[]]},{"id":"16de31a2.e4a6de","type":"status","z":"2826c4af.400f9c","name":"get the exec node status","scope":["ec5481a.4fbf28"],"x":190,"y":600,"wires":[["9bb820b3.87fbe"]]},{"id":"9bb820b3.87fbe","type":"change","z":"2826c4af.400f9c","name":"set flow.pid","rules":[{"t":"set","p":"pid","pt":"flow","to":"$number($split(status.text, ':')[1])","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":600,"wires":[["b99c988c.86bf98"]]},{"id":"b99c988c.86bf98","type":"function","z":"2826c4af.400f9c","name":"set kill cmd","func":"let pid = flow.get('pid');\nvar kill = \"kill -9 \" + pid;\nflow.set('kill', kill);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":590,"y":600,"wires":[[]]},{"id":"e053ecae.bca31","type":"function","z":"2826c4af.400f9c","name":"killall python","func":"msg.payload = \"sudo killall python\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":530,"y":160,"wires":[["ec5481a.4fbf28"]]},{"id":"fb666c7f.c2ff9","type":"function","z":"2826c4af.400f9c","name":"start flow.get and send fswebcam cmd","func":"var count = flow.get('count');\ncount++;\n\nmsg.payload = \"fswebcam -r 1280x720 --no-banner /home/pi/images/image\" + count + \".jpg\";\n\nflow.set('count', count);\n\nreturn msg;\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":230,"y":260,"wires":[["9b234a13.0256e8"]]},{"id":"5771d86a.220b58","type":"comment","z":"2826c4af.400f9c","name":"In case you want to kill the flow pid and not the python processes, replace the \"killall python\" function node, for the \"killall pid\" function node -->","info":"","x":550,"y":540,"wires":[]},{"id":"b88b67eb.03f068","type":"function","z":"2826c4af.400f9c","name":"killall pid","func":"msg.payload = flow.get('kill');\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1100,"y":540,"wires":[[]]},{"id":"c4c1bcc1.49c24","type":"ui_group","name":"","tab":"cbda5f28.c75ad","order":1,"disp":true,"width":"20","collapse":false},{"id":"cbda5f28.c75ad","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Si vas al menú de la derecha, en la pestaña Dashboard, y pasas el ratón por encima de tu pestaña, verás aparecer tres botones: agrupar, editar y layout. Así, si haces clic en diseño, verás el editor de diseño del Dashboard, donde es posible mostrar tus nodos ui como quieras. 

Si ves que no puedes cambiar el tamaño de los widgets, ve a cada nodo del Dashboard, y en la sección de Tamaño, verás que está configurado como automático, así que simplemente establece cualquier tamaño manual, vuelve al editor de diseño del Dashboard, donde se aplicarán los cambios.

Finalmente, ve a http://10.10.10.20:1880/ui/ y consulta tu panel de control de Node-RED.