WebUI Runtime

Kernprinzipien

Modern Web -- Vollständig auf Standard-Webtechnologien aufgebaut: JavaScript, TypeScript, Web Components und moderne Browser-APIs. Keine proprietären Plugins, keine Legacy-Frameworks. Die gleichen Werkzeuge und Fähigkeiten, die in der gesamten Webbranche verwendet werden, lassen sich direkt auf die WinCC OA-Anwendungsentwicklung anwenden.

OT-Grade Reliability -- Entwickelt für Betriebstechnologie-Umgebungen, in denen Verfügbarkeit entscheidend ist. Beinhaltet authentifizierte Verbindungen, automatisches Server-Failover, Session-Management und eine Shared Worker-Architektur, die den Ressourcenverbrauch minimiert.

AI-Ready Engineering -- Der Standard-Webtechnologie-Stack bedeutet, dass KI-Codierassistenten Anwendungscode effektiv generieren, ändern und debuggen können. Entwickler nutzen KI-Werkzeuge zur Beschleunigung der Entwicklung ohne spezielle Schulungen für proprietäre Frameworks.

Openness -- Die Runtime ist im Kern Framework-agnostisch. Die Shell-Schicht funktioniert mit jedem Frontend-Framework. Die API lässt sich in bestehende Webanwendungen integrieren. Benutzerdefinierte Dienste erweitern das Backend.

Das sind keine Einzelaspekte. Sie treffen sich in der WebUI Runtime.

ETM Charging

Ein E-Ladeportal in Consumer-Qualität mit zwei Benutzerrollen über sechs Ansichten -- Fahrzeugfahrer sehen ein personalisiertes Dashboard mit Live-Ladezustand, Sitzungsverlauf und Nachhaltigkeits-KPIs über vier Bereiche (Sitzungen, Energie, Kosten, CO₂), während Standortadministratoren die Parkplatzauslastung und fahrzeugbezogene Statistiken überwachen. Die dunkle Neon-Grün-Ästhetik zeigt, dass OT-Software wie eine Premium-App aussehen und sich anfühlen kann.

• Parkplatzübersicht — Live-Karte mit 5 Ladereihen (R1–R5), Platz-für-Platz-Status, Auslastung in %, aktive Sitzungen & aktuelle Last in kW
• Personalisiertes Fahrer-Dashboard — Begrüßung mit Fahrzeug-ID, Gesamt-kWh, Kosten, vermiedenes CO₂, Echtzeit-SoC-Balken mit geschätzter Fertigstellungszeit
• Trend- & Verlaufs-Tabs — Zeitreihencharts für Leistung & Energie, vollständiges Sitzungsprotokoll mit CSV-Export
• Vergleichsansicht — aktueller Monat vs. Vormonat über 5 KPIs (Sitzungen, Energie, Kosten, CO₂, Ladezeit) mit Delta-Indikatoren
• Admin-Fahrzeugauswahl — Umschalten zwischen allen Fahrzeugen am Standort zur Einsicht individueller Statistiken
• Duales Anmeldemodell — Anmelde- und Registrierungsflows, native WinCC OA-Authentifizierung als elegante Web-UI

Dieselbe Anwendung auf einem mobilen Gerät -- die WebUI Runtime bietet ein vollständig responsives Design, das sich nahtlos an verschiedene Bildschirmgrößen anpasst.

Erstellt in EINER Woche. Von einem Web-Entwickler. Mit KI. Auf der WebUI Runtime.

NeoVaris Smart City

Eine komplette fiktive Smart City, die gleichzeitig über vier Infrastrukturdomänen überwacht wird -- Energie, Wasser, Verkehr und Beleuchtung. Neun Navigations-Tabs führen durch Live-KPIs, eine interaktive GIS-Karte mit farbcodierten Sensor-Icons, eine vollständige Alarmverwaltung mit 23 aktiven Alarmen, historische Trendansichten und Systemdiagnose-Seiten. Eine ausführliche Beschreibung finden Sie unter Beispiel: Smart City Dashboard.

• City-Dashboard — 4 Headline-KPIs: Netzlast (51 MW), Reservoir (98%), Stau (16,1%), aktive Lampen (11.704) — alle live mit Trendpfeilen
• Interaktive GIS-Stadtkarte — farbcodierte Sensor-Icons nach Kategorie (Energie / Wasser / Verkehr / Beleuchtung), Klick zur Inspektion jedes Assets (z. B. Solar Farm Alpha: 41 kW)
• Vollständige Alarmverwaltung — 23 aktive Alarme, filterbar nach Offen / Quittiert / Quittierung ausstehend, Sammelquittierung
• Trendansicht — historische Zeitreihen über alle Sensorkategorien
• System-Dashboard — Serverzustand, WinCC OA-Version, CPU/RAM/Disk-Performance, Sicherheitszertifikate, Lizenzgültigkeit
• Systemdiagnose — Live-Verbindungsstatus, Browser-Kompatibilität, Speicher- & Disk-Anzeigen, Service-Worker-Status

