Zum Hauptinhalt springen

Widget Library

Widget Library​

Die Widget Library ist der zentrale Bereich für die Verwaltung wiederverwendbarer Widgets in optiCLOUD. Hier werden sowohl die von der Plattform bereitgestellten Widgets als auch selbst erstellte Widget-Bundles verwaltet.

Übersicht der Widget Library

Widget-Bundles​

In der Tabellenübersicht werden die vorhandenen Widget-Bundles angezeigt.

  • Bundle name Name des Widget-Bundles
  • Type zur Unterscheidung zwischen bereitgestellten und benutzerdefinierten Bundles

Es gibt zwei Typen:

  • System für von OptiMEAS bereitgestellte Standard-Widgets
  • Custom für vom Benutzer selbst erstellte Widget-Bundles

Über die Aktionsleiste können neue Bundles erstellt oder bestehende Bundles importiert werden.

Neues Widget-Bundle erstellen​

Über Create wird ein neues Widget-Bundle angelegt. Dabei wird zunächst ein Titel vergeben. Optional können zusätzlich ein Bild und eine Beschreibung hinterlegt werden.

Nach dem Anlegen erscheint das Bundle in der Tabelle und kann über die Detailansicht geöffnet werden. Dort lassen sich anschließend die eigentlichen Widgets innerhalb des Bundles verwalten.

Widgets im Bundle erstellen​

Innerhalb eines Bundles können über Create Widget neue Widgets angelegt werden. Vor dem Start des Editors wird zunächst der gewünschte Widget-Typ ausgewählt.

Widget-Typ auswählen

Verfügbare Typen sind:

  • Time Series Widget für Zeitreihendaten
  • Latest Value Widget für letzte Mess- oder Statuswerte
  • Control Widget für Widgets mit Steuer- oder RPC-Funktionalität
  • Alarm Widget für Alarmdaten
  • Static Widget für Widgets ohne Datenbankanbindung

Die Wahl des Typs bestimmt die technische Grundstruktur des Widgets und damit auch, wie Daten später abgefragt oder verarbeitet werden.

Widget Editor​

Nach der Typauswahl öffnet sich der Widget Editor. Dieser funktioniert als integrierte Entwicklungsumgebung für benutzerdefinierte Widgets. Auf der linken Seite befinden sich die einzelnen Bearbeitungsbereiche, rechts wird fortlaufend eine Vorschau des aktuellen Widgets angezeigt.

General​

Im Bereich General werden die grundlegenden Eigenschaften des Widgets festgelegt:

  • Name
  • Widget-Typ
  • Vorschaubild
  • Beschreibung
  • allgemeine Einstellungen
  • Data-Key-Settings

Allgemeine Widget-Einstellungen

hinweis

Wenn ein Widget eigene Einstellungen verwenden soll, muss der voreingestellte Settings-Form-Selektor entfernt werden, damit das Widget auf die eigene Definition zugreift.

HTML​

Im Bereich HTML wird die Struktur des Widgets definiert.

HTML im Widget Editor

Hier wird der eigentliche Markup-Teil des Widgets hinterlegt, der anschließend in der Vorschau direkt sichtbar wird.

CSS​

Im Bereich CSS wird das visuelle Erscheinungsbild des Widgets gestaltet.

CSS im Widget Editor

Damit lassen sich Layout, Farben, Abstände und weitere Stildefinitionen direkt für das Widget umsetzen.

JavaScript​

Im Bereich JavaScript wird die Widget-Logik implementiert.

JavaScript im Widget Editor

Hier werden Daten verarbeitet, Zustände verwaltet oder Interaktionen und dynamische Inhalte implementiert.

Resources​

Über Resources können zusätzliche externe Bibliotheken in das Widget eingebunden werden, zum Beispiel Visualisierungs- oder Hilfsbibliotheken.

Externe Ressourcen einbinden

Dadurch lassen sich auch komplexere oder spezialisierte Widgets auf Basis vorhandener Bibliotheken erstellen.

Settings Schema​

Im Bereich Settings Schema wird definiert, welche konfigurierbaren Einstellungen das Widget später in der Oberfläche anbietet.

Settings Schema

Das Schema beschreibt also die Struktur und Eingabemöglichkeiten der Widget-Konfiguration.

Data-Key-Settings​

Im Bereich Data-Key-Settings wird festgelegt, wie Datenkanäle oder Datenschlüssel im Widget verwendet und konfiguriert werden.

Data-Key-Settings

So kann ein Widget gezielt auf bestimmte Datenquellen oder Datenstrukturen vorbereitet werden.

Widget Settings​

Die Vorschau und die konfigurierbaren Widget-Einstellungen lassen sich direkt im Editor nachvollziehen.

Widget-Vorschau und Settings

Dadurch kann während der Entwicklung schnell geprüft werden, wie sich Änderungen an Struktur, Logik oder Einstellungen auf das spätere Verhalten des Widgets auswirken.

Einordnung​

Die Widget Library stellt die technische Grundlage für wiederverwendbare, individuelle Visualisierungen innerhalb von Dashboards bereit. Die eigentliche Programmierung komplexer Widgets wird an anderer Stelle detaillierter beschrieben. Diese Seite dient daher als Überblick über Verwaltung, Erstellung und Aufbau der Widget-Struktur in optiCLOUD.