Node-RED Dashboard 2.0 avec MQTT : jauges, graphiques et commandes

Node-RED Dashboard 2.0 transforme des topics MQTT en interface web avec jauges, graphiques et commandes, sans projet front-end séparé. Dans ce tutoriel, vous allez construire une page qui affiche en direct la température et l'humidité d'un appareil simulé, trace les deux sur un graphique en courbe et pilote un ventilateur via un interrupteur qui publie des commandes et reflète l'état confirmé de l'appareil. C'est le même principe que pour un tableau de bord de maison connectée ou d'atelier. Tout fonctionne avec un broker gratuit : vous pouvez suivre dès maintenant.

Ce qu'est Node-RED Dashboard 2.0

Dashboard 2.0 succède au paquet d'origine node-red-dashboard, désormais obsolète. Il est publié sous le nom @flowfuse/node-red-dashboard, repose sur Vue et Vuetify et conserve la même idée : les nœuds widgets de votre flow deviennent des éléments d'une page web servie par Node-RED sur /dashboard.

La structure est une hiérarchie de nœuds de configuration :

Vous les créez rarement à la main. Lorsque vous déposez le premier widget et choisissez « Add new ui-group », l'éditeur propose de créer la page et la base pour vous. La documentation officielle de Dashboard 2.0 liste chaque widget et ses options.

Installer Dashboard 2.0

Dans l'éditeur Node-RED, ouvrez Menu → Manage palette → Install, recherchez @flowfuse/node-red-dashboard et installez-le. Ou, en ligne de commande, dans votre répertoire utilisateur Node-RED :

cd ~/.node-red
npm install @flowfuse/node-red-dashboard
# redémarrez ensuite Node-RED, par ex. :
node-red-restart   # sur une installation via le script Raspberry Pi

Utilisez une version actuelle de Node-RED 4.x. Après redémarrage, une nouvelle section « dashboard 2 » apparaît dans la palette. Si vous êtes encore en train d'installer Node-RED lui-même, le tutoriel Node-RED MQTT détaille l'installation et votre première connexion à un broker.

Simuler un appareil qui publie de la télémétrie

Pour avoir quelque chose à afficher, lancez un petit script Python qui se comporte comme un contrôleur de pièce. Il publie une télémétrie JSON toutes les deux secondes, écoute les commandes du ventilateur et publie l'état du ventilateur en retained message une fois la commande appliquée. Il se connecte à broker.connectmq.com, le serveur MQTT public gratuit, qui accepte les clients anonymes avec n'importe quel client ID unique et non vide.

Remplacez a7f3k2 par votre propre chaîne aléatoire. Le serveur public est lisible par tout le monde : gardez un préfixe unique et des données sans importance, et réservez-le aux tests.

# pip install "paho-mqtt>=2.0"
import json
import random
import time
import uuid

import paho.mqtt.client as mqtt

PREFIX = "connectmq/demo/a7f3k2/room1"
fan_on = False


def on_connect(client, userdata, flags, reason_code, properties):
    print("Connected:", reason_code)
    client.subscribe(f"{PREFIX}/fan/set", qos=1)


def on_message(client, userdata, msg):
    global fan_on
    command = msg.payload.decode().strip().upper()
    if command in ("ON", "OFF"):
        fan_on = command == "ON"
        # Publie l'état confirmé, en retained pour que les nouveaux tableaux de bord le voient aussitôt
        client.publish(f"{PREFIX}/fan/state", command, qos=1, retain=True)
        print("Fan is now", command)


client = mqtt.Client(mqtt.CallbackAPIVersion.VERSION2,
                     client_id=f"room-sim-{uuid.uuid4().hex[:8]}")
client.on_connect = on_connect
client.on_message = on_message
client.connect("broker.connectmq.com", 1883, keepalive=60)
client.loop_start()

temperature = 24.0
try:
    while True:
        drift = random.uniform(-0.3, 0.35) - (0.25 if fan_on else 0.0)
        temperature = max(15.0, min(35.0, temperature + drift))
        payload = {
            "temperature": round(temperature, 2),
            "humidity": round(random.uniform(40, 55), 1),
        }
        client.publish(f"{PREFIX}/telemetry", json.dumps(payload), qos=0)
        time.sleep(2)
except KeyboardInterrupt:
    pass
finally:
    client.loop_stop()
    client.disconnect()

Laissez-le tourner. Vous pouvez observer sa sortie avec mosquitto_sub -h broker.connectmq.com -p 1883 -i watch-a7f3k2 -v -t 'connectmq/demo/a7f3k2/#'.

Construire le flow Node-RED Dashboard 2.0

Étape 1 : s'abonner à la télémétrie

Ajoutez un nœud mqtt in. Créez un nouveau nœud de configuration mqtt-broker avec le serveur broker.connectmq.com, le port 1883 et un client ID unique comme nr-dash-a7f3k2. Définissez le topic connectmq/demo/a7f3k2/room1/telemetry, QoS 1, et la sortie sur a parsed JSON object.

Étape 2 : découper le payload pour chaque widget

Les jauges attendent un seul nombre dans msg.payload, tandis qu'un graphique multi-séries attend un message par série avec le nom de la série dans msg.topic. Un nœud function à trois sorties fait les deux :

// Nœud function "split telemetry" - réglez Outputs sur 3
const t = Number(msg.payload.temperature);
const h = Number(msg.payload.humidity);

if (Number.isNaN(t) || Number.isNaN(h)) {
    node.warn("Unexpected payload: " + JSON.stringify(msg.payload));
    return null;
}

return [
    { payload: t },                       // sortie 1 -> jauge de température
    { payload: h },                       // sortie 2 -> jauge d'humidité
    [                                      // sortie 3 -> graphique, deux séries
        { topic: "Temperature (C)", payload: t },
        { topic: "Humidity (%)", payload: h }
    ]
];

Renvoyer un tableau dans un emplacement de sortie envoie plusieurs messages par ce port, l'un après l'autre.

Étape 3 : ajouter des jauges

Déposez deux nœuds ui-gauge et reliez-les aux sorties 1 et 2. Dans le premier, cliquez sur le crayon à côté de Group pour ajouter un nouveau groupe nommé « Room 1 », ce qui crée aussi la page et la base. Réglages utiles :

• Type : « Gauge 3/4 » pour la température, style « Tile » ou « Battery » pour l'humidité si vous préférez un affichage compact.
• Plage : 0 à 40 pour la température, 0 à 100 pour l'humidité.
• Segments : vert à partir de 0, orange à partir de 26, rouge à partir de 30, pour que la couleur raconte d'elle-même l'histoire.
• Unités : °C et %.

Étape 4 : ajouter un graphique en courbe

Reliez la sortie 3 à un nœud ui-chart dans le même groupe. Choisissez le type « Line », laissez Series sur msg.topic et laissez X en horodatage pour que chaque point soit daté à son arrivée. Dans les limites de points, gardez les 300 derniers points ou la dernière heure. Sans limite, un tableau de bord qui tourne longtemps ne cesse de grossir en mémoire.

Les données des graphiques de Dashboard 2.0 résident dans la mémoire de Node-RED : un redémarrage les efface. Le guide complémentaire sur l'historique des graphiques Node-RED montre comment les persister et les rejouer.

Étape 5 : ajouter une commande qui publie

Ajoutez au groupe un ui-switch intitulé « Fan ». Réglez sa valeur « on » sur la chaîne ON et sa valeur « off » sur OFF. Reliez-le à un nœud mqtt out avec le topic connectmq/demo/a7f3k2/room1/fan/set, QoS 1, retain désactivé. Les commandes ne doivent pas être retained : un ON retained serait renvoyé à l'appareil à chacune de ses reconnexions, même des heures plus tard.

Étape 6 : refléter l'état réel de l'appareil

Un interrupteur qui n'affiche que ce que l'utilisateur a cliqué peut mentir. Si l'appareil est hors ligne, l'interrupteur indique « on » alors que le ventilateur est arrêté. Corrigez cela en renvoyant l'état confirmé de l'appareil vers l'interrupteur :

1. Ajoutez un second nœud mqtt in sur connectmq/demo/a7f3k2/room1/fan/state, sortie en chaîne UTF-8.
2. Reliez-le à l'entrée du même ui-switch.
3. Dans les réglages de l'interrupteur, vérifiez que les messages entrants ne sont pas transmis à la sortie. Sinon, chaque mise à jour d'état serait republiée comme une nouvelle commande et vous créeriez une boucle.

Comme le simulateur publie l'état en retained, un tableau de bord fraîchement ouvert, ou un Node-RED redémarré, affiche immédiatement la bonne position.

