Comenzando con el panel Node-RED en Raspberry Pi

¿Quieres aprovechar al máximo tu Raspberry Pi y automatizar tus tareas diarias de manera sencilla? ¡Entonces el panel Node-RED es la herramienta que estás buscando! En este artículo te explicaremos cómo empezar a utilizar este potente sistema en tu Raspberry Pi. ¡Sigue leyendo para descubrir todo lo que necesitas saber para comenzar con Node-RED!

Este artículo es una introducción al panel de Node-RED con Raspberry Pi. Explicamos cómo instalar el panel de Node-RED y le mostramos, con ejemplos, cómo crear una interfaz gráfica de usuario para sus proyectos de IoT y domótica.

Comenzando con el panel Node-RED en Raspberry Pi

Tabla de contenido:

Requisitos:

Usted necesita uno placa frambuesa pi-leer Los mejores kits de inicio de Raspberry Pi. Asumimos que está familiarizado con Raspberry Pi, sabe cómo instalar el sistema operativo y cómo establecer una conexión SSH a su Pi. Puede comenzar consultando los siguientes tutoriales:

  • Comenzando con Raspberry Pi
  • Instale Raspberry Pi OS, configure WiFi, actívelo y conéctelo con SSH

Deberías tener Node-RED instalado en tu Pi. Para obtener una introducción a Node-RED, consulte esta publicación de blog «Cómo comenzar con Node-RED en Raspberry Pi».

¿Qué es el panel de control de Node-RED?

Node-RED Dashboard es un módulo que proporciona un conjunto de nodos en Node-RED para crear rápidamente un panel de datos en vivo. Por ejemplo, proporciona nodos para crear rápidamente una interfaz de usuario con botones, controles deslizantes, gráficos, indicadores, etc.

Para obtener más información sobre el panel de Node-RED, puede consultar los siguientes enlaces:

Instalar el panel de Node-RED

Puede instalar los nodos del panel Node-RED yendo a Menú > Administrar paletaLuego busque Panel de control del nodo rojo e instalarlo.

Comenzando con el panel Node-RED en Raspberry Pi

Una vez instalado, los nodos del tablero aparecerán en la paleta.

Comenzando con el panel Node-RED en Raspberry Pi

Los nodos de la sección Panel proporcionan widgets que se muestran en la interfaz de usuario (UI) de su aplicación. Se puede acceder a la interfaz de usuario en la siguiente URL:

http://Your_RPi_IP_address:1880/ui

Por ejemplo en mi caso:

http://192.168.1.106:1880/ui
Comenzando con el panel Node-RED en Raspberry Pi

De momento, al acceder a la interfaz se muestra la pantalla anterior. Esto se debe a que no ha agregado ninguno de estos nodos del panel al flujo. Haremos esto en la siguiente sección.

Crear una interfaz de usuario (UI)

En esta sección, le mostraremos cómo crear su interfaz de usuario en Node-RED utilizando los nodos del panel de Node-RED.

El diseño del tablero

La interfaz de usuario está organizada en Pestañas Y grupos. Las pestañas son páginas diferentes en su interfaz, como varias pestañas en un navegador. Dentro de cada pestaña hay grupos que dividen las pestañas en diferentes secciones para que puedas organizar tus widgets (botones, controles deslizantes, gráficos, indicadores, formularios, etc.).

Cada widget debe tener un grupo asociado que determine dónde debe aparecer el widget en la interfaz de usuario.

Siga las siguientes instrucciones para crear una pestaña y un grupo.

Haga clic en el pequeño icono de flecha en la parte superior derecha y luego haga clic en panel.

Comenzando con el panel Node-RED en Raspberry Pi

Crear pestañas y grupos

Asegúrate de tener el disposición Pestaña seleccionada. Luego haga clic en el +Pestaña Haga clic en el botón para crear una pestaña. De forma predeterminada, esto se denomina «Pestaña 1».

Después de crear una pestaña, puede crear varios grupos en esa pestaña. Debes crear al menos un grupo para agregar tus widgets. Para agregar un grupo a la pestaña creada, debe hacer clic en el +Grupo Botón.

Luego haga clic en eso +Grupo para crear un grupo dentro de esta pestaña. su nombre es Grupo 1 Por defecto.

Comenzando con el panel Node-RED en Raspberry Pi

Haga clic en eso pestaña Y Edición de grupo Botones para cambiar sus propiedades.

Por ejemplo, haga clic en eso editar botón para Pestaña 1.

Comenzando con el panel Node-RED en Raspberry Pi

Puede editar el nombre de la pestaña y cambiar su icono:

  • Apellido: Puedes llamarlo como quieras
  • símbolo: Debe utilizar un nombre de acuerdo con los nombres de los iconos en los enlaces proporcionados. Por defecto el panel Símbolo.

Después de realizar cambios, haga clic en el Actualizar Botón.

Ahora edite el grupo haciendo clic en el grupo. editar Botón. Se abrirá la siguiente ventana.

Comenzando con el panel Node-RED en Raspberry Pi

Puede editar el nombre, seleccionar la pestaña apropiada y cambiar el ancho. Según la documentación del panel de Node-RED, cada elemento del grupo tiene un ancho de 6 «unidades» (una unidad tiene 48 píxeles de ancho de forma predeterminada con un espacio de 6 píxeles).

Por ahora, ha creado una pestaña y un grupo utilizando el panel de Node-RED. Para verlos necesitas agregar un widget.

Por ejemplo, inserte cambiar (a partir de ese panel sección, no de la función Sección: deberá desplazarse hacia abajo en la paleta para ver la panel Nodo) Nodo al flujo.

Comenzando con el panel Node-RED en Raspberry Pi

Haga doble clic en él para comprobar las propiedades. De forma predeterminada, se agregará al grupo y a la pestaña que creó anteriormente. Implemente su aplicación.

Comenzando con el panel Node-RED en Raspberry Pi

Ahora vaya a la siguiente URL para acceder a la interfaz de usuario creada.

http://Your_RPi_IP_address:1880/ui

Por ejemplo en mi caso:

http://192.168.1.106:1880/ui

Verás algo como esto:

Comenzando con el panel Node-RED en Raspberry Pi

Diseño de tablero

De forma predeterminada, el panel de Node-RED tiene un fondo blanco y una barra azul claro. Puede cambiar los colores y la fuente en el Tema pestaña si tienes la panel Posibilidad.

Comenzando con el panel Node-RED en Raspberry Pi

Cambie el estilo, implemente los cambios y observe cómo la interfaz de usuario del panel cambia de color. Por ejemplo, como en la siguiente figura:

Comenzando con el panel Node-RED en Raspberry Pi

Sitio del panel

En el panel En la ventana tienes otra pestaña llamada sitio web Esto le permitirá realizar más ajustes como se muestra en la siguiente imagen.

Comenzando con el panel Node-RED en Raspberry Pi

Puede cambiar la configuración, luego implementar los cambios y ver cómo se ve la interfaz. Ahora mismo no notarás mucha diferencia ya que sólo tienes un widget. Estos cambios se harán visibles a medida que agregue más widgets a la interfaz.

Ejemplo de creación de una interfaz de usuario

En esta sección, crearemos un ejemplo de panel para mostrarle cómo crear y editar su propio panel. No agregaremos ninguna funcionalidad a los widgets, lo haremos en proyectos futuros. Este panel tendrá las siguientes características:

  • Dos pestañas diferentes: una se llama Habitación y otro nombre Jardín
  • La pestaña Habitación tiene dos grupos y la pestaña Jardín tiene un grupo
  • Agregamos un selector de color y un interruptor a los grupos de habitaciones.
  • Agregamos un gráfico al grupo Jardín.

Creando las pestañas

En la esquina superior derecha de la ventana Nodo RED, seleccione el panel y cree dos pestañas nuevas haciendo clic en el +Pestaña Botón.

Edite una pestaña con las siguientes propiedades:

  • Apellido: Habitación
  • símbolo: TELEVISOR

Y el otro con lo siguiente:

  • Apellido: Jardín
  • Símbolo: florista_local

Luego agregue dos grupos a la pestaña Habitación y un grupo a la pestaña Jardín. La siguiente imagen muestra cómo se ve el diseño de su panel.

Comenzando con el panel Node-RED en Raspberry Pi

Agregar los widgets

Añadir cambiarA Control deslizanteA Selector de color y un dispositivo de medición al proceso como se muestra en la siguiente figura:

Comenzando con el panel Node-RED en Raspberry Pi

Haga doble clic en eso cambiar. Una nueva ventana se abrirá.

Comenzando con el panel Node-RED en Raspberry Pi

En esta nueva ventana puedes elegir dónde deseas colocar tu widget de botón en la interfaz. En este caso queremos que esté en el Habitación Pestaña, Grupo 1 como se resalta en rojo en la figura anterior.

Luego haga lo mismo con los otros widgets, pero agréguelos a los siguientes grupos:

  • Control deslizante: Grupo 1 [Room]
  • Selector de color: Grupo 2 [Room]
  • Dispositivo de medición: Grupo 1 [Garden]

Implemente los cambios y vaya a la interfaz de usuario del panel para ver cómo se ve.

http://Your_RPi_IP_address:1880/ui

Su panel tiene dos pestañas: Habitación y Jardín, como se muestra en la siguiente imagen:

Comenzando con el panel Node-RED en Raspberry Pi

Así es como se ve la pestaña Sala con los dos grupos.

Comenzando con el panel Node-RED en Raspberry Pi

Y así es como se ve la pestaña Jardín con un grupo.

Comenzando con el panel Node-RED en Raspberry Pi

Envolver

En este tutorial, aprendió cómo crear una interfaz de usuario utilizando los nodos del panel de Node-RED. Puede agregar varios widgets, como controles deslizantes, botones, formularios, gráficos e indicadores para crear una hermosa aplicación para sus proyectos de IoT o automatización del hogar.

En el ejemplo que se muestra, solo creamos la interfaz de usuario y no agregamos ninguna funcionalidad a los widgets. Tenemos varios proyectos que utilizan el panel de Node-RED. Puede consultarlos para aprender cómo agregar funciones a su interfaz. Ejemplo:

  • ESP32 MQTT: publique los valores de temperatura DS18B20 (Arduino IDE) y visualícelos en el tablero de Node-RED
  • ESP32 MQTT: publique y suscríbase usando Arduino IDE con la interfaz Node-RED Dashboard
  • ESP8266 y Node-RED con MQTT (Publicar y Suscribir) con interfaz de panel de Node-RED

Esperamos que este tutorial te haya resultado útil.

¡Gracias por leer!

Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded

Introducción al Panel Node-RED en Raspberry Pi

Este artículo es una introducción al panel Node-RED con Raspberry Pi. Cubriremos cómo instalar el Panel Node-RED y ejemplificaremos cómo construir una interfaz gráfica de usuario para tus proyectos de IoT y Automatización del Hogar.

Tabla de Contenidos:

  1. Introducción al Panel Node-RED
  2. Instalación del Panel Node-RED
  3. Creación de una Interfaz de Usuario (pestañas y grupos, tema, sitio)
  4. Ejemplo de Creación de una Interfaz de Usuario

Requisitos previos:

Necesitas una placa Raspberry Pi; asegúrate de que tienes instalado Node-RED en tu Pi. Si aún no lo has hecho, puedes encontrar más información en estos tutoriales:

  • Empezando con Raspberry Pi
  • Instalar Raspberry Pi OS, Configurar Wi-Fi, Habilitar y Conectar con SSH

Si deseas obtener más información sobre el Panel Node-RED, puedes consultar los siguientes enlaces:

¿Qué es el Panel Node-RED?

El Panel Node-RED es un módulo que proporciona un conjunto de nodos en Node-RED para crear rápidamente un panel de datos en vivo. Por ejemplo, proporciona nodos para crear rápidamente una interfaz de usuario con botones, deslizadores, gráficos, medidores, etc.

Instalación del Panel Node-RED

Puedes instalar los nodos del Panel Node-RED yendo a Menú > Gestionar Paleta. Luego, busca node-red-dashboard e instálalo. Después de instalarlo, los nodos del panel aparecerán en la paleta.

Los nodos del panel proporcionan widgets que se muestran en la interfaz de usuario de tu aplicación. La interfaz de usuario es accesible en la siguiente URL: http://Tu_dirección_IP_de_RPi:1880/ui.

Creación de una Interfaz de Usuario

En esta sección, te mostraremos cómo crear tu interfaz de usuario en Node-RED utilizando los nodos del Panel Node-RED. La interfaz de usuario se organiza en pestañas y grupos, donde cada widget debe tener un grupo asociado que determine dónde aparecerá en la interfaz de usuario.

Para obtener más información detallada sobre cómo crear pestañas y grupos, así como modificar el tema y el sitio del panel Node-RED, te recomendamos visitar el sitio de Node-RED.

Ejemplo de Creación de una Interfaz de Usuario

En esta sección, vamos a crear un ejemplo de un panel para mostrarte cómo puedes construir y editar tu propia interfaz de usuario. En este caso, crearemos dos pestañas diferentes: una llamada «Habitación» y otra llamada «Jardín», cada una con grupos y widgets específicos.

Recuerda que este tutorial solo cubre la creación de la interfaz de usuario; la funcionalidad se agregará en futuros proyectos. Si deseas explorar cómo agregar funcionalidades a los widgets, te recomendamos consultar nuestros proyectos relacionados con Node-RED Dashboard.

Esperamos que este tutorial te haya sido útil. ¡Gracias por leer!

4 comentarios en «Comenzando con el panel Node-RED en Raspberry Pi»

Deja un comentario