Node-RED Dashboard – Button

In diesem Beitrag wollen wir Dir das Steuerelement Button vom Node-RED Dashboard, sowie einige Verwendungszwecke vorstellen.

Solltest Du noch kein Node-RED mit dem Dashboard-Plugin installiert haben, findest du in unserem Beitrag Start mit dem Node-RED Dashboard eine Anleitung zu diesem Thema.

Der Button ist eines der am einfachsten verwendbaren Elemente des Node-RED Dashboards. Die Button-Node bietet hierbei einen Eingang und einen Ausgang.

In der Flow-Administration sieht die Node so aus:

Und in dem Dashboard wird die Node wie folgt dargestellt:

Nach der Erstellung der Button-Node musst du diese Node in den Node-Einstellungen noch mit einer Gruppe verbinden. Aus diesem Grund, hat die Button-Node nach der Erstellung auch noch ein kleines Dreieck am oberen, rechten Rand.

Einstellungen

Die Button-Node bietet einige Einstellungen, die du bei dieser vornehmen kannst:

• Icon: Jeder Button kann ein Icon beinhalten, welches die Funktion, die hinter der Schaltfläche steckt verdeutlicht. Du kannst dabei in der aktuellen Version von Node-RED aus den Icons von Material-UI, FontAwesome und WeatherIcons wählen.
• Label: Im Label-Feld kann die Beschriftung der Schaltfläche angepasst werden.
• Tooltip: Der Tooltip wird im Dashboard angezeigt, wenn der Benutzer den Mauszeiger über den Button bewegt oder am Smartphone den Button lange gedrückt hält.
• Colour: Über diese Einstellung kann die Textfarbe des Buttons angepasst werden. Hiermit ist es möglich, besonders wichtige Buttons hervorzuheben.
• Background: Du kannst auch die Hintergrundfarbe des Buttons anpassen. Es ist hier auch möglich leicht durchsichtige Farben zu verwenden, indem man die RGB-Werte mit einem alpha-Kanal einträgt (Beispiel: Schwarz mit 50% Durchsichtigkeit: rgba(0, 0, 0, 0.5)).
• Topic/Payload: Die Werte, die du hier eingibst werden gesendet, sobald ein Benutzer im Dashboard auf den Button klickt. Du kannst diese Einstellungen verwenden, um mit dem Klick auf den Button direkt eine Aktion auszulösen.
• Name: Diese Einstellung ist bei fast jeder Node vorhanden und erlaubt die benutzerdefinierte Benennung einer Node in der Flow-Administration. Wenn du viele Buttons zu einem Flow hinzufügst, kann dir diese Option helfen den Überblick zu bewahren.

Eingang

Über den Eingang können mehrere Einstellungen des Buttons dynamisch angepasst werden. Hierzu gehören beispielsweise die Text- und Hintergrundfarbe, sowie die Beschriftung des Buttons. Du musst die Einstellungen der Node hierfür allerdings etwas anpassen:

Anschließend kannst du (beispielsweise mit einer inject und einer change-Node) die entsprechenden Werte setzen:

Beachte hierbei, dass du das Icon über das Feld ui_content->icon setzen musst. Des Weiteren ist es auch möglich, den button zu deaktivieren, indem man das Feld enabled auf false setzt.

Ausgang

Aus dem Ausgang der button-Node wird die unter Einstellungen definierte Nachricht ausgegeben, sobald jemand auf den Button im Dashboard klickt.

Einsatzmöglichkeiten

Buttons können für diverse Aufgaben eingesetzt, bei denen eine einfache Aktion ausgeführt werden soll. Hierzu zählt bspw. das An-/Ausschalten von Licht, wobei hierfür auch die switch-Node gut einsetzbar ist.

Auch zum Öffnen einer Tür oder Rollladen kann ein Button eingesetzt werden oder zur Aktivierung von WPS oder Zigbee-Connect.