Erstellt in EINEM Tag. Nicht in Wochen. Aus einer Idee. Mit KI. Auf der WebUI Runtime.

Infrastructure Orchestrator

Eine globale Flottenmanagement-Anwendung, die über 230 verteilte WinCC OA-Installationen und mehr als 33.000 Live-Datenpunkte weltweit überwacht. Die Oberfläche ermöglicht nahtloses Drill-down über vier Zoomstufen -- von einer Weltkarte über Länder- und Stadtebene bis hin zu einzelnen Straßenadressen. Ein hierarchischer Anlagenbaum, Gesundheitsanzeigen pro Gerät und Live-Statusüberlagerungen geben Betreibern volle Sichtbarkeit über die gesamte Deployment-Landschaft. Die Anwendung ist als @wincc-oa/ae-central-asset-management-Paket verfügbar.

• Weltkarten-Übersicht — alle 237 Geräte auf einer Live-Karte über Europa, Asien & darüber hinaus, mit farbcodierten Statusicons (grün / gelb / orange / rot)
• Länder-Drill-down — Filterung nach Land (z. B. Deutschland, Indien) zur Anzeige nur regionaler Installationen und deren Zustand
• Stadt- & Straßenebene — nahtloser Zoom von der Kontinentalansicht bis zu einer einzelnen Straße in München oder Paris, Geräte-Icons bleiben akkurat
• Rechtes Statuspanel — Pro-Asset-Anzeige-Widgets mit Echtzeit-Gesundheitswerten und farbcodierten Schweregrad-Anzeigen
• Hierarchischer Anlagenbaum — linkes Panel mit Land → Stadt → Einzelgerät-Navigation; gefilterte Liste aktualisiert die Karte in Echtzeit
• Asset-Detail-Popup — Klick auf ein beliebiges Gerät zur Anzeige von Name, Verbindungsstatus und Auslösung von Aktionen (z. B. Inline-Paket-Deployment)

Erstellt an einem Wochenende. Nicht von einem UI-Team. Von einem Designer. Mit KI. Auf der WebUI Runtime.

Data Center BMS

Ein vollwertiges Gebäudemanagementsystem für einen mehrhallischen Rechenzentrumscampus mit über 12 Navigationsbereichen. Jede Ebene der Anlage wird abgedeckt -- von einer 3D-Luftansicht über einzelne Kältekreisläufe mit acht Live-Anzeige-Widgets, Grundriss-R&I-Schemata mit Live-Sensorwerten, sechs Brandschutzzonen bis hin zu sechs Gaslöschanlagen. Schweregrad-codiertes Alarmmanagement mit Inline-Quittierung rundet das Bediener-Erlebnis ab.

• 3D-Campus-Übersicht — interaktives Luftmodell aller Hallen (A1–A6 + Big Hall) mit Live-Statusüberlagerungen und farbcodierten Alarmzuständen
• Kälteanlagenmanagement — 8 industrielle Anzeige-Widgets mit Live-Kältemitteltemperaturen (~24–26 °C), Leistungs-Trend- charts und Druckbalkendiagrammen
• Grundriss-R&I-Schema — Erdgeschoss-HLK-Schema mit Live-Sensorwerten direkt auf der Zeichnung (Teil A / Teil B)
• Brandschutzsystem — 6 Zonen mit jeweils Status Bereit / Druckluft / Toggierung, alarmgesteuerte Farbgebung
• Gaslöschzonen — paralleles 6-Zonen-Panel mit identischer sicherheitsrelevanter Statusanzeige
• Systemweites Alarmmanagement — schweregrad-codierte Liste (kritisch/Alarm/Warnung), mehrere Quellen (BMS, CTMS, Brand), Inline-Quittierungs-Workflow

Gleiche Runtime. Unterschiedliche UIs.

Erste Schritte

Wir führen nicht eine weitere UI ein. Wir führen eine neue Grundlage ein, wie industrielle Anwendungen gebaut werden.

Nicht in Monaten. Nicht nächstes Quartal. Heute.

Die WebUI Runtime ist jetzt verfügbar. Informationen zur Einrichtung finden Sie unter Voraussetzungen und Installation. Ein schrittweises Beispiel finden Sie unter Beispiel: Smart City Dashboard. Für KI-gestützte Entwicklungsworkflows siehe KI-gestützte Seitenerstellung.