Fase 5. Node-RED y dashboard | Estación meteorológica IoT con ESP8266, BMP280 y MQTT

📊 Fase 5 · 3–4 sesiones

Node-RED y Dashboard de visualización

El ESP8266 ya envía datos por MQTT. Ahora toca recibirlos, transformarlos y visualizarlos en tiempo real. Node-RED actúa como el cerebro que conecta el broker con el panel de control: recibe el mensaje, lo interpreta como JSON y lo presenta en gauges, textos y gráficas.

mqtt-in JSON function switch ui_gauge ui_text Deploy Dashboard

El ESP8266 publica datos en el tópico cabrerapinto/meteorologia/esp8266-id/bmp280. En esta fase, Node-RED se suscribe a ese mismo tópico, recibe el payload JSON y lo convierte en una visualización útil e interactiva.

🔴 ¿Qué es Node-RED? Conceptual

🧩Programación por flujos

Node-REDEntorno de programación visual desarrollado por IBM, basado en Node.js. Permite conectar dispositivos, APIs y servicios mediante nodos que se unen con cables en un editor web. es una herramienta de programación visual que funciona en un navegador web. En lugar de escribir código línea a línea, se construyen flujosSecuencia de nodos conectados entre sí mediante cables. Cada nodo recibe un mensaje, lo procesa de alguna forma y lo pasa al siguiente.: cadenas de nodos que reciben, transforman y visualizan datos.

La metáfora es la de una cadena de montaje: cada nodo hace una tarea concreta y pasa el resultado al siguiente. Así, el dato viaja desde el broker MQTT hasta el panel de control pasando por varios nodos de procesamiento.

🖥️La interfaz de trabajo

El editor de Node-RED tiene tres zonas principales: la paleta de nodos a la izquierda, el espacio de trabajo en el centro donde se construyen los flujos, y el panel lateral a la derecha con el debug, el dashboard y la información de los nodos.

El botón DeployBotón rojo en la esquina superior derecha del editor. Al pulsarlo se activan todos los cambios realizados en el flujo. Sin deploy, las modificaciones no tienen efecto. es fundamental: activa el flujo para que empiece a procesar mensajes reales.

🔧 Nodos clave del proyecto Guía práctica

mqtt-in

Entrada · Recepción de datos

Se suscribe al tópico del broker y recibe el payload JSON en msg.payload. Se configura con la IP del broker, el puerto 1883 y el tópico exacto del proyecto.

json

Transformación · Parseo

Convierte el texto del payload en un objeto JavaScript para poder acceder a sus propiedades mediante rutas como msg.payload.sensor.temperatura_c.

function

Lógica · JavaScript

Extrae una variable concreta del JSON y la asigna a msg.payload para que el siguiente nodo la reciba lista para visualizar. Ideal para separar temperatura, presión y altitud en ramas distintas.

switch

Lógica · Enrutamiento

Evalúa condiciones sobre el valor recibido y dirige el mensaje a una salida u otra. Útil para generar alertas cuando la temperatura supera un umbral determinado.

ui_gauge

Dashboard · Medidor

Muestra el valor recibido en un velocímetro visual en el dashboard. Se configura con el rango mínimo y máximo, la unidad y el grupo al que pertenece dentro del panel.

ui_text

Dashboard · Texto

Muestra el valor como texto etiquetado en el dashboard. Resulta especialmente útil para presión y altitud, donde un número con unidades es suficiente para la lectura.

🏗️ Cómo construir el flujo paso a paso Procedimiento

Crear pestaña y grupo en el dashboard

Antes de arrastrar nodos de visualización, hay que crear una TabPestaña del dashboard. Organiza los widgets en secciones navegables dentro del panel de visualización. y al menos un GroupAgrupación de widgets dentro de una pestaña. Los nodos ui_gauge, ui_text y similares deben pertenecer a un grupo para aparecer en el dashboard.. Sin grupo, los nodos ui_* no se muestran en el panel.

Arrastrar un nodo mqtt-in al espacio de trabajo

Configurar el broker (IP y puerto 1883) y el tópico del proyecto. Comprobar que el estado del nodo cambia a "conectado" en la parte inferior.

Añadir nodo JSON y nodo debug

Conectar mqtt-in → json → debug. Hacer Deploy y observar el panel de debug: debe aparecer el objeto con los bloques esp y sensor. Si llega como texto sin parsear, el nodo JSON lo convierte en objeto accesible.

Extraer variables con nodos function

Conectar un nodo function para cada variable: temperatura, presión, altitud. Cada función extrae un valor del JSON y lo asigna a msg.payload para pasarlo al widget correspondiente.

Conectar nodos ui_gauge y ui_text

Arrastrar un gauge para temperatura (rango 0–50°C), un text para presión y un text para altitud. Asignar cada uno al grupo del dashboard creado en el paso 1. Hacer Deploy.

Abrir el dashboard y comprobar en tiempo real

Navegar a http://localhost:1880/ui o usar el botón de acceso rápido del panel lateral. Los datos del sensor deben actualizarse automáticamente cada vez que el ESP8266 publica un mensaje.

📸 Capturas del proceso Imágenes reales del proyecto

Flujo básico Primer flujo funcional: mqtt-in recibe los datos, json los parsea y debug los muestra en el panel lateral.

Debug con datos reales El panel de debug muestra el objeto JSON completo con los bloques esp y sensor recibidos desde el ESP8266.

Flujo con nodo ui_gauge para temperatura

Flujo con gauge Se añade el nodo function que extrae la temperatura y lo conecta al ui_gauge del dashboard.

Flujo avanzado Flujo más completo con múltiples ramas: temperatura al gauge, presión y altitud a nodos de texto.

🗺️ Rutas de acceso al JSON Referencia rápida

📍Acceso a variables en Node-RED

Una vez que el nodo JSON parsea el payload, puedes acceder a cada variable usando la ruta completa dentro del objeto. Estos son los accesos que debes usar en los nodos function del proyecto:

// Temperatura en grados Celsius
msg.payload.sensor.temperatura_c

// Presión en hectopascales
msg.payload.sensor.presion_hpa

// Altitud estimada en metros
msg.payload.sensor.altitud_m

// IP del dispositivo (para diagnóstico)
msg.payload.esp.ip

// Ejemplo de uso en un nodo function:
msg.payload = msg.payload.sensor.temperatura_c;
return msg;

🎯 Resultado final: el dashboard Producto del proyecto

Panel de visualización final del proyecto en Node-RED Dashboard

📊 Dashboard final del proyecto

Código fuente, imágenes, flujos de Node-RED y documentación · github.com/DaniCampusIoT

→

⚠️ Error frecuente — undefined en el dashboard: si el gauge o el texto muestra undefined, significa que la ruta de acceso al JSON no es correcta. Comprueba que el nodo JSON ha parseado el payload antes del nodo function y que la ruta coincide exactamente con la estructura del mensaje recibido. Puedes ver la imagen de diagnóstico en el repositorio del proyecto.

Estación Meteorológica IoT

Node-RED y Dashboard de visualización

🧩Programación por flujos

🖥️La interfaz de trabajo

📍Acceso a variables en Node-RED