Raspberry Pi: MQTT-Dashboard mit Node-RED einrichten

Message Queue Telemetry Transport, kurz MQTT, ist ein einfaches Kommunikationsprotokoll für den Nachrichtenaustausch zwischen Geräten in Umgebungen mit geringer Bandbreite und instabilen Verbindungen. Typischerweise lassen sich mit MQTT Sensordaten, wie Temperatur oder Füllstände, übertragen. Aber auch klassische Nachrichten oder Kurzmitteilungen lassen sich damit verschicken.

Die MQTT-Architektur kennt 3 Rollen. Eine Rolle ist die des Publishers, der Daten senden will. Eine weitere Rolle ist die des Subscribers, der Daten empfangen will. Zwischen Publisher und Subscriber befindet sich der Broker, der Daten von Publishern entgegennimmt und an die Subscriber verteilt.

Wenn man sich eine MQTT-Architektur mit verschiedenen Publishern, Subscribern und einem Broker im eigenen Netzwerk aufbauen will, dann hat man vielleicht das Bedürfnis bestimmte Daten sichtbar zu machen. Beispielsweise, weil ein bestimmter MQTT-Publisher keine eigene Benutzeroberfläche hat.

Raspberry Pi mit Mosquitto und Node-RED

Die Idee ist nun, auf einem Raspberry Pi, auf dem mit Mosquitto ein MQTT-Broker läuft, zusätzlich eine grafische Benutzeroberfläche laufen zu lassen, die man übers Netzwerk mit einem Browser aufrufen kann (MQTT-Dashboard).

Eine Lösung ist, den MQTT-Broker Mosquitto und das grafische Tool Node-RED auf dem Raspberry Pi zu installieren. In Node-RED kann man sich eine Oberfläche konfigurieren, die anschließend mit dem Browser aufgerufen werden kann.

MQTT-Broker Mosquitto installieren und konfigurieren

Die Installation und Konfiguration des MQTT-Brokers Mosquitto erfolgt über die Kommandozeile, was innerhalb weniger Minuten erledigt ist. Danach können MQTT-Publisher Daten an den Broker senden und MQTT-Subscriber Daten vom Broker empfangen.

Raspberry Pi: MQTT-Broker Mosquitto installieren und konfigurieren

Node-RED installieren und konfigurieren

Die Installation und Konfiguration von Node-RED erfolgt über die Kommandozeile, was innerhalb weniger Minuten erledigt ist. Danach können Steuerungen nach dem EVA-Prinzip und Anzeigen für den Webbrowser erstellt werden.

Raspberry Pi: Node-RED installieren und konfigurieren

Node-RED: Nodes für die Palette installieren

Nach der Installation von Node-RED sind schon viele Funktionen dabei, mit denen sich viele Steuerungen realisieren lassen. Bei manchen speziellen Dinge muss man Nodes für die Palette nachträglich herunterladen, installieren und aktualisieren. Das macht man unter „Hauptmenü (rechts oben) / Palette verwalten“. Dort wird eine Liste angezeigt, was alles installiert ist. Dort kann man auch nach verfügbaren Nodes suchen und installieren.

Wenn man ein Dashboard erstellen will, braucht man das Node „node-red-dashboard“.

Nach der Installation ist ein Neustart von Node-RED erforderlich.

sudo systemctl restart nodered

Der Flow-Editor im Browser muss ebenfalls erneut aufgerufen werden.

Node-RED: Flow für ein MQTT-Dashboard

In Node-RED werden sogenannte Flows erstellt, um Steuerungen und Anzeigen zu realisieren.

Der folgende Flow ist ein Datensatz im JSON-Format, der sich leicht importieren lässt, ohne das Du Dich mit der Bedienung des Flow-Editors in großem Umfang auseinandersetzen musst.

Was genau befindet sich in diesem MQTT-Dashboard? Beispielhaft stellt dieses Dashboard alle Daten dar, die unsere MQTT-Beispiele mit dem Raspberry Pi Pico an den MQTT-Broker im lokalen Netzwerk übertragen. Diesen Flow zu verwenden und zu importieren macht also nur dann Sinn, wenn Du wenigstens ein Beispiel mit dem Raspberry Pi Pico zur Anwendung bringen willst.

Es gibt im Prinzip nur eine Sache, die in diesem JSON-Datensatz geändert werden muss. Das ist die IP-Adresse des MQTT-Brokers in Deinem Netzwerk (unten fett markiert).

[
    {
        "id": "6bd26d086ec56bcc",
        "type": "tab",
        "label": "Raspberry Pi Pico W",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "0ba1fe556b4df516",
        "type": "mqtt in",
        "z": "6bd26d086ec56bcc",
        "name": "",
        "topic": "button",
        "qos": "2",
        "datatype": "auto",
        "broker": "e3366b3402bf277f",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 70,
        "y": 40,
        "wires": [
            [
                "96bd05e952946982"
            ]
        ]
    },
    {
        "id": "96bd05e952946982",
        "type": "ui_text",
        "z": "6bd26d086ec56bcc",
        "group": "eb7c191627cacd7a",
        "order": 1,
        "width": 0,
        "height": 0,
        "name": "Taster",
        "label": "Taster",
        "format": "{{msg.payload}}",
        "layout": "row-left",
        "className": "",
        "x": 230,
        "y": 80,
        "wires": []
    },
    {
        "id": "18e4165eb04dcff6",
        "type": "mqtt in",
        "z": "6bd26d086ec56bcc",
        "name": "",
        "topic": "temp",
        "qos": "2",
        "datatype": "auto",
        "broker": "e3366b3402bf277f",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 70,
        "y": 140,
        "wires": [
            [
                "96873c14149cc425",
                "8029d8c5ec7655c7"
            ]
        ]
    },
    {
        "id": "96873c14149cc425",
        "type": "ui_gauge",
        "z": "6bd26d086ec56bcc",
        "name": "Temperatur Skala",
        "group": "eb7c191627cacd7a",
        "order": 2,
        "width": 0,
        "height": 0,
        "gtype": "gage",
        "title": "Temperatur",
        "label": "°C",
        "format": "{{value}}",
        "min": "15",
        "max": "50",
        "colors": [
            "#00b500",
            "#e6e600",
            "#ca3838"
        ],
        "seg1": "",
        "seg2": "",
        "className": "",
        "x": 270,
        "y": 200,
        "wires": []
    },
    {
        "id": "8029d8c5ec7655c7",
        "type": "ui_chart",
        "z": "6bd26d086ec56bcc",
        "name": "Temperatur Diagramm",
        "group": "eb7c191627cacd7a",
        "order": 3,
        "width": 0,
        "height": 0,
        "label": "Temperatur über die Zeit",
        "chartType": "line",
        "legend": "false",
        "xformat": "HH:mm:ss",
        "interpolate": "linear",
        "nodata": "",
        "dot": false,
        "ymin": "",
        "ymax": "",
        "removeOlder": 1,
        "removeOlderPoints": "",
        "removeOlderUnit": "3600",
        "cutout": 0,
        "useOneColor": false,
        "useUTC": false,
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "outputs": 1,
        "useDifferentColor": false,
        "className": "",
        "x": 280,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "e3366b3402bf277f",
        "type": "mqtt-broker",
        "name": "mosquitto",
        "broker": "192.168.0.10",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willPayload": "",
        "willMsg": {},
        "sessionExpiry": ""
    },
    {
        "id": "eb7c191627cacd7a",
        "type": "ui_group",
        "name": "Raspberry Pi Pico W",
        "tab": "e8ed66cde38e3a7d",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "e8ed66cde38e3a7d",
        "type": "ui_tab",
        "name": "Dashboard",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

Wenn man einen JSON-Datensatz importiert hat, dann muss der neue Flow „deployed“ mit Klick auf „Übernahme (deploy)“ werden. Jede Änderung an einem Flow muss auf diese Weise bestätigt werden. Nur dann wird die Änderung aktiv.

Dashboard aufrufen

Die Frage ist jetzt, wie man das Dashboard erreicht. Dazu muss man in einem anderen Browser-Fenster, das kann auch auf einem anderen Client sein, die folgende URL in die Browser-Adresszeile kopiert.

http://<IP-ADRESSE>:1880/ui/

Hinweis: Die IP-Adresse ist die Adresse des Raspberry Pi auf dem Node-RED läuft.

FAQ: Wie kann man "Node-RED-Sourcecode" erstellen oder aus Grafik ableiten?

Node-RED ist ein rein visuelles Programmiertool. Es gibt keine Möglichkeit die Darstellung mit einem Texteditor direkt zu beeinflussen. Das ist auch nicht gewünscht. Node-RED kommt ohne Quellcode aus, was der Vorteil ist.
Auf Wunsch kann man einen Flow als JSON-Datensatz exportieren, in einem Text-Editor bearbeiten und wieder importieren. Von dieser Vorgehensweise ist abzuraten.