{"id":1830,"date":"2019-04-29T13:19:07","date_gmt":"2019-04-29T11:19:07","guid":{"rendered":"https:\/\/www.nerdiy.de\/?p=1830"},"modified":"2021-12-18T17:32:07","modified_gmt":"2021-12-18T16:32:07","slug":"nodered-create-a-user-interface-with-dashboard-nodes","status":"publish","type":"post","link":"https:\/\/nerdiy.de\/es\/nodered-create-a-user-interface-with-dashboard-nodes\/","title":{"rendered":"HowTo: Node Red - Crear una interfaz de usuario con nodos de panel"},"content":{"rendered":"

No s\u00e9 si los cuadros de mando son EL (\u00fanico) medio de hacer latir m\u00e1s r\u00e1pido el coraz\u00f3n de un empoll\u00f3n, pero desde luego son un medio de hacer latir m\u00e1s r\u00e1pido el coraz\u00f3n de un empoll\u00f3n. Para los que crecieron con Star Trek y similares, los cuadros de mando en forma de diagramas y gr\u00e1ficos son el ep\u00edtome de la tecnolog\u00eda. Gracias a ciertos nodos, ahora puedes crear t\u00fa mismo esta sensaci\u00f3n con NodeRed.<\/p>\n\n\n\n

Porque una vez que has conseguido que tu SmartHome recoja todo tipo de datos sobre tus cuatro paredes, es natural que quieras presentarlos. Pero, \u00bfc\u00f3mo? Al fin y al cabo, no puedes meter estos datos en un \u00e1lbum de fotos como las \u00faltimas fotos de las vacaciones.<\/p>\n\n\n\n

Una forma sencilla y tambi\u00e9n informativa y decorativa es presentar los datos disponibles a trav\u00e9s del nodo dashboard para NodeRed. Adem\u00e1s de varios elementos de visualizaci\u00f3n, tambi\u00e9n ofrece la posibilidad de interactuar con su sistema SmartHome. Puede establecer valores, accionar interruptores virtuales, activar acciones y supervisar su estado al mismo tiempo.<\/p>\n\n\n\n

Puede encontrar una visi\u00f3n general de las distintas funciones del Nodo del Cuadro de Mando en el siguiente art\u00edculo<\/p>\n\n\n\n

\n\n\n\n

Requisitos<\/h2>\n\n\n\n

Art\u00edculos \u00fatiles:
<\/strong>Para que pueda instalar nuevos nodos, por supuesto, NodeRed ya deber\u00eda estar instalado.
En los siguientes art\u00edculos se describe c\u00f3mo preparar una RaspberryPi y luego instalar NodeRed en ella.<\/p>\n\n\n\n

Los siguientes tres art\u00edculos describen lo que se debe hacer para preparar la RaspberryPi:
RaspberryPi: \u00a1configuraci\u00f3n para nerdiys!<\/a><\/strong><\/em>
RaspberryPi \u2013 \u00a1La primera configuraci\u00f3n!
<\/a>RaspberryPi: controle el RaspberryPi a trav\u00e9s de SSH<\/a><\/strong><\/em>
NodeRed: instalaci\u00f3n de NodeRed en RaspberryPi<\/a>
NodeRed \u2013 Instalar nuevos nodos<\/a><\/strong><\/em><\/p>\n\n\n\n

Herramienta requerida:
<\/strong>-No-<\/em><\/p>\n\n\n\n

Material requerido:<\/strong><\/p>\n\n\n\n

En la siguiente lista encontrar\u00e1 todas las piezas que necesita para implementar este art\u00edculo.<\/strong><\/p>\n\n\n\n

\n \n \n \n \n \n \n \n \n <\/colgroup>\n <\/table>\n \n \n \n<\/div>\n\n\n\n\n
\n\n\n\n

Inicie sesi\u00f3n en la interfaz de configuraci\u00f3n de NodeRed<\/h2>\r\n

Antes de que pueda editar su configuraci\u00f3n de NodeRed, debe, si est\u00e1 activado, primero iniciar sesi\u00f3n en la interfaz de configuraci\u00f3n de NodeRed.<\/p>\r\n

\"\"<\/a>
Vista del cuadro de di\u00e1logo de inicio de sesi\u00f3n. Aqu\u00ed debe ingresar los datos de inicio de sesi\u00f3n que especific\u00f3 durante la configuraci\u00f3n del inicio de sesi\u00f3n. Puedes encontrar informaci\u00f3n al respecto en el art\u00edculo NodeRed: configurar el inicio de sesi\u00f3n del usuario<\/strong><\/em><\/a>.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n

Instalar el nodo del tablero<\/h2>\n\n\n\n
Para poder utilizar los nodos del cuadro de mandos, es necesario crear el Nodo<\/div>\n\n\n\n
\n
nodo-rojo-tablero<\/pre>\n<\/div>\n\n\n\n
instalar.<\/div>\n\n\n\n
C\u00f3mo se instala su nodo en el art\u00edculo NodeRed \u2013 Instalar nuevos nodos<\/em><\/a> <\/strong>descrito.<\/div>\n\n\n\n
 <\/div>\n\n\n\n
\"\"<\/a>
Vista durante la instalaci\u00f3n del nodo \"node-red-dashboard\".<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Resumen de los nodos de entrada y salida disponibles<\/h2>\n\n\n\n
Al instalar los nodos del cuadro de mandos, recibir\u00e1 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\u00fa de configuraci\u00f3n. A continuaci\u00f3n encontrar\u00e1 informaci\u00f3n detallada sobre cada uno de los nodos.<\/p>\n\n\n\n
\"\"<\/a>
Vista de los nodos del tablero en la paleta Nodos.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Nodo de botones y posicionamiento de los elementos en el salpicadero<\/h2>\n\n\n\n
El primer nodo y el m\u00e1s sencillo es el \"nodo bot\u00f3n\". Con su ayuda puedes colocar un bot\u00f3n en tu tablero. Esto funciona como un bot\u00f3n en el mundo real. Si se pulsa, env\u00eda un valor ajustable y un tema ajustable al nodo vinculado.<\/p>\n\n\n\n
Los nodos de bot\u00f3n, por ejemplo, pueden utilizarse muy bien para desencadenar acciones. Por ejemplo, puede encender y apagar l\u00e1mparas.<\/p>\n\n\n\n
Sin embargo, antes de poder utilizar el nodo de bot\u00f3n, primero debe posicionarse en la rejilla de dise\u00f1o del cuadro de mandos.<\/p>\n\n\n\n
Adem\u00e1s de las funciones de los nodos propiamente dichos, tambi\u00e9n puede configurarse para cada uno de ellos el posicionamiento en el dise\u00f1o del cuadro de mandos posterior. El cuadro de mandos es, por tanto, un sitio web independiente que puede gestionarse de forma centralizada a trav\u00e9s de la configuraci\u00f3n del cuadro de mandos.<\/p>\n\n\n\n
Al instalar los nodos del cuadro de mandos, se ha a\u00f1adido una nueva pesta\u00f1a al \u00e1rea de configuraci\u00f3n de la izquierda. Puede reconocerla por el icono basado en un gr\u00e1fico de barras. Haz clic en \u00e9l para abrir la configuraci\u00f3n b\u00e1sica del cuadro de mandos.<\/p>\n\n\n\n
Aqu\u00ed puede ver las distintas pesta\u00f1as \"Dise\u00f1o\", \"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 esta flecha, ser\u00e1 redirigido a la p\u00e1gina web del panel de control.<\/p>\n\n\n\n
\"\"<\/a>
Accede a la p\u00e1gina del panel haciendo clic en el s\u00edmbolo marcado con el puntero del mouse en la pesta\u00f1a del panel.<\/figcaption><\/figure>\n\n\n\n
Tambi\u00e9n puede ir directamente a la p\u00e1gina del panel de control. Para ello, simplemente a\u00f1ada un \"\/ui\/\" a la direcci\u00f3n de su p\u00e1gina de configuraci\u00f3n de NodeRed. Por ejemplo, si la direcci\u00f3n de su p\u00e1gina de configuraci\u00f3n de NodeRed es
https:\/\/192.168.172.5:1880<\/strong>
entonces la direcci\u00f3n es a su tablero
https:\/\/192.168.172.5:1880\/ui\/<\/strong><\/p>\n\n\n\n
En primer lugar, se trata de la divisi\u00f3n del dise\u00f1o. Gracias a ella, puede 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 combinar nodos individuales del cuadro de mandos en grupos. A continuaci\u00f3n, se puede establecer el orden de visualizaci\u00f3n de estos nodos en el cuadro de mandos. Adem\u00e1s, estos nodos agrupados pueden o deben asignarse a una \"pesta\u00f1a\" espec\u00edfica.<\/p>\n\n\n\n
Adem\u00e1s de la pesta\u00f1a \"Casa\", se pueden crear otras pesta\u00f1as. Esto resulta pr\u00e1ctico, por ejemplo, para separar virtualmente los elementos de las distintas habitaciones de un sistema Smart Home. Por ejemplo, se pueden combinar todos los sensores y actuadores del sal\u00f3n en una pesta\u00f1a llamada \"Sal\u00f3n\". Esto facilita la visi\u00f3n de conjunto y aporta estructura al n\u00famero de nodos, a menudo en r\u00e1pido aumento.<\/p>\n\n\n\n
Esto es tambi\u00e9n lo que puede ver y establecer en la pesta\u00f1a \"Dise\u00f1o\" de la configuraci\u00f3n del cuadro de mandos. All\u00ed se muestran todas las pesta\u00f1as y los grupos asociados. En la siguiente captura de pantalla<\/p>\n\n\n\n
\"\"<\/a>
\u00c1rea \"Dise\u00f1o\" de la configuraci\u00f3n del Dashboard. Aqu\u00ed puedes ver parte de las pesta\u00f1as individuales (en este ejemplo \"Home\", \"Raspi data\", \"Settings\" y \"Tasmota status\"). Tambi\u00e9n puede ver los grupos. Por ejemplo, la pesta\u00f1a \"Datos Raspi\" incluye los grupos \"1\" y \"2\". A continuaci\u00f3n, cada grupo contiene los elementos reales del Cuadro de mandos que se le han asignado. Puede hacerlos visibles haciendo clic en la peque\u00f1a flecha que apunta a la derecha.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Vista de la pesta\u00f1a \"Tema\" de la configuraci\u00f3n del salpicadero. Aqu\u00ed puede establecer el estilo, el color base y el tipo de letra utilizados en el salpicadero.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
En la pesta\u00f1a \"Sitio\" de la configuraci\u00f3n del salpicadero, tambi\u00e9n puede establecer el t\u00edtulo de la p\u00e1gina del salpicadero y otras opciones.<\/figcaption><\/figure><\/div>\n\n\n\n
Otro ejemplo:<\/p>\n\n\n\n
\"\"<\/a>
En esta vista general del dise\u00f1o puede ver que hay dos pesta\u00f1as llamadas \"Configuraci\u00f3n\" y \"Inicio\". En la pesta\u00f1a \"Configuraci\u00f3n\", por ejemplo, encontrar\u00e1 los distintos grupos como \"Servidor\", RasPi\" o \"Estado\". En la pesta\u00f1a \"Inicio\", por otro lado, s\u00f3lo encontrar\u00e1 el grupo \"Predeterminado\". En el grupo ampliado \"Servidor\" tambi\u00e9n puede ver c\u00f3mo est\u00e1n dispuestos los elementos individuales como \"Reiniciar servidor\" o \"Apagar pantalla\".<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Ahora encontrar\u00e1 de nuevo estas pesta\u00f1as y grupos en la vista del panel de control. En la vista mostrada, se encuentra en la pesta\u00f1a \"Configuraci\u00f3n\". El primer marco rojo marca el grupo \"Servidor\". El grupo \"Banda LED\" est\u00e1 marcado con el segundo marco rojo. La flecha roja grande en el lado izquierdo tambi\u00e9n marca el s\u00edmbolo en el que debe hacer clic para cambiar a otra pesta\u00f1a.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Haga clic en este s\u00edmbolo para ver todas las pesta\u00f1as disponibles, en este caso \"Configuraci\u00f3n\" e \"Inicio\".<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
El nodo de bot\u00f3n<\/h2>\n\n\n\n
El nodo bot\u00f3n es uno de los nodos m\u00e1s sencillos. Puede utilizarse para construir botones virtuales. Para ello, arrastre el nodo bot\u00f3n desde la paleta de nodos al \u00e1rea de configuraci\u00f3n de NodeRed. Si ahora hace doble clic sobre el nodo, podr\u00e1 configurar las siguientes opciones.<\/p>\n\n\n\n
\"\"<\/a>
Grupo\" define el grupo y la pesta\u00f1a en los que debe situarse el bot\u00f3n. En este ejemplo, el bot\u00f3n se sit\u00faa en la pesta\u00f1a \"TestTab\" del grupo \"TestGroup\". Con \"Tama\u00f1o\" puede definir el tama\u00f1o del bot\u00f3n. Puede ver un ejemplo de diferentes tama\u00f1os m\u00e1s abajo en el art\u00edculo. Tambi\u00e9n puede utilizar el ajuste \"Icono\" para mostrar iconos en el bot\u00f3n. Para obtener una selecci\u00f3n de los iconos disponibles, basta con hacer clic en el enlace \"Icono Material Design\" situado a la derecha en la barra de informaci\u00f3n. \"Etiqueta\" indica el texto del bot\u00f3n. \"Color\" y \"Fondo\" permiten configurar el color del bot\u00f3n y el texto del bot\u00f3n. La configuraci\u00f3n de \"Carga \u00fatil\" y \"Tema\" define qu\u00e9 valor (carga \u00fatil) se env\u00eda a trav\u00e9s de qu\u00e9 tema en cuanto se pulsa el bot\u00f3n. Por \u00faltimo, una funci\u00f3n muy importante: marcando o desmarcando \"Si el mensaje llega a la entrada, pasarlo a la salida\" puede activar o desactivar el reenv\u00edo de un mensaje recibido en la entrada del nodo del bot\u00f3n a la salida. Con \"Nombre\" puede establecer el nombre del nodo para la configuraci\u00f3n de NodeRed como de costumbre.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Esta es la vista que se obtiene al hacer clic en el peque\u00f1o l\u00e1piz (editar) junto a la secci\u00f3n de grupo en la ventana anterior. Entonces llegar\u00e1 a la ventana en la que se puede asignar grupo y pesta\u00f1a al nodo bot\u00f3n (o a cualquier otro nodo del cuadro de mandos). En principio, en esta ventana se editan las propiedades de todo el grupo. Puede establecer la pesta\u00f1a asignada (en \"Pesta\u00f1a\") y la anchura del grupo (en \"Anchura\"). Tambi\u00e9n puede activar o desactivar la visualizaci\u00f3n del nombre del grupo y establecer si debe ser posible \"plegar\" el grupo, es decir, ocultar el contenido.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
En la vista general del cuadro de mandos, todas las pesta\u00f1as que contiene se muestran en una vista de p\u00e1gina desplegable. Puede pasar de una a otra haciendo clic en la pesta\u00f1a correspondiente.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
La vista de los distintos botones grandes del salpicadero. <\/span><\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
nodo desplegable<\/h2>\n\n\n\n
El nodo desplegable es un nodo con el que puede crear una lista de selecci\u00f3n en el Cuadro de Mando. Por ejemplo, puede crear una lista de temperaturas disponibles para un radiador. Sin embargo, tambi\u00e9n puede definir todo tipo de otras entradas con diferentes nombres y los valores correspondientes.<\/p>\n\n\n\n
Para ello, arrastre un nodo desplegable de la paleta Nodo a la interfaz de configuraci\u00f3n Nodo Rojo y haga doble clic sobre \u00e9l.<\/p>\n\n\n\n
\"\"<\/a>
Aparece entonces la ventana que se muestra. Aqu\u00ed, como antes con los otros nodos, se puede ajustar el grupo y la pesta\u00f1a asignados, as\u00ed como el tama\u00f1o. Tambi\u00e9n, como antes, la \"Etiqueta\". En este caso, \"Etiqueta\" significa el nombre para la lista desplegable en el panel de control real. En \"Marcador de posici\u00f3n\" se puede configurar un marcador de posici\u00f3n que se mostrar\u00e1 mientras no se haya seleccionado ning\u00fan valor en la lista desplegable. Las cosas se ponen realmente interesantes en la secci\u00f3n \"Opciones\". Aqu\u00ed puede configurar las opciones disponibles de 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\u00f1adir m\u00e1s entradas haciendo clic en \"+opci\u00f3n\". Las tres peque\u00f1as l\u00edneas horizontales situadas a la izquierda de cada entrada tambi\u00e9n permiten cambiar el orden de las entradas. Para ello, basta con hacer clic en las l\u00edneas de la entrada que desee desplazar y mantener pulsado el bot\u00f3n del rat\u00f3n. Moviendo el puntero del rat\u00f3n hacia arriba o hacia abajo podr\u00e1 cambiar la posici\u00f3n de la entrada marcada. Las dem\u00e1s funciones mostradas se comportan exactamente igual que las descritas para el \"Bot\u00f3n\".<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista de la lista desplegable configurada en el tablero.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Si ahora hace clic en el campo de selecci\u00f3n, podr\u00e1 elegir entre las distintas entradas previamente configuradas.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
cambiar de nodo<\/h2>\n\n\n\n
El nodo de conmutaci\u00f3n corresponde en principio a un conmutador virtual. Puede utilizarse para enviar se\u00f1ales de conmutaci\u00f3n o para indicar estados de conmutaci\u00f3n.<\/p>\n\n\n\n
Para ello, arrastre el nodo de conmutaci\u00f3n desde la paleta Nodo a la interfaz de configuraci\u00f3n Nodo Rojo y haga doble clic sobre \u00e9l.<\/p>\n\n\n\n
\"\"<\/a>
Aparece entonces la ventana que se muestra. Aqu\u00ed, como antes con los otros nodos, se puede ajustar el grupo y la pesta\u00f1a asignados, as\u00ed como el tama\u00f1o. Tambi\u00e9n, como antes, la \"Etiqueta\". En \"Icono\" puede seleccionar un icono que puede mostrar delante de la etiqueta o sin etiqueta como s\u00edmbolo de conmutaci\u00f3n. Las dem\u00e1s propiedades como \"Tema\" y \"Nombre\" son las mismas que para los nodos anteriores. La \u00fanica diferencia aqu\u00ed es que puede introducir diferentes cargas \u00fatiles para los estados de conmutaci\u00f3n \"Activado\" y \"Desactivado\". Esto tiene sentido, ya que de otro modo no podr\u00eda distinguir entre los estados \"apagado\" y \"encendido\".<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista del interruptor encendido.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista del interruptor apagado.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
nodo deslizante<\/h2>\n\n\n\n
El nodo deslizante es ideal para establecer n\u00fameros dentro de un cierto rango. Un buen caso de uso, por ejemplo, es usarlo como atenuador de una l\u00e1mpara.<\/p>\n\n\n\n
Para utilizar el nodo deslizante, primero debe arrastrarlo desde la paleta Nodo hasta la interfaz de configuraci\u00f3n Nodo Rojo y abrir su men\u00fa de configuraci\u00f3n haciendo doble clic sobre \u00e9l.<\/p>\n\n\n\n
\"\"<\/a>
Como ya se sabe de los otros nodos, la ventana de configuraci\u00f3n aparece de nuevo tras hacer doble clic. Aqu\u00ed, como antes, se puede ajustar el grupo y la pesta\u00f1a asignados, as\u00ed como el tama\u00f1o. Tambi\u00e9n, como antes, la \"Etiqueta\". En la secci\u00f3n \"Rango\" se puede establecer el rango de valores que debe barrer el deslizador. Este rango va desde \"min\"=el valor m\u00ednimo hasta max=el valor m\u00e1ximo. La anchura del paso puede establecerse mediante \"paso\". El resto de propiedades como \"Tema\" y \"Nombre\" son las mismas que para los nodos anteriores. La \u00fanica diferencia aqu\u00ed es que la carga \u00fatil viene determinada, por supuesto, por el \"valor del deslizador\" actual.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista del control deslizante en el tablero.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
nodo num\u00e9rico<\/h2>\n\n\n\n
El nodo num\u00e9rico es otra forma de pasar valores num\u00e9ricos a Nodo-Rojo para su procesamiento.<\/p>\n\n\n\n
Para configurarlos, arrastre un nodo num\u00e9rico de la paleta Nodo a la interfaz de configuraci\u00f3n Nodo Rojo.<\/p>\n\n\n\n
\"\"<\/a>
Las opciones de configuraci\u00f3n de este nodo son las dos propiedades \"Formato de valor\" y \"Rango\". Con \"Rango\" puede definir el rango posible de n\u00fameros y establecer el tama\u00f1o del paso, igual que hizo con el nodo deslizador. Con \"Formato del valor\" puede dar formato a la visualizaci\u00f3n del valor. Por ejemplo, puede a\u00f1adir un signo de unidad despu\u00e9s de \"{{valor}}\" para que el cuadro de mandos no s\u00f3lo muestre el valor num\u00e9rico, sino tambi\u00e9n un valor num\u00e9rico m\u00e1s la unidad. Por ejemplo, tambi\u00e9n puede marcar un valor de temperatura como temperatura con \"\u00b0C\".<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Nodo de entrada de texto<\/h2>\n\n\n\n
El nodo de entrada de texto es -como su nombre indica- un nodo para habilitar la entrada de texto.<\/p>\n\n\n\n
\"\"<\/a>
Adem\u00e1s de las opciones de configuraci\u00f3n habituales, como \"Grupo\", \"Tama\u00f1o\", \"Etiqueta\", \"Tema\" y \"Nombre\", se pueden establecer para este nodo el \"Modo\" y un \"Retardo\". En \"Retraso\" se establece el tiempo que se espera tras la \u00faltima entrada de caracteres hasta que los caracteres introducidos en el campo de texto se env\u00edan al siguiente nodo.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
En \"Modo\" puede seleccionar qu\u00e9 datos deben introducirse en el campo correspondiente. Puede elegir entre las distintas opciones mostradas y adaptar as\u00ed el campo de entrada perfectamente a la finalidad respectiva.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista (de aspecto relativamente simple) del nodo de texto en la vista del tablero.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Nodo selector de fecha<\/h2>\n\n\n\n
El date-picker-node b\u00e1sicamente hace exactamente lo que su nombre sugiere: Con \u00e9l puedes seleccionar una fecha determinada y pas\u00e1rsela a NodeRed para su posterior procesamiento.<\/p>\n\n\n\n
\"\"<\/a>
No se puede configurar ninguna otra opci\u00f3n (aparte de las habituales) para este nodo. Tras introducir una fecha en el cuadro de mandos, se reenv\u00eda al flujo conectado mediante carga \u00fatil.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista del selector de fecha en el tablero.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Nodo selector de color<\/h2>\n\n\n\n
El nodo selector de color es ideal para ajustar el color de una l\u00e1mpara RGB conectada. Por supuesto, tambi\u00e9n puedes utilizarlo para transferir colores a Nodo-Rojo para su posterior procesamiento en todos los dem\u00e1s casos.<\/p>\n\n\n\n
\"\"<\/a>
Adem\u00e1s de las \"opciones de configuraci\u00f3n habituales\", el nodo del selector de color tiene la opci\u00f3n de configuraci\u00f3n \"Formato\" y tambi\u00e9n varias casillas de verificaci\u00f3n que puede activar o desactivar. El formato del color de salida puede ajustarse mediante la propiedad \"Formato\". Puede elegir entre XXXXXXX y XX. Activando la propiedad \"Mostrar control deslizante de tonalidad\" o \"Mostrar control deslizante de luminosidad\" tambi\u00e9n puede mostrar un control deslizante para ajustar el valor de TONO o de luminosidad. A trav\u00e9s de las casillas de verificaci\u00f3n \"Mostrar siempre muestra\", \"Mostrar siempre selector\" y \"Mostrar siempre campo de valor\" tambi\u00e9n puede configurar la visualizaci\u00f3n permanente de diferentes \"variantes del selector\". S\u00f3lo tienes que probar qu\u00e9 vista te gusta m\u00e1s \ud83d\ude42 .<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Tu selector de color en el panel de control podr\u00eda tener este aspecto.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
nodo de formulario<\/h2>\n\n\n\n
Con el nodo formulario tiene la posibilidad de configurar un formulario t\u00edpico. Esto le permite combinar diferentes opciones de entrada. Esto es perfecto, por ejemplo, para configurar un formulario para introducir una direcci\u00f3n o similar.<\/p>\n\n\n\n
\"\"<\/a>
Adem\u00e1s de las opciones de configuraci\u00f3n habituales, puede configurar los elementos del formulario que se muestran aqu\u00ed en el \u00e1rea \"Elementos del formulario\". Puede a\u00f1adir campos de texto para diversos contenidos, como texto o n\u00fameros. Adem\u00e1s, en ellos se puede almacenar contenido est\u00e1ndar o especificar si se trata de un campo obligatorio o no. Por \u00faltimo, pero no menos importante, tambi\u00e9n puede a\u00f1adir su propio texto a los botones de confirmaci\u00f3n y cancelaci\u00f3n.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista del formulario de prueba en el tablero.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Nodo de salida de texto<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
En consecuencia, s\u00f3lo se pueden realizar relativamente pocos ajustes en las propiedades del nodo de salida de texto. Adem\u00e1s del \"Formato de valor\", en el que puede ampliar el aspecto de la salida de texto con informaci\u00f3n adicional como s\u00edmbolos de unidad, tambi\u00e9n tiene la opci\u00f3n de editar la disposici\u00f3n de la salida de texto. Puede elegir entre cinco disposiciones diferentes de la etiqueta y el texto. Pruebe cu\u00e1l se adapta mejor a su presentaci\u00f3n.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista del nodo de salida de texto en la vista del tablero.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
nodo de calibre<\/h2>\n\n\n\n
El nodo calibrador es perfecto para visualizar los valores medidos. De este modo, los valores medidos pueden clasificarse visualmente de forma directa. Tambi\u00e9n se pueden definir intervalos num\u00e9ricos 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\u00e1pida de si las lecturas mostradas son correctas o no. Adem\u00e1s, tiene un aspecto muy chulo (tipo Star Trek) \ud83d\ude42 .<\/p>\n\n\n\n
\"\"<\/a>
Adem\u00e1s de las opciones de configuraci\u00f3n habituales, puede establecer el \"Tipo\", el \"Formato de valor\", las \"Unidades\", el \"Rango\", los \"Degradados de color\" y los \"Sectores\" para el nodo del calibrador. Ya conoce \"Etiqueta\" y \"Formato de valor\" de los nodos anteriores. La propiedad \"Unidades\" le permite definir la unidad mostrada. Con la ayuda de la propiedad \"Rango\" puede 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, debe seleccionar un rango de temperatura que normalmente no se supere o no se sobrepase. Por ejemplo de -20\u00b0C a 45\u00b0C. Con la propiedad \"Gradiente de color\" puede definir ahora los colores que se mostrar\u00e1n en funci\u00f3n del valor medido. En este ejemplo, el color verde se muestra para todas las lecturas bajas, el color amarillo para todas las medias y el color rojo para todas las altas. Normalmente, los puntos en los que los colores cambian al siguiente est\u00e1n distribuidos uniformemente. Sin embargo, si desea una escala diferente o incluso omitir el color medio, puede definir con el ajuste \"Sectores\" en qu\u00e9 puntos deben cambiar los colores.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
En \"Tipo\" puede seleccionar el tipo de indicador que desea visualizar. Aqu\u00ed puedes ver ejemplos de los tipos disponibles.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista del man\u00f3metro tipo \"Gauge\" en el cuadro de mandos.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista del man\u00f3metro tipo \"Donut\" en el cuadro de mandos.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista del indicador tipo \"Br\u00fajula\" en el salpicadero.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista del indicador de tipo \"Nivel\" en el cuadro de mandos.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
nodo gr\u00e1fico<\/h2>\n\n\n\n
El nodo gr\u00e1fico 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\u00f3lo se guardan temporalmente. Esto significa que si su servidor NodeRed se bloquea o se reinicia, todos los valores mostrados anteriormente se perder\u00e1n.<\/p>\n\n\n\n
\"\"<\/a>
En comparaci\u00f3n con los nodos anteriores, este nodo ofrece algunas opciones de configuraci\u00f3n m\u00e1s. Aqu\u00ed puede seleccionar primero en \"Tipo\"<\/strong> para establecer el tipo de diagrama. Puede resaltar los valores medidos individuales en cada representaci\u00f3n colocando una marca debajo de \"ampliar punto<\/strong> est\u00e1 ajustado. La resoluci\u00f3n o la duraci\u00f3n del curso de los datos en el eje X (el eje horizontal que va de izquierda a derecha) puede ajustarse con el par\u00e1metro \"Etiqueta del eje X\"<\/strong> Configurar. Aqu\u00ed puede especificar durante cu\u00e1nto tiempo o cu\u00e1ntas lecturas deben mostrarse. Por ejemplo, puede seleccionar que se muestren todos los valores medidos de las \u00faltimas dos horas o los \u00faltimos 500 valores medidos. Adem\u00e1s, con \"Etiqueta del eje X\"<\/strong> luego configure tambi\u00e9n el etiquetado del eje X. Con \"Eje Y\"<\/strong> s\u00f3lo se puede ajustar el rango de valores visualizados del eje Y. Si, por ejemplo, s\u00f3lo desea ver el rango de valores de 0\u00b0 a 30\u00b0C para una curva de temperatura, debe introducirlo aqu\u00ed. Con ayuda de la opci\u00f3n \"Leyenda\"<\/strong> tambi\u00e9n puede configurar una leyenda, lo que resulta especialmente pr\u00e1ctico cuando se visualizan varias curvas. De este modo, puede mostrar una descripci\u00f3n para cada color de curva. La opci\u00f3n \"Interpolar\"<\/strong> decide c\u00f3mo se conectan entre s\u00ed los distintos valores medidos. Por \u00faltimo, puede establecer los colores utilizados para las curvas con \"Colores de la serie\" y el texto que se mostrar\u00e1 con \"Etiqueta en blanco\" si no hay valores medidos disponibles para la curva.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista del nodo del gr\u00e1fico en el tablero.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
nodo de salida de audio<\/h2>\n\n\n\n
El Audio-Out-Node es otro de estos nodos que hace exactamente lo que su nombre sugiere. Da salida al texto como lenguaje hablado.<\/p>\n\n\n\n
\"\"<\/a>
Para ello, puedes seleccionar la \"Voz TTS\" (=voz \"Text-To-Speech\") en las propiedades del nodo. Esto te permite adaptar la salida de voz un poco m\u00e1s a tu estilo. En \u00faltima instancia, este nodo emite por voz cualquier texto que le env\u00edes. 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, \u00e9ste no se emitir\u00e1. Se puede realizar una salida local en el servidor NodeRed a trav\u00e9s de altavoces conectados con el programa \"Espeak\". Encontrar\u00e1 m\u00e1s informaci\u00f3n al respecto en el art\u00edculo RaspberryPi - Instalar salida de voz con eSpeak<\/strong><\/em><\/a>.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
nodo de notificaci\u00f3n<\/h2>\n\n\n\n
El nodo de notificaciones permite mostrar notificaciones en el panel de control abierto. Estas pueden mostrarse como informaci\u00f3n en el borde o centradas en el centro de la pantalla, incluyendo un bot\u00f3n de confirmaci\u00f3n.<\/p>\n\n\n\n
\"\"<\/a>
En la ventana de configuraci\u00f3n del nodo de notificaci\u00f3n, puede establecer la posici\u00f3n del campo de notificaci\u00f3n en \"Dise\u00f1o\". Entre otras cosas, existe la opci\u00f3n \"Di\u00e1logo Aceptar\/Cancelar\", que permite dotar a la notificaci\u00f3n de dos botones. Estos deben ser confirmados por el usuario. De esta forma puede estar seguro de que el usuario ha visto la notificaci\u00f3n. Para ello, puede especificar en \"Etiqueta de acci\u00f3n predeterminada\" y \"Etiqueta de acci\u00f3n secundaria\" lo que debe aparecer en los botones \"Confirmar\" y \"Cancelar\".<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Adem\u00e1s de la variante de notificaci\u00f3n que el usuario debe confirmar, tambi\u00e9n existe la opci\u00f3n de mostrar la notificaci\u00f3n s\u00f3lo como nota. Para ello, seleccione, por ejemplo, \"Arriba a la derecha\" en \"Dise\u00f1o\". Si a continuaci\u00f3n env\u00eda una notificaci\u00f3n al nodo, \u00e9sta se mostrar\u00e1 en la esquina superior derecha y volver\u00e1 a desaparecer autom\u00e1ticamente al cabo de unos segundos.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista de una notificaci\u00f3n que debe confirmarse para que vuelva a desaparecer.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vista de una notificaci\u00f3n en la esquina superior derecha.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
nodo de control de la interfaz de usuario<\/h2>\n\n\n\n
Con el nodo de control UI puedes controlar la apariencia y el comportamiento de la vista del cuadro de mandos. Por ejemplo, puede utilizarlo para cambiar la pesta\u00f1a mostrada y para \"expandir y contraer\" grupos. Tambi\u00e9n puede utilizar este nodo para reaccionar a si un usuario ha abierto o cerrado el cuadro de mando.<\/p>\n\n\n\n
\"\"<\/a>
Para este nodo, s\u00f3lo se puede configurar el nombre en la ventana de ajustes. Todos los par\u00e1metros ajustables o la informaci\u00f3n disponible tambi\u00e9n se resumen en la barra de informaci\u00f3n lateral.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
nodo de plantilla<\/h2>\n\n\n\n
El nodo de plantilla es un nodo muy vers\u00e1til. Puede utilizarlo para integrar su propio c\u00f3digo HTML en el cuadro de mandos. \u00c9ste puede reaccionar individualmente a los mensajes recibidos de los nodos conectados y tambi\u00e9n enviar mensajes por s\u00ed mismo.<\/p>\n\n\n\n
\"\"<\/a>
Utilizando el nodo de plantilla, puede a\u00f1adir contenido a la cabecera de la p\u00e1gina...<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
...o a\u00f1adir nodos a grupos que hayas formateado con tu propio c\u00f3digo HTML.<\/figcaption><\/figure>\n\n\n\n
thztjz<\/p>\n\n\n\n
\"\"<\/a>
Con la ayuda de este nodo, puede, por ejemplo, insertar enlaces a cualquier p\u00e1gina del Panel de Control. En este ejemplo, el enlace a la vista MagicMirror se genera y se muestra en el Dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Aparecer\u00e1 un enlace en el panel de control que le llevar\u00e1 a la vista MagicMirror.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
M\u00e1s ejemplos<\/h2>\n\n\n\n
A continuaci\u00f3n encontrar\u00e1s una peque\u00f1a lista de art\u00edculos en los que tambi\u00e9n uso los nodos del salpicadero. Tal vez haya algo para ti tambi\u00e9n \ud83d\ude42 .<\/p>\n\n\n\n