Die Node-RED Erweiterung node-red-dashboard ermöglicht dir die schnelle Erstellung einer grafische Oberfläche für dein Homeautomation-System. Über dein Smartphone oder einen PC kannst du über diese Oberfläche Aktionen in deinem Smarthome ausführen.
Wir zeigen dir in diesem Beitrag, wie du die Erweiterung node-red-dashboard installierst, ein erstes Dashboard erstellst und das Design von diesem etwas anpasst.
Du benötigst für diesen Beitrag ein installiertes Node-RED-System. Die Installation von Node-RED haben wir bereits in unserem Beitrag Node-RED auf dem Raspberry Pi installieren (Docker) gezeigt.
Öffne zur Installation von node-red-dashboard zunächst das Webinterface deiner Node-RED-Installation. Öffne in dem Webinterface über die drei Balken am oberen, rechten Rand das Menü.
Klicke anschließend in diesem Menü auf den Eintrag Palette verwalten. Es öffnet sich ein weiteres Fenster mit dem Namen Benutzereinstellungen. Hier sollte auf der linken Seite bereits der Punkt Palette ausgewählt sein. Wechsel jetzt im oberen Bereich des Fensters auf den Tab Installieren.
Gebe anschließend in das Suchfeld den Begriff dashboard ein. Unter dem Suchfeld wird dir nun eine Liste von Paletten/Plugins angezeigt. Suche nun in der Liste nach der Palette node-red-dashboard. Installiere anschließend diese Palette mit einem Klick auf die Schaltfläche Installieren am rechten Rand des Fensters.
Es sollte sich jetzt am oberen Bildschirmrand ein Dialog öffnen. Dieser informiert dich darüber, dass du die Dokumentation der jeweiligen Palette lesen solltest. Klicke einfach auf die Schaltfläche installieren, um die Installation fortzusetzen.
In der Liste mit den Paletten ist jetzt eine Ladeanzeige zu sehen. Solltest du weitere Informationen zu der Installation haben wollen, kannst du hier auf die Schaltfläche View log klicken. Bei einer erfolgreichen Installation werden dir am oberen Bildschirmrand alle installierten Nodes angezeigt.
Wenn du in der Node-Liste am linken Bildschirmrand nach unten scrollst, siehst du die neu hinzugefügte Kategorie dashboard. Wir werden dir in diesem Beitrag die button-Node noch genauer vorstellen. Auf der rechten Seite solltest du oben, unterhalb des drei Striche des Menüs eine neue Schaltfläche mit einem Diagramm sehen.
Klicke auf die Schaltfläche mit dem Diagramm. Es öffnet sich der Reiter dashboard mit dem untergeordneten Reiter Layout. Ansonsten ist in diesem Reiter bisher nicht besonders viel zu sehen. Mit einem Klick auf die Box mit dem Pfeil rechts neben den Reitern gelangst du zum eigentlichen Dashboard.
Wenn du auf diesen Link klickst, öffnet sich eine weiße Seite mit einem Logo und etwas Text. Der Text weist dich dabei darauf hin, dass du noch UI nodes hinzufügen musst.
Damit du etwas sehen kannst, solltest du einen Button hinzufügen. Ziehe diesen einfach von der Node-Liste auf der linken Seite in den Arbeitsbereich in der Mitte.
Du erkennst bereits am orangen Dreieck, dass noch weitere Einstellungen getroffen werden müssen. Durch einen Doppelklick auf die Node öffnest du die Einstellungen von dieser. Hier ist die Option Group bereits rot hinterlegt. Der Text lässt vermuten, dass du zunächst eine neue Gruppe anlegen musst. Dies kannst du über die Schaltfläche mit dem Stift machen. Es gibt mehrere Arten, wie du dein Dashboard strukturieren kannst. Häufig werden Gruppen benutzt um einzelne Steuerelemente eines Raumes, wie bspw. Licht, Heizung, etc. oder mehrere Lampen zusammen zu fassen.
Es öffnet sich eine neue Seite mit Einstellungen. Hier kannst du für die Gruppe einen Namen vergeben. Des Weiteren sieht man auch hier an der roten Umrandung, dass ein ui_tab benötigt wird. Auch diesen kannst du über einen Klick auf die Schaltfläche mit dem Stift erstellen. Über Tabs kann das Dashboard bspw. nach einzelnen Räumen unterteilt werden. Trage auch beim Tab einen Namen in das entsprechende Feld ein. Alle anderen Optionen sind fürs Erste nicht weiter relevant.
Durch einen Klick auf die rote Schaltfläche Hinzufügen am oberen rechten Rand des Fensters erstellst du den entsprechenden Tab. Der erstellte Tab wird im darauf folgenden Fenster automatisch ausgewählt. Durch einen erneuten Klick auf Hinzufügen wird nun die Gruppe erstellt. In den Node-Einstellungen werden jetzt sowohl der Name des Tabs, als auch der Name der Gruppe unter der Option Group angezeigt. Ein Klick auf Fertig speichert die Einstellungen.
Das orange Dreieck sollte nun von der Node verschwunden sein. Durch eine Klick auf die Schaltfläche deploy kannst du nun deine Einstellungen endgültig übernehmen. Solltest du das Dashboard noch offen haben, aktualisiert sich dieses nach kurzer Zeit selber. Falls du das Dashboard nicht mehr offen hast, öffne es einfach nochmal. Du siehst jetzt die Namen deines Tabs, deiner Gruppe und einen Button auf dem Dashboard.
Öffne jetzt wieder die node-red-dashboard Einstellungen über die Diagramm-Schaltfläche. Du siehst hier jetzt deinen erstellten Tab, sowie deine erstellte Gruppe. Wenn du später mehrere Tabs und Gruppen haben solltest, kannst du diese über die Schaltflächen mit den Pfeilen sortieren.
Wechsel nun über den Tab Site auf die Einstellungen zu der Dashboard-Seite. Hier kannst du einige allgemeine Einstellungen zum Dashboard ändern.
Der Titel des Dashboards wird bspw. in deinem Webbrowser beim jeweiligen Tab angezeigt.
Über die erste Option lässt sich steuern, ob die Leiste mit dem Namen des Tabs angezeigt werden soll. Du solltest diese Leiste fürs erste aktiviert lassen, bis du dir sicher bist, dass du sie wirklich nicht haben willst.
Die nächste Option gibt an, ob das Menü immer am linken Rand angezeigt werden soll. Da du aktuell nur einen Tab angelegt hast, wird dir das Menü aktuell ohnehin noch nicht angezeigt. Ändere diese Einstellung einfach später, wenn du gerne ein anderes Verhalten hättest.
Die dritte Option erlaubt dir die Aktivierung bzw. Deaktivierung der Swipe-Geste zum Wechsel zwischen den Tabs. Ich habe diese Funktion bei mir deaktiviert, weil sie gelegentlich zu einem unbeabsichtigten Wechsel zwischen Tabs führt. Sobald du mehrere Tabs zu deinem Node-RED Dashboard hinzugefügt hast, kannst du mit diesen Optionen am besten etwas experimentieren.
Wechsel nun zum Tab Theme. Hier kannst du das Aussehen und die Farbe deines Dashboards anpassen. Standardmäßig stehen dir unter Style drei Optionen zur Verfügung. So kannst du zum einen zwischen dem hellen und dem dunklen Style wählen. Bei diesen beiden Style’s kannst du die Basisfarbe und die Schriftart anpassen.
Sollten dir diese Optionen nicht ausreichen, kannst du den Style Custom auswählen. Hier kannst du für viele der Elemente des Dashboard die Farben individuell festlegen.
Vergesse nicht deine Änderungen über einen Klick auf deploy zu speichern.
Wir wollen nun den bereits angelegten Button um etwas Funktionalität erweitern. Ziehe hierfür eine debug-Node aus der Node-Liste auf den Arbeitsbereich. Verbinde den Eingang der debug-Node mit dem Ausgang der button-Node.
Speichere nun den Node-RED Flow durch einen Klick auf deploy. Wechsel in das Fenster mit den Debugnachrichten von Node-RED. Dies kannst du über die Schaltfläche mit dem Käfer im oberen, rechten Bereich des Webinterfaces machen.
Öffne jetzt das Dashboard und klicke auf den Button. Du siehst jetzt im Fenster mit den Debugnachrichten ein Nachricht. Hierbei handelt es sich um die ID der button-Node.
Für gewöhnlich willst du aber wahrscheinlich eine eigene Nachricht haben. Aus diesem Grund erlaubt dir die button-Node die Konfiguration der Nachricht, bzw. des payloads der gesendet werden soll, wenn der Button geklickt wurde.
Öffne hierfür durch eine Doppelklick auf die button-Node die Einstellungen dieser Node. Im Bereich When clicked, send: kannst du im Eingabefeld neben payload einen eigenen Text angeben, der gesendet werden soll.
Du kannst auch den Datentyp des payloads ändern, indem du auf den kleinen Pfeil links neben dem Eingabefeld klickst. Mit einem Klick auf Fertig speicherst du den angepassten payload. Klicke anschließend auf deploy.
Wechsel jetzt zum Node-RED Dashboard und klicke erneut auf den Button. Im Fenster mit den Debugnachrichten wird dir jetzt der von dir eingestellte payload angezeigt.
Herzlichen Glückwunsch, du hast das Node-RED Dashboard erfolgreich bei dir eingerichtet und auch bereits eine erste Schaltfläche zu deinem Dashboard hinzugefügt. Die Dashboard-Erweiterung von Node-RED bietet viele Funktionen, auf die wir noch nicht eingegangen sind. Am besten kannst du am besten selber etwas mit der Erweiterung experimentieren. Wir wünschen dir viel Spaß dabei und melden uns bald mit einem neuen Tutorial zu Node-RED und dem Node-RED Dashboard wieder.