Étape 7 : déployer et ouvrir la page

Cliquez sur Deploy et ouvrez http://localhost:1880/dashboard. Les jauges bougent toutes les deux secondes, le graphique trace deux courbes, et activer le ventilateur fait baisser la tendance de température quelques mesures plus tard.

Référence des widgets pour les tableaux de bord MQTT

Pour des projets plus importants, consultez l'exemple de tableau de bord OEE, qui calcule les KPI avant qu'ils n'atteignent les widgets, et le tutoriel worldmap pour les données de localisation.

Problèmes courants et solutions

1. Les widgets ne se mettent jamais à jour. Vérifiez l'état du nœud mqtt in. S'il indique « connecting », le client ID est peut-être utilisé par un autre client ; rendez-le unique.
2. La jauge affiche NaN ou reste à zéro. Le payload est arrivé à la jauge sous forme d'objet. Assurez-vous que seul un nombre est envoyé à la jauge.
3. Le graphique trace une seule courbe fusionnée. Chaque message porte le même msg.topic. Définissez un nom de série distinct par valeur.
4. L'interrupteur clignote ou les commandes se répètent. La transmission directe (pass-through) est activée alors que les messages d'état sont renvoyés. Désactivez-la.
5. La page est accessible depuis n'importe où. Dashboard 2.0 n'a pas d'authentification par défaut. Placez Node-RED derrière une authentification ou un reverse proxy avant de l'exposer.
6. Le tableau de bord fonctionne sur le réseau local mais pas à distance. Le port 1880 est généralement bloqué ; publiez la page via un proxy en HTTPS plutôt que d'ouvrir le port.

De la démo à la production

Le serveur public de test est parfait pour ce tutoriel, mais ses données sont visibles par tous et il applique des limites de débit par client. Pour une vraie installation, pointez le même nœud de configuration mqtt-broker vers un broker privé avec identifiants et TLS sur le port 8883. Un broker MQTT cloud permet aussi aux appareils de plusieurs bâtiments de publier vers un même endroit qu'un seul tableau de bord Node-RED peut lire. Si vous configurez des certificats pour la première fois, le guide Node-RED MQTT TLS vous accompagne pas à pas.

Avec ConnectMQ, vous obtenez dans le portail le nom d'utilisateur, le mot de passe et le client ID générés, et la seule modification du flow concerne le nœud de configuration. Chaque widget, function et topic de ce tutoriel reste identique une fois le préfixe de démo retiré. Opter pour un broker MQTT managé évite aussi de faire tourner et de mettre à jour Mosquitto sur la même machine que votre tableau de bord.

Faites tourner votre tableau de bord Node-RED sur ConnectMQ

Créez un compte gratuit sur app.connectmq.com, choisissez l'offre Serverless (Free), sans carte bancaire, et créez un broker. Collez les identifiants dans votre nœud de configuration Node-RED, passez au port 8883 avec TLS, et votre page Dashboard 2.0 lit des données privées et chiffrées. Le client MQTT intégré au navigateur du portail ConnectMQ est pratique pour envoyer des commandes de test au topic du ventilateur pendant que vous concevez la page.

Questions fréquentes

Quelle est la différence entre Node-RED Dashboard et Dashboard 2.0 ?

Le node-red-dashboard d'origine est obsolète et repose sur AngularJS. Dashboard 2.0, @flowfuse/node-red-dashboard, est son remplaçant maintenu, construit sur Vue, avec une structure page, groupe et widget qui vous semblera familière.

Quelle est l'URL de Node-RED Dashboard 2.0 ?

Par défaut, le tableau de bord est servi à l'adresse http://<node-red-host>:1880/dashboard. Vous pouvez modifier le chemin dans le nœud de configuration ui-base.

Dashboard 2.0 peut-il envoyer des commandes MQTT ?

Oui. Reliez un ui-switch, un ui-button ou un ui-slider à un nœud mqtt out. Renvoyez l'état confirmé de l'appareil vers le widget pour que l'interface montre la réalité, et pas seulement le dernier clic.

Pourquoi mon graphique se vide-t-il après le redémarrage de Node-RED ?

Les données du graphique sont conservées en mémoire. Persistez les mesures dans le stockage de contexte ou une base de données et rejouez-les au démarrage pour garder l'historique entre les redémarrages.