Wie im ersten Teil angekündigt, gehen wir in diesem zweiten Teil auf die technische Umsetzung unseres auf der B.One Middleware basierenden Raumklima-Dashboards und das Zusammenspiel der jeweiligen Geräte, Anwendungen und Technologien ein.
Hier vorab der genaue Inhalt im Überblick:
Alle im Zusammenhang mit dem Raumklima-Dashboard verwendeten LoRaWAN®-Geräte (ZENNER CO2-Indikator & ELSYS ERS Sound) müssen zuvor in der B.One Middleware registriert sein, damit die vom Gateway empfangenen Datentelegramme entschlüsselt und vom in der Plattform integrierten Parser zu menschenlesbaren Messwerten aufbereitet werden können. Zudem muss den Geräten eine Weiterleitungsregel zugeordnet werden, in welcher die URI, der Port und die Zugangsdaten unseres HTTP-Endpunktes eingetragen sind.
Wollt ihr wissen, wie Sensoren in der B.One Middleware angelegt oder Weiterleitungen eingerichtet werden? Dann empfehlen wir euch an dieser Stelle bereits folgende Artikel:
Zwischen die B.One Middleware und unsere Dashboard-Anwendung ist eine Virtual Machine (VM) mit einem auf Flask basierenden HTTP-Endpunkt zwischengeschaltet. Der Endpunkt nimmt die von der B.One Middleware ausgeleiteten Messwerte entgegen und speichert sie in einer eigenen MongoDB zwischen. Ein erfolgreich entgegengenommener Wert wird der B.One Middleware vom HTTP-Endpunkt mit dem Status-Code 200 bestätigt. Dieser Status-Code wird von der B.One Middleware geprüft. Im Fehlerfall, wenn zum Beispiel der Endpunkt kurzzeitig nicht erreichbar ist, erkennt dies die B.One Middleware und unternimmt nach einem Delay einen erneuten Ausleitungsversuch. Die maximale Anzahl an Wiederholungen ist dabei konfigurierbar.
Die Datenbank, in welche die VM die empfangenen Messwerte schreibt, enthält zwei Collections: Eine Collection beinhaltet alle Messwerte und die andere Collection pro Sensor den aktuellsten Messwert inklusive Zeitstempel. Eingehende Pakete werden direkt in die Collection mit allen Messwerten geschrieben. Zusätzlich wird geprüft, ob der Zeitstempel des Telegramms neuer als der bis dato aktuellste Zeitstempel des jeweiligen Sensors in der zweiten Collection ist. Falls ja, werden Messwert und Zeitstempel aktualisiert. Sollte der Sensor noch nicht in der Collection enthalten sein, wird ein neuer Eintrag generiert.
Neben dem Dateneingang stellt die VM auch zwei Datenausgangs API-Calls für die Webanwendung zur Verfügung. Ein API-Call gibt eine Liste aller bekannten Sensoren mit dem jeweils letzten Messwert inklusive Zeitstempel aus, der andere API-Call gibt alle Sensorwerte zu einem bestimmten Sensor in einem gegebenen Zeitintervall aus.
Theoretisch wäre es auch möglich gewesen, dass die Webanwendung die Daten direkt per API-Call von der B.One Middleware abfragt – wir haben uns aber für die zwischengeschaltete VM entschieden, welche die Daten ohne die Eingabe von Zugangsdaten im Intranet zur Verfügung stellt. Dadurch ergibt sich für die Anwender der Komfort, dass zur Nutzung keine Anmeldeinformationen eingetragen werden müssen, solange sie sich im Firmennetz befinden.
Ohne diesen Zwischenschritt über unsere VM müssten die Anwender sich bei jedem Aufruf mit ihren Zugangsdaten authentifizieren, oder die Zugangsdaten müssten innerhalb des im Browser einsehbaren JavaScript-Codes hinterlegt sein, was aus Sicherheitsgründen keine Option ist.
Unsere JavaScript-Anwendung baut auf einer HTML-Datei auf, die mittels JavaScript-Code dynamisch gestaltet wird.
Um die benötigten Sensordaten abzurufen, haben wir unsere JavaScript-Anwendung mit zwei Funktionen bestückt, die jeweils einen API-Call an einem aus dem Intranet erreichbaren Endpunkt mit einer statischen IP-Adresse/URL sendet.
Der erste API-Call gibt eine Liste aller bekannten Sensoren mit dem jeweils letzten Messwert inklusive Zeitstempel aus. Dieser wird verwendet, um die Gesamtübersicht aller Räume und deren Raumklima anzuzeigen.
Der zweite API-Call gibt wiederum alle Sensorwerte zu einem bestimmten Sensor in einem gegebenen Zeitintervall aus. Dieser wird erst bei Klick auf eine Einzelraumansicht gestartet.
Um die Sensordaten abzufragen, wird in der Gesamtübersicht ein API-Call an die im vorhergehenden Kapitel vorgestellte Sensordaten-API gesendet. Diese hat die momentan aktuellsten Sensorwerte parat. In der Einzelraumansicht wird der API-Call zusätzlich mit den Parametern DevEUIs der Sensoren, der Anfangszeitstempel und der Endzeitstempel im Unix-Format versandt, damit nur die beiden gewünschten Sensoren in dieser Raumeinzelansicht vorhanden sind. Innerhalb des JavaScript-Codes werden dabei automatisch immer die richtigen Start- und Endzeitstempel generiert und als Parameter den API-Calls übergeben. Der frühestmögliche Start-Zeitstempel wurde auf 7 Uhr gesetzt, da vor dieser Uhrzeit in der Regel keine Besprechungen in den Räumen anberaumt sind. Der API-Call wird sowohl beim Öffnen, bei jedem Aktualisieren der Website als auch im Zeitintervall von 5 Minuten automatisch über eine Funktion durchgeführt.
Die angefragten Sensordaten Zeitstempel, CO2-Wert sowie Temperatur werden nun verarbeitet und in dem von uns entwickelten Dashboard aufbereitet.
Aus Gründen der Übersichtlichkeit und damit sich die Seite an verschiedene Displaygrößen anpassen kann, haben wir ein Grid-System für die Darstellung der einzelnen Räume angewandt. Dieses ordnet abhängig von der Displayauflösung und -größe die einzelnen Kacheln über- oder nebeneinander an. Hier die Gesamtübersicht einmal in der Desktop-Ansicht:
Wie ihr seht, sind die Gauges so programmiert, dass sie sich je nach CO2-Schwellenwert unterschiedlich färben. Über ein Input-Field, kann zudem nach dem jeweiligen Raum gesucht beziehungsweise gefiltert werden. Wie bereits oben erwähnt, aktualisieren sich die Gauges alle 5 Minuten mit den aktuellsten zur Verfügung stehenden Werten. Ist kein tagesaktueller Sensorwert vorhanden, wird die Kachel des jeweiligen Raumes ausgegraut. Beim Klick auf diese öffnet sich dann zusätzlich ein Tooltip mit dem Hinweis, dass momentan kein tagesaktueller Wert vorhanden ist.
Möchte man sich den gewünschten Raum mit seinem Klima und dessen Verlauf genauer anschauen (vorausgesetzt es ist ein tagesaktueller Wert vorhanden), kann man per Klick auf diesen Raum auf die Einzelansichts-Seite gelangen.
Innerhalb der Einzelraumansicht ist ebenfalls ein Grid-System, welches insgesamt vier Diagramme integriert. Diese stellen jeweils eine andere Datenvisualisierung dar. Hier zu sehen sind eine Gauge, die sowohl die Temperatur, den CO2-Gehalt als auch den Zeitstempel des übermittelten Werts anzeigt. Diese Werte werden zudem im Diagramm „Raumklima Zeitverlauf“ nochmals angezeigt. Sobald ein weiterer Wert übermittelt wurde, wird das Zeitverlaufsdiagramm um die neuen Punkte/Daten dynamisch erweitert.
Die untere Gauge und das Zeitverlaufsdiagramm beinhalten die Werte des Geräuschpegels und dessen Zeitstempel.
Sowohl in der Gauge als auch im Zeitverlaufsdiagramm wurden die verschiedenen Schwellenwerte über eine Bedingung definiert und bei Unter- oder Überschreitung die Farbe geändert.
Zudem wurde noch ein kleines Burger Menü erstellt, um sowohl auf die Raum-Gesamtübersichtsseite zu gelangen als auch die nicht benötigten Diagramm-Ansichten bei Bedarf auszublenden. Hier ein Beispiel:
https://community.mz-connect.com/wp-content/uploads/2023/01/2023-01-24_raumklima-dashboard-einzelraumansicht-burger-menue-compr-1.mp4Das Aussehen der HTML-Datei und Diagramme wurde mittels CSS gestylt und an unsere Design-Vorgaben angepasst. Die JavaScript-Anwendung ermöglicht es uns, die abgefragten Daten auf anschauliche Weise darzustellen und so eine bessere Analyse der Informationen zu ermöglichen. Durch das Grid-System haben wir zudem die Möglichkeit, mehrere Diagramme auf einer HTML-Seite anzuzeigen und so einen umfassenden Überblick über die Daten zu erhalten.
Wie bereits im ersten Teil erwähnt, sind der eigenen Kreativität bei der Erweiterung und Gestaltung des Dashboards grundsätzlich natürlich keine Grenzen gesetzt, je nachdem, wie viel Zeit und Aufwand ihr hineinstecken wollt und könnt.
Das soll es für diesen Artikel auch gewesen sein. Habt ihr weitere Fragen oder Anregungen? Dann packt sie gerne in die Kommentare! :-) Und falls ihr noch mehr vom Raumdashboard sehen und wissen wollt, wie es in den Besprechungsräumen verfügbar gemacht wird, werft einfach einen Blick in den ersten Teil dieser kleinen Beitragsreihe.
COOKIES: