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.

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.

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.

Raspberry Pi Pico: Beispiele mit MQTT

Dieses Dashboard macht nur Sinn, wenn Du es zusammen mit den MQTT-Beispielen mit dem Mikrocontroller Raspberry Pi Pico W verwendest.

Weitere verwandte Themen:

Teilen:

Elektronik-Set Raspberry Pi Edition
Elektronik-Set Raspberry Pi Edition

Elektronik erleben mit dem Raspberry Pi mit Python und GPIO Zero

  • leichter Einstieg ins Hardware-nahe Programmieren mit Python und GPIO Zero
  • Experimentieren und Programmieren ohne Vorkenntnisse
  • sofort Loslegen mit All-in-one-Set

Mehr Informationen Elektronik-Set jetzt bestellen

Programmieren mit dem Raspberry Pi Pico
Online-Workshop

Programmieren mit dem Raspberry Pi Pico

Online-Workshop mit einer Einführung ins Physical Computing mit Leuchtdioden, Taster und Temperatursensor.

  • Hardware-nahes Programmieren mit dem Raspberry Pi Pico und MicroPython ohne Vorkenntnisse
  • Optimaler Einstieg, um eigene Ideen zu verwirklichen und Steuerungen zu programmieren
  • Inklusive Elektronik-Set mit einem Raspberry Pi Pico, Zubehör und elektronischen Bauteilen

Mehr Informationen Am Online-Workshop teilnehmen