{"id":1830,"date":"2019-04-29T13:19:07","date_gmt":"2019-04-29T11:19:07","guid":{"rendered":"https:\/\/www.nerdiy.de\/?p=1830"},"modified":"2021-12-18T17:32:07","modified_gmt":"2021-12-18T16:32:07","slug":"nodered-mit-dashboard-nodes-eine-benutzeroberflaeche-erstellen","status":"publish","type":"post","link":"https:\/\/nerdiy.de\/de_de\/nodered-mit-dashboard-nodes-eine-benutzeroberflaeche-erstellen\/","title":{"rendered":"HowTo: Node Red – Mit Dashboard-Nodes eine Benutzeroberfl\u00e4che erstellen"},"content":{"rendered":"\n

Ich wei\u00df nicht ob Dashboards DAS (eine) Mittel sind um das Herz eines Nerds h\u00f6her schlagen zu lassen, aber ganz sicher sind sie ein Mittel um das Nerd-Herz h\u00f6her schlagen zu lassen. Wer mit StarTrek und Co. gro\u00df geworden ist f\u00fcr den sind Dashboard-\u00e4hnliche \u00dcbersichten in Form von Diagrammen und Grafiken der inbegriff von Technologie. Dieses Feeling kann man sich mit NodeRed dank bestimmter Nodes nun selber bereiten.<\/p>\n\n\n\n

Denn, hat man sein SmartHome erst mal so weit, dass es alle m\u00f6glichen Daten \u00fcber die eigenen vier W\u00e4nde sammelt m\u00f6chte man diese nat\u00fcrlich auch pr\u00e4sentieren. Aber wie? Immerhin kann man sich diese Daten nicht einfach wie die letzten Urlaubsfotos in ein Fotoalbum kleben.<\/p>\n\n\n\n

Ein einfacher und dazu noch informativer und dekorativer Weg ist die vorhandenen Daten \u00fcber die Dashboard-Node f\u00fcr NodeRed zu pr\u00e4sentieren. Diese bietet neben diversen Anzeigelementen auch die M\u00f6glichkeit mit Eurem SmartHome System zu interargieren. So k\u00f6nnt Ihr Werte einstellen, virtuelle Schalter umlegen, Aktionen ausl\u00f6sen und gleichzeitig deren Status \u00fcberwachen.<\/p>\n\n\n\n

Eine \u00dcbersicht zu den verschiedenen Funktionen der Dashboard-Node findet Ihr im folgenden Artikel<\/p>\n\n\n\n

\n\n\n\n

Voraussetzungen<\/h2>\n\n\n\n

Hilfreiche Artikel:
<\/strong>Damit Ihr neue Nodes installieren k\u00f6nnt sollte NodeRed nat\u00fcrlich schon installiert sein.
Wie ihr einen RaspberryPi dazu vorbereitet und dann NodeRed darauf installiert ist in den folgenden Artikeln beschrieben.<\/p>\n\n\n\n

Die folgenden drei Artikel beschreiben was zu tun ist um den RaspberryPi soweit vorzubereiten:
RaspberryPi – Einrichten f\u00fcr Nerdiys!<\/a><\/strong><\/em>
RaspberryPi \u2013 Die Erste Konfiguration!
<\/a>RaspberryPi – Den RaspberryPi \u00fcber SSH steuern<\/a><\/strong><\/em>
NodeRed – Installation von NodeRed auf dem RaspberryPi<\/a>
NodeRed – Neue Nodes installieren<\/a><\/strong><\/em><\/p>\n\n\n\n

Ben\u00f6tigtes Werkzeug:
<\/strong>-keins-<\/em><\/p>\n\n\n\n

Ben\u00f6tigtes Material:<\/strong><\/p>\n\n\n\n

In der folgenden Liste findet Ihr alle Teile die Ihr zur Umsetzung dieses Artikels ben\u00f6tigt.<\/strong><\/p>\n\n\n\n

\n \n \n \n \n \n \n \n \n <\/colgroup>\n <\/table>\n \n \n \n<\/div>\n\n\n\n\n
\n\n\n\n

In die NodeRed Konfigurationsoberfl\u00e4che einloggen<\/h2>\r\n

Bevor Ihr eure NodeRed Konfiguration bearbeiten k\u00f6nnt m\u00fcsst Ihr Euch - falls aktiviert - zun\u00e4chst in die NodeRed Konfigurationsoberfl\u00e4che einloggen.<\/p>\r\n

\"\"<\/a>
Ansicht des Login Dialogs. Hier m\u00fcsst Ihr die Login Daten eingeben die Ihr w\u00e4hrend der Konfiguration des Logins angegeben habt. Infos dazu findet Ihr im Artikel NodeRed - Benutzerlogin einrichten<\/strong><\/em><\/a>.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n

Dashboard-Node installieren<\/h2>\n\n\n\n
Damit Ihr die Dashboard-Nodes verwenden k\u00f6nnt m\u00fcsst Ihr die Node<\/div>\n\n\n\n
\n
node-red-dashboard<\/pre>\n<\/div>\n\n\n\n
installieren.<\/div>\n\n\n\n
Wie Ihr Nodes installiert ist im Artikel NodeRed – Neue Nodes installieren<\/em><\/a> <\/strong>beschrieben.<\/div>\n\n\n\n
 <\/div>\n\n\n\n
\"\"<\/a>
Ansicht w\u00e4hrend der Installation der Node „node-red-dashboard“.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
\u00dcbersicht \u00fcber die verf\u00fcgbaren Ein- und Ausgabe-Nodes<\/h2>\n\n\n\n
Durch die Installation der Dashboard-Nodes erhaltet Ihr ein ganzes Paket an zus\u00e4tzlichen Nodes die sich zur Anzeige und Eingabe verschiedener Werte eignen. Diese werden Euch wie gewohnt in der Node-Palette im linken Bereich des Konfigurationsmen\u00fcs angezeigt. Details zu den einzelnen Nodes sind im folgenden aufgelistet.<\/p>\n\n\n\n
\"\"<\/a>
Ansicht der Dashboard-Nodes in der Node-Palette.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Button-Node und Positionierung der Elemente im Dashboard<\/h2>\n\n\n\n
Die erste und simpelste Node ist die „Button-Node“. Mithilfe dieser k\u00f6nnt 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\u00fcpfte Node.<\/p>\n\n\n\n
Button-Nodes lassen sich zum Beispiel sehr gut dazu nutzen Aktionen auszul\u00f6sen. So k\u00f6nnt Ihr zum Beispiel Lampen Ein- und Ausschalten.<\/p>\n\n\n\n
Bevor Ihr die Button-Node nutzen k\u00f6nnt, muss diese aber zun\u00e4chst auf dem Layout-Gitter des Dashboards positioniert werden.<\/p>\n\n\n\n
Denn neben den Funktionen der eigentlich Nodes, l\u00e4sst sich f\u00fcr jede auch die Positionierung auf dem Layout des sp\u00e4teren Dashboards konfigurieren. Das Dashboard ist also eine separate Webseite die Zentral \u00fcber die Dashboard-Konfiguration verwaltet werden kann.<\/p>\n\n\n\n
Durch die Installation der Dashboard-Nodes wurde im linken Konfigurationsbereich n\u00e4mlich ein neuer Reiter hinzugef\u00fcgt. Ihr erkennt Ihn an dem an ein Balkendiagramm angelehntem Icon. Klickt auf dieses um die Grundkonfiguration des Dashboards zu \u00f6ffnen.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
Ihr erreicht die Dashboard-Seite indem Ihr im Dashboard-Reiter auf das mit dem Masuzeiger markierte Symbol klickt.<\/figcaption><\/figure>\n\n\n\n
Alternativ k\u00f6nnt Ihr die Dashboard-Seite aber auch direkt anw\u00e4hlen. Dazu m\u00fcsst Ihr der Adresse zu Eurer NodeRed-Konfigurationsseite lediglich ein „\/ui\/“ anh\u00e4ngen. Lautet die Adresse zu Eurer NodeRed Konfigurationsseite zum Beispiel
https:\/\/ 192.168.172.5:1880<\/strong>
dann lautet die Adresse zu Eurem Dashboard
https:\/\/ 192.168.172.5:1880\/ui\/<\/strong><\/p>\n\n\n\n
Zun\u00e4chst 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\u00f6nnt. Das Dashboard bietet dabei die M\u00f6glichkeit einzelne Dashboard-Nodes in Gruppen zusammenzufassen. Die Anzeige-Reihenfolge dieser Nodes l\u00e4sst sich dann auf dem Dashboard einstellen. Zus\u00e4tzlich k\u00f6nnen bzw. m\u00fcssen diese gruppierten Nodes einem bestimmten „Tab“ zugewiesen werden.<\/p>\n\n\n\n
Neben dem „Home“-Tab lassen sich n\u00e4mlich noch weitere Tabs erstellen. Dies ist zum Beispiel praktisch um in einem Smart-Home System die Elemente in verschiedenen R\u00e4umen auch virtuell voneinander zu trennen. So k\u00f6nnt Ihr alle Sensoren und Aktoren des Wohnzimmers auch in einem Tab mit dem Namen „Wohnzimmer“ zusammenfassen. Dies erleichtert die \u00dcbersicht und bringt Struktur in die oft schnell zunehmende Anzahl von Nodes.<\/p>\n\n\n\n
Dies ist auch das was man im Reiter „Layout“ der Dashboard-Konfiguration sehen und einstellen kann. Dort werden Euch alle Tabs und die zugeh\u00f6rigen Gruppen angezeigt. Im nachfolgenden Screenshot<\/p>\n\n\n\n
\"\"<\/a>
„Layout“-Bereich der Dashboard-Konfiguration. Hier k\u00f6nnt Ihr einen Teil der einzelnen Tabs (in diesem Beispiel „Home“, „Raspi-Daten“, „Einstellungen“ und „Tasmota-Status“) sehen. Au\u00dferdem lassen sich die Gruppen erkennen. Zum Tab „Raspi-Daten“ geh\u00f6ren zum Beispiel die Gruppen „1“ und „2“. Jede Gruppe enth\u00e4lt dann die eigentlichen, ihr zugewiesenen Dashboard Elemente. Diese k\u00f6nnt Ihr sichtbar machen indem Ihr auf den kleinen, nach rechts zeigenden Pfeil klickt.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Ansicht des „Theme“ Tabs der Dashboard Konfiguration. Hier k\u00f6nnt Ihr den Style, die Basisfarbe und die verwendete Schriftart auf dem Dashboard einstellen.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Auf dem „Site“-Tab der Dashboard-Konfiguration k\u00f6nnt Ihr dazu noch den Titel der Dashboard-Seite und weitere Optionen einstellen.<\/figcaption><\/figure><\/div>\n\n\n\n
Ein weiteres Beispiel:<\/p>\n\n\n\n
\"\"<\/a>
Auf dieser Layout-\u00dcbersicht 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.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
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\u00dfe rote Pfeil auf der linken Seite markiert zudem das Symbol, dass Ihr anklicken m\u00fcsst um auf einen anderen Tab zu wechseln.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Klickt Ihr auf dieses Symbol werden Euch alle verf\u00fcgbaren Tabs – in diesem Fall „Einstellungen“ und „Home“ – angezeigt.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Die Button-Node<\/h2>\n\n\n\n
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\u00e4che. Wenn Ihr nun doppelt auf die Node klickt lassen sich folgende Optionen konfigurieren.<\/p>\n\n\n\n
\"\"<\/a>
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\u00f6nnt Ihr die Gr\u00f6\u00dfe des Buttons einstellen. Ein Beispiel verschiedener Gr\u00f6\u00dfen k\u00f6nnt Ihr weiter unten im Beitrag sehen. Mithilfe der „Icon“ Einstellung lassen sich auch icons auf dem Button einblenden. Um eine Auswahl der verf\u00fcgbaren Icons zu erhalten m\u00fcsst 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\u00f6nnt Ihr die Farbe des Buttons und des Button-Texts einstellen. Die Einstellung f\u00fcr „Payload“ und „Topic“ definiert welcher Wert (Payload) \u00fcber welches Topic gesendet wird, sobald der Button gedr\u00fcckt 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\u00f6nnt Ihr das Weiterleiten einer, am Eingang der Button-Node empfangenen Nachricht, an den Ausgang aktivieren oder deaktivieren. Mit „Name“ k\u00f6nnt Ihr wie gewohnt den Namen der Node f\u00fcr die NodeRed-Konfiguration einstellen.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
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\u00e4mlich 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\u00dferdem k\u00f6nnt Ihr die Anzeige des Gruppennamen aktivieren bzw. deaktivieren und einstellen ob es m\u00f6glich sein soll die Gruppe „zusammenzufalten“ also den Inhalt auszublenden.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
In der Dashboard \u00dcbersicht werden Euch alle enthaltenen Tabs dann in einer ausklappbaren Seitenansicht angezeigt. Hier k\u00f6nnt Ihr durch klicken auf den jeweiligen Tab zwischen diesen hin- und herwechseln.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Die Ansicht der verschieden Gro\u00dfen Button auf dem Dashboard. <\/span><\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Dropdown-Node<\/h2>\n\n\n\n
Die Dropdown-Node ist eine Node mit der Ihr auf dem Dashboard eine Auswahlliste erstellen k\u00f6nnt. Zum Beispiel k\u00f6nnt Ihr so eine Liste verf\u00fcgbarer Temperaturen f\u00fcr einen Heizk\u00f6rper erstellen. Es lassen sich aber auch allerhand andere Eintr\u00e4ge mit den verschiedensten Namen und den dazugeh\u00f6rigen Werten definieren.<\/p>\n\n\n\n
Zieht dazu eine Dropdown-Node aus der Node-Palette auf die Node-Red-Konfigurationsoberfl\u00e4che und klickt doppelt auf diese.<\/p>\n\n\n\n
\"\"<\/a>
Daraufhin erscheint das angezeigte Fenster. Hier l\u00e4sst sich wie zuvor bei den anderen Nodes die zugewiesene Gruppe und Tab sowie die Gr\u00f6\u00dfe einstellen. Au\u00dferdem wie zuvor auch das „Label“. „Label“ bedeutet in diesem Fall, die Bezeichnung f\u00fcr die Dropdown-Liste auf dem eigentlichen Dashboard. Unter „Placeholder“ k\u00f6nnt Ihr einen Platzhalter konfigurieren, der angezeigt wird solange noch kein Wert in der Dropdown-Liste ausgew\u00e4hlt wurde. Wirklich spannend wird es dann erst in der Sektion „Options“. Hier k\u00f6nnt Ihr die verf\u00fcgbaren Optionen Eurer Dropdown-Liste konfigurieren. Dazu wird in der rechten Spalte der Name f\u00fcr den ensprechenden Eintrag und in der linken Spalte der Wert des entsprechenden Eintrags eingestellt. Weitere Eintr\u00e4ge k\u00f6nnt Ihr durch klicken auf „+option“ hinzuf\u00fcgen. An den drei kleinen waagerechten Strichen auf der linken Seite jedes Eintrags l\u00e4sst sich au\u00dferdem die Reihenfolge bzw. Ordnung der Eintr\u00e4ge ver\u00e4ndern. Klickt dazu einfach auf die Striche in dem Eintrag den Ihr verschieben wollt und haltet die Maustaste gedr\u00fcckt. Durch bewegen des Mauszeigers nach oben oder unten k\u00f6nnt Ihr den markierten Eintrag nun neu positionieren. Die restlichen gezeigten Funktionen verhalten sich wieder genauso wie bereits beim „Button“ beschrieben.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht der konfigurierten Dropdown-Liste auf dem Dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Wenn Ihr nun auf das Auswahlfeld klickt, k\u00f6nnt Ihr zwischen den verschiedenen vorher konfigurierten Eintr\u00e4gen ausw\u00e4hlen.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Switch-Node<\/h2>\n\n\n\n
Die Switch-Node entspricht im Prinzip einem virtuellen Schalter. Dieser kann dazu benutzt werden um Schaltsignale zu senden oder aber um Schaltzust\u00e4nde anzuzeigen.<\/p>\n\n\n\n
Zieht dazu die Switch-Node aus der Node-Palette auf die Node-Red-Konfigurationsoberfl\u00e4che und klickt doppelt auf diese.<\/p>\n\n\n\n
\"\"<\/a>
Daraufhin erscheint das angezeigte Fenster. Hier l\u00e4sst sich wie zuvor bei den anderen Nodes die zugewiesene Gruppe und Tab sowie die Gr\u00f6\u00dfe einstellen. Au\u00dferdem wie zuvor auch das „Label“. Unter „Icon“ k\u00f6nnt Ihr ein Icon ausw\u00e4hlen, dass Ihr vor dem Label oder auch ganz ohne Label als Schaltersymbol anzeigen lassen k\u00f6nnt. 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\u00fcr die Schaltzust\u00e4nde „Ein“ und „Aus“ unterschiedliche Payloads eintragen k\u00f6nnt. Was auch Sinn macht, da Ihr sonst nicht zwischen ausgeschaltetem und eingeschaltetem Zustand unterscheiden k\u00f6nntet.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht, des eingeschalteten Schalters.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht des ausgeschalteten Schalters.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Slider-Node<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
Um die Slider-Node nutzen zu k\u00f6nnen m\u00fcsst Ihr sie zun\u00e4chst wieder aus der Node-Palette auf die Node-Red-Konfigurationsoberfl\u00e4che ziehen und deren Einstellungsmen\u00fc durch einen Doppelklick \u00f6ffnen.<\/p>\n\n\n\n
\"\"<\/a>
Wie bereits von den anderen Nodes gewohnt, erscheint nach dem Doppelklick wieder das Einstellungsfenster. Hier l\u00e4sst sich wie zuvor die zugewiesene Gruppe und Tab sowie die Gr\u00f6\u00dfe einstellen. Au\u00dferdem wie zuvor auch das „Label“. In der Sektion „Range“ k\u00f6nnt Ihr einstellen welchen Wertebereich der Slider \u00fcberstreichen 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\u00e4ndlich durch den aktuellen „Slider-Wert“ festgelegt wird.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht des Sliders im Dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Numeric-Node<\/h2>\n\n\n\n
Die Numeric-Node ist eine weitere M\u00f6glichkeit um Zahlenwerte zur Verarbeitung an Node-Red zu \u00fcbergeben.<\/p>\n\n\n\n
Um diese zu konfigurieren zieht Ihr eine Numeric-Node aus der Node-Palette auf die Node-Red-Konfigurationsoberfl\u00e4che.<\/p>\n\n\n\n
\"\"<\/a>
Die spannenden – weil unterschiedlich zu den anderen Nodes – Einstellungsm\u00f6glichkeiten sind bei dieser Node die beiden Eigenschaften „Value Format“ und „Range“. Mit „Range“ k\u00f6nnt Ihr wie auch zuvor bei der Slider-Node den m\u00f6glichen Zahlenbereich definieren und die Schrittweite einstellen. „Value Format“ erm\u00f6glicht es Euch die Anzeige des Werts zu formatieren. Hier k\u00f6nnt Ihr zum Beispiel noch ein Einheitszeichenn hinter „{{value}}“ setzen, sodass auf dem Dashboard sp\u00e4ter nicht nur der Zahlenwert sondern ein Zahlenwert plus Einheit angezeigt wird. So k\u00f6nnt Ihr zum Beispiel eine Temperaturangabe auch mit „\u00b0C“ als Temperatur kennzeichnen.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Text Input-Node<\/h2>\n\n\n\n
Die Text-Input-Node ist – wie der Name schon vermuten l\u00e4sst – eine Node um Texteingaben zu erm\u00f6glichen.<\/p>\n\n\n\n
\"\"<\/a>
Bei dieser Node lassen sich neben den \u00fcblichen Einstellungsm\u00f6glichkeiten 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\u00e4chsten node weiter-gesendet werden.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Unter „Mode“ k\u00f6nnt Ihr ausw\u00e4hlen, welche Daten in das jeweilige Feld eingegeben werden sollen. Dabei k\u00f6nnt Ihr zwischen den verschiedenen gezeigten Optionen w\u00e4hlen und das Eingabefeld so perfekt auf den jeweiligen Einsatzweck anpassen.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
(Relativ schlicht wirkende) Ansicht der Text-Node in der Dashboard-Ansicht.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Date Picker-Node<\/h2>\n\n\n\n
Die Date-Picker-node macht im Prinzip genau das was der Name schon vermuten l\u00e4sst: Hiermit k\u00f6nnt Ihr ein gewisses Datum ausw\u00e4hlen und damit zur Weiterverarbeitung an NodeRed \u00fcbergeben.<\/p>\n\n\n\n
\"\"<\/a>
Bei dieser Node lassen sich keine weiteren (au\u00dfer den \u00fcblichen) Optionen konfigurieren. Nach der Eingabe eines Datums auf dem Dashboard wird dieses per Payload an den angeschlossenen Flow weitergeleitet.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht des Date-Pickers im Dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Colour-Picker-Node<\/h2>\n\n\n\n
Die Colour-Picker-Node eignet sich hervorragend zur Farbeinstellung einer angeschlossenen RGB-Lampe. Nat\u00fcrlich k\u00f6nnt Ihr damit aber auch f\u00fcr alle anderen F\u00e4lle Farben zur Weiterverarbeitung an Node-Red \u00fcbergeben.<\/p>\n\n\n\n
\"\"<\/a>
Die Color-Picker-Node hat neben den „\u00fcblichen Einstellungsm\u00f6glichkeiten“ die Einstellungsm\u00f6glichkeit „Format“ und au\u00dferdem verschiedene Checkboxen(H\u00e4kchen) die Ihr setzen oder entfernen k\u00f6nnt. \u00dcber die Eigenschaft „Format“ l\u00e4sst sich das Format der ausgegebenen Farbe einstellen. Dabei k\u00f6nnt Ihr zwischen XXXXXXX und XX w\u00e4hlen. Durch aktivieren der Eigenschaft „Show hue slider“ oder „Show brightness slider“ k\u00f6nnt Ihr au\u00dferdem noch einen Slider zur Einstellung des HUE- oder Helligkeits-Wertes anzeigen lassen. \u00dcber die Checkboxen „Always show swatch“, „always show picker“ und „Always show value field“ k\u00f6nnt Ihr au\u00dferdem auch noch die dauerhafte Anzeige verschiedener „Picker-Varianten“ konfigurieren. Probiert hier einfach aus welche Ansicht Euch am besten gef\u00e4llt. \ud83d\ude42<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
So k\u00f6nnte Euer Color-Picker im Dashboard aussehen.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Form-Node<\/h2>\n\n\n\n
Mit der Form-Node habt Ihr die M\u00f6glichkeit ein typisches Formular zu konfigurieren. Dadurch lassen sich verschiedene Eingabem\u00f6glichkeiten zusammenfasse. Das eignet sich zum Beispiel perfekt um ein Formular f\u00fcr eine Adresseingabe oder \u00e4hnlichem zu konfigurieren.<\/p>\n\n\n\n
\"\"<\/a>
Neben den \u00fcblichen Einstellungsm\u00f6glichkeiten k\u00f6nnt Ihr hier im Bereich „Form elements“ die angezeigten Formular Elemente konfigurieren. Ihr k\u00f6nnt Textfelder f\u00fcr verschiedene Inhalte wie Text oder Zahlen hinzuf\u00fcgen. Au\u00dferdem k\u00f6nnen darin Standardinhalt hinterlegt werden oder angegeben werden ob dies ein Pflichtfeld ist oder nicht. Zu guter letzt k\u00f6nnt Ihr auch noch die Best\u00e4tigen- und Abbrechen-Button mit eigenem Text best\u00fccken.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht des Test-Formulars im Dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Text-Output-Node<\/h2>\n\n\n\n
Die Text-Output-Node eignet sich hervorragend um Text einfach nur anzuzeigen. So k\u00f6nnt Ihr zum Beispiel Messwerte von Sensoren anzeigen lassen. Der Nutzer hat dabei keine M\u00f6glichkeit den angezeigten Text zu bearbeiten.<\/p>\n\n\n\n
\"\"<\/a>
In den Eigenschaften der Text-Output-Node l\u00e4sst sich demzufolge auch nur relativ wenig einstellen. Neben dem „Value Format“ in dem Ihr das Aussehen der Textausgabe durch zus\u00e4tzliche Angaben wie zum Beispiel Einheitenzeichen erweitern k\u00f6nnt, habt Ihr auch die M\u00f6glichkeit das Layout der Textausgabe zu bearbeiten. Dabei k\u00f6nnt Ihr aus f\u00fcnf unterschiedlichen Anordnungen aus Label und Text w\u00e4hlen. Probiert einfach aus welche am besten zu Eurer Darstellung passt.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht der Text-Output-Node in der Dashboard-Ansicht.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Gauge-Node<\/h2>\n\n\n\n
Die Gauge-Node eignet sich perfekt um Messwerte visualisiert darzustellen. So k\u00f6nnen die Messwerte optisch direkt eingeordnet werden. Dazu lassen sich auch Zahlen-Intervalle festlegen in denen sich die Farbe der angezeigten Skala ver\u00e4ndert. So k\u00f6nnt Ihr zum Beispiel hohe\/gef\u00e4hrliche Temperaturen durch eine rote Farbe darstellen. Temperaturen im Normalbereich werden dagegen mit einer gr\u00fcnen Skala dargestellt. Dies erm\u00f6glich 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\u00e4\u00dfig) aus. \ud83d\ude42<\/p>\n\n\n\n
\"\"<\/a>
Neben den \u00fcblichen Einstellungsm\u00f6glichkeiten habt Ihr bei der Gauge-Node die M\u00f6glichkeit 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\u00f6glicht es Euch nochmal die angezeigte Einheit fest zu legen. Mithilfe der Eigenschaft „Range“ k\u00f6nnt Ihr den anzuzeigenden Wertebereich festlegen. Wollt Ihr zum Beispiel einen Luftfeuchtigkeits-wert darstellen muss diese Range von 0 bis 100% reichen. F\u00fcr einen Au\u00dfen-Temperaturbereich sollte ein Temperaturbereich gew\u00e4hlt werden der normalerweise nicht unter bzw. \u00fcberschritten wird. Zum Beispiel -20\u00b0C bis 45\u00b0C. Mit der Eigenschaft „Color gradient“ k\u00f6nnt Ihr nun die Farben festlegen die passend zum angezeigten Messwert angezeigt werden. In diesem Beispiel wird die Farbe Gr\u00fcn f\u00fcr alle kleinen-, die Farbe Gelb f\u00fcr alle mittleren- und die Farbe Rot f\u00fcr alle hohen Messwerte angezeigt. Normalerweise sind die Stellen an denen die Farben in die n\u00e4chste \u00fcber gehen gleichm\u00e4\u00dfig verteilt. Wenn Ihr jedoch eine andere Skalierung wollt oder sogar die mittlere Farbe weglassen wollt, k\u00f6nnt Ihr mit der Einstellung „Sectors“ festlegen bei welchem die Farben sich ver\u00e4ndern sollen.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Unter „Type“ k\u00f6nnt Ihr dazu noch ausw\u00e4hlen welchen Gauge-Typ Ihr dargestellt haben wollt. Beispiele der verf\u00fcgbaren Typen k\u00f6nnt Ihr hier sehen.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht des Gauge-Typs „Gauge“ im Dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht des Gauge-Typs „Donut“ im Dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht des Gauge-Typs „Compass“ im Dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht des Gauge-Typs „Level“ im Dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Chart-Node<\/h2>\n\n\n\n
Die Chart-Node eignet sich um Wert-Verl\u00e4ufe darzustellen. Dadurch k\u00f6nnt Ihr zum Beispiel der Verlauf einer Temperatur \u00fcber einen festgelegten Zeitraum speichern lassen und darstellen. Leider werden die Werte aktuell nur tempor\u00e4r gespeichert. Das hei\u00dft sollte Euer NodeRed-Server abst\u00fcrzen oder sonst wie neu gestartet werden, gehen alle zuvor angezeigten Werte verloren.<\/p>\n\n\n\n
\"\"<\/a>
Im Vergleich zu den vorherigen Nodes bietet diese Node ein paar Einstellungsm\u00f6glichkeiten mehr. Hier k\u00f6nnt Ihr zun\u00e4chst unter „Type“<\/strong> die Art des Diagramms einstellen. Die einzelnen Messwerte k\u00f6nnt Ihr dabei in jeder Darstellung extra hervorheben indem Ihr ein H\u00e4kchen bei „enlarge point“<\/strong> setzt. Die Aufl\u00f6sung bzw. die Dauer des Datenverlaufs auf der X-Achse(die waagerechte von links nach rechts verlaufende Achse) k\u00f6nnt Ihr mit dem Parameter „X-axis-Label“<\/strong> einstellen. Hier k\u00f6nnt Ihr angeben \u00fcber welche Zeitdauer oder wieviele Messwerte dargestellt werden sollen. Ihr k\u00f6nnt also zum Beispiel ausw\u00e4hlen, dass entweder alle Messwerte der letzten zwei Stunden oder die letzten 500 Messwerte dargestellt werden. Dazu passend l\u00e4sst sich mit „X-axis-Label“<\/strong> dann auch die Beschriftung der X-Achse einstellen. Mit „Y-axis“<\/strong> l\u00e4sst sich dagegen lediglich der dargestellte Wertebereich der Y-Achse einstellen. Wollt Ihr hier zum Beispiel bei einem Temperaturverlauf nur den Wertebereich von 0\u00b0 bis 30\u00b0C sehen, m\u00fcsst Ihr dies hier eintragen. Mithilfe der Option „Legend“<\/strong> k\u00f6nnt Ihr au\u00dferdem eine Legende konfigurieren, was gerade bei mehreren angezeigten Kurven praktisch ist. So k\u00f6nnt Ihr n\u00e4mlich zu jeder Kurven-Fabe eine Bezeichnung anzeigen. Die Option „Interpolate“<\/strong> entscheidet dar\u00fcber wie die einzelnen Messwerte miteinander verbunden werden. Zu guter letzt k\u00f6nnt Ihr mit „Series Colours“ noch die f\u00fcr die Kurven verwendeten Farbeneinstellen und mit „Blank label“ den Text der angezeigt werden soll, wenn noch keine Messwerte f\u00fcr die Kurve zur verf\u00fcgung stehen.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht der Chart-Node im Dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Audio-Out-Node<\/h2>\n\n\n\n
Die Audio-Out-Node ist wieder eine dieser Nodes die genau das macht, was Ihr Name vermuten l\u00e4sst. Sie gibt Text als gesprochene Sprache aus.<\/p>\n\n\n\n
\"\"<\/a>
Dazu k\u00f6nnt Ihr in den Eigenschaften der Node die „TTS-Voice“(=“Text-To-Speech“-Stimme) ausw\u00e4hlen. Dadurch k\u00f6nnt 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\u00f6ffnet hat. Ist in dem Zeitpunkt in dem die Sprachnachricht gesendet wird also kein Browser-Fenster ge\u00f6ffnet, wird die Sprachnachricht auch nicht ausgegeben. Eine lokale Ausgabe auf dem NodeRed-Server \u00fcber angeschlossene Lautsprecher k\u00f6nntet Ihr aber mit dem Programm „Espeak“ realisieren. Infos dazu findet Ihr im Artikel RaspberryPi – Sprachausgabe installieren mit eSpeak<\/strong><\/em><\/a>.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Notification-Node<\/h2>\n\n\n\n
Die Notification-Node erm\u00f6glicht es Euch auf dem ge\u00f6ffneten Dashboard Notifications – also Benachrichtigungen – einzublenden. Diese k\u00f6nnen dabei als Information am Rand oder auch zentriert in der Mitte des Bildschirms inklusive Best\u00e4tigungs-Button angezeigt werden.<\/p>\n\n\n\n
\"\"<\/a>
In dem Einstellungsfenster der Notification-Node k\u00f6nnt Ihr unter „Layout“ die Position des Notification-Felds einstellen. Dabei gibt es unter anderem die Option „OK\/Cancel Dialog“, welche es Euch erm\u00f6glicht die Notification mit zwei Buttons auszustatten. Diese m\u00fcssen vom Nutzer dann best\u00e4tigt werden. So k\u00f6nnt Ihr Sicher gehen, dass der Nutzer die Meldung auf jeden Fall wahrgenommen hat. Dazu k\u00f6nnt Ihr unter „Default action label“ und „Secondary action label“ festlegen was auf dem „Best\u00e4tigen“- und „Abbrechen“-Button stehen soll.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Neben der Notification-Variante die der Nutzer best\u00e4tigen muss, gibt es au\u00dferdem noch die Option die Notification nur als Hinweis einzublenden. Dazu w\u00e4hlt 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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht einer Notification die best\u00e4tigt werden muss um sie wieder verschwinden zu lassen.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Ansicht einer Notification in der oberen rechten Ecke.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
UI-Control-Node<\/h2>\n\n\n\n
Mit der UI-Control-Node k\u00f6nnt Ihr das Aussehen und Verhalten der Dashboard-Ansicht steuern. Hiermit lassen sich zum Beispiel das angezeigte Tab wechseln, Gruppen „ein- und ausklappen“. Auch k\u00f6nnt Ihr mit dieser Node darauf reagieren, ob ein Benutzer das das Dashboard ge\u00f6ffnet oder geschlossen hat.<\/p>\n\n\n\n
\"\"<\/a>
Bei dieser Node l\u00e4sst sich im Einstellungsfenster nur der Name konfigurieren. Alle einstellbaren Parameter oder verf\u00fcgbare Infos sind auch in der Info-Leiste an der Seite zusammengefasst.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Template-Node<\/h2>\n\n\n\n
Die Template-Node ist eine sehr vielseitige Node. Mit Ihr k\u00f6nnt 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.<\/p>\n\n\n\n
\"\"<\/a>
Mithilfe der Template-Node k\u00f6nnt Ihr Inhalte zum Header der Seite hinzuf\u00fcgen…<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
…oder auch Nodes zu Gruppen hinzuf\u00fcgen die Ihr mit Eurem eigenen HTML-Code beliebig formatiert habt.<\/figcaption><\/figure>\n\n\n\n
thztjz<\/p>\n\n\n\n
\"\"<\/a>
Mithilfe dieser Node k\u00f6nnt Ihr zum Beispiel auch Links zu beliebigen Seiten auf dem Dashboard einf\u00fcgen. In diesem Beispiel wird der Link zu der MagicMirror-Ansicht generiert und auf dem Dashboard angezeigt.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Auf dem Dashboard wird dann ein Link sichtbar \u00fcber den man auf die Ansicht des MagicMirrors weitergeleitet wird.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Weitere Beispiele<\/h2>\n\n\n\n
Im folgenden findet Ihr eine kleine Liste der Artikel in der ich auch die Dashboard-Nodes verwende. Vielleicht ist ja auch f\u00fcr Euch etwas dabei. \ud83d\ude42<\/p>\n\n\n\n