Dashboard Node-RED

Dashboard UI

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:

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 dashboard 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

Multiusuario en Dashboard: Este panel NO admite varios usuarios individuales. Es una vista del estado del flujo Node-RED subyacente, que a su vez es de un solo usuario. Si el estado del flujo cambia, todos los clientes serán notificados de ese cambio.

Los mensajes que provienen del tablero tienen un msg.socketid, y las actualizaciones como el cambio de pestaña, notificaciones y alertas de audio se dirigirán solo a esa sesión. Elimine msg.sessionid para enviar a todas las sesiones.

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

Características

Barra lateral: El diseño del widget es administrado por una pestaña del tablero en la barra lateral del editor Node-RED.

Layout:

Tabs: desde aquí puede reordenar las pestañas, los grupos y los widgets, y agregar y editar sus propiedades.
Links: también se pueden agregar al menú otras páginas web. Opcionalmente, se pueden abrir en un iframe, si la página de destino lo permite.

Site:

Título: se puede establecer el título de la página de la interfaz de usuario.
Opciones: oculta opcionalmente la barra de título y permite deslizar el dedo hacia los lados entre pestañas en una pantalla táctil. También puede establecer si la plantilla usa el tema seleccionado o usa el tema de Material angular subyacente. También puede optar por utilizar el tema Material angular en todas partes.
Formato de fecha: establece el formato de fecha predeterminado para el gráfico y otras etiquetas.
Tamaños: establece la geometría básica del diseño de la cuadrícula en píxeles. Se puede configurar el ancho y alto de los widgets, al igual que el ancho de los grupos. Estas son las definiciones básicas de las «unidades» que se utilizan en otras partes del dashboard.

Theme: el tema y la fuente de la interfaz de usuario se configuran en la barra lateral del dashboard. Puede seleccionar un tema claro, oscuro o personalizado predeterminado. No puede tener diferentes temas para cada pestaña.

Nodos de Dashboard. Widgets.

Repositorio: https://github.com/node-red/node-red-dashboard

La mayoría de los widgets pueden tener una etiqueta y un valor, ambos pueden especificarse mediante las propiedades del mensaje entrante si es necesario y modificarse mediante filtros de angular. Por ejemplo, la etiqueta se puede establecer en {{msg.topic}}, o el valor se puede establecer en {{value|number:1}}% para redondear el valor a un lugar decimal y agregar un signo de %.

Cada nodo puede analizar msg.payload para que sea adecuado para su visualización.

Cualquier widget puede desactivarse pasando una propiedad msg.enabled establecida en false. Nota: esto no impide que el widget reciba mensajes, pero impide que las entradas estén activas y cambia el estilo del widget.

La mayoría de los widgets de interfaz de usuario también se pueden configurar mediante un mensaje msg.ui_control. Más información en https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md

Widgets disponibles:

Audio out – Un widget que le permitirá reproducir audio (wav o mp3) o enviar texto a voz (TTS) al cliente.
Button – Pulsador para interactuar. El icono se puede configurar usando Material o fa-icons; el color y el color de fondo también se pueden configurar. Si el widget tiene un tamaño de 1 de ancho, el icono tiene prioridad.
Chart – Gráfica de datos. Tiene modos de gráfico de líneas, barras y tarta. Además, las etiquetas del eje X se pueden personalizar utilizando una cadena de formato de fecha. Para obtener más información sobre los formatos de datos de gráficos aceptados ver https://github.com/node-red/node-red-dashboard/blob/master/Charts.md
Colour Picker – Selector de color
Date Picker – Selector de fechas. El formato de fecha mostrado se puede especificar en la pestaña Site usando el formato moment.js.
Dropdown – Selección desplegable. Se pueden especificar varios pares de etiquetas y valores. Las opciones también se pueden configurar a través de msg.options que contienen una matriz de objetos. Si es solo texto, el valor será el mismo que el de la etiqueta; de lo contrario, puede especificar ambos mediante el uso de un objeto de pares «etiqueta»: «valor»: [«Opción 1», «Opción 2», {«Opción 3»: 3}]. msg.payload pre seleccionará el valor en el menú desplegable.
Form – Formulario. Un widget que puede estar compuesto por varios sub-widgets. Cuando se envían, todos los valores se envían como un solo mensaje.
Gauge – Indicador, tiene 4 modos: estándar (indicador simple), rosquilla (360 ° completo), brújula y onda. También puede especificar la gama de colores de los indicadores estándar y de rosca.
Notification – Erea alertas para el usuario; puede ser un mensaje emergente o un cuadro de alerta descartable. La alerta puede estar dirigida a un solo usuario.
Numeric – Entrada numérica con botones arriba / abajo.
Slider – Control deslizante horizontal simple, con tamaño de paso variable.
Switch – Conmutador/interruptor. También puede configurar dos iconos y / o colores según el estado.
Template – El nodo de plantilla permite al usuario especificar y crear sus propios widgets dentro del marco usando HTML, Javascript. Este es un widget de Angular.js. También puede usar esto para anular los estilos CSS integrados.
Text – Texto de solo lectura. La etiqueta y el valor pueden ser configurados. El widget de texto aceptará html, por lo que puede usarlo junto con los íconos fa.
Text input – El cuadro de entrada de texto, con etiqueta opcional, también admite modos de contraseña, correo electrónico y color.
UI-Control – Permite cierto control dinámico del Dashboard. El envío de un msg.payload del número de pestaña o tab_name cambiará a esa pestaña. Las pestañas se pueden habilitar/deshabilitar/ocultar/mostrar a través de msg. Los grupos se pueden ocultar y hacer visibles mediante un mensaje también.

Charts

El widget charts, 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.

Características:

Cada valor de carga de mensaje de entrada se convertirá en un número. Si la conversión falla, el mensaje se ignora.
Los valores mínimos y máximos del eje Y son opcionales. El gráfico se escalará automáticamente a cualquier valor recibido.
Se pueden mostrar varias series en el mismo gráfico utilizando un valor de topic de mensaje diferente en cada mensaje de entrada. Se pueden mostrar varias barras de la misma serie mediante la propiedad msg.label.
El eje X define una ventana de tiempo o un número máximo de puntos para mostrar. Los datos más antiguos se eliminarán automáticamente del gráfico. Las etiquetas de los ejes se pueden formatear utilizando una cadena con formato de tiempo moment.js.
Ingresando un msg.payload que contenga una matriz en blanco [] borrará el gráfico.
La etiqueta también se puede establecer mediante una propiedad de mensaje estableciendo el campo con el nombre de la propiedad, por ejemplo {{msg.topic}}.
La salida del nodo contiene una matriz del estado del gráfico que se puede conservar si es necesario. Esto se puede pasar al nodo del gráfico para volver a mostrar los datos persistentes.

Más información de: https://github.com/node-red/node-red-dashboard/blob/master/Charts.md

Text Widget

Muestra un campo de texto no editable en la interfaz de usuario. Cada msg.payload recibido actualizará el texto basado en el formato de valor proporcionado.

El campo Formato de Valor puede utilizarse para cambiar el formato mostrado y puede contener filtros válidos de HTML y Angular. Por ejemplo: {{value | uppercase}} ° pondrá en mayúsculas el texto de payload y añadirá el símbolo de grado.

La etiqueta también puede ser establecida por una propiedad de mensaje estableciendo el campo al nombre de la propiedad, por ejemplo {{msg.topic}}.

También están disponibles las siguientes fuentes de iconos: Icono de Material Design (e.g. ‘check’, ‘close’) o un icono de Font Awesome (por ejemplo, ‘fa-fire’), o un icono de Weather.

Puedes utilizar el conjunto completo de iconos de google material si añades «mi-» al nombre del icono, por ejemplo, «mi-videogame_asset».

El widget también tiene una clase de nr-dashboard-widget-{the_widget_label_with_underscores} que se puede usar para un estilo adicional si es necesario.

NOTA: el nr-dashboard-xx es una clase de Node-RED que define el color. Son variables CSS. Ver las variables en https://github.com/node-red/node-red-dashboard/blob/master/src/theme.less

Para el nodo ui_text de Dashboard, el campo «Value Format» puede utilizarse para cambiar el formato de visualización y puede contener HTML y filtros de Angular https://scotch.io/tutorials/all-about-the-built-in-angularjs-filters que permiten modificar el texto.

Insertar en payload en lugar de un texto un icono usando fa (font awesome icons):

Bombilla:
Warning:
Error:
Con un if cambio color: World

Iconos que se pueden usar:

Ejemplo de uso de iconos fa: https://fontawesome.com/v4.7.0/examples/

Insertar iconos en HTML: https://www.w3schools.com/icons/

Algunos ejemplos de indicadores simples que pueden utilizarse para mostrar el estado utilizando el widget de texto, ya sea pasando en html incluyendo fa-iconos o utilizando las clases de color incorporadas. Ver este flow: https://flows.nodered.org/flow/90341d0d81f59762fe1cf8d753723636