Node-RED Dashboard bauen — der umfassende Einsteiger-Guide

Mit Node-RED baust du dir in Minuten eine eigene Weboberfläche — ganz ohne Frontend-Code. Diese Anleitung führt dich Schritt für Schritt von der Installation bis zum fertigen Dashboard, erklärt jeden wichtigen Baustein einzeln und zeigt, wie du Widgets sogar zur Laufzeit per Nachricht umkonfigurierst.

Voraussetzungen & Installation

Du brauchst eine laufende Node-RED-Instanz. Den Editor erreichst du im Browser unter der Adresse deines Node-RED-Servers, standardmässig Port 1880 (z. B. http://localhost:1880).

1. Palette öffnen. Klicke oben rechts auf das Menü (☰) → „Manage palette" → Reiter „Install".

2. Dashboard suchen. Tippe @flowfuse/node-red-dashboard ein und klicke bei dem Treffer auf „Install".

3. Fertig. Nach der Installation erscheinen in der Palette (links) neue Nodes mit dem Präfix ui-* — das sind deine Dashboard-Bausteine.

Der Node-RED-Editor — kurz erklärt

Falls Node-RED neu für dich ist: Links ist die Palette mit allen Nodes, in der Mitte der Flow-Bereich (deine Arbeitsfläche), rechts die Seitenleiste mit Info und Debug, und oben rechts der Deploy-Button, mit dem du Änderungen aktiv schaltest.

Wie Nodes und Nachrichten funktionieren

Ein Flow besteht aus Nodes, die du mit Drähten verbindest. Durch diese Drähte wandert eine Nachricht — das msg-Objekt — von links nach rechts. Der eigentliche Wert steckt fast immer in msg.payload. Genau diesen Wert nehmen die Dashboard-Widgets entgegen.

Die Dashboard-Struktur: Base → Page → Group → Widget

Dashboard 2.0 ist in vier Ebenen verschachtelt. Du legst sie direkt in der Konfiguration eines Widgets an (über die kleinen Stift-Symbole):

ui-base. Die Dashboard-App selbst. Sie legt die Adresse fest, unter der alles erreichbar ist (Standard: /dashboard).

ui-page. Eine einzelne Seite mit eigener Adresse (z. B. /dashboard/uebersicht). Über mehrere Pages baust du eine Navigation.

ui-group. Eine Karte/Box auf einer Seite, die zusammengehörige Widgets bündelt.

Widget. Das einzelne Element — Gauge, Diagramm, Button usw. — das in einer Group liegt.

Dein erstes Widget: eine Anzeige (ui-gauge)

1. Node platzieren. Ziehe einen ui-gauge aus der Palette in den Flow.

2. Konfigurieren. Doppelklick öffnet die Einstellungen. Lege über „Group" eine neue Group an (und dabei gleich Page und Base). Setze ein Label wie „Temperatur" und die Grösse (Size).

3. Wert liefern. Ziehe einen inject-Node davor, stelle ihn auf eine Zahl (msg.payload) und verbinde ihn mit dem Gauge.

4. Deploy. Klicke oben rechts auf „Deploy", um den Flow zu aktivieren.

5. Ansehen. Öffne im Browser /dashboard — dein Gauge ist da und zeigt den injizierten Wert an.

Die wichtigsten Widgets — jeder Node erklärt

Widgets teilen sich grob in zwei Gruppen: Anzeige-Widgets stellen Werte dar (sie empfangen msg.payload), Eingabe-Widgets erzeugen Werte (sie senden bei Bedienung selbst eine Nachricht).

ui-gauge (Anzeige). Zeigt eine Zahl als Tacho/Skala. Wert über msg.payload. In der Konfiguration legst du Bereich (min/max), Einheit und Schwellwert-Farben fest. Bei mehreren Nadeln wählt msg.topic die Nadel.

ui-chart (Anzeige). Zeichnet den Zeitverlauf als Linien- oder Balkendiagramm. Jeder Punkt kommt über msg.payload; mit msg.topic trennst du mehrere Messreihen (Serien) im selben Diagramm.

ui-text (Anzeige). Zeigt einen beschrifteten Text/Wert, z. B. „Temperatur: 21 °C". Das Format steuerst du mit Platzhaltern wie {{msg.payload}}.

ui-button (Eingabe). Löst beim Klick eine Aktion aus und sendet eine Nachricht. Welcher payload/topic gesendet wird, stellst du im Node ein.

ui-slider (Eingabe). Stellt eine Zahl per Schieberegler ein (min/max/step) und sendet sie als msg.payload, sobald du schiebst.

ui-switch (Eingabe). Ein Ein/Aus-Schalter. Sendet standardmässig true/false — du kannst aber eigene On-/Off-Werte definieren.

ui-text-input (Eingabe). Eingabefeld für Text oder Zahlen; der Inhalt wird als msg.payload gesendet.

ui-dropdown (Eingabe). Auswahl aus einer Liste vordefinierter Optionen; die gewählte Option kommt als msg.payload.

ui-number-input (Eingabe). Zahleneingabe mit Plus/Minus-Knöpfen.

ui-notification (Anzeige). Blendet eine Toast-Meldung oder ein Popup ein — Text über msg.payload. Praktisch für Warnungen.

ui-table (Anzeige). Stellt ein Array von Objekten (msg.payload) als Tabelle dar.

ui-template (beides). Für Spezialfälle: eigenes HTML/Vue, wenn ein Standard-Widget nicht reicht.

Werte anzeigen und Eingaben verarbeiten

Die Richtung entscheidet: Eine Datenquelle (inject, mqtt in, eine function) liefert links den Wert und verbindet sich rechts mit einem Anzeige-Widget. Ein Eingabe-Widget steht dagegen am Anfang: Es sendet bei Bedienung eine Nachricht, die du danach weiterverarbeitest — etwa in einer function oder einem mqtt-out-Node.

Widgets dynamisch per Nachricht steuern (ui_update)

Das Mächtigste an Dashboard 2.0: Du setzt mit einer einzigen Nachricht nicht nur den Wert, sondern änderst auch Eigenschaften zur Laufzeit. Dazu legst du im msg-Objekt ein Feld ui_update an. Beispiel in einem function-Node, der eine Gauge live umkonfiguriert:

1// function-Node: Wert UND Eigenschaften setzen
2msg.payload = 87;            // der anzuzeigende Wert
3msg.ui_update = {            // Eigenschaften zur Laufzeit ändern
4  label: "CPU-Last",
5  units: "%",
6  gaugeOptions: {
7    min: 0,
8    max: 100
9  }
10};
11return msg;

Die wichtigsten Felder, die ein Widget aus der Nachricht liest:

msg.payload. Der eigentliche Wert (Zahl, Text, Array …).

msg.topic. Wählt bei Diagrammen die Serie bzw. bei Multi-Gauges die Nadel.

msg.ui_update. Ein Objekt, das Einstellungen überschreibt (Label, Einheit, Bereich, Farben …) — je Widget gibt es passende Felder.

msg.enabled. true/false — schaltet ein Widget aktiv oder grau/inaktiv.

msg.class. Hängt eine eigene CSS-Klasse an, um das Aussehen anzupassen.

msg.formattedValue. Ein bereits formatierter Text, der statt des Rohwerts angezeigt wird.

Ein Beispiel-Flow

So sieht ein typischer Dashboard-Flow aus: eine Datenquelle pro Anzeige, plus ein Eingabe-Widget, das eine Reaktion auslöst.

inject → ui-gauge. Ein Timer schickt regelmässig einen Wert an die Gauge.

mqtt in → ui-chart. Sensorwerte vom MQTT-Broker landen als Verlauf im Diagramm (msg.topic = Sensorname trennt die Serien).

ui-button → function → ui-text. Ein Klick löst eine function aus, die eine Rückmeldung baut und im Text-Widget anzeigt.

Layout & Tipps für ein aufgeräumtes Dashboard

Grössen bewusst wählen. Über „Size" bestimmst du, wie viele Spalten/Zeilen ein Widget belegt — so entsteht ein sauberes Raster.

Pro Group wenig zeigen. Lieber mehrere kleine, klar benannte Groups als eine überladene.

Mehrere Pages nutzen. Trenne Themen auf eigene Seiten (Übersicht, Details, Einstellungen) statt alles auf eine Seite zu packen.

Hinweis: das klassische Dashboard (node-red-dashboard)

Viele bestehende Installationen nutzen noch das klassische node-red-dashboard. Es funktioniert sehr ähnlich, unterscheidet sich aber in drei Punkten:

Andere Nodes. Die Bausteine heissen dort ui_gauge, ui_chart usw. (mit Unterstrich), und die Struktur ist Tab → Group → Widget.

Andere Adresse. Das Dashboard liegt unter /ui statt /dashboard.

Andere Steuer-Nachricht. Dynamische Änderungen laufen über msg.ui_control statt msg.ui_update.

Für neue Projekte ist Dashboard 2.0 die empfohlene Wahl, weil es aktiv weiterentwickelt wird.

Fazit

Mit wenigen Nodes steht eine funktionale Weboberfläche zum Anzeigen und Steuern. Wer das Zusammenspiel aus Struktur (Base → Page → Group → Widget), den richtigen Widgets und der dynamischen Steuerung über msg.ui_update verstanden hat, baut in kurzer Zeit Dashboards, die im Alltag wirklich tragen.