Dashboards

Dashboards

Mit Dashboards lassen sich in optiCLOUD interaktive Visualisierungen für Geräte, Anlagen und andere Datenquellen erstellen. Sie dienen dazu, Messwerte, Zustände und Aktionen in einer frei anpassbaren Oberfläche zusammenzuführen.

Ein Dashboard besteht aus einem Layout mit beliebig vielen Widgets. Dadurch können Daten in sehr unterschiedlichen Formen dargestellt werden, zum Beispiel als Charts, Tabellen, Karten, Statusanzeigen oder Steuerelemente.

Einsatzbereich

Dashboards decken in der Praxis mehrere Aufgaben gleichzeitig ab:

• Datenvisualisierung für Telemetrie, Attribute und historische Daten
• Gerätebedienung über Control-Widgets, RPCs oder Attributänderungen
• Interaktive Navigation innerhalb eines Dashboards oder zwischen mehreren Dashboards
• Individuelle Gestaltung von Layout, Farben, Schriften und Verhalten
• Rollenbasierter Zugriff über Projekte und Berechtigungen
• Öffentliche Freigabe für Präsentationen oder externe Ansichten per Link
• Eigene Widgets über die integrierte Widget Library

Damit eignen sich Dashboards sowohl für technische Überwachung als auch für Bedienoberflächen, Präsentationsansichten oder kundenspezifische Auswertungen.

Dashboard-Übersicht

Die Dashboard-Tabelle listet alle Dashboards des aktuell ausgewählten Projekts auf. Für jedes Dashboard werden zentrale Statusinformationen und verfügbare Aktionen angezeigt.

In der Übersicht stehen folgende Informationen zur Verfügung:

Spalte	Name	Beschreibung	Zugang	Zeitpunkt letzte Bearbeitung	Bearbeitungsstatus
Erklärung	Name des Dashboards, der bei der Erstellung vergeben wurde (editierbar)	Beschreibender Text zum Dashboard, der bei der Erstellung vergeben wurde (editierbar)	Zugangsstatus des Dashboards	der Zeitpunkt der letzten Bearbeitung des Dashboards	aktueller Bearbeitungsstatus

Über die Aktionsspalten können Dashboards direkt verwaltet werden:

• Name oder Beschreibung bearbeiten
• Dashboard öffnen
• Dashboard direkt im Editiermodus öffnen
• Dashboard exportieren
• Dashboard löschen

Im oberen linken Bereich lassen sich neue Dashboards erstellen oder bestehende Dashboards importieren.

Im oberen rechten Bereich können mehrere Dashboards gleichzeitig markiert und gesammelt exportiert oder gelöscht werden.

Für neue Dashboards sind nur ein Name und optional eine Beschreibung erforderlich.

Dashboard-Status

Bearbeitungsstatus

Dashboards können sich im Bearbeitungsstatus befinden, oder nicht. Ein Dashboard kann immer nur von einem Benutzer gleichzeitig bearbeitet werden. Dadurch werden widersprüchliche Änderungen vermieden. Wird eine Bearbeitung nicht sauber beendet, wird die Sitzung nach 15 Minuten automatisch freigegeben.

Sichtbarkeitsstatus

• privat

  • Zugang zu dem Dashboard ist nur Nutzern gestattet, die über eine aktiven Account in dem aktuellen Tenant verfügen.

• öffentlich

  • Zugang zu dem Dashboard ist jedem gestattet, der über den entsprechenden öffentlichen Link verfügt und über diesen das Dashboard aufruft.

info

Weitere Beschränkungen zur Sichtbarkeit von Dashboards un deren Daten findet sich unter: Permission Management

Leeres Dashboard und Grundaufbau

Nach dem Öffnen eines neu angelegten Dashboards ist zunächst nur das leere Layout sichtbar. Von hier aus werden Zeitfenster, Aliase, States und Widgets konfiguriert.

Im oberen linken Bereich befindet sich die Auswahl für das angezeigte Zeitfenster. Zusätzlich kann dort festgelegt werden, ob und wie eingehende Daten vor der Darstellung aggregiert werden.

Zeitfenster und Aggregation

