In diesem Beitrag möchte ich Dir zeigen, wie du Daten aus einer beliebigen Anzahl an Quellen auf dem Node-RED Dashboard darstellen kannst. Die Idee für diesen Beitrag kam durch einen Kommentar auf facebook zustande.
Falls Du auch ein Thema hast, zu dem Du gerne etwas lesen würdest, irgendwelche Fragen zu einem Beitrag von uns hast oder ein interessantes Projekt mithilfe unseres Blogs realisiert hast, schreibe uns gerne auf facebook oder per eMail ([email protected]).
In diesem Beitrag wird davon ausgegangen, dass mehrere ESPs eine Temperatur messen und per HTTP-Request an eine Node-RED-Instanz schicken. Jeder ESP bekommt dabei einen eigenen Namen. Ich gehe davon aus, dass jeder ESP in einem eigenen Raum steht und in diesem Raum die Temperatur misst.
Alle ESPs schicken ihre Daten an den selben Endpunkt bzw. die selbe “http in”-Node. Eigentlich sollte man zum versenden von Daten die HTTP-Methode POST verwenden. Für diesen Beitrag werde ich allerdings die HTTP-Methode GET verwenden, weil diese einfacher im normalen Browser getestet werden kann.
Der Flow zum Empfangen der Daten ist sehr einfach aufgebaut. Es gibt eine “http in”-Node mit der Methode GET und der URL “/data”. An dieser hängt eine Debug- und eine “http response”-Node.
Wenn Du im Browser jetzt bspw. die URL http://<Adresse von Node-RED>/data?name=Wohnzimmer&temperature=15.0 aufrufst, wird im Debug-Fenster von Node-RED ein Objekt mit den Daten aus der URL angezeigt.
Du kannst an den Anführungszeichen erkennen, dass die Temperatur eine Zeichenkette (String) ist. Für diesen Beitrag ist das nicht wichtig, allerdings solltest Du es im Hinterkopf behalten, falls du noch mit die Daten für Berechnungen verwenden möchtest.
Da die Daten der ESPs nicht alle mit einem Request kommen, sondern nach und nach von allen ESPs gesendet werden, müssen die Daten zur Anzeige irgendwo zwischengespeichert werden. Hierfür bietet sich der flow-Kontext an. In einfachen Fällen kann man flow-Variablen per change-Node setzen. Die change-Node lässt sich für diesen Beitrag leider nicht nutzen, da der hier vorgestellte Anwendungsfall etwas komplexer ist.
Es ist allerdings auch möglich mit einer function-Node und etwas JavaScript eine flow-Variable zu setzen. Es kann sein, dass es auch andere Möglichkeiten gibt, da der Quellcode allerdings nicht sehr lang ist, denke ich das man mit etwas JavaScript nichts falsch macht. Erstelle zunächst eine function-Node und verbinde sie mit der “http in”-Node. Anschließend kannst du den folgenden Quellcode in den Code-Editor im Tab “Funktion” kopieren:
// Benötigte Daten aus payload auslesen
const name = msg.payload.name;
const temperature = msg.payload.temperature;
// wenn es keinen dataArray Eintrag im Flow-Context gibt
// wird er mit einem leeren Array erstellt
if (!flow.get('dataArray')) {
flow.set('dataArray', []);
}
// Wert aus dem dataArray Eintrag im Flow-Context in eine Variable übertragen
const dataArray = flow.get('dataArray');
// Im Array nach einem Eintrag suchen, bei dem der Name
// mit dem aus unserem Request übereinstimmt
const indexOfCurrentData = dataArray.findIndex((data) => data.name === name);
// Ein index von -1 bedeutet, dass kein Eintrag gefunden wurde
if (indexOfCurrentData === -1) {
// Es wird ein neuer Eintrag im Array erstellt,
// der alle benötigten Daten enthält
dataArray.push({
name,
temperature,
});
} else {
// Bei einem bereits bestehenden Eintrag: Aktualisierung der Temperatur
dataArray[indexOfCurrentData].temperature = temperature;
}
// Speichern des Arrays (nicht unbedingt erforderlich,
// allerdings wird die Intention des Codes so eindeutiger)
flow.set('dataArray', dataArray);
// Der payload der Nachricht wird mit der Liste aller Daten ersetzt
// Dies ermöglicht eine einfachere Weiterverarbeitung der Daten
msg.payload = dataArray;
return msg;
Code-Sprache: JavaScript (javascript)Ich werde an dieser Stelle nicht nochmal den Quellcode durchgehen und erklären, da ich Kommentare im Quellcode einfacher zu verstehen finde.
Es könnte sein, dass Du mit sehr alten Versionen von Node-RED (bzw. dem im Hintergrund verwendeten Node.JS) Probleme bei der Ausführung des Quellcodes hast. Die Version muss zwar mehrere Jahre alt sein, aber wenn das Smarthome funktioniert, möchte man es sich ja evtl. nicht durch ein Update direkt wieder zerschießen 😉
In diesem Fall müsstest du alle const durch var ersetzen und die Zeile 16 durch
var indexOfCurrentData = dataArray.findIndex(function (data) { return data.name === name; });
Zum Überprüfen der hinzugefügten Logik zum sammeln der Daten habe ich eine Debug-Node mit der function-Node verbunden. Da in Zeile 37 des Quellcodes das payload des msg-Objektes mit der Liste an Daten überschrieben wird lässt sich die Logik so einfach über das Debug-Fenster von Node-RED überprüfen.
Wenn Du jetzt die oben angegebene URL (http://<Adresse von Node-RED>/data?name=Wohnzimmer&temperature=15.0) nochmal aufrufst, wird im Debug-Fenster von Node-RED (neben dem Log vom HTTP-Request) ein Array mit einem Eintrag angezeigt. Klappe das Array und das darin liegende Objekte auf. Du siehst jetzt den in der URL angegeben Namen und die Temperatur.
Rufe jetzt die URL mit den Daten für ein anderes Zimmer (bspw. 20.0° im Badezimmer) auf. Die URL dafür wäre http://<Adresse von Node-RED>/data?name=Badezimmer&temperature=20.0 . Es wird im Array ein zweites Objekt angelegt mit der Temperatur für das Badezimmer angelegt.
Vielleicht ist jetzt auch jemanden aufgefallen, dass die Temperatur im Wohnzimmer etwas gering ist und hat die Heizung aufgedreht. Mit der URL http://<Adresse von Node-RED>:1880/data?name=Wohnzimmer&temperature=19.0 bringen wir das Wohnzimmer auf 19.0°C. In der Debug-Konsole kannst Du sehen, dass immer noch nur 2 Einträge in dem Array vorhanden sind. Die Temperatur im Wohnzimmer hat sich allerdings auf 19.0 °C erhöht.
Leider ist es nicht ohne Weiteres möglich dynamisch Elemente zum Node-RED Dashboard hinzuzufügen. Allerdings lassen sich mit der template-Node eigene Elemente mittels HTML zum Node-RED Dashboard hinzufügen.
Eine Möglichkeit wäre jetzt einfach das Array in einen String mit HTML umzuwandeln. In diesem Beitrag möchte ich allerdings eine andere Möglichkeit vorstellen. Das Node-RED Dashboard setzt intern eine Bibliothek mit dem Namen Angular.JS ein. Über diese Bibliothek (bzw. genau genommen das Framework) lassen sich leicht HTML-Elemente (aus Objekten und Arrays) generieren. Auch wenn Angular.JS inzwischen etwas in die Jahre gekommen ist und nicht mehr dem neusten Stand der Technik entspricht, sollte es einstiegsfreundlicher sein als eine manuelle Serialisierung des Arrays.
Füge eine template-Node zu dem Flow hinzu und verbinde den Eingang der template-Node mit dem Ausgang der function-Node. Die template-Node kannst du, wie jede andere Node-RED Dashboard Node, einem Tab und einer Gruppe zuordnen. Füge im Feld Vorlage den folgenden Code ein:
<table>
<tr ng-repeat="data in msg.payload">
<td>{{data.name}}</td>
<td>{{data.temperature}}</td>
</tr>
</table>
Code-Sprache: HTML, XML (xml)Der Code generiert eine Tabelle und für jeden Eintrag im msg.payload-Array eine Zeile in der Tabelle. Mit dem Attribut ng-repeat im tr-Element wird ausgedrückt, dass ein Array durchlaufen werden soll. Mit dem Wert "data in msg.payload" wird dieser Vorgang genauer beschrieben. So soll jedes Element des Arrays msg.payload in eine Variable mit dem Namen data geschrieben werden.
Das gesamte tr-Element wird hierbei als Vorlage verwendet. In der ersten Spalte der Tabelle (erstes td-Element) wird mit dem Ausdruck {{data.name}} der Name des Gerätes geschrieben. In die andere Spalte wird entsprechend die Temperatur geschrieben.
Tipp: Wenn Du andere Teile des Nachrichten Objektes als Array durchlaufen möchtest, kannst Du einfach in Zeile 2 den Teil "data in msg.payload" durch "data in msg.<Feldname>" ersetzen.
Im Node-RED Dashboard sieht das Ganze dann so aus:
Mit einer kleinen Änderung können wir die Anzeige der Temperatur jetzt noch ein wenig verbessern. Vielleicht wollen wir noch die Einheit der Temperatur (°C) hinzufügen und lieber ein Komma als Trennzeichen verwenden. Hierfür muss nur die vierte Zeile im Quellcode der template-Node angepasst werden:
<table>
<tr ng-repeat="data in msg.payload">
<td>{{data.name}}</td>
<td>{{data.temperature.replace('.', ',')}} °C</td>
</tr>
</table>
Code-Sprache: HTML, XML (xml)Ich finde das hierdurch das Ergebnis direkt etwas besser aussieht.
Prinzipiell kannst Du jetzt beliebig viele ESPs mit unterschiedlichen Namen hinzufügen ohne irgendwas an deiner Node-RED-Instanz ändern zu müssen. Aufgrund der Programmierung würde ich Dir allerdings nicht empfehlen eine sehr hohe Anzahl an Geräten so darzustellen. Je nach verwendeter Hardware sollten allerdings 500 Geräte ohne Probleme möglich sein.
Des Weiteren solltest du (gerade bei vielen Geräten) die Werte nicht zu oft aktualisieren. Wenn die ESPs alle paar Sekunden ihre Daten senden sollte es keine Probleme geben. Jede Sekunde könnte aber bei mehreren Geräten schon zu Problemen mit der Performance von Node-RED führen.
Wenn Du ein Gerät löschen möchtest, kannst Du am besten das gesamte Array aus dem flow-Kontext löschen. Die noch aktiven Geräte tragen ihre Daten ja automatisch wieder ein. Dies geht am einfachsten über das Kontextdaten-Fenster, welches du auf der rechten Seite über das Dreieck aufrufen kannst.
Vermutlich werden Dir im Bereich Flow keine Daten angezeigt. Nach einem Klick auf den Refresh-Button sollte dir der Eintrag dataArray angezeigt werden. In diesem werden alle Geräte die Daten an Node-RED senden aufgelistet. Mit einem Klick auf den Papierkorb löschst du die Daten. Wenn sich die ESPs das nächste mal bei Node-RED melden wird diese Liste wieder neu angelegt.
Geräte mit Umlaute oder Leerzeichen im Namen könnten zu Problemen führen, da diese Zeichen in der URL nicht erlaubt sind. Diese Zeichen müssen vorher URL-Encoded werden. Dafür kannst bspw. das folgende Tool oder einen beliebigen Online-Konverter nehmen. Die URL-Kodierung wird von Node-RED automatisch rückgängig gemacht, Du musst also keine Anpassungen am Node-RED Flow machen um Umlaute und Leerzeichen zu unterstützen.
Wir hoffen, dass wir Dir dabei helfen konnten ein dynamisches Dashboard mit Node-RED Dashboard zu generieren. Neben der Ansicht als Tabelle ist es natürlich auch möglich komplett eigene Designs mit HTML, Angular.JS und CSS umzusetzen. Gerade in Verbindung mit CSS kann man sehr schicke Designs realisieren. Experimentiere einfach ein wenig mit den Möglichkeiten rum.
Dieser Beitrag benutzt Bilder von pixabay. Die verwendeten Bilder wurden von den Benutzern Comfreak, 1117826 (inaktiv) und OpenIcons kostenlos bereitgestellt.