Node-RED Dashboard – Editierbare Presets

Wir möchten Dir in diesem Beitrag zeigen, wie man in einem Dashboard mehrere Presets bzw. Speicherbänke mit Daten füllen und anschließend wieder laden kann. Die in diesem Beitrag vorgestellte Technik bietet sich allerdings eher für eine kleine Anzahl an Einstellungen an. Wenn Du alle Einstellungen deines Dashboards abspeichern möchtest, gibt es bessere Techniken.

Um diesem Beitrag folgen zu können, benötigst Du Grundkenntnisse im Umgang mit Node-RED und dem Node-RED Dashboard. Wie Du Node-RED auf einem RaspberryPi installierst erfährst Du in unserem Beitrag Node-RED auf dem Raspberry Pi installieren (Docker). Einen Einstieg ins Node-RED Dashboard findest du hier: Start mit dem Node-RED Dashboard.

Preset-Auswahl hinzufügen

Füge zunächst eine dropdown-Node zu deinem Flow hinzu. Als label haben wir „Preset“ gewählt, da man über dieses dropdown später das aktive preset auswählen kann. Unter Options muss jetzt für jedes mögliche Preset ein neuer Eintrag erstellt werden. In unserem Fall haben wir 5 Presets erstellt.

Bei den Optionen ist das erste Eingabefeld (grün) der Wert der jeweiligen Option. Dieser muss eindeutig sein, damit er zur Speicherung und Abfrage der aktuellen Werte verwendet werden kann. Das zweite Eingabefeld (gelb) beinhaltet den Namen des Presets, der später im Dashboard angezeigt werden soll.

Speichere die Node und füge eine Text-Node hinzu. Diese verwenden wir um das aktuelle Preset anzuzeigen. Verbinde den Ausgang der dropdown-Node einfach mit der Text-Node.

Wenn Du die Änderungen jetzt deployst/veröffentlichst siehst Du, dass im Dashboard beim Text noch kein Preset angezeigt wirst. Wechsel das Preset über die Dropdown-Box. Bei Text-Element wird Dir jetzt die Id des ausgewählten Presets angezeigt.

Speichern des aktiven Presets

Als nächstes müssen wir das aktive Preset irgendwo abspeichern, wo wir von überall drauf zugreifen können. Hierfür bietet sich entweder der globale- oder der flow-Context an. Da diese Technik sich eher für wenige Einstellungen eignet, verwenden wir nur den flow-Context. Auf diesen kann man nur aus dem aktuellen Flow zugreifen.

Füge hierfür eine change-Node ein. In den Node-Einstellungen musst du zunächst vor dem ersten Eingabefeld unter Regeln auf die graue Fläche klicken und den Context auf flow umstellen. Gebe anschließend im ersten Eingabefeld den Namen der Variable an. Wir haben einfach selectedPreset als Namen gewählt, im Prinzip kannst Du diesen aber frei wählen.

Den Context vor dem zweiten Eingabefeld musst du auf msg setzen und in das entsprechende Eingabefeld payload eingeben. Hierdurch speicherst du den Inhalt aus dem payload-Feld der Nachricht in die flow-Variable selectedPreset.

Verbinde anschließend den Ausgang der dropdown-Node mit dem Eingang der change-Node.

Speichern eines Wertes

Erstelle jetzt eine Slider-Node. Theoretisch würde auch jede andere Eingabenode vom Dashboard funktionieren. Die Slider-Node ist allerdings ziemlich einfach zu benutzen und in vielen Anwendungsfällen einsetzbar. Wir haben diesem Slider das Label Helligkeit gegeben.

Zum abspeichern des Slider-Wertes benutzen wir eine function-Node. Theoretisch wäre dies auch mit switch und change-Nodes möglich, allerdings lässt sich das ganze mit einer function-Node mit weniger Aufwand und deutlich dynamischer realisieren. Wenn später weitere Presets hinzugefügt werden sollen, müssen diese einfach nur in den Optionen der dropdown-Node hinterlegt werden.

Füge das folgende Skript in der function-Node hinzu und verbinde den Ausgang der slider-Node mit dem Eingang der function-Node:

// Laden des aktuell ausgewählten presets
const selectedPreset = flow.get('selectedPreset');

// Speichern der Helligkeit aus message.payload in eine
// flow-variable mit dem Aufbau <preset>_<name>
flow.set(selectedPreset + '_brightness', msg.payload);

// Die Nachricht wird einfach so weitergegeben, wie sie
// in die Node gegeben wurde.
return msg;
Code-Sprache: JavaScript (javascript)

Zunächst ließt das Sktipt das aktuelle Preset, das wir in die flow-Variable selectedPreset geschrieben haben, aus. Anschließend wird eine neue Variable im flow-Context angelegt. Diese folgt dem folgendem Schema: <preset>_<name>. Der Name wäre in diesem Fall brightness und müsste für jeden weiteren zu speichernden Wert angepasst werden. Mit diesem Schema würde sich für das Preset 1 der Variablenname 1_brightness und für das Preset 2 der Name 2_brightness ergeben. Hierdurch können leicht mehrere unterschiedliche Werte unter einem Namen abgespeichert werden.

Auslesen eines Wertes

Nachdem der Wert des Sliders im flow-Context gespeichert wurde müssen diese Werte auch wieder geladen werden, sobald das Preset geändert wird. Dies machen wir, indem nach dem Ändern und Speichern des Presets der entsprechende Wert ausgelesen und an die Slider-Node übergeben wird.

Hierfür brauchen wir eine change-Node um den payload einer Nachricht auf den entsprechenden Wert aus dem flow-Context zu ändern. Theoretisch lässt sich auch hier eine function-Node einsetzen, die change-Node ist in diesem Fall aber etwas einfacher zu verwenden. Um den Wert dynamisch auslesen zu können, muss beim zweiten Eingabefeld unter Regeln die Art auf Ausdruck geändert werden.

Jetzt muss noch der folgende Ausdruck verwendet werden um den entsprechenden Wert aus dem flow-Context auszulesen:

$flowContext($flowContext("selectedPreset") & "_brightness")
Code-Sprache: PHP (php)

Mit $flowContext(<name>) lässt sich der Wert einer Variable auslesen und mit dem &-Zeichen lassen sich zwei Zeichenketten verbinden. Dies wird zunächst dafür verwendet um den Namen der Variable herauszufinden ($flowContext(„selectedPreset“) & „_brightness“). Anschließend wird der so zusammengesetzte Name verwendet um den Wert abzufragen.

// Laden des aktuell ausgewählten presets
const selectedPreset = flow.get('selectedPreset');

// Speichern der Helligkeit aus message.payload in eine
// flow-variable mit dem Aufbau <preset>_<name>
const value = flow.get(selectedPreset + '_brightness');

// Überschreiben des msg-payloads
msg.payload = value;

// Nachricht mit dem neuen payload zurück geben
return msg;
Code-Sprache: JSON / JSON mit Kommentaren (json)

Jetzt muss die gerade angelegte change-Node nur noch zwischen der ersten angelegten change-Node und der slider-Node eingefügt und mit diesen verbunden werden. Zum überprüfen der gespeicherten Werte kannst du auch noch eine Debug-Node mit der gerade angelegten change-Node verbinden:

Überprüfen der Funktionsweise

Öffne jetzt das Dashboard, wähle das erste Preset aus und stelle die Helligkeit ein. Wechsel anschließend mit dem dropdown-Element auf ein anderes Preset und stelle eine andere Helligkeit ein. Wenn du jetzt zurück auf das erste Preset wechselst sollte sich die der Slider für die Helligkeit verschieben und (falls du die Debug-Node hinzugefügt hast) der entsprechende Wert im Node-RED Debugging-Fenster ausgegeben werden.

Auch wenn die vorgestellte Technik nicht sehr gut zum Speichern und Laden von vielen Daten geeignet ist, da für jeden neuen Wert mehr Verbindungen zur ersten change-Node gezogen werden müssen, ist sie für kleine Presets (bspw. für ein einzelnes Zimmer) gut geeignet. Wir hoffen, dass wir Dir mit diesem Beitrag weiterhelfen konnten.