Dashboards können sowohl mit laufenden Echtzeitdaten als auch mit festen historischen Zeiträumen arbeiten.

Realtime

Im Modus Realtime ist das gewählte Zeitfenster dynamisch. Das Dashboard aktualisiert sich fortlaufend und zeigt neu eingehende Werte direkt an.

History

Im Modus History ist der Zeitraum statisch. Es werden nur Daten für den explizit ausgewählten Zeitraum geladen und dargestellt.

Sowohl für Realtime als auch für History können feste Bereiche oder dynamische Zeiträume gewählt werden, zum Beispiel: letzte 5 Minuten, letzter Tag, heute, gestern, 17.05.2025 12:00 - 17.05.2025 12:30, o.Ä

Zusätzlich stehen Aggregationsfunktionen zur Verfügung:

• None für Rohdaten
• Average für den einfachen Mittelwert der Rohdaten
• Sum für die Summe der Rohdaten
• Min für das Minimum der Rohdaten
• Max für das Maximum der Rohdaten
• Count für die Anzahl der eingegangenen Werte der Rohdaten

Für alle Aggregationsarten außer None kann zusätzlich ein Aggregations Intervall gesetzt werden. Dadurch werden Daten nicht über den kompletten Zeitraum als ein einziger Wert zusammengefasst, sondern blockweise berechnet.

Beispiele:

• Average mit Aggregationsintervall 5 Sekunden berechnet Mittelwerte des ausgewählten Zeitfensters in 5-Sekunden-Intervallen
• Min mit Aggregationsintervall 300 Sekunden berechnet das jeweilige Minimum des ausgewählten Zeitfensters in 5-Minuten-Intervallen

warnung

Große Zeitfenster in Kombination mit sehr detaillierten Aggregationfunktionen, insbesondere None können zu erheblichen Ladezeiten führen. Bei einem Zeitraum von 7 Tagen und einer Datenrate von 1 Hz entstehen bereits rund 600.000 Datenpunkte pro Kanal. Bei mehreren Geräten oder Kanälen wächst die zu verarbeitende Datenmenge entsprechend stark an. Die Übertragung der Daten ist hierbei meist nicht das Problem, sondern eher das "plotten" der Daten in den jeweiligen Widgets (z.B: Karten, oder Charts), was erhebliche Verzögerungen mit sich bringen kann.

Toolbar und Dashboard-Funktionen

Im oberen rechten Bereich des Dashboards befindet sich die Bearbeitungs-Toolbar. Von hier aus werden zentrale Dashboard-Einstellungen verwaltet.

Aliase

Ein Alias ist ein Verweis auf ein einzelnes Gerät oder auf eine Gruppe von Geräten. Widgets arbeiten nicht direkt mit einzelnen Geräten, sondern über Alias-Definitionen.

Aliase können statisch oder dynamisch aufgebaut sein. Verfügbare Typen sind:

• Einzelnes Gerät als statischer Verweis auf genau ein Gerät
• Geräteliste als statischer Verweis auf mehrere Geräte
• Gerätename als dynamischer Verweis auf ein Gerät anhand seines Namens
• Gerätetyp als dynamischer Verweis auf Geräte eines Typs
• Aktuelles Projekt als Verweis auf alle Geräte im aktuellen Projekt
• Aus Dashboard-State als dynamischer Verweis basierend auf den Dashboard-States

Ein sauber definierter Alias ist der erste Schritt, bevor ein Widget sinnvoll konfiguriert werden kann.

Settings

In den Dashboard Settings werden die globalen Eigenschaften des Dashboards festgelegt.

Dazu gehören:

• Titel und Farbe
• Logo
• sichtbare Elemente der Toolbar
• Hintergrund
• Mobile-Einstellungen
• Verhalten von Autofill

Mit Autofill können Widgets den verfügbaren Bereich automatisch füllen, statt sich nur an einer manuell gesetzten Position zu orientieren.

Das Layout selbst wird ebenfalls global definiert:

• Anzahl der Spalten
• Abstand zwischen Widgets

Zusätzlich kann festgelegt werden, welche Menüpunkte oder Bedienelemente in der Dashboard-Oberfläche sichtbar sein sollen.

