Beispiel: Smart City Dashboard

Dieses Beispiel veranschaulicht, wie die WebUI Runtime zum Erstellen einer mehrseitigen Webanwendung mit Live-Datenpunktanbindung, Alarmverarbeitung, Trendvisualisierung und benutzerdefiniertem Branding eingesetzt wird.

Abbildung 1. NeoVaris Smart City Dashboard

NeoVaris Smart City Dashboard Hauptübersicht mit KPI-Hero-Karten und Stadtvisualisierung

Das NeoVaris Smart City Dashboard ist eine Referenzimplementierung, die die Möglichkeiten der WebUI Runtime demonstriert. Es handelt sich um ein Web-SCADA-Frontend, das mit Lit 3 und OaRxJsApi entwickelt wurde. Die Anwendung besteht aus mehreren Standalone-Seiten, die jeweils einem anderen Zweck dienen: eine KPI-Übersicht mit Hero-Karten und einer SVG-Stadtvisualisierung, ein Vollbild-SCADA-Prozessdiagramm, eine Steuerungsseite mit Slider-basierter dpSet-Interaktion, eine interaktive Leaflet-Karte, eine Alarm-Tabelle mit Filterung und Quittierung, historische Trenddiagramme und eine Systemdiagnoseseite. Zusammen decken diese Seiten die häufigsten Muster ab, die beim Erstellen von WebUI Runtime-Anwendungen auftreten.

Tipp:
Neben dem Smart City-Beispiel gibt es weitere Beispiele, die in den Paketen @wincc-oa/ae-central-asset-management und @wincc-oa/ae-standalone-pages zu finden sind.

Projektstruktur

Das Projekt folgt dem standardmäßigen WebUI Runtime-Workspace-Layout. Anwendungskonfigurationsdateien befinden sich in apps/dashboard-wc/config/, darunter appconfig.jsonc für Branding-Einstellungen und menuconfig.jsonc für Navigation und Routing. Standalone-Seiten-Quelldateien befinden sich in libs/default-components/src/lib/standalone-pages/, wobei jede Seite eine eigenständige Lit-Komponente in einer einzelnen TypeScript-Datei ist. Statische Assets wie Logos und SVG-Hintergründe werden in libs/default-components/src/assets/ gespeichert und für den Laufzeitzugriff nach apps/dashboard-wc/public/assets/ gespiegelt.

Verbindung zu Datenpunkten

Jede Seite erhält eine Referenz auf den OaRxJsApi-Dienst über Dependency Injection und abonniert Datenpunkte in ihrer Lifecycle-Methode connectedCallback(). Das folgende gekürzte Beispiel zeigt das Muster, das in allen Smart City-Seiten verwendet wird:

const oaRxJsApi = container.resolve<OaRxJsApi>(OaRxJsApi);

// Live-Datenpunktwert abonnieren
const subscription = oaRxJsApi
  .dpConnect('System1:SmartCity.Energy.GridLoad', true)
  .pipe(map((data) => (data.value[0] as number) ?? 0))
  .subscribe((value) => {
    this.gridLoad = value;  // löst Re-Render über @state() aus
  });

// Wert an den Prozess zurückschreiben
oaRxJsApi.dpSet(['System1:SmartCity.Energy.GridLoad'], [75.5])
  .subscribe();

Datenpunktnamen im Browser erfordern immer den Prefix System1:. Subscriptions werden in einem Array gesammelt und in disconnectedCallback() bereinigt, um Speicherlecks zu vermeiden. Der Decorator @state() auf der empfangenden Property stellt sicher, dass die Komponente automatisch neu gerendert wird, wenn neue Werte eintreffen.

Alarmintegration

Die Alarmseite abonniert Alarme über den AlertService der Dashboard-Models-Bibliothek. Sie zeigt eingehende Alarme in einer sortierbaren und filterbaren Tabelle an. Bediener können einzelne Alarme direkt aus der Tabelle quittieren, indem ein Wert auf die Config _alert_hdl.._ack des entsprechenden Datenpunkts geschrieben wird. Eine einklappbare Alarmleiste am unteren Rand der Anwendungs-Shell zeigt auf allen anderen Seiten eine Live-Zusammenfassung aktiver Alarme und pulsiert mit einem roten Leuchteffekt, wenn unquittierte Alarme vorliegen.

Trenddiagramme

Die historische Trendvisualisierung wird über das Widget wui-widget-trend mithilfe des wui-context-generator umgesetzt. Jede Trendserie wird mit einem Datenpunktnamen, einem Zeitbereich (z. B. -1h für die letzte Stunde) und Anzeigeoptionen wie Linienfarbe, Linienstil und einer optionalen eigenen Y-Achse konfiguriert. Die Siemens IX ECharts-Integration bietet interaktive Funktionen wie Tooltips, Zoomen und eine Zeitbereichsauswahl.

Kartenansicht

Abbildung 2. Interaktive Kartenansicht

Interaktive Kartenansicht im Smart City Dashboard

Die interaktive Stadtkarte verwendet die Leaflet-Bibliothek mit L.CRS.Simple-Pixelkoordinaten anstelle einer geografischen Projektion. Eine inline generierte SVG-Darstellung des Stadtgrundrisses wird als Leaflet-SVG-Overlay gerendert. Sensor-Marker werden an definierten Koordinaten platziert und ändern ihre Farbe basierend auf Live-Datenpunktwerten. Dieser Ansatz vermeidet Abhängigkeiten von externen Tile-Servern, was wichtig ist, da der webserver.js eine strenge Content Security Policy durchsetzt, die externe Ressourcen blockiert.

Branding

Das Smart City Dashboard demonstriert benutzerdefiniertes Branding durch Austausch des Standard-Logos gegen ein projektspezifisches SVG, Festlegung eines benutzerdefinierten Anwendungstitels in appconfig.jsonc und Definition einer Cyan-Akzentfarbe (#00bde3) über die CSS-Variable --neo-accent. Der Login-Bildschirm verwendet einen benutzerdefinierten SVG-Hintergrund. Ein Dark-/Light-Modus-Umschalter in der Kopfzeile wechselt das Theme zur Laufzeit.

Build und Zugriff

Nach der Entwicklung wird die Anwendung gebaut, indem die Umgebungsvariable OUT_DIR auf das Verzeichnis data/dashboard-wc/ des Ziel-WinCC OA-Projekts gesetzt und npm run build ausgeführt wird. Die Build-Pipeline generiert die Shared Bundles, kompiliert alle Standalone-Seiten und kopiert Assets in das Ausgabeverzeichnis. Die bereitgestellte Anwendung ist anschließend unter https://<Host>:<Port>/data/dashboard-wc/index.html erreichbar.