WebUI Runtime
Die WebUI Runtime stellt ein Framework zum Erstellen benutzerdefinierter webbasierter Standalone-Seiten bereit, die über WebSocket mit WinCC OA verbunden sind.
Die WebUI Runtime ist ein Webanwendungs-Framework, das auf Lit 3 Web Components, dem Siemens IX Design System und der OaRxJsApi-Bibliothek basiert. Es ermöglicht Entwicklern, benutzerdefinierte Standalone-Seiten zu erstellen, die Live-Prozessdaten anzeigen, Steuerbefehle senden und sich in das WinCC OA-Dashboard integrieren. Die Runtime hostet auch Anwendungen wie das Central Asset Management. Die Seiten werden vom webserver.js bereitgestellt und kommunizieren über WebSocket-Verbindungen mit dem Backend, die von einem Shared Worker verwaltet werden. Der gesamte Stack verwendet eine Sprache und Technologie -- JavaScript/TypeScript -- vom Frontend bis zum Backend. Das Backend basiert auf dem webserver.js.
Standalone-Seiten verbinden sich über die OaRxJsApi-Bibliothek in Echtzeit mit WinCC OA-Datenpunkten. Dabei dient dpConnect zum Abonnieren von Live-Werten und dpSet zum Zurückschreiben von Werten an den Prozess. Eine Shared-Bundle-Architektur stellt sicher, dass gemeinsam genutzte Bibliotheken wie Lit, RxJS und das Siemens IX Design System nur einmal geladen und von allen Seiten gemeinsam verwendet werden. Seiten lassen sich in das bestehende WinCC OA-Dashboard und Widget-System integrieren und können den wui-context-generator verwenden, um Widgets deklarativ an Datenpunkte zu binden. Darüber hinaus unterstützt das Framework Alarmvisualisierung mit Quittierung, historische Trenddiagramme auf Basis von ECharts sowie interaktive Kartenansichten auf Basis von Leaflet. Branding, Theming einschließlich Dark- und Light-Modus sowie das Navigationslayout sind vollständig anpassbar.
Schichtenarchitektur
Die WebUI Runtime ist als vierschichtiger Stack aufgebaut. Jede Schicht baut auf der darunterliegenden auf und kann unabhängig verwendet werden.
| Schicht | Beschreibung |
|---|---|
| API + Backend | Ein JavaScript/TypeScript-basierter
Hochleistungs-Webserver, der HTTP(S)- und
WebSocket-Verbindungen bereitstellt. Beinhaltet
authentifizierte Verbindung zu
WinCC OA, automatisches
Web-Server-Switchover, Session-Handling und API 5.0.
Backend-Dienste umfassen Farbdatenbank, I18n-Sprachhandling
und Config-Einträge über
/WebUI_Settings. Die Frontend-Bibliothek
bietet alle WinCC OA-Basisdienste und
Zugriff auf das MSA-Interface. Der Server kann mit eigenen
Diensten und Backend-Logik erweitert werden. |
| Shell | Eine unsichtbare Web Component
(<shell>), die die WebUI-API
integriert und Login/Logout, Event-Handling (Navigation,
Login/Logout-Events), Routing und Session-Management
übernimmt. Die Shell kann mit jedem Frontend-Framework
verwendet werden. |
| Framework | Das WebUI Application Framework bietet einen konfigurierbaren, im Siemens IX-Stil gestalteten Anwendungsrahmen mit Logo, Titel und Hauptmenü. Untermenüeinträge sind über Inline-Menü, YAML-Konfiguration oder CNS-Baum konfigurierbar. Beinhaltet Routing und Deeplink-Navigation. |
| Apps | Anwendungen, die auf dem WebUI App Framework aufbauen, darunter das Dashboard, Central Asset Management und das Smart-City-Anwendungsbeispiel. Benutzerdefinierte Standalone-Seiten werden ebenfalls auf dieser Schicht implementiert. |
Nutzungsworkflow
Der richtige Ansatz hängt davon ab, wie stark die Benutzererfahrung angepasst werden soll. Der folgende Workflow hilft bei der Bestimmung des geeigneten Einstiegspunkts:
- Verwenden -- Starten Sie mit dem Standard-Dashboard. Dies ist der schnellste Weg zum Ergebnis, wenn das Standard-Dashboard bereits die meisten Anforderungen abdeckt.
- Erweitern -- Passen Sie das Dashboard-Erlebnis mit Branding (Logos, Titel), benutzerdefinierten Widgets und einigen benutzerdefinierten Seiten an. Geringe Komplexität.
- Erstellen -- Verwenden Sie den Engineering-Workspace für größere Lösungen, die benutzerdefiniertes Routing, Shell-Änderungen oder umfassenderes benutzerdefiniertes Frontend-Verhalten erfordern. Mehr Flexibilität und Entwicklungsaufwand, aber KI-gestützte Entwicklung ist möglich.
- Integrieren -- Verwenden Sie die OaRxJsApi in einem anderen Frontend oder einer anderen Anwendungsplattform, um WinCC OA-Daten und -Komponenten in Ihre eigene Anwendung einzubinden.
Technologie-Stack
| Technologie | Verwendungszweck |
|---|---|
| Lit 3 | Web-Components-Framework |
| Siemens IX | Design System (Komponenten, Icons, Diagramme) |
| RxJS | Reaktive Datenpunktkonnektivität |
| Vite 6 | Build-Tool |
| Nx | Monorepo-Verwaltung |
| OaRxJsApi | WebSocket-Kommunikation mit dem WinCC OA-Backend |
Import-Map-System
Alle gemeinsam genutzten Bibliotheken (Lit, RxJS,
Siemens IX, Dashboard) werden als Shared Bundles erstellt.
Die Datei index.html enthält ein
script type="importmap", das Bare-Import-Specifier auf
Bundle-Dateien abbildet. Dadurch wird sichergestellt, dass alle Seiten
dieselben Bibliotheksinstanzen verwenden, ohne dass Bibliotheken doppelt
gebündelt werden.
{
"imports": {
"lit": "./entry/lit.js",
"rxjs": "./entry/rxjs.js",
"@siemens/ix": "./entry/ix.js",
"@etm-professional-control/oa-rx-js-api": "./entry/wui.js"
}
}Lazy Loading
Standalone-Seiten werden beim Navigieren per Lazy Loading geladen. Jede
Seite wird als separates JavaScript-Modul erstellt, das erst geladen wird,
wenn der Benutzer zu der entsprechenden Route navigiert. Der
Runtime-Loader verwendet dynamisches import() für moderne
Browser mit einem Script-Tag-Fallback.
Deployment-Modell
Die erstellten Dateien werden im Verzeichnis
data/dashboard-wc/ des
WinCC OA-Projekts bereitgestellt. Der webserver.js stellt
diese Dateien bereit und bietet die REST- und WebSocket-APIs an.
Zugriffs-URL-Muster:
https://host:port/data/dashboard-wc/index.html