States

Ein Dashboard kann aus mehreren States bestehen. States funktionieren ähnlich wie Arbeitsblätter in einer Excel-Datei: Sie gehören zum selben Dashboard, können aber unterschiedliche Ansichten oder Arbeitsschritte abbilden.

States lassen sich untereinander verknüpfen. Dadurch kann ein Dashboard zum Beispiel von einer Übersichtsseite in eine Detailansicht wechseln oder abhängig von Benutzeraktionen unterschiedliche Geräte in den Fokus nehmen.

Weitere Toolbar-Funktionen

Zusätzlich stehen in der Toolbar unter anderem folgende Funktionen zur Verfügung:

• Vorschau des Mobile-Layouts
• Vollbildansicht
• Wechsel in den Editiermodus

Erstes Widget hinzufügen

Sobald mindestens ein Alias vorhanden ist, kann das erste Widget in das Dashboard eingefügt werden.

Zunächst wird aus der Liste der Widget-Bundles ein passendes Paket ausgewählt.

Danach wird innerhalb des Bundles der konkrete Widget-Typ gewählt, zum Beispiel Chart, Tabelle, Karte oder andere Visualisierungselemente.

Anschließend öffnet sich der Dialog zur Widget-Konfiguration.

Widget-Konfiguration

Die Konfiguration eines Widgets ist in mehrere Tabs aufgeteilt. Je nach Widget-Typ unterscheiden sich einzelne Detailoptionen, der grundsätzliche Ablauf ist jedoch ähnlich.

Data

Im Tab Data wird festgelegt, welche Daten das Widget anzeigen oder verarbeiten soll.

Zuerst wird entschieden, ob das Widget das globale Zeitfenster des Dashboards verwendet oder ein eigenes Zeitfenster erhält. Dieses individuelle Zeitfenster funktioniert genauso wie das globale Dashboard-Zeitfenster mit Realtime- oder History-Modus und optionaler Aggregation.

Danach wird die Datenquelle ausgewählt:

• zuerst der Alias
• anschließend der konkrete Datenkanal oder Daten-Key

Je nach Widget können ein oder mehrere Datenkanäle und auch mehrere Aliase verwendet werden.

Verfügbare Datenquellen sind typischerweise:

• Telemetry aus MQTT-Daten
• Attributes
• Telemetry aus OSF-Daten

hinweis

OSF-Daten können nur mit dem Zeitfenster History verwendet werden. Wenn nur ein einzelnes Widget OSF-Daten anzeigen soll, muss dieses Widget ein eigenes historisches Zeitfenster erhalten, auch wenn das restliche Dashboard mit Realtime-Daten arbeitet.

Data-Key-Konfiguration

Über das Bearbeitungssymbol eines einzelnen Kanals wird die Detailkonfiguration des jeweiligen Daten-Keys geöffnet.

Dort können unter anderem folgende Eigenschaften angepasst werden:

• Label des Kanals
• Farbe
• angezeigte physikalische Einheit
• Anzahl der Nachkommastellen
• Standardwerte bei fehlenden Daten
• zusätzliche Anzeigeoptionen

Außerdem steht eine Post-Processing-Funktion zur Verfügung. Damit kann die Darstellung der Daten für das Widget verändert werden, ohne die Originaldaten in der Datenbank zu ändern.

Typische Beispiele sind:

• Umrechnung von Fahrenheit in Celsius
• Offset-Korrekturen
• einfache Nachberechnungen für die Anzeige

Im Bereich Advanced der Data-Key-Konfiguration hängen die verfügbaren Optionen vom jeweiligen Widget-Typ ab.

General

Im Tab General werden allgemeine Anzeigeeinstellungen des Widgets festgelegt.

Dazu gehören zum Beispiel:

• Titel und Sichtbarkeit des Titels
• Tooltip
• Icon, Icon-Farbe und Icon-Größe
• Hintergrund- und Textfarben
• Innen- und Außenabstände
• Schlagschatten
• Freigabe für Vollbildmodus
• Datenexport
• Legenden-Einstellungen

Widget-spezifische Einstellungen

Im nächsten Tab folgen die erweiterten Einstellungen, die vom gewählten Widget abhängen.

Ein Chart-Widget bietet hier andere Optionen als eine Tabelle, eine Karte oder ein Control-Widget. Dieser Bereich steuert also das konkrete Verhalten und Erscheinungsbild des jeweiligen Widget-Typs.

Widget Actions

Im letzten Tab werden Widget Actions konfiguriert. Damit lässt sich festlegen, was bei Benutzerinteraktionen im Dashboard passieren soll.

Aktionen dienen unter Anderem als Navigationsmechanismus zwischen verschiedenen States ein und desselben Dashboards oder zwischen mehreren eigenständigen Dashboards. Es gibt jedoch ach noch weitere individuelle Aktionen die neben der Navigation noch weitere Funktionen ermöglichen. Die verfügbaren Aktionsquellen variieren je nach Widget. Aktionen lassen sich sowohl beim Erstellen als auch im nachhinein beim Bearbeiten eines Widgets konfigurieren.

Verfügbare Aktionen sind:

Aktion	Erklärung
Navigiere zu neuen Dashboard State	Beim Klick der Aktion wechselt das Dashboard den State zu dem in der Aktion definierten State. Dies geschieht entweder mit dem angeklickten Geräte als dynamischer Alias, der dem neuen Dashboard State übergeben wird, oder als statischer Wechsel, ohne einen dynamischen Alias
Aktualisierung des aktuellen Dashboard States	Beim Klick der Aktion aktualisiert sich der aktuell geöffnete Dashboard State. Dies geschieht entweder mit dem angeklickten Geräte als dynamischer Alias, der dem aktuellen Dashboard State übergeben wird, oder als statische Aktualisierung, ohne einen dynamischen Alias
Navigiere zu anderem Dashboard	Beim Klick der Aktion wird zu einem anderen dashboard gewechselt. Dies geschieht entweder mit dem angeklickten Geräte als dynamischer Alias, der dem neuen Dashboard übergeben wird, oder als statische wechsel, ohne einen dynamischen Alias
Individuelle Aktion	Eine individuelle Aktion, die beim klicken der Aktion asugeführt wird (JavaScript)
Custom action (with HTML)	Eine individuelle Aktion, die beim klicken der Aktion asugeführt wird (JavaScript + HTML))
Highlight Entity	(Nur in Tabellen-Widgets anwendbar) Hebt die angeklickte Zeile einer Tabelle dauerhaft hervor, bis zum anklicken eiener neuen Zeile
Show on Map	(Nur in Alarm-Tabellen-Widgets mit integrierter Alarm-Karte anwendbar) Zeigt die Position des Gerätes auf der Alarm-Karte zum Zeitpunkt des auftretens des Alarms an.
Update Alias	Aktualisiert den aktuell definierten Alias mit der in der Aktion konfigurierten Funktion
Navigate to previous Dashboard state	Navigiert zum vorherigen Dashboard State

Dadurch lassen sich Dashboards sehr interaktiv aufbauen, zum Beispiel:

• Klick auf eine Tabellenzeile öffnet einen Detail-State für das ausgewählte Gerät
• ein Button springt zurück zur Startansicht
• ein Widget aktualisiert per Aktion einen Alias und verändert dadurch die restliche Dashboard-Ansicht

Ergebnis

Nach dem Speichern wird das Widget im Layout platziert und kann direkt verwendet oder weiter angepasst werden.

Mit mehreren Widgets, passenden States und abgestimmten Zeitfenstern entsteht daraus eine vollständige Dashboard-Oberfläche.

Einordnung

Dashboards sind die zentrale Oberfläche für visuelle Auswertung und Interaktion in optiCLOUD. Die eigentliche Qualität eines Dashboards entsteht dabei aus dem Zusammenspiel von:

• sauber definierten Aliasen
• sinnvoll gewählten Zeitfenstern und Aggregationen
• gut abgestimmten Widget-Typen
• Dashboard-States für Navigation und Kontextwechsel
• passenden Berechtigungen über Permission Management

Wenn Standard-Widgets nicht ausreichen, können in der Widget Library auch eigene Widgets und Widget-Bundles entwickelt und in Dashboards verwendet werden.