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
Eisen
Handige artikelen: Om nieuwe nodes te kunnen installeren, moet NodeRed natuurlijk al geïnstalleerd zijn. Hoe je een RaspberryPi voorbereidt en vervolgens NodeRed erop installeert, wordt beschreven in de volgende artikelen.
In de volgende lijst vindt u alle onderdelen die u nodig heeft om dit artikel te implementeren.
Log in op de configuratie-interface van NodeRed
Voordat u uw NodeRed-configuratie kunt bewerken, moet u - indien geactiveerd - eerst inloggen op de NodeRed-configuratie-interface.
Weergave van het aanmeldingsvenster. Hier moet u de inloggegevens invoeren die u tijdens de configuratie van de login hebt opgegeven. Informatie hierover vind je in het artikel NodeRed - gebruikersaanmelding instellen.
Dashboardknooppunt installeren
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.
Weergave van de dashboardknooppunten in het palet Knooppunten.
Knooppunt en positionering van de elementen in het 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.
U komt op de dashboardpagina door op het met de muisaanwijzer gemarkeerde symbool in de dashboardtab te klikken.
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 dan is het adres naar je 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.
Een ander voorbeeld:
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.
Het knopenknooppunt
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-knooppunt
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.Weergave van de geconfigureerde vervolgkeuzelijst op het dashboard.Wenn Ihr nun auf das Auswahlfeld klickt, könnt Ihr zwischen den verschiedenen vorher konfigurierten Einträgen auswählen.
schakel knooppunt
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.Zicht op de ingeschakelde schakelaar.Zicht op de uitgeschakelde schakelaar.
schuifknoop
Het schuifknopknooppunt is ideaal voor het instellen van getallen binnen een bepaald bereik. Een goede use case is bijvoorbeeld om hem te gebruiken als dimmer voor een lamp.
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.Weergave van de schuifregelaar in het dashboard.
numeriek knooppunt
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.
Knooppunt voor tekstinvoer
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.(Relatief eenvoudig ogende) weergave van het tekstknooppunt in de dashboardweergave.
Knooppunt datumkiezer
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.Weergave van de datumkiezer in het dashboard.
Kleurkiezer knooppunt
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.
vorm knooppunt
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.Weergave van het testformulier in het dashboard.
Knooppunt voor tekstuitvoer
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.Tekstuitvoer knooppuntweergave in dashboardweergave.
meter knooppunt
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.
grafiek knooppunt
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” stel dan ook de labeling van de X-as in. Met “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.Weergave van het grafiekknooppunt in het dashboard.
audio-uitgangsknooppunt
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.
meldingsknooppunt
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.Weergave van een melding in de rechterbovenhoek.
UI-besturingsknooppunt
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.
sjabloon knooppunt
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.
Verdere voorbeelden
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. 🙂
Ik hoop dat alles werkte zoals beschreven. Zo niet, of als je vragen of suggesties hebt, laat het me weten in de commentaren. Ik zal dit dan zo nodig aan het artikel toevoegen. Ideeën voor nieuwe projecten zijn altijd welkom. 🙂
PS Veel van deze projecten - vooral de hardwareprojecten - kosten veel tijd en geld. Natuurlijk doe ik dit omdat ik het leuk vind, maar als je het cool vindt dat ik de informatie met je deel, dan zou ik blij zijn met een kleine donatie aan het koffiefonds. 🙂
Hallo, geweldig artikel. Een vraag: Hoe krijg je het voor elkaar om binnen een groep elementen naast elkaar te schikken, zoals de aan- en uitknop in je ledstripgroep?
Hallo Andreas,
bedankt 🙂
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. 🙂
Laat me alsjeblieft weten of het gelukt is. 🙂
Hartelijke groeten
Fab
geweldig artikel, heeft me veel geholpen. Heb je nog een algemene vraag over een Node-Red dashboard.
Ik heb er een gebouwd en lees gegevens van een temperatuursensor via Node-Red. Deze heb ik aangesloten op de RPi. (Node-red draait op mijn RPi).
Dit dashboard is ook makkelijk toegankelijk via de browser die ik gebruik. Maar alleen als ik in hetzelfde netwerk zit als de Raspberry Pi zelf.
Ik heb geen toegang tot het dashboard vanaf het internetnetwerk van mijn smartphone.
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?
Hallo Lennard,
Bedankt. 🙂
De (enige redelijk) veilige optie is om via een VPN verbinding te maken met je thuisnetwerk en zo toegang te krijgen tot de RaspberryPi in je netwerk.
In de tussentijd kunnen veel routers (bijvoorbeeld de Fritzbox) worden geconfigureerd als VPN-servers.
Helaas heb ik hier geen tutorial voor klaar liggen, maar waarschijnlijk wel. vind je er iets over? 🙂
Hartelijke groeten
Fabian
Hallo,
Ik werk al een paar dagen met de Node-Red op de Raspy-400. Een AD-converter (ADS1115) geeft me ook schone resultaten. Ik wil graag de lettergrootte voor de dashboardknooppunten wijzigen. Is dit mogelijk? Sommige codes worden op andere sites gepubliceerd, maar ze werken niet. Heb je een voorbeeld voor mij (bijv. voor meter) hoe je dat moet doen?
Ik wil je alvast bedanken, alleen al vanwege het dashboard-artikel.
Met vriendelijke groeten
H. Harle
Hallo 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:
Als een klasse is opgegeven, wordt deze toegevoegd aan de bovenliggende kaart. Op deze manier kun je de kaart en de elementen erin stylen met aangepaste CSS. De klasse kan tijdens runtime worden ingesteld door een tekenreekseigenschap msg.className in te stellen.
Dat betekent dat je eigenlijk in staat zou moeten zijn om het uiterlijk van de individuele componenten van het meterknooppunt te bewerken met CSS-code.
Ik hoop dat dit je verder helpt. 🙂
Hartelijke groeten
Fab
Nederlands 
Deutsch 
English 
Français 
Español
Hallo, geweldig artikel. Een vraag: Hoe krijg je het voor elkaar om binnen een groep elementen naast elkaar te schikken, zoals de aan- en uitknop in je ledstripgroep?
Hartelijke groeten
Andreas
Hallo Andreas,
bedankt 🙂
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. 🙂
Laat me alsjeblieft weten of het gelukt is. 🙂
Hartelijke groeten
Fab
Bedankt 🙂
Goedemorgen,
geweldig artikel, heeft me veel geholpen. Heb je nog een algemene vraag over een Node-Red dashboard.
Ik heb er een gebouwd en lees gegevens van een temperatuursensor via Node-Red. Deze heb ik aangesloten op de RPi. (Node-red draait op mijn RPi).
Dit dashboard is ook makkelijk toegankelijk via de browser die ik gebruik. Maar alleen als ik in hetzelfde netwerk zit als de Raspberry Pi zelf.
Ik heb geen toegang tot het dashboard vanaf het internetnetwerk van mijn smartphone.
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?
Bedankt en vriendelijke groeten, Lennard
Hallo Lennard,
Bedankt. 🙂
De (enige redelijk) veilige optie is om via een VPN verbinding te maken met je thuisnetwerk en zo toegang te krijgen tot de RaspberryPi in je netwerk.
In de tussentijd kunnen veel routers (bijvoorbeeld de Fritzbox) worden geconfigureerd als VPN-servers.
Helaas heb ik hier geen tutorial voor klaar liggen, maar waarschijnlijk wel. vind je er iets over? 🙂
Hartelijke groeten
Fabian
Hallo,
Ik werk al een paar dagen met de Node-Red op de Raspy-400. Een AD-converter (ADS1115) geeft me ook schone resultaten. Ik wil graag de lettergrootte voor de dashboardknooppunten wijzigen. Is dit mogelijk? Sommige codes worden op andere sites gepubliceerd, maar ze werken niet. Heb je een voorbeeld voor mij (bijv. voor meter) hoe je dat moet doen?
Ik wil je alvast bedanken, alleen al vanwege het dashboard-artikel.
Met vriendelijke groeten
H. Harle
Hallo 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:
Dat betekent dat je eigenlijk in staat zou moeten zijn om het uiterlijk van de individuele componenten van het meterknooppunt te bewerken met CSS-code.
Ik hoop dat dit je verder helpt. 🙂
Hartelijke groeten
Fab