Widgets ermöglichen es Ihnen, die Open Source Plattform ThingsBoard an Ihre eigenen Bedürfnisse anzupassen und das Potenzial von ThingsBoard voll auszuschöpfen.
Die Internet of Things Lösung beinhaltet von Haus aus schon zahlreiche Widgets. Sollte es allerdings kein passendes Widget für Ihren konkreten Anwendungsfall geben, so können Sie die IoT-Plattform mit eigenen Widgets erweitern.
Wie Sie die die Chart-Bibliotheken von ThingsBoard mit eigenen Widgets flexibel erweitern, erfahren Sie in diesem Beitrag.
Was sind ThingsBoard Widgets?
ThingsBoard Widgets sind zusätzliche UI-Module. Sie können diese leicht in jedes IoT-Dashboard einbinden. Die Widgets ermöglichen Ihnen unter anderem Daten zu visualisieren, Alarm-Management- und Remote-Gerätesteuerung zu betreiben und selbst erstellten, statischen HTML-Content anzuzeigen.
Eigene Visualisierungsformen für ThingsBoard gestalten: So gelingt es
ThingsBoard bietet von Haus aus schon über viele Visualisierungsmöglichkeiten. Sie haben jedoch die völlige Freiheit, die visuelle Gestaltung genauso anzupassen, wie Sie es möchten.
Diese Vorteile bietet Ihnen die IoT-Plattform ThingsBoard bei der Erweiterung des Chartangebots:
- Ergänzen Sie fehlende Visualisierungsformen
- Erweitern Sie den Funktionsumfang bereits bestehender Widgets
- Implementieren Sie eigene Logiken
- Nutzen Sie eine Vielzahl externer Javascript-Bibliotheken wie z.B. 3D.js
- Schreiben Sie eigenen Quellcode mit der integrierten Entwicklungsumgebung von ThingsBoard
- Kopieren und verschieben Sie selbst erstellte Widgets zwischen verschiedenen Systemen mit der multikompatiblen JSON-Konfigurationsdatei
Praxisbeispiel: So erstellen Sie in ThingsBoard Ihre eigenen Custom Widgets
Sind Sie in ThingsBoard (Pro) eingeloggt, finden Sie auf der linken Seite unter „Custom Widgets“ den Bereich, mit dem Sie Ihre eigenen Widgets erstellen können:
Anschließend finden Sie auf der rechten Seite eine Übersicht der Widget Bundles. Bei den Widget Bundles handelt es sich um Themenbereiche zu verschiedenen Widgets. So beinhaltet das „Alarm widgets“-Bundle beispielsweise alle Widgets Alarmen.
Rechts oben können Sie mit „Create new widgets bundle“ ein neues Widget erstellen.
Im nächsten Schritt stellt ThingsBoard Ihnen 5 Widget types zur Verfügung, aus denen Sie auswählen können:
- Time series
- Latest values
- Control widget
- Alarm widget
- Static widget
In unserem Beispiel wählen wir „Latest values“.
Auf dem folgenden Bildschirm sehen Sie die die integrierte Entwicklungsumgebung. Dort können Sie im oberen Teil beispielsweise eigenen HTML-Code und CSS schreiben oder verschiedene Einstellungen für das Widget vornehmen. Im unteren Bereich sehen Sie den eigentlichen JavaScript Code und eine Vorschau des zu erstellenden Widgets. ThingsBoard beninhaltet bereits einige JavaScript-Funktionen wie die onInit()-Funktion, die beim Laden des Widgets ausgeführt wird oder onDataUpdated, die aufgerufen wird, wenn ein neuer Sensor-Wert in ThingsBoard eintrifft.
So verwenden Sie externe JavaScript-Bibliotheken in ThingsBoard
Als anschauliches Beispiel einer externen JavaScript-Bibliothek dient „Apex Charts“. Die Bibliothek hat folgende Vorteile:
- Besitzt moderne interaktive Charts
- Auch bei Streaming Daten flottes Tempo
- Leichter Einstieg und verständliche Dokumentation
- Kommt auch bei ThingsBoard Trendz Analytics zum Einsatz
Beispiele für Apex Charts in ThingsBoard
XY-Charts: Standardmäßig bildet ThingsBoard bei Liniendiagrammen nur Informationen im Zeitverlauf, der X-Achse, ab. Wenn Sie zwei Sensorwerte miteinander vergleichen möchten, ist die Apex Charts Bibliothek genau das richtige für Sie. In einem Scatter Chart erstellen Sie beispielsweise Diagramme, wo Sie Sensorwerte ohne die standardmäßig feste X-Achse mit dem Zeitverlauf.
Kalender: Verfügen Sie beispielsweise über eine Flotte mit zyklischen Wartungsterminen, ist ein Kalender unverzichtbar. Mit Apex Charts erstellen Sie im Handumdrehen übersichtliche Kalender für ThingsBaord, in der Sie solche Termine eintragen können.
Forecasts: Standardmäßig stellt ThingsBoard Echtzeit-Daten und Vergangenheitswerte dar. ThingsBoard ist aber auch in der Lage, Zukunftswerte zu speichern. So können Sie Forecasts, beispielsweise mit Machine Learning und AI-Methoden, generieren. Mit einem Custom Widget können Sie die zukünftigen Werte in visueller Form darstellen.
Custom Actions mit Formularen in ThingsBoard erstellen – Metadaten auf bequeme Weise pflegen
Formulare in ThingsBoard sind Custom Actions mit HTML-Templates. Sie können diese Custom Actions praktisch jedem Widget leicht hinzufügen. Vorteile der Formulare sind:
- Verbesserte User Experience und einfachere Bedienung für den Endanwender
- Der Endanwender benötigt keine tiefergehendes ThingsBoard-Know-how
- Auf nur einer Seite (Single-Page) bedienbar. Ohne weitere Schritte im ThingsBoard-Menü
- Zugriff auf die ThingsBoard Datenbank per Rest-API mit CRUD Operationen (Create, Read, Update & Delete)
Mit einem Formular können Sie beispielsweise neue Benutzer bequem anlegen. Der angelegte Benutzer soll in einem weiteren Schritt einer Benutzergruppe hinzugefügt werden und verschiedene Berechtigungen erhalten. Zudem sollen Beziehungen zu den Benutzern untereinander hergestellt und die Benutzer verschiedenen Devices des Kunden zugeordnet werden können.
Um Anwender bzw. Benutzer anzulegen, Rechte zu vergeben und Beziehungen herzustellen, sind normalerweise viele manuelle Schritte nötig. Mithilfe einer Custom Action automatisieren Sie diese Prozess. Dazu erstellen Sie mittels Angular den Code für die Template Syntax, da das ThingsBoard-Frontend auf dem Angular-Framework beruht. Beispielcode bzw. verschiedene vorhandene Funktionen erleichtern Ihnen dabei den Einstieg in das Programmieren von Custom Actions. Der Quellcode zu ThingsBoard wird bei GitHub gehostet und die Dokumentation geben Ihnen weitere Hilfen an die Hand.
FAQ: Häufig gestellte Fragen zu ThingsBoard Widgets
Wenn die Widgets innerhalb der Entwicklungsumgebung erstellt wurden, kann entweder das gesamte Bundle mit allen Widgets oder einzelne Widgets als JSON-Datei exportiert werden. Danach kann die JSON-Datei einfach in einer anderen Umgebung wieder importiert werden.
Innerhalb der Entwicklungsumgebung kann auf die klassischen Entwickler-Tools des jeweiligen Browsers wie bei Firefox oder Chrome zugegriffen werden. So kann beispielsweise der Inhalt der Variablen vom JavaScript-Code per Log-Befehl in der Konsole ausgegeben werden oder den Debugger des Browsers nutzen.
Über ein entsprechendes Angebot stellen wir Ihnen gerne unser komplettes Bundle zur Verfügung. Auch die Dokumentation oder die „grüne Wiese“ von ThingsBoard enthalten weitere Code-Beispiele.
