HowTo: Node Red - Crear una interfaz de usuario con nodos de panel

No sé si los cuadros de mando son EL (único) medio de hacer latir más rápido el corazón de un empollón, pero desde luego son un medio de hacer latir más rápido el corazón de un empollón. Para los que crecieron con Star Trek y similares, los cuadros de mando en forma de diagramas y gráficos son el epítome de la tecnología. Gracias a ciertos nodos, ahora puedes crear tú mismo esta sensación con NodeRed.

Porque una vez que has conseguido que tu SmartHome recoja todo tipo de datos sobre tus cuatro paredes, es natural que quieras presentarlos. Pero, ¿cómo? Al fin y al cabo, no puedes meter estos datos en un álbum de fotos como las últimas fotos de las vacaciones.

Una forma sencilla y también informativa y decorativa es presentar los datos disponibles a través del nodo dashboard para NodeRed. Además de varios elementos de visualización, también ofrece la posibilidad de interactuar con su sistema SmartHome. Puede establecer valores, accionar interruptores virtuales, activar acciones y supervisar su estado al mismo tiempo.

Puede encontrar una visión general de las distintas funciones del Nodo del Cuadro de Mando en el siguiente artículo


Requisitos

Artículos útiles:
Para que pueda instalar nuevos nodos, por supuesto, NodeRed ya debería estar instalado.
En los siguientes artículos se describe cómo preparar una RaspberryPi y luego instalar NodeRed en ella.

Los siguientes tres artículos describen lo que se debe hacer para preparar la RaspberryPi:
RaspberryPi: ¡configuración para nerdiys!
RaspberryPi – ¡La primera configuración!
RaspberryPi: controle el RaspberryPi a través de SSH

NodeRed: instalación de NodeRed en RaspberryPi
NodeRed – Instalar nuevos nodos

Herramienta requerida:
-No-

Material requerido:

En la siguiente lista encontrará todas las piezas que necesita para implementar este artículo.


Inicie sesión en la interfaz de configuración de NodeRed

Antes de que pueda editar su configuración de NodeRed, debe, si está activado, primero iniciar sesión en la interfaz de configuración de NodeRed.

Vista del cuadro de diálogo de inicio de sesión. Aquí debe ingresar los datos de inicio de sesión que especificó durante la configuración del inicio de sesión. Puedes encontrar información al respecto en el artículo NodeRed: configurar el inicio de sesión del usuario.

Instalar el nodo del tablero

Para poder utilizar los nodos del cuadro de mandos, es necesario crear el Nodo
nodo-rojo-tablero
instalar.
Cómo se instala su nodo en el artículo NodeRed – Instalar nuevos nodos descrito.
 
Vista durante la instalación del nodo "node-red-dashboard".

Resumen de los nodos de entrada y salida disponibles

Al instalar los nodos del cuadro de mandos, recibirá todo un paquete de nodos adicionales adecuados para mostrar e introducir diversos valores. Estos se muestran como de costumbre en la paleta de nodos situada a la izquierda del menú de configuración. A continuación encontrará información detallada sobre cada uno de los nodos.

Vista de los nodos del tablero en la paleta Nodos.

Nodo de botones y posicionamiento de los elementos en el salpicadero

El primer nodo, y el más sencillo, es el "nodo botón". Puedes utilizarlo para colocar un botón en tu tablero. Esto funciona como un botón en el mundo real. Cuando se pulsa, envía un valor ajustable y un tema ajustable al nodo vinculado.

Los nodos de botón, por ejemplo, pueden utilizarse muy bien para desencadenar acciones. Por ejemplo, puede encender y apagar lámparas.

Sin embargo, antes de poder utilizar el nodo de botón, primero debe posicionarse en la rejilla de diseño del cuadro de mandos.

Además de las funciones de los nodos propiamente dichos, también puede configurarse para cada uno de ellos el posicionamiento en el diseño del cuadro de mandos posterior. El cuadro de mandos es, por tanto, un sitio web independiente que puede gestionarse de forma centralizada a través de la configuración del cuadro de mandos.

Al instalar los nodos del cuadro de mandos, se ha añadido una nueva pestaña al área de configuración de la izquierda. Puede reconocerla por el icono basado en un gráfico de barras. Haz clic en él para abrir la configuración básica del cuadro de mandos.

Aquí puede ver las diferentes pestañas "Diseño", "Tema" y "Sitio" en la zona superior. A la derecha hay una flecha que apunta hacia arriba y a la derecha. Si hace clic en ella, se le redirigirá al sitio web del panel de control.

Accede a la página del panel haciendo clic en el símbolo marcado con el puntero del mouse en la pestaña del panel.

También puede seleccionar directamente la página del panel de control. Para ello, simplemente añada "/ui/" a la dirección de su página de configuración de NodeRed. Por ejemplo, si la dirección de su página de configuración de NodeRed es
https://192.168.172.5:1880
entonces la dirección es a su tablero
https://192.168.172.5:1880/ui/

En primer lugar, se trata del diseño. Puede utilizarla para colocar los respectivos elementos de entrada y salida (nodos del cuadro de mandos) casi libremente en el cuadro de mandos. El cuadro de mandos ofrece la posibilidad de resumir los nodos individuales del cuadro de mandos en grupos. El orden de visualización de estos nodos puede establecerse en el cuadro de mandos. Además, estos nodos agrupados pueden o deben asignarse a una "pestaña" específica.

Además de la pestaña "Casa", también se pueden crear otras pestañas. Esto resulta útil, por ejemplo, para separar virtualmente los elementos de las distintas habitaciones de un sistema doméstico inteligente. Por ejemplo, puedes resumir todos los sensores y actuadores del salón en una pestaña llamada "Salón". Esto facilita mantener una visión de conjunto y aporta estructura al número de nodos, a menudo en rápido aumento.

Esto es también lo que puede ver y establecer en la pestaña "Diseño" de la configuración del cuadro de mandos. Allí se muestran todas las pestañas y los grupos asociados. En la siguiente captura de pantalla

Área "Diseño" de la configuración del panel de control. Aquí puede ver algunas de las pestañas individuales (en este ejemplo "Inicio", "Datos Raspi", "Configuración" y "Estado de Tasmota"). También se pueden reconocer los grupos. Por ejemplo, la pestaña "Datos Raspi" incluye los grupos "1" y "2". A continuación, cada grupo contiene los elementos reales del cuadro de mandos que se le han asignado. Puede hacerlos visibles haciendo clic en la pequeña flecha que apunta a la derecha.
Vista de la pestaña "Tema" de la configuración del salpicadero. Aquí puede establecer el estilo, el color base y el tipo de letra utilizados en el salpicadero.
En la pestaña "Sitio" de la configuración del salpicadero, también puede establecer el título de la página del salpicadero y otras opciones.

Otro ejemplo:

En esta vista general del diseño, puede ver que hay dos pestañas llamadas "Configuración" y "Inicio". En la pestaña "Configuración", por ejemplo, encontrará varios grupos como "Servidor", "RasPi" o "Estado". En la pestaña "Inicio", por otro lado, sólo encontrará el grupo "Predeterminado". En el grupo ampliado "Servidor", también puede ver cómo están dispuestos los elementos individuales como "Reiniciar servidor" o "Apagar pantalla".
Ahora encontrará estas pestañas y grupos en la vista del panel de control. En la vista mostrada, se encuentra en la pestaña "Configuración". El primer marco rojo marca el grupo "Servidor". El grupo "Banda LED" está marcado con el segundo marco rojo. La flecha roja grande en el lado izquierdo también marca el símbolo en el que debe hacer clic para cambiar a otra pestaña.
Si pulsa sobre este símbolo, aparecerán todas las pestañas disponibles, en este caso "Configuración" e "Inicio".

El nodo de botón

El nodo botón es uno de los nodos más sencillos. Puede utilizarse para construir botones virtuales. Para ello, arrastre el nodo botón desde la paleta de nodos al área de configuración de NodeRed. Si ahora hace doble clic sobre el nodo, podrá configurar las siguientes opciones.

El "Grupo" define el grupo y la pestaña en los que se sitúa el botón. En este ejemplo, el botón se sitúa en la pestaña "TestTab" del grupo "TestGroup". Con "Tamaño" puede definir el tamaño del botón. Puede ver un ejemplo de diferentes tamaños más adelante en el artículo. También puede utilizar el ajuste "Icono" para mostrar iconos en el botón. Para obtener una selección de los iconos disponibles, basta con hacer clic en el enlace "Icono Material Design" de la barra de información de la derecha. "Etiqueta" especifica el texto del botón. "Color" y "Fondo" permiten definir el color del botón y el texto del botón. La configuración de "Carga útil" y "Tema" define qué valor (carga útil) se envía a través de qué tema en cuanto se pulsa el botón. Por último, una función muy importante: marcando o desmarcando la casilla "Si el mensaje llega a la entrada, pasarlo a la salida", puede activar o desactivar el reenvío de un mensaje recibido en la entrada del nodo del botón a la salida. Con "Nombre" puede establecer el nombre del nodo para la configuración de NodeRed de la forma habitual.
Esta es la vista que se obtiene al hacer clic en el pequeño lápiz (Editar) situado junto a la sección Grupo en la ventana anterior. Esto le lleva a la ventana en la que el grupo y la pestaña se pueden asignar al nodo botón (o a cualquier otro nodo del cuadro de mandos). En principio, en esta ventana se editan las propiedades de todo el grupo. Se puede configurar la pestaña asignada (en "Pestaña") y la anchura del grupo (en "Anchura"). También puede activar o desactivar la visualización del nombre del grupo y establecer si debe ser posible "colapsar" el grupo, es decir, ocultar el contenido.
En la vista general del cuadro de mandos, todas las pestañas que contiene se muestran en una vista de página desplegable. Puede pasar de una a otra haciendo clic en la pestaña correspondiente.
La vista de los distintos botones grandes del salpicadero. 

nodo desplegable

El nodo desplegable es un nodo con el que puede crear una lista de selección en el Cuadro de Mando. Por ejemplo, puede crear una lista de temperaturas disponibles para un radiador. Sin embargo, también puede definir todo tipo de otras entradas con diferentes nombres y los valores correspondientes.

Para ello, arrastre un nodo desplegable de la paleta Nodo a la interfaz de configuración Nodo Rojo y haga doble clic sobre él.

Aparece entonces la ventana que se muestra. Al igual que en los demás nodos, aquí se pueden ajustar el grupo y la pestaña asignados, así como el tamaño. Como antes, también puede configurar la "Etiqueta". En este caso, "Etiqueta" significa el nombre para la lista desplegable en el panel de control real. En "Marcador de posición" puede configurar un marcador de posición que se mostrará mientras no se haya seleccionado ningún valor en la lista desplegable. Las cosas sólo se ponen realmente interesantes en la sección "Opciones". Aquí puede configurar las opciones disponibles para su lista desplegable. Para ello, se establece el nombre de la entrada correspondiente en la columna de la derecha y el valor de la entrada correspondiente en la columna de la izquierda. Puede añadir más entradas haciendo clic en "+opción". También puede cambiar el orden de las entradas utilizando las tres pequeñas líneas horizontales situadas a la izquierda de cada entrada. Para ello, haga clic en las líneas de la entrada que desee desplazar y mantenga pulsado el botón del ratón. Ahora puede reposicionar la entrada seleccionada moviendo el puntero del ratón hacia arriba o hacia abajo. Las demás funciones mostradas se comportan exactamente igual que las ya descritas para el "Botón".
Vista de la lista desplegable configurada en el tablero.
Si ahora hace clic en el campo de selección, podrá elegir entre las distintas entradas previamente configuradas.

cambiar de nodo

El nodo de conmutación corresponde en principio a un conmutador virtual. Puede utilizarse para enviar señales de conmutación o para indicar estados de conmutación.

Para ello, arrastre el nodo de conmutación desde la paleta Nodo a la interfaz de configuración Nodo Rojo y haga doble clic sobre él.

Aparece entonces la ventana que se muestra. Al igual que en los demás nodos, aquí se pueden ajustar el grupo y la pestaña asignados, así como el tamaño. Como antes, también puede ajustar la "Etiqueta". En "Icono" puede seleccionar un icono que puede mostrar delante de la etiqueta o sin etiqueta como símbolo de conmutación. El resto de propiedades como "Tema" y "Nombre" son las mismas que para los nodos anteriores. La única diferencia aquí es que puede introducir diferentes cargas útiles para los estados de conmutación "Activado" y "Desactivado". Esto también tiene sentido, ya que de otro modo no podría distinguir entre los estados de conexión y desconexión.
Vista del interruptor encendido.
Vista del interruptor apagado.

nodo deslizante

El nodo deslizante es ideal para establecer números dentro de un cierto rango. Un buen caso de uso, por ejemplo, es usarlo como atenuador de una lámpara.

Para utilizar el nodo deslizante, primero debe arrastrarlo desde la paleta Nodo hasta la interfaz de configuración Nodo Rojo y abrir su menú de configuración haciendo doble clic sobre él.

Al igual que con los demás nodos, la ventana de configuración aparece de nuevo tras hacer doble clic. Como antes, aquí se pueden ajustar el grupo y la pestaña asignados, así como el tamaño. Como antes, también se puede configurar la "Etiqueta". En la sección "Rango", puede establecer qué rango de valores debe cubrir el control deslizante. Este rango va desde "min"=el valor mínimo hasta max=el valor máximo. El incremento puede establecerse mediante "paso". El resto de propiedades como "Tema" y "Nombre" son las mismas que para los nodos anteriores. La única diferencia aquí es que la carga útil viene determinada, por supuesto, por el "valor deslizante" actual.
Vista del control deslizante en el tablero.

nodo numérico

El nodo numérico es otra forma de pasar valores numéricos a Nodo-Rojo para su procesamiento.

Para configurarlos, arrastre un nodo numérico de la paleta Nodo a la interfaz de configuración Nodo Rojo.

Las emocionantes -porque difieren de las de los otros nodos- opciones de configuración de este nodo son las dos propiedades "Formato de valor" y "Rango". Al igual que con el nodo deslizante, puede utilizar "Rango" para definir el rango numérico posible y establecer el incremento. "Formato del valor" le permite dar formato a la visualización del valor. Aquí, por ejemplo, puede añadir un signo de unidad después de "{{valor}}" para que el cuadro de mandos muestre posteriormente no sólo el valor numérico, sino un valor numérico más una unidad. Por ejemplo, también puede etiquetar un valor de temperatura con "°C" como temperatura.

Nodo de entrada de texto

El nodo de entrada de texto es -como su nombre indica- un nodo para habilitar la entrada de texto.

Además de las opciones de configuración habituales, como "Grupo", "Tamaño", "Etiqueta", "Tema" y "Nombre", para este nodo pueden establecerse el "Modo" y un "Retardo". El "Retraso" se utiliza para establecer el tiempo que se espera después de la última entrada de caracteres hasta que los caracteres introducidos en el campo de texto se envían al siguiente nodo.
En "Modo" puede seleccionar qué datos deben introducirse en el campo correspondiente. Puede elegir entre las distintas opciones mostradas y personalizar el campo de entrada perfectamente para la aplicación correspondiente.
Vista (de aspecto relativamente simple) del nodo de texto en la vista del tablero.

Nodo selector de fecha

El date-picker-node básicamente hace exactamente lo que su nombre sugiere: Con él puedes seleccionar una fecha determinada y pasársela a NodeRed para su posterior procesamiento.

No se puede configurar ninguna otra opción (aparte de las habituales) para este nodo. Tras introducir una fecha en el cuadro de mandos, se reenvía al flujo conectado mediante carga útil.
Vista del selector de fecha en el tablero.

Nodo selector de color

El nodo selector de color es ideal para ajustar el color de una lámpara RGB conectada. Por supuesto, también puedes utilizarlo para transferir colores a Nodo-Rojo para su posterior procesamiento en todos los demás casos.

Además de las "opciones de configuración habituales", el nodo del selector de color tiene la opción de configuración "Formato" y también varias casillas de verificación (casillas de verificación) que puede activar o desactivar. La propiedad "Formato" permite establecer el formato de la salida de color. Puede elegir entre XXXXXXX y XX. Activando la propiedad "Mostrar deslizador de tonalidad" o "Mostrar deslizador de luminosidad", también puede mostrar un deslizador para ajustar el valor de TONO o de luminosidad. También puede configurar la visualización permanente de diferentes "variantes del selector" mediante las casillas de verificación "Mostrar siempre muestra", "Mostrar siempre selector" y "Mostrar siempre campo de valor". Solo tienes que probar qué vista te gusta más 🙂 .
Tu selector de color en el panel de control podría tener este aspecto.

nodo de formulario

Con el nodo formulario tiene la posibilidad de configurar un formulario típico. Esto le permite combinar diferentes opciones de entrada. Esto es perfecto, por ejemplo, para configurar un formulario para introducir una dirección o similar.

Además de las opciones de configuración habituales, aquí puede configurar los elementos del formulario que se muestran en el área "Elementos del formulario". Puede añadir campos de texto para distintos contenidos, como texto o números. También puede almacenar contenido estándar o especificar si se trata de un campo obligatorio o no. Por último, pero no menos importante, también puede añadir su propio texto a los botones de confirmación y cancelación.
Vista del formulario de prueba en el tablero.

Nodo de salida de texto

El nodo de salida de texto es ideal para mostrar simplemente texto. Por ejemplo, puede mostrar valores medidos de sensores. El usuario no tiene posibilidad de editar el texto mostrado.

Como resultado, se pueden realizar relativamente pocos ajustes en las propiedades del nodo de salida de texto. Además del "Formato de valor", en el que puede ampliar el aspecto de la salida de texto con información adicional como caracteres unitarios, también tiene la opción de editar la disposición de la salida de texto. Puede elegir entre cinco disposiciones diferentes de la etiqueta y el texto. Pruebe cuál se adapta mejor a su presentación.
Vista del nodo de salida de texto en la vista del tablero.

nodo de calibre

El nodo calibrador es perfecto para visualizar los valores medidos. De este modo, los valores medidos pueden clasificarse visualmente de forma directa. También se pueden definir intervalos numéricos en los que cambia el color de la escala visualizada. Por ejemplo, puede mostrar las temperaturas altas/peligrosas en rojo. En cambio, las temperaturas dentro del intervalo normal se muestran con una escala verde. Esto permite hacerse una idea rápida de si las lecturas mostradas son correctas o no. Además, tiene un aspecto muy chulo (tipo Star Trek) 🙂 .

Además de las opciones de configuración habituales, tiene la posibilidad de configurar el "Tipo", el "Formato de valor", las "Unidades", el "Rango", los "Degradados de color" y los "Sectores" para el nodo del calibrador. Ya está familiarizado con "Etiqueta" y "Formato de valor" de los nodos anteriores. La propiedad "Unidades" le permite especificar de nuevo la unidad mostrada. Puede utilizar la propiedad "Rango" para definir el rango de valores a mostrar. Por ejemplo, si desea visualizar un valor de humedad, este rango debe ir de 0 a 100%. Para un rango de temperatura exterior, se debe seleccionar un rango de temperatura que normalmente no se supere o se esté por debajo. Por ejemplo, de -20°C a 45°C. Ahora puede utilizar la propiedad "Gradiente de color" para definir los colores que se muestran para que coincidan con el valor medido. En este ejemplo, el color verde se muestra para todos los valores medidos bajos, el color amarillo para todos los valores medidos medios y el color rojo para todos los valores medidos altos. Normalmente, los puntos en los que un color se funde con el siguiente están distribuidos uniformemente. Sin embargo, si desea una escala diferente o incluso omitir el color central, puede utilizar el ajuste "Sectores" para especificar dónde deben cambiar los colores.
En "Tipo" también puede seleccionar qué tipo de indicador desea que se muestre. Aquí puedes ver ejemplos de los tipos disponibles.
Vista del manómetro tipo "Gauge" en el cuadro de mandos.
Vista del manómetro tipo "Donut" en el cuadro de mandos.
Vista del indicador tipo "Brújula" en el salpicadero.
Vista del indicador de tipo "Nivel" en el cuadro de mandos.

nodo gráfico

El nodo gráfico es adecuado para visualizar curvas de valores. Por ejemplo, puede guardar y mostrar el curso de una temperatura durante un periodo de tiempo determinado. Por desgracia, los valores sólo se guardan temporalmente. Esto significa que si su servidor NodeRed se bloquea o se reinicia, todos los valores mostrados anteriormente se perderán.

En comparación con los nodos anteriores, este nodo ofrece algunas opciones de configuración más. Aquí puede seleccionar primero en "Tipo" para establecer el tipo de diagrama. Puede resaltar los valores medidos individuales en cada representación colocando una marca debajo de "ampliar punto" está ajustado. La resolución o la duración del curso de los datos en el eje X (el eje horizontal que va de izquierda a derecha) puede ajustarse con el parámetro "Etiqueta del eje X" Configurar. Aquí puede especificar durante cuánto tiempo o cuántas lecturas deben mostrarse. Por ejemplo, puede seleccionar que se muestren todos los valores medidos de las últimas dos horas o los últimos 500 valores medidos. Además, con "Etiqueta del eje X" luego configure también el etiquetado del eje X. Con "Eje Y" sólo se puede ajustar el rango de valores visualizados del eje Y. Si, por ejemplo, sólo desea ver el rango de valores de 0° a 30°C para una curva de temperatura, debe introducirlo aquí. Con ayuda de la opción "Leyenda" también puede configurar una leyenda, lo que resulta especialmente práctico cuando se visualizan varias curvas. De este modo, puede mostrar una descripción para cada color de curva. La opción "Interpolar" determina cómo se vinculan entre sí los distintos valores medidos. Por último, pero no menos importante, puede utilizar "Colores de la serie" para establecer los colores utilizados para las curvas y "Etiqueta en blanco" para establecer el texto que se mostrará si no hay valores medidos disponibles para la curva.
Vista del nodo del gráfico en el tablero.

nodo de salida de audio

El Audio-Out-Node es otro de estos nodos que hace exactamente lo que su nombre sugiere. Da salida al texto como lenguaje hablado.

Para ello, puedes seleccionar la "Voz TTS" (=voz "Text-To-Speech") en las propiedades del nodo. Esto te permite personalizar la salida de voz un poco más a tu estilo. En última instancia, este nodo emitirá cualquier texto que le envíes por voz. Sin embargo, es importante que esta voz no se emita localmente en el servidor del Nodo Rojo, sino en el navegador del usuario que acaba de abrir el panel. Si no hay ninguna ventana del navegador abierta en el momento de enviar el mensaje de voz, éste no se emitirá. Sin embargo, puede realizar una salida local en el servidor NodeRed a través de altavoces conectados con el programa "Espeak". Encontrará información al respecto en el artículo RaspberryPi - Instalar salida de voz con eSpeak.

nodo de notificación

El nodo de notificaciones permite mostrar notificaciones en el panel de control abierto. Estas pueden mostrarse como información en el borde o centradas en el centro de la pantalla, incluyendo un botón de confirmación.

En la ventana de configuración del nodo de notificación, puede establecer la posición del campo de notificación en "Diseño". Entre otras cosas, existe la opción "Diálogo Aceptar/Cancelar", que permite dotar a la notificación de dos botones. Estos deben ser confirmados por el usuario. De esta forma puede estar seguro de que el usuario ha visto la notificación. Para ello, puede especificar en "Etiqueta de acción predeterminada" y "Etiqueta de acción secundaria" lo que debe aparecer en los botones "Confirmar" y "Cancelar".
Además de la variante de notificación que el usuario debe confirmar, también existe la opción de mostrar la notificación sólo como una sugerencia. Para ello, seleccione, por ejemplo, "Arriba a la derecha" en "Diseño". Si a continuación envía una notificación al nodo, ésta se mostrará en la esquina superior derecha y volverá a desaparecer automáticamente al cabo de unos segundos.
Vista de una notificación que debe confirmarse para que vuelva a desaparecer.
Vista de una notificación en la esquina superior derecha.

nodo de control de la interfaz de usuario

Puede utilizar el nodo de control de interfaz de usuario para controlar el aspecto y el comportamiento de la vista del cuadro de mandos. Por ejemplo, puede utilizarlo para cambiar la pestaña mostrada y "expandir y contraer" grupos. También puede utilizar este nodo para reaccionar a si un usuario ha abierto o cerrado el cuadro de mandos.

Para este nodo, sólo se puede configurar el nombre en la ventana de ajustes. Todos los parámetros ajustables o la información disponible también se resumen en la barra de información lateral.

nodo de plantilla

El nodo de plantilla es un nodo muy versátil. Puede utilizarlo para integrar su propio código HTML en el cuadro de mandos. Éste puede reaccionar individualmente a los mensajes recibidos de los nodos conectados y también enviar mensajes por sí mismo.

Utilizando el nodo de plantilla, puede añadir contenido a la cabecera de la página...
...o añadir nodos a grupos que hayas formateado con tu propio código HTML.

thztjz

Con la ayuda de este nodo, puede, por ejemplo, insertar enlaces a cualquier página del Panel de Control. En este ejemplo, el enlace a la vista MagicMirror se genera y se muestra en el Dashboard.
Aparecerá un enlace en el panel de control que le llevará a la vista MagicMirror.

Más ejemplos

A continuación encontrarás una pequeña lista de artículos en los que también uso los nodos del salpicadero. Tal vez haya algo para ti también 🙂 .


Información adicional

https://flows.nodered.org/node/node-red-dashboard

Diviértete con el proyecto.

Espero que todo te haya funcionado como se describe. Si no es así, o si tiene alguna pregunta o sugerencia, hágamelo saber en los comentarios. Si es necesario, lo añadiré al artículo.
Las ideas para nuevos proyectos siempre son bienvenidas. 🙂

PS Muchos de estos proyectos, especialmente los proyectos de hardware, cuestan mucho tiempo y dinero. Por supuesto que hago esto porque lo disfruto, pero si crees que es genial que comparta la información contigo, me encantaría hacer una pequeña donación al fondo del café. 🙂

Cómprame un café en ko-fi.com       

7s comentarios

  1. Hola, gran artículo. Una pregunta sobre esto: ¿Cómo logra organizar los elementos uno al lado del otro dentro de un grupo, como el botón de encendido y apagado en su grupo de tiras LED?

    Atentamente
    Andrés

    1. Hola Andreas,
      gracias 🙂
      En realidad, esto debería ocurrir automáticamente en cuanto ambos elementos encajen uno al lado del otro en el grupo. Para ello, es necesario ajustar la anchura de los elementos (en el caso de la tira de LED, los botones) a 3, por ejemplo, para que quepan en el grupo (aquí "tira de LED") con una anchura de 6 uno al lado del otro 🙂.
      Por favor, hágamelo saber si funcionó. 🙂
      Atentamente
      Fab

  2. Buen día,

    excelente articulo, me ayudo mucho. Todavía tengo una pregunta general sobre un tablero de Node-Red.

    Construí uno y leí datos de un sensor de temperatura a través de Node-Red. Conecté esto al RPi. (Node-red se ejecuta en mi RPi).

    También se puede acceder fácilmente a este tablero a través del navegador que uso. Pero solo si estoy en la misma red que la Raspberry Pi.
    No tengo acceso al tablero desde la red de Internet de mi teléfono inteligente.

    ¿Sabes cómo puedo acceder también al panel de control desde la red "pública", o desde conexiones a Internet distintas de mi W-Lan en casa?

    Gracias y un saludo, Lennard.

    1. Hola Lennard,
      Gracias. 🙂
      La (única opción razonablemente) segura es conectarse a su red doméstica a través de una VPN y así acceder a la RaspberryPi en su red.
      Mientras tanto, muchos enrutadores (por ejemplo, el Fritzbox) se pueden configurar como servidores VPN.
      Desafortunadamente no tengo un tutorial listo para esto, pero probablemente. encuentras algo al respecto? 🙂
      Atentamente
      Fabian

  3. Hola,
    He estado trabajando con Node-Red en Raspy-400 durante unos días. Un convertidor AD (ADS1115) también me da resultados limpios. Me gustaría cambiar el tamaño de fuente para los nodos del tablero. es posible? Algunos códigos están publicados en otros sitios, pero no funcionan. ¿Tiene un ejemplo para mí (por ejemplo, para calibre) cómo hacer eso?

    Me gustaría darle las gracias de antemano, solo por el artículo del tablero.
    Atentamente
    H.Harle

    1. Hola Horst,
      Desgraciadamente no tengo un ejemplo, pero quizás un "empujoncito" en la dirección correcta. La descripción de nodo para el nodo de calibre contiene la siguiente nota:

      Si se especifica una Clase, se agregará a la tarjeta principal. De esta manera, puede diseñar la tarjeta y los elementos dentro de ella con CSS personalizado. La clase se puede configurar en tiempo de ejecución configurando una propiedad de cadena msg.className.

      Eso significa que en realidad debería poder editar la apariencia de los componentes individuales del nodo de calibre con código CSS.
      Espero que esto te ayude más. 🙂
      Atentamente
      Fab

Kommentar hinterlassen

Tu dirección de correo electrónico no será publicada. Erforderliche Felder sind mit * markiert

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.