Ich weiß nicht ob Dashboards DAS (eine) Mittel sind um das Herz eines Nerds höher schlagen zu lassen, aber ganz sicher sind sie ein Mittel um das Nerd-Herz höher schlagen zu lassen. Wer mit StarTrek und Co. groß geworden ist für den sind Dashboard-ähnliche Übersichten in Form von Diagrammen und Grafiken der inbegriff von Technologie. Dieses Feeling kann man sich mit NodeRed dank bestimmter Nodes nun selber bereiten.
Denn, hat man sein SmartHome erst mal so weit, dass es alle möglichen Daten über die eigenen vier Wände sammelt möchte man diese natürlich auch präsentieren. Aber wie? Immerhin kann man sich diese Daten nicht einfach wie die letzten Urlaubsfotos in ein Fotoalbum kleben.
Ein einfacher und dazu noch informativer und dekorativer Weg ist die vorhandenen Daten über die Dashboard-Node für NodeRed zu präsentieren. Diese bietet neben diversen Anzeigelementen auch die Möglichkeit mit Eurem SmartHome System zu interargieren. So könnt Ihr Werte einstellen, virtuelle Schalter umlegen, Aktionen auslösen und gleichzeitig deren Status überwachen.
Eine Übersicht zu den verschiedenen Funktionen der Dashboard-Node findet Ihr im folgenden Artikel
Requirements
Helpful articles: So that you can install new nodes, NodeRed should of course already be installed. How to prepare a RaspberryPi and then install NodeRed on it is described in the following articles.
In the following list you will find all the parts you need to implement this article.
Log into the NodeRed configuration interface
Before you can edit your NodeRed configuration, you must - if activated - first log into the NodeRed configuration interface.
View of the login dialog. Here you have to enter the login data that you specified during the configuration of the login. You can find information about this in the article NodeRed - set up user login.
Dashboard-Node installieren
Damit Ihr die Dashboard-Nodes verwenden könnt müsst Ihr die Node
Ansicht während der Installation der Node “node-red-dashboard”.
Übersicht über die verfügbaren Ein- und Ausgabe-Nodes
Durch die Installation der Dashboard-Nodes erhaltet Ihr ein ganzes Paket an zusätzlichen Nodes die sich zur Anzeige und Eingabe verschiedener Werte eignen. Diese werden Euch wie gewohnt in der Node-Palette im linken Bereich des Konfigurationsmenüs angezeigt. Details zu den einzelnen Nodes sind im folgenden aufgelistet.
Ansicht der Dashboard-Nodes in der Node-Palette.
Button-Node und Positionierung der Elemente im Dashboard
Die erste und simpelste Node ist die “Button-Node”. Mithilfe dieser könnt Ihr auf Eurem Dashoard einen Taster positionieren. Dieser funktioniert dann wie ein Taster in der realen Welt. Wird er angeklickt sendet er einen einstellbaren Wert und ein einstellbares Topic an die verknüpfte Node.
Button-Nodes lassen sich zum Beispiel sehr gut dazu nutzen Aktionen auszulösen. So könnt Ihr zum Beispiel Lampen Ein- und Ausschalten.
Bevor Ihr die Button-Node nutzen könnt, muss diese aber zunächst auf dem Layout-Gitter des Dashboards positioniert werden.
Denn neben den Funktionen der eigentlich Nodes, lässt sich für jede auch die Positionierung auf dem Layout des späteren Dashboards konfigurieren. Das Dashboard ist also eine separate Webseite die Zentral über die Dashboard-Konfiguration verwaltet werden kann.
Durch die Installation der Dashboard-Nodes wurde im linken Konfigurationsbereich nämlich ein neuer Reiter hinzugefügt. Ihr erkennt Ihn an dem an ein Balkendiagramm angelehntem Icon. Klickt auf dieses um die Grundkonfiguration des Dashboards zu öffnen.
Hier seht Ihr im oberen Bereich die verschiedenen Reiter “Layout”, “Theme” und “Site. Rechts daneben ist wird noch ein nach oben-rechts zeigender Pfeil angezeigt. Klickt Ihr diesen an werdet Ihr auf die Webseite des Dashboards weitergeleitet.
Ihr erreicht die Dashboard-Seite indem Ihr im Dashboard-Reiter auf das mit dem Masuzeiger markierte Symbol klickt.
Alternativ könnt Ihr die Dashboard-Seite aber auch direkt anwählen. Dazu müsst Ihr der Adresse zu Eurer NodeRed-Konfigurationsseite lediglich ein “/ui/” anhängen. Lautet die Adresse zu Eurer NodeRed Konfigurationsseite zum Beispiel https:// 192.168.172.5:1880 dann lautet die Adresse zu Eurem Dashboard https:// 192.168.172.5:1880/ui/
Zunächst geht es um die Aufteilung des Layouts. Mit dessen Hilfe Ihr die jeweiligen Eingabe- und Ausgabe-Elemente (Dashboard-Nodes) fast frei auf dem Dashboard positionieren könnt. Das Dashboard bietet dabei die Möglichkeit einzelne Dashboard-Nodes in Gruppen zusammenzufassen. Die Anzeige-Reihenfolge dieser Nodes lässt sich dann auf dem Dashboard einstellen. Zusätzlich können bzw. müssen diese gruppierten Nodes einem bestimmten “Tab” zugewiesen werden.
Neben dem “Home”-Tab lassen sich nämlich noch weitere Tabs erstellen. Dies ist zum Beispiel praktisch um in einem Smart-Home System die Elemente in verschiedenen Räumen auch virtuell voneinander zu trennen. So könnt Ihr alle Sensoren und Aktoren des Wohnzimmers auch in einem Tab mit dem Namen “Wohnzimmer” zusammenfassen. Dies erleichtert die Übersicht und bringt Struktur in die oft schnell zunehmende Anzahl von Nodes.
Dies ist auch das was man im Reiter “Layout” der Dashboard-Konfiguration sehen und einstellen kann. Dort werden Euch alle Tabs und die zugehörigen Gruppen angezeigt. Im nachfolgenden Screenshot
“Layout”-Bereich der Dashboard-Konfiguration. Hier könnt Ihr einen Teil der einzelnen Tabs (in diesem Beispiel “Home”, “Raspi-Daten”, “Einstellungen” und “Tasmota-Status”) sehen. Außerdem lassen sich die Gruppen erkennen. Zum Tab “Raspi-Daten” gehören zum Beispiel die Gruppen “1” und “2”. Jede Gruppe enthält dann die eigentlichen, ihr zugewiesenen Dashboard Elemente. Diese könnt Ihr sichtbar machen indem Ihr auf den kleinen, nach rechts zeigenden Pfeil klickt.
Ansicht des “Theme” Tabs der Dashboard Konfiguration. Hier könnt Ihr den Style, die Basisfarbe und die verwendete Schriftart auf dem Dashboard einstellen.
Auf dem “Site”-Tab der Dashboard-Konfiguration könnt Ihr dazu noch den Titel der Dashboard-Seite und weitere Optionen einstellen.
Ein weiteres Beispiel:
Auf dieser Layout-Übersicht kann man sehen, dass es zwei Tabs mit den Namen “EInstellungen” und “Home” gibt. Auf dem Tab “Einstellungen” findet Ihr dann zum Beispiel die verschiedenen Gruppen wie “Server”, RasPi” oder “Status”. Auf dem Tab “Home” findet Ihr dagegen lediglich die Gruppe “Default”. In der aufgeklappten Gruppe “Server” kann man dann auch sehen, wie die einzelnen Elemente wie zum Beispiel “Server Neustarten” oder “Bildschirm Ausschalten” angeordnet sind.
Auf der Dashboard-Ansicht findet Ihr diese Tabs und Gruppen nun wieder. In der gezeigten Ansicht befindet Ihr Euch auf dem Tab “Einstellungen”. Der erste rote Rahmen markiert die Gruppe “Server”. Die Gruppe “LED Stripe” ist mit dem zweiten roten Rahmen markiert. Der große rote Pfeil auf der linken Seite markiert zudem das Symbol, dass Ihr anklicken müsst um auf einen anderen Tab zu wechseln.Klickt Ihr auf dieses Symbol werden Euch alle verfügbaren Tabs – in diesem Fall “Einstellungen” und “Home” – angezeigt.
Die Button-Node
Die Button-Node ist eine der sehr einfachen Nodes. Mit Ihr lassen sich virtuelle Tasten bauen. Zieht die Button-Node dazu von der Node-Palette auf die NodeRed-Konfigurationsfläche. Wenn Ihr nun doppelt auf die Node klickt lassen sich folgende Optionen konfigurieren.
In “Group” wird festgelegt in welcher Gruppe und welchem Tab der Button positioniert wird. In diesem Beispiel wird der Button im Tab “TestTab” in der Gruppe “TestGroup” positioniert. Mit “Size” könnt Ihr die Größe des Buttons einstellen. Ein Beispiel verschiedener Größen könnt Ihr weiter unten im Beitrag sehen. Mithilfe der “Icon” Einstellung lassen sich auch icons auf dem Button einblenden. Um eine Auswahl der verfügbaren Icons zu erhalten müsst Ihr einfach auf den rechts in der Info Leiste angegebenen Link “Material Design icon” klicken. “Label” gibt den Text des Buttons an. “Mit “Color” und “Background” könnt Ihr die Farbe des Buttons und des Button-Texts einstellen. Die Einstellung für “Payload” und “Topic” definiert welcher Wert (Payload) über welches Topic gesendet wird, sobald der Button gedrückt wird. Zu guter letzt noch eine sehr wichtige Funktion: Durch setzen oder entfernen des Hakens bei “If msg arrives on input, pass through to output.” könnt Ihr das Weiterleiten einer, am Eingang der Button-Node empfangenen Nachricht, an den Ausgang aktivieren oder deaktivieren. Mit “Name” könnt Ihr wie gewohnt den Namen der Node für die NodeRed-Konfiguration einstellen.Hier noch die Ansicht die Ihr erhaltet, wenn Ihr in dem vorherigen Fenster auf den kleinen (Bearbeiten)-Stift neben der Group-Sektion klickt. Dann kommt Ihr nämlich in das Fenster in dem sich Gruppe und Tab zur Button-Node (oder auch jeder anderen Dashboard-Node) zuordnen lassen. Im Prinzip bearbeitet Ihr in diesem Fenster die Eigenschaften der kompletten Gruppe. Dabei kann der zugeordnete Tab (unter “Tab”) und die Breite der Gruppe (unter “Width”) eingestellt werden. Außerdem könnt Ihr die Anzeige des Gruppennamen aktivieren bzw. deaktivieren und einstellen ob es möglich sein soll die Gruppe “zusammenzufalten” also den Inhalt auszublenden.In der Dashboard Übersicht werden Euch alle enthaltenen Tabs dann in einer ausklappbaren Seitenansicht angezeigt. Hier könnt Ihr durch klicken auf den jeweiligen Tab zwischen diesen hin- und herwechseln.Die Ansicht der verschieden Großen Button auf dem Dashboard.
Dropdown-Node
Die Dropdown-Node ist eine Node mit der Ihr auf dem Dashboard eine Auswahlliste erstellen könnt. Zum Beispiel könnt Ihr so eine Liste verfügbarer Temperaturen für einen Heizkörper erstellen. Es lassen sich aber auch allerhand andere Einträge mit den verschiedensten Namen und den dazugehörigen Werten definieren.
Zieht dazu eine Dropdown-Node aus der Node-Palette auf die Node-Red-Konfigurationsoberfläche und klickt doppelt auf diese.
Daraufhin erscheint das angezeigte Fenster. Hier lässt sich wie zuvor bei den anderen Nodes die zugewiesene Gruppe und Tab sowie die Größe einstellen. Außerdem wie zuvor auch das “Label”. “Label” bedeutet in diesem Fall, die Bezeichnung für die Dropdown-Liste auf dem eigentlichen Dashboard. Unter “Placeholder” könnt Ihr einen Platzhalter konfigurieren, der angezeigt wird solange noch kein Wert in der Dropdown-Liste ausgewählt wurde. Wirklich spannend wird es dann erst in der Sektion “Options”. Hier könnt Ihr die verfügbaren Optionen Eurer Dropdown-Liste konfigurieren. Dazu wird in der rechten Spalte der Name für den ensprechenden Eintrag und in der linken Spalte der Wert des entsprechenden Eintrags eingestellt. Weitere Einträge könnt Ihr durch klicken auf “+option” hinzufügen. An den drei kleinen waagerechten Strichen auf der linken Seite jedes Eintrags lässt sich außerdem die Reihenfolge bzw. Ordnung der Einträge verändern. Klickt dazu einfach auf die Striche in dem Eintrag den Ihr verschieben wollt und haltet die Maustaste gedrückt. Durch bewegen des Mauszeigers nach oben oder unten könnt Ihr den markierten Eintrag nun neu positionieren. Die restlichen gezeigten Funktionen verhalten sich wieder genauso wie bereits beim “Button” beschrieben.Ansicht der konfigurierten Dropdown-Liste auf dem Dashboard.Wenn Ihr nun auf das Auswahlfeld klickt, könnt Ihr zwischen den verschiedenen vorher konfigurierten Einträgen auswählen.
Switch-Node
Die Switch-Node entspricht im Prinzip einem virtuellen Schalter. Dieser kann dazu benutzt werden um Schaltsignale zu senden oder aber um Schaltzustände anzuzeigen.
Zieht dazu die Switch-Node aus der Node-Palette auf die Node-Red-Konfigurationsoberfläche und klickt doppelt auf diese.
Daraufhin erscheint das angezeigte Fenster. Hier lässt sich wie zuvor bei den anderen Nodes die zugewiesene Gruppe und Tab sowie die Größe einstellen. Außerdem wie zuvor auch das “Label”. Unter “Icon” könnt Ihr ein Icon auswählen, dass Ihr vor dem Label oder auch ganz ohne Label als Schaltersymbol anzeigen lassen könnt. Die restlichen Eigenschaften wie “Topic” und “Name” sind wieder die gleichen wie bereits bei den vorherigen Nodes. Der einzige Unterschied ist hier, dass Ihr für die Schaltzustände “Ein” und “Aus” unterschiedliche Payloads eintragen könnt. Was auch Sinn macht, da Ihr sonst nicht zwischen ausgeschaltetem und eingeschaltetem Zustand unterscheiden könntet.Ansicht, des eingeschalteten Schalters.Ansicht des ausgeschalteten Schalters.
Slider-Node
Die Slider-Node eignet sich hervorragend um Zahlen in einem gewissen Bereich festzulegen. Ein guter Usecase ist zum Beispiel die Verwendung als Dimmer einer Lampe.
Um die Slider-Node nutzen zu können müsst Ihr sie zunächst wieder aus der Node-Palette auf die Node-Red-Konfigurationsoberfläche ziehen und deren Einstellungsmenü durch einen Doppelklick öffnen.
Wie bereits von den anderen Nodes gewohnt, erscheint nach dem Doppelklick wieder das Einstellungsfenster. Hier lässt sich wie zuvor die zugewiesene Gruppe und Tab sowie die Größe einstellen. Außerdem wie zuvor auch das “Label”. In der Sektion “Range” könnt Ihr einstellen welchen Wertebereich der Slider überstreichen soll. Dieser reicht von “min”=der minimal Wert bis max=der maximale Wert. Dabei ist die Schrittweite durch “step” einstellbar. Die restlichen Eigenschaften wie “Topic” und “Name” sind wieder die gleichen wie bereits bei den vorherigen Nodes. Der einzige Unterschied ist hier, dass die Payload selbstverständlich durch den aktuellen “Slider-Wert” festgelegt wird.Ansicht des Sliders im Dashboard.
Numeric-Node
Die Numeric-Node ist eine weitere Möglichkeit um Zahlenwerte zur Verarbeitung an Node-Red zu übergeben.
Um diese zu konfigurieren zieht Ihr eine Numeric-Node aus der Node-Palette auf die Node-Red-Konfigurationsoberfläche.
Die spannenden – weil unterschiedlich zu den anderen Nodes – Einstellungsmöglichkeiten sind bei dieser Node die beiden Eigenschaften “Value Format” und “Range”. Mit “Range” könnt Ihr wie auch zuvor bei der Slider-Node den möglichen Zahlenbereich definieren und die Schrittweite einstellen. “Value Format” ermöglicht es Euch die Anzeige des Werts zu formatieren. Hier könnt Ihr zum Beispiel noch ein Einheitszeichenn hinter “{{value}}” setzen, sodass auf dem Dashboard später nicht nur der Zahlenwert sondern ein Zahlenwert plus Einheit angezeigt wird. So könnt Ihr zum Beispiel eine Temperaturangabe auch mit “°C” als Temperatur kennzeichnen.
Text Input-Node
Die Text-Input-Node ist – wie der Name schon vermuten lässt – eine Node um Texteingaben zu ermöglichen.
Bei dieser Node lassen sich neben den üblichen Einstellungsmöglichkeiten wie “Group”, “Size”, “Label”, “Topic” und “Name” der “Modus” und ein “Delay” einstellen. Unter “Delay” wird die Zeitdauer eingestellt die nach der letzten Zeicheneingabe abgewartet wird, bis die in dem Textfeld eingegebenen Zeichen zur nächsten node weiter-gesendet werden.Unter “Mode” könnt Ihr auswählen, welche Daten in das jeweilige Feld eingegeben werden sollen. Dabei könnt Ihr zwischen den verschiedenen gezeigten Optionen wählen und das Eingabefeld so perfekt auf den jeweiligen Einsatzweck anpassen.(Relativ schlicht wirkende) Ansicht der Text-Node in der Dashboard-Ansicht.
Date Picker-Node
Die Date-Picker-node macht im Prinzip genau das was der Name schon vermuten lässt: Hiermit könnt Ihr ein gewisses Datum auswählen und damit zur Weiterverarbeitung an NodeRed übergeben.
Bei dieser Node lassen sich keine weiteren (außer den üblichen) Optionen konfigurieren. Nach der Eingabe eines Datums auf dem Dashboard wird dieses per Payload an den angeschlossenen Flow weitergeleitet.Ansicht des Date-Pickers im Dashboard.
Colour-Picker-Node
Die Colour-Picker-Node eignet sich hervorragend zur Farbeinstellung einer angeschlossenen RGB-Lampe. Natürlich könnt Ihr damit aber auch für alle anderen Fälle Farben zur Weiterverarbeitung an Node-Red übergeben.
Die Color-Picker-Node hat neben den “üblichen Einstellungsmöglichkeiten” die Einstellungsmöglichkeit “Format” und außerdem verschiedene Checkboxen(Häkchen) die Ihr setzen oder entfernen könnt. Über die Eigenschaft “Format” lässt sich das Format der ausgegebenen Farbe einstellen. Dabei könnt Ihr zwischen XXXXXXX und XX wählen. Durch aktivieren der Eigenschaft “Show hue slider” oder “Show brightness slider” könnt Ihr außerdem noch einen Slider zur Einstellung des HUE- oder Helligkeits-Wertes anzeigen lassen. Über die Checkboxen “Always show swatch”, “always show picker” und “Always show value field” könnt Ihr außerdem auch noch die dauerhafte Anzeige verschiedener “Picker-Varianten” konfigurieren. Probiert hier einfach aus welche Ansicht Euch am besten gefällt. 🙂So könnte Euer Color-Picker im Dashboard aussehen.
Form-Node
Mit der Form-Node habt Ihr die Möglichkeit ein typisches Formular zu konfigurieren. Dadurch lassen sich verschiedene Eingabemöglichkeiten zusammenfasse. Das eignet sich zum Beispiel perfekt um ein Formular für eine Adresseingabe oder ähnlichem zu konfigurieren.
Neben den üblichen Einstellungsmöglichkeiten könnt Ihr hier im Bereich “Form elements” die angezeigten Formular Elemente konfigurieren. Ihr könnt Textfelder für verschiedene Inhalte wie Text oder Zahlen hinzufügen. Außerdem können darin Standardinhalt hinterlegt werden oder angegeben werden ob dies ein Pflichtfeld ist oder nicht. Zu guter letzt könnt Ihr auch noch die Bestätigen- und Abbrechen-Button mit eigenem Text bestücken.Ansicht des Test-Formulars im Dashboard.
Text-Output-Node
Die Text-Output-Node eignet sich hervorragend um Text einfach nur anzuzeigen. So könnt Ihr zum Beispiel Messwerte von Sensoren anzeigen lassen. Der Nutzer hat dabei keine Möglichkeit den angezeigten Text zu bearbeiten.
In den Eigenschaften der Text-Output-Node lässt sich demzufolge auch nur relativ wenig einstellen. Neben dem “Value Format” in dem Ihr das Aussehen der Textausgabe durch zusätzliche Angaben wie zum Beispiel Einheitenzeichen erweitern könnt, habt Ihr auch die Möglichkeit das Layout der Textausgabe zu bearbeiten. Dabei könnt Ihr aus fünf unterschiedlichen Anordnungen aus Label und Text wählen. Probiert einfach aus welche am besten zu Eurer Darstellung passt.Ansicht der Text-Output-Node in der Dashboard-Ansicht.
Gauge-Node
Die Gauge-Node eignet sich perfekt um Messwerte visualisiert darzustellen. So können die Messwerte optisch direkt eingeordnet werden. Dazu lassen sich auch Zahlen-Intervalle festlegen in denen sich die Farbe der angezeigten Skala verändert. So könnt Ihr zum Beispiel hohe/gefährliche Temperaturen durch eine rote Farbe darstellen. Temperaturen im Normalbereich werden dagegen mit einer grünen Skala dargestellt. Dies ermöglich mit einem schnellen Blick einen Eindruck zu bekommen ob die angezeigten Messwerte in Ordnung sind oder nicht. Davon abgesehen sieht es auch einfach recht cool(/Star Trek-mäßig) aus. 🙂
Neben den üblichen Einstellungsmöglichkeiten habt Ihr bei der Gauge-Node die Möglichkeit den “Typ”, das “Value format”, die “Units”, die “Range”, die “Color gradients” und die “Sectors” einzustellen. “Label” und “Value format” kennt Ihr bereits aus den vorangegangenen Nodes. Die Eigenschaft “Units” ermöglicht es Euch nochmal die angezeigte Einheit fest zu legen. Mithilfe der Eigenschaft “Range” könnt Ihr den anzuzeigenden Wertebereich festlegen. Wollt Ihr zum Beispiel einen Luftfeuchtigkeits-wert darstellen muss diese Range von 0 bis 100% reichen. Für einen Außen-Temperaturbereich sollte ein Temperaturbereich gewählt werden der normalerweise nicht unter bzw. überschritten wird. Zum Beispiel -20°C bis 45°C. Mit der Eigenschaft “Color gradient” könnt Ihr nun die Farben festlegen die passend zum angezeigten Messwert angezeigt werden. In diesem Beispiel wird die Farbe Grün für alle kleinen-, die Farbe Gelb für alle mittleren- und die Farbe Rot für alle hohen Messwerte angezeigt. Normalerweise sind die Stellen an denen die Farben in die nächste über gehen gleichmäßig verteilt. Wenn Ihr jedoch eine andere Skalierung wollt oder sogar die mittlere Farbe weglassen wollt, könnt Ihr mit der Einstellung “Sectors” festlegen bei welchem die Farben sich verändern sollen.Unter “Type” könnt Ihr dazu noch auswählen welchen Gauge-Typ Ihr dargestellt haben wollt. Beispiele der verfügbaren Typen könnt Ihr hier sehen.Ansicht des Gauge-Typs “Gauge” im Dashboard.Ansicht des Gauge-Typs “Donut” im Dashboard.Ansicht des Gauge-Typs “Compass” im Dashboard.Ansicht des Gauge-Typs “Level” im Dashboard.
Chart-Node
Die Chart-Node eignet sich um Wert-Verläufe darzustellen. Dadurch könnt Ihr zum Beispiel der Verlauf einer Temperatur über einen festgelegten Zeitraum speichern lassen und darstellen. Leider werden die Werte aktuell nur temporär gespeichert. Das heißt sollte Euer NodeRed-Server abstürzen oder sonst wie neu gestartet werden, gehen alle zuvor angezeigten Werte verloren.
Im Vergleich zu den vorherigen Nodes bietet diese Node ein paar Einstellungsmöglichkeiten mehr. Hier könnt Ihr zunächst unter “Type” die Art des Diagramms einstellen. Die einzelnen Messwerte könnt Ihr dabei in jeder Darstellung extra hervorheben indem Ihr ein Häkchen bei “enlarge point” setzt. Die Auflösung bzw. die Dauer des Datenverlaufs auf der X-Achse(die waagerechte von links nach rechts verlaufende Achse) könnt Ihr mit dem Parameter “X-axis-Label” einstellen. Hier könnt Ihr angeben über welche Zeitdauer oder wieviele Messwerte dargestellt werden sollen. Ihr könnt also zum Beispiel auswählen, dass entweder alle Messwerte der letzten zwei Stunden oder die letzten 500 Messwerte dargestellt werden. Dazu passend lässt sich mit “X-axis-Label” dann auch die Beschriftung der X-Achse einstellen. Mit “Y-axis” lässt sich dagegen lediglich der dargestellte Wertebereich der Y-Achse einstellen. Wollt Ihr hier zum Beispiel bei einem Temperaturverlauf nur den Wertebereich von 0° bis 30°C sehen, müsst Ihr dies hier eintragen. Mithilfe der Option “Legend” könnt Ihr außerdem eine Legende konfigurieren, was gerade bei mehreren angezeigten Kurven praktisch ist. So könnt Ihr nämlich zu jeder Kurven-Fabe eine Bezeichnung anzeigen. Die Option “Interpolate” entscheidet darüber wie die einzelnen Messwerte miteinander verbunden werden. Zu guter letzt könnt Ihr mit “Series Colours” noch die für die Kurven verwendeten Farbeneinstellen und mit “Blank label” den Text der angezeigt werden soll, wenn noch keine Messwerte für die Kurve zur verfügung stehen.Ansicht der Chart-Node im Dashboard.
Audio-Out-Node
Die Audio-Out-Node ist wieder eine dieser Nodes die genau das macht, was Ihr Name vermuten lässt. Sie gibt Text als gesprochene Sprache aus.
Dazu könnt Ihr in den Eigenschaften der Node die “TTS-Voice”(=”Text-To-Speech”-Stimme) auswählen. Dadurch könnt Ihr die Sprachausgabe etwas mehr an Euren Stil anpassen. Letztlich gibt diese Node jeden Text per Sprache aus den Ihr an sie sendet. Wichtig ist dabei jedoch, dass diese Stimme nicht lokal auf dem Node-Red-Server sondern in dem Browser des Nutzers ausgegeben wird der das Dashboard gerade geöffnet hat. Ist in dem Zeitpunkt in dem die Sprachnachricht gesendet wird also kein Browser-Fenster geöffnet, wird die Sprachnachricht auch nicht ausgegeben. Eine lokale Ausgabe auf dem NodeRed-Server über angeschlossene Lautsprecher könntet Ihr aber mit dem Programm “Espeak” realisieren. Infos dazu findet Ihr im Artikel RaspberryPi – Sprachausgabe installieren mit eSpeak.
Notification-Node
Die Notification-Node ermöglicht es Euch auf dem geöffneten Dashboard Notifications – also Benachrichtigungen – einzublenden. Diese können dabei als Information am Rand oder auch zentriert in der Mitte des Bildschirms inklusive Bestätigungs-Button angezeigt werden.
In dem Einstellungsfenster der Notification-Node könnt Ihr unter “Layout” die Position des Notification-Felds einstellen. Dabei gibt es unter anderem die Option “OK/Cancel Dialog”, welche es Euch ermöglicht die Notification mit zwei Buttons auszustatten. Diese müssen vom Nutzer dann bestätigt werden. So könnt Ihr Sicher gehen, dass der Nutzer die Meldung auf jeden Fall wahrgenommen hat. Dazu könnt Ihr unter “Default action label” und “Secondary action label” festlegen was auf dem “Bestätigen”- und “Abbrechen”-Button stehen soll.Neben der Notification-Variante die der Nutzer bestätigen muss, gibt es außerdem noch die Option die Notification nur als Hinweis einzublenden. Dazu wählt Ihr unter “Layout” zum Beispiel “Top Right” aus. Wenn Ihr dann eine Notification an die Node sendet wird diese in der oberen rechten Ecke eingeblendet und verschwindet nach ein paar Sekunden wieder automatisch.Ansicht einer Notification die bestätigt werden muss um sie wieder verschwinden zu lassen.Ansicht einer Notification in der oberen rechten Ecke.
UI-Control-Node
Mit der UI-Control-Node könnt Ihr das Aussehen und Verhalten der Dashboard-Ansicht steuern. Hiermit lassen sich zum Beispiel das angezeigte Tab wechseln, Gruppen “ein- und ausklappen”. Auch könnt Ihr mit dieser Node darauf reagieren, ob ein Benutzer das das Dashboard geöffnet oder geschlossen hat.
Bei dieser Node lässt sich im Einstellungsfenster nur der Name konfigurieren. Alle einstellbaren Parameter oder verfügbare Infos sind auch in der Info-Leiste an der Seite zusammengefasst.
Template-Node
Die Template-Node ist eine sehr vielseitige Node. Mit Ihr könnt Ihr eigenen HTML-Code auf dem Dashboard einbinden. Dieser kann dann individuell auf die empfangenen Nachrichten der angeschlossenen Nodes reagieren und auch selber wieder Nachrichten senden.
Mithilfe der Template-Node könnt Ihr Inhalte zum Header der Seite hinzufügen……oder auch Nodes zu Gruppen hinzufügen die Ihr mit Eurem eigenen HTML-Code beliebig formatiert habt.
thztjz
Mithilfe dieser Node könnt Ihr zum Beispiel auch Links zu beliebigen Seiten auf dem Dashboard einfügen. In diesem Beispiel wird der Link zu der MagicMirror-Ansicht generiert und auf dem Dashboard angezeigt.Auf dem Dashboard wird dann ein Link sichtbar über den man auf die Ansicht des MagicMirrors weitergeleitet wird.
Weitere Beispiele
Im folgenden findet Ihr eine kleine Liste der Artikel in der ich auch die Dashboard-Nodes verwende. Vielleicht ist ja auch für Euch etwas dabei. 🙂
I hope everything worked as described for you. If not or you have questions or suggestions please let me know in the comments. I will then add this to the article if necessary. Ideas for new projects are always welcome. 🙂
PS Many of these projects - especially the hardware projects - cost a lot of time and money. Of course I do this because I enjoy it, but if you think it's cool that I share the information with you, I would be happy about a small donation to the coffee fund. 🙂
Hello, great article. A question: How do you manage to arrange elements next to each other within a group, such as the on and off button in your LED stripe group?
Hi Andreas,
thanks 🙂
Das müsste eigentlich automatisch passieren, sobald beide Elemente nebeneinander in die Gruppe passen. Dazu musst du die Breite der Elemente (Beim LED Stripe die Taster) zum Beispiel auf 3 einstellen, damit sie in die Gruppe (hier “LED Stripe”) mit der Breite 6 nebeneinander passen. 🙂
Please let me know if it worked. 🙂
Best regards
Fab
great article, helped me a lot. Still have a general question about a Node-Red dashboard.
I have built one and read data from a temperature sensor via Node-Red. I connected this to the RPi. (Node-red runs on my RPi).
This dashboard is also easily accessible via the browser I use. But only if I'm in the same network as the raspberry Pi itself.
I have no access to the dashboard from my smartphone internet network.
Kennst du eine Möglichkeit, wie ich auch aus dem “Öffentlichen” Netz Zugriff, bzw. aus anderen Internetverbindungen als mein W-Lan zu Hause, auf das Dashboard bekomme?
Hi Lennard,
Thank you. 🙂
The (only reasonably) secure option is to connect to your home network via a VPN and thus access the RaspberryPi in your network.
In the meantime, many routers (e.g. the Fritzbox) can be configured as VPN servers.
Unfortunately I don't have a tutorial ready for this, but probably. do you find anything about it? 🙂
Best regards
Fabian
Hello,
I've been working with the Node-Red on the Raspy-400 for a few days. An AD converter (ADS1115) also gives me clean results. I would like to change the font size for the dashboard nodes. Is this possible? Some codes are published on other sites, but they don't work. Do you have an example for me (e.g. for gauge) how to do that?
I would like to thank you in advance, just because of the dashboard article.
Kind regards
H.Harle
Hi Horst,
ein Beispiel habe ich leider nicht dafür, aber vllt. einen “Schubs” in die richtige Richtung. In der Node Beschreibung für die gauge node ist folgender Hinweis enthalten:
If a Class is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The class can be set at runtime by setting a msg.className string property.
That means you should actually be able to edit the appearance of the individual components of the gauge node with CSS code.
I hope this helps you further. 🙂
Best regards
Fab
English 
Deutsch 
Français 
Español 
Nederlands
Hello, great article. A question: How do you manage to arrange elements next to each other within a group, such as the on and off button in your LED stripe group?
Best regards
Andrew
Hi Andreas,
thanks 🙂
Das müsste eigentlich automatisch passieren, sobald beide Elemente nebeneinander in die Gruppe passen. Dazu musst du die Breite der Elemente (Beim LED Stripe die Taster) zum Beispiel auf 3 einstellen, damit sie in die Gruppe (hier “LED Stripe”) mit der Breite 6 nebeneinander passen. 🙂
Please let me know if it worked. 🙂
Best regards
Fab
Thanks 🙂
Good morning,
great article, helped me a lot. Still have a general question about a Node-Red dashboard.
I have built one and read data from a temperature sensor via Node-Red. I connected this to the RPi. (Node-red runs on my RPi).
This dashboard is also easily accessible via the browser I use. But only if I'm in the same network as the raspberry Pi itself.
I have no access to the dashboard from my smartphone internet network.
Kennst du eine Möglichkeit, wie ich auch aus dem “Öffentlichen” Netz Zugriff, bzw. aus anderen Internetverbindungen als mein W-Lan zu Hause, auf das Dashboard bekomme?
Thank you and best regards, Lennard
Hi Lennard,
Thank you. 🙂
The (only reasonably) secure option is to connect to your home network via a VPN and thus access the RaspberryPi in your network.
In the meantime, many routers (e.g. the Fritzbox) can be configured as VPN servers.
Unfortunately I don't have a tutorial ready for this, but probably. do you find anything about it? 🙂
Best regards
Fabian
Hello,
I've been working with the Node-Red on the Raspy-400 for a few days. An AD converter (ADS1115) also gives me clean results. I would like to change the font size for the dashboard nodes. Is this possible? Some codes are published on other sites, but they don't work. Do you have an example for me (e.g. for gauge) how to do that?
I would like to thank you in advance, just because of the dashboard article.
Kind regards
H.Harle
Hi Horst,
ein Beispiel habe ich leider nicht dafür, aber vllt. einen “Schubs” in die richtige Richtung. In der Node Beschreibung für die gauge node ist folgender Hinweis enthalten:
That means you should actually be able to edit the appearance of the individual components of the gauge node with CSS code.
I hope this helps you further. 🙂
Best regards
Fab