Uno de los nodos más populares de Node-RED es el de dashboard, que permite hacer un dashboard muy sencillo desde Node-RED.
Node dashboard: https://flows.nodered.org/node/node-red-dashboard
Github: https://github.com/node-red/node-red-dashboard
Cómo usarlo:
- https://randomnerdtutorials.com/getting-started-with-node-red-dashboard/
- http://www.steves-internet-guide.com/node-red-dashboard/
El diseño del dashboard debe considerarse como una cuadrícula. Cada elemento del grupo tiene un ancho: de forma predeterminada, 6 ‘unidades’ (una unidad tiene 48 píxeles de ancho de forma predeterminada con un espacio de 6 píxeles).
Cada widget del grupo también tiene un ancho: de forma predeterminada, ‘auto’, lo que significa que ocupará el ancho del grupo en el que se encuentra, pero puede establecerlo en un número fijo de unidades.
El algoritmo de diseño del tablero siempre trata de colocar elementos tan altos y a la izquierda como sea posible dentro de su contenedor; esto se aplica a cómo se posicionan los grupos en la página, así como a cómo se colocan los widgets en un grupo.
Dado un grupo con un ancho de 6, si agrega seis widgets, cada uno con un ancho de 2, se colocarán en dos filas, tres widgets en cada uno.
Si agrega dos grupos de ancho 6, siempre que la ventana de su navegador sea lo suficientemente ancha, se sentarán uno al lado del otro. Si encoge el navegador, en algún momento el segundo grupo cambiará para estar debajo del primero, en una columna.
Es posible utilizar múltiples grupos si es posible, en lugar de un gran grupo, para que la página pueda cambiar de tamaño dinámicamente en pantallas más pequeñas.
Una descripción completa de los controles: https://flows.nodered.org/node/node-red-dashboard
Y se accede al dashboard con http://IP_NodeRED:1880/ui
Más información:
- https://randomnerdtutorials.com/getting-started-with-node-red-dashboard/
- http://noderedguide.com/tag/dashboard/
- http://developers.sensetecnic.com/article/a-node-red-dashboard-using-node-red-dashboard/
- Vídeo: https://www.youtube.com/watch?v=N6DCcHne9hg
- Advanced dashboards charts: https://es.coursera.org/lecture/developer-nodered/advanced-dashboard-nodes-charts-QrAmd
- Visualización de datos con Node-RED: https://www.hackair.eu/data-visualisation-with-node-red-dashboard/
Tutoriales node red dashboard
- http://developers.sensetecnic.com/article/a-node-red-dashboard-using-node-red-dashboard/
- https://randomnerdtutorials.com/getting-started-with-node-red-dashboard/
- http://noderedguide.com/tag/dashboard/
- http://www.steves-internet-guide.com/node-red-dashboard/
- http://noderedguide.com/tutorial-node-red-dashboards-multiple-lines-on-a-chart/
- http://noderedguide.com/lecture-7-node-red-dashboard-part2/
- https://diyprojects.io/node-red-dashboard-gauges-charts-notifications-html#.XblV62L0ncs
Otro dashboard es el freeboard:
- https://www.npmjs.com/package/node-red-contrib-freeboard
- http://noderedguide.com/tag/freeboard/
- https://flows.nodered.org/node/node-red-contrib-freeboard
Web Estática
Web estatica: el modo httpstatic de settings.js me da la ruta de una web estáticas para mostrar por ejemplo una foto.
Se debe cambiar el valor de httpStatic para que sea la ruta completa a la carpeta que contiene sus imágenes o web estática.
Después de reiniciar el Node-RED, accederá al editor en http://localhost:1880/admin y podrá cargar la web estática con http://localhost:1880
Servir una web statica: https://cookbook.nodered.org/http/serve-a-local-file
Más información: ttps://discourse.nodered.org/t/how-to-enable-ability-to-input-local-image-files-in-to-node-red-dashboard/3085
Securizar el Dashboard
Documentación: https://flows.nodered.org/node/node-red-dashboard
Puede usar la propiedad httpNodeAuth en su archivo Node-RED settings.js para securizar el panel de control, ya que se crea de la misma manera que otros nodos HTTP. Los detalles se pueden encontrar al final de esta página en los documentos http://nodered.org/docs/security
Este Dashboard no es compatible con múltiples usuarios individuales. Es una vista del estado del flujo Node-RED subyacente, que en sí mismo es un solo usuario. Si el estado del flujo cambia, todos los clientes serán notificados de ese cambio.
Los mensajes provenientes del tablero tienen un msg.socketid, y las actualizaciones como cambio de pestaña, notificaciones y alertas de audio se dirigirán solo a esa sesión. Elimine el msg.sessionid para enviarlo a todas las sesiones.
La ruta de acceso al Dashboard de Node-RED se puede cambiar desde el campo httpNodeRoot se puede cambiar en la configuración.
Poner login con usuario y password en un dashboard para acceder con programación en Node-RED https://github.com/phyunsj/node-red-dashboard-login
Flow para poner un pin en Dashboard y confirmar una acción: https://flows.nodered.org/flow/7bcb0b049df4fa3c962294137ebaec19
Ejemplo Arduino + MQTT + NodeRed + Dashboard
Hacer un Dashboard como este usando dos sondas o dos potenciómetros que manden datos a varios topic y se muestre en el dashboard, así como un led que pueda encenderse al pulsar un botón del dashboard y dos leds que se enciendan cuando se supere el umbral de temperatura.
Además hacer una pestaña con las gráficas y hacer un flujo de debug para ver los datos.
Todos los datos serán guardarlos en la BBDD MariaDB instalada en las Raspberry Pi
Ejemplo hecho con 4 flujos:
Código node-red: https://github.com/jecrespo/Curso-IoT-Open-Source/blob/master/node-red/node-red.json
Código Arduino: https://github.com/jecrespo/Curso-IoT-Open-Source/blob/master/node-red/arduino-node-red/arduino-node-red.ino
Pingback: Saber más Curso Raspberry Pi y Node-RED | Aprendiendo Arduino
Pingback: Saber Más Fundamentos IoT CEFIRE | Aprendiendo Arduino
Pingback: Saber Más Fundamentos IoT para Formación Profesional | Aprendiendo Arduino