{"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\". Puedes utilizarlo para colocar un bot\u00f3n en tu tablero. Esto funciona como un bot\u00f3n en el mundo real. Cuando 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 diferentes 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 ella, se le redirigir\u00e1 al sitio 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 seleccionar directamente la p\u00e1gina del panel de control. Para ello, simplemente a\u00f1ada \"\/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 del dise\u00f1o. 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\u00f3n de estos nodos puede establecerse 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\", tambi\u00e9n se pueden crear otras pesta\u00f1as. Esto resulta \u00fatil, por ejemplo, para separar virtualmente los elementos de las distintas habitaciones de un sistema dom\u00e9stico inteligente. Por ejemplo, puedes resumir todos los sensores y actuadores del sal\u00f3n en una pesta\u00f1a llamada \"Sal\u00f3n\". Esto facilita mantener una 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 panel de control. Aqu\u00ed puede ver algunas de las pesta\u00f1as individuales (en este ejemplo \"Inicio\", \"Datos Raspi\", \"Configuraci\u00f3n\" y \"Estado de Tasmota\"). Tambi\u00e9n se pueden reconocer 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 varios 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 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>
Si pulsa sobre este s\u00edmbolo, aparecer\u00e1n 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>
El \"Grupo\" define el grupo y la pesta\u00f1a en los que se sit\u00faa 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 adelante 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\" de la barra de informaci\u00f3n de la derecha. \"Etiqueta\" especifica el texto del bot\u00f3n. \"Color\" y \"Fondo\" permiten definir 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 la casilla \"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 de la forma habitual.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Esta es la vista que se obtiene al hacer clic en el peque\u00f1o l\u00e1piz (Editar) situado junto a la secci\u00f3n Grupo en la ventana anterior. Esto le lleva a la ventana en la que el grupo y la pesta\u00f1a se pueden asignar 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. Se puede configurar 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 \"colapsar\" 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. Al igual que en los dem\u00e1s nodos, aqu\u00ed se pueden ajustar el grupo y la pesta\u00f1a asignados, as\u00ed como el tama\u00f1o. Como antes, tambi\u00e9n 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\u00f3n\" 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 s\u00f3lo se ponen realmente interesantes en la secci\u00f3n \"Opciones\". Aqu\u00ed 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\u00f1adir m\u00e1s entradas haciendo clic en \"+opci\u00f3n\". Tambi\u00e9n puede cambiar el orden de las entradas utilizando las tres peque\u00f1as l\u00edneas horizontales situadas a la izquierda de cada entrada. Para ello, haga clic en las l\u00edneas de la entrada que desee desplazar y mantenga pulsado el bot\u00f3n del rat\u00f3n. Ahora puede reposicionar la entrada seleccionada moviendo el puntero del rat\u00f3n hacia arriba o hacia abajo. Las dem\u00e1s funciones mostradas se comportan exactamente igual que las ya 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. Al igual que en los dem\u00e1s nodos, aqu\u00ed se pueden ajustar el grupo y la pesta\u00f1a asignados, as\u00ed como el tama\u00f1o. Como antes, tambi\u00e9n puede ajustar la \"Etiqueta\". En \"Icono\" puede seleccionar un icono que puede mostrar delante de la etiqueta o sin etiqueta como s\u00edmbolo de conmutaci\u00f3n. El resto de 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 tambi\u00e9n tiene sentido, ya que de otro modo no podr\u00eda distinguir entre los estados de conexi\u00f3n y desconexi\u00f3n.<\/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>
Al igual que con los dem\u00e1s nodos, la ventana de configuraci\u00f3n aparece de nuevo tras hacer doble clic. Como antes, aqu\u00ed se pueden ajustar el grupo y la pesta\u00f1a asignados, as\u00ed como el tama\u00f1o. Como antes, tambi\u00e9n se puede configurar la \"Etiqueta\". En la secci\u00f3n \"Rango\", puede establecer qu\u00e9 rango de valores debe cubrir el control deslizante. Este rango va desde \"min\"=el valor m\u00ednimo hasta max=el valor m\u00e1ximo. El incremento 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 deslizante\" 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 emocionantes -porque difieren de las de los otros nodos- opciones de configuraci\u00f3n 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\u00e9rico posible y establecer el incremento. \"Formato del valor\" le permite dar formato a la visualizaci\u00f3n del valor. Aqu\u00ed, por ejemplo, puede a\u00f1adir un signo de unidad despu\u00e9s de \"{{valor}}\" para que el cuadro de mandos muestre posteriormente no s\u00f3lo el valor num\u00e9rico, sino un valor num\u00e9rico m\u00e1s una unidad. Por ejemplo, tambi\u00e9n puede etiquetar un valor de temperatura con \"\u00b0C\" como temperatura.<\/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\", para este nodo pueden establecerse el \"Modo\" y un \"Retardo\". El \"Retraso\" se utiliza para establecer el tiempo que se espera despu\u00e9s de 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 personalizar el campo de entrada perfectamente para la aplicaci\u00f3n correspondiente.<\/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 (casillas de verificaci\u00f3n) 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\u00e9n puede mostrar un deslizador para ajustar el valor de TONO o de luminosidad. Tambi\u00e9n puede configurar la visualizaci\u00f3n permanente de diferentes \"variantes del selector\" mediante las casillas de verificaci\u00f3n \"Mostrar siempre muestra\", \"Mostrar siempre selector\" y \"Mostrar siempre campo de valor\". Solo 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, aqu\u00ed puede configurar los elementos del formulario que se muestran en el \u00e1rea \"Elementos del formulario\". Puede a\u00f1adir campos de texto para distintos contenidos, como texto o n\u00fameros. Tambi\u00e9n 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>
Como resultado, 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 caracteres unitarios, 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, 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\u00e1 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\u00e9 por debajo. Por ejemplo, de -20\u00b0C a 45\u00b0C. 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\u00e1n distribuidos uniformemente. Sin embargo, si desea una escala diferente o incluso omitir el color central, puede utilizar el ajuste \"Sectores\" para especificar d\u00f3nde deben cambiar los colores.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
En \"Tipo\" tambi\u00e9n puede seleccionar qu\u00e9 tipo de indicador desea que se muestre. 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> determina c\u00f3mo se vinculan entre s\u00ed los distintos valores medidos. Por \u00faltimo, 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\u00e1 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 personalizar la salida de voz un poco m\u00e1s a tu estilo. En \u00faltima instancia, este nodo emitir\u00e1 cualquier texto que le env\u00edes 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, \u00e9ste no se emitir\u00e1. Sin embargo, puede realizar una salida local en el servidor NodeRed a trav\u00e9s de altavoces conectados con el programa \"Espeak\". Encontrar\u00e1 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 una sugerencia. 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
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\u00f1a mostrada y \"expandir y contraer\" grupos. Tambi\u00e9n puede utilizar este nodo para reaccionar a si un usuario ha abierto o cerrado el cuadro de mandos.<\/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