WinCC Unified und React: Synergien für moderne HMI-Entwicklung

Nach über zehn Jahren in der industriellen Automatisierung mit Siemens WinCC und TIA Portal habe ich einen fundamentalen Wandel beobachtet: Die klassischen WinCC Basic- und Comfort-Panels werden von WinCC Unified abgelöst - Siemens' moderner SCADA/HMI-Plattform. Damit ändert sich die Art, wie wir HMI-Oberflächen projektieren, grundlegend.

Der Kern dieser Veränderung: WinCC Unified basiert auf der Google V8 JavaScript Engine - derselben Engine, die auch Chrome und Node.js antreibt. Wer sich mit React, TypeScript oder modernem JavaScript auskennt, findet plötzlich bekannte Konzepte in der industriellen HMI-Welt wieder.

In diesem Artikel zeige ich die konkreten technischen Synergien zwischen Web-Entwicklung und WinCC Unified - basierend auf offizieller Siemens-Dokumentation und praktischer Erfahrung.

1.WinCC Unified: Technische Grundlagen

1.1.Die V8 Engine als Herzstück

WinCC Unified nutzt die Google V8 JavaScript Engine, die ECMAScript 2015 (ES6) "largely implements" - so die offizielle Siemens-Dokumentation. Das bedeutet: Moderne JavaScript-Features wie const/let, Arrow Functions, Template Literals, Klassen und Promises sind verfügbar.

Aspekt	WinCC Basic/Comfort	WinCC Unified
Scripting	VBScript (proprietär)	JavaScript (ES6 via V8)
Rendering	Proprietäre Engine	HTML5 + SVG
Runtime	Windows-Dienst	WebRH (Web Runtime Host)
Debugging	TIA Portal integriert	Chrome DevTools (Port 9222)
Architektur	Monolithisch	Client-Server (WebSockets)

Die Runtime-Architektur basiert auf einem Node.js-ähnlichen Backend (WebRH), das über WebSockets mit dem Browser-Frontend kommuniziert. Das ist revolutionär für den Shopfloor: Asynchrone Operationen blockieren nicht mehr die UI.

1.2.Verfügbarkeit und Versionshistorie

TIA Portal	Jahr	Wesentliche Features
V16	2019/2020	Erstrelease, PC-basierte Systeme
V17	2021	Unified Comfort Panels, View of Things
V18	2022	Verschachtelte Faceplates, PLCUDT-Support
V19	2023	Expression-Dynamisierung, Redundanz-Vorschau
V20	2024	Volle Datenredundanz, MTP-Integrator, 20-40% schnellere Kompilierung

2.Synergien: Web-Skills beschleunigen die HMI-Projektierung

2.1.JavaScript: Gleiche Syntax, andere APIs

Die Syntax ist identisch - aber die APIs unterscheiden sich. Ein wichtiges Beispiel:

// React/Web: Standard JavaScript
console.log('Motor gestartet');
setTimeout(() => { /* ... */ }, 1000);

// WinCC Unified: Siemens-spezifische APIs
HMIRuntime.Trace('Motor gestartet');
HMIRuntime.Timers.SetTimeout(() => { /* ... */ }, 1000);

Verfügbare ES6-Features in WinCC Unified:

• const und let (Block-Scoped Variables)
• Template Literals mit Backticks
• Arrow Functions
• Klassen und Vererbung
• Promises und async/await
• Array-Methoden (map, filter, reduce)

Wichtige API-Unterschiede:

Web/React	WinCC Unified	Funktion
console.log()	HMIRuntime.Trace()	Debugging-Ausgabe
setTimeout()	HMIRuntime.Timers.SetTimeout()	Timer
DOM-Manipulation	Screen.Items()	UI-Zugriff
useState	Tags.Read()/Tags.Write()	State-Management

2.2.Faceplates vs. React Components

Das Faceplate-Konzept in WinCC Unified entspricht konzeptionell React-Komponenten:

React Component:

interface MotorStatusProps {
  name: string;
  isRunning: boolean;
  rpm: number;
}

function MotorStatus({ name, isRunning, rpm }: MotorStatusProps) {
  return (
    <div className={isRunning ? 'running' : 'stopped'}>
      <h3>{name}</h3>
      <span>{rpm} U/min</span>
    </div>
  );
}

WinCC Unified Faceplate (Script):

// Faceplate via Script instanziieren
let data = {
  MotorName: { Tag: "Motor1.Name" },
  Speed: { Tag: "Motor1.Speed" },
  Running: { Tag: "Motor1.Running" }
};

let popup = UI.OpenFaceplateInPopup("fpMotor", "Motor 1", data);
popup.Left = 100;
popup.Top = 150;
popup.Visible = true;

WinCC Faceplate	React-Äquivalent
Tag Interface	Props für Datenbindung
Property Interface	Props für Konfiguration
Event Interface	Callback-Props
Library Types	npm-Packages

2.3.State-Management: Tags vs. useState

WinCC Unified verwendet Tags als zentrales State-Konzept - vergleichbar mit React State, aber mit industriespezifischen Trigger-Mechanismen:

WinCC Unified	React-Äquivalent
Internal Tag	useState
Tag mit Trigger	useState + useEffect
TagSet	useReducer
Session DataSet	React Context

Drei Trigger-Typen für Tag-Änderungen:

1. Cyclic Triggers - Zeitgesteuert (wie setInterval)
2. Tag Triggers - Bei Wertänderung (wie useEffect mit Dependencies)
3. Event Triggers - Bei Benutzerinteraktion

// Performance-optimiert: TagSet für mehrere Tags
let ts = Tags.CreateTagSet(["Motor1.Speed", "Motor1.Temp", "Motor1.Status"]);
ts.Read();  // Alle in einem Aufruf lesen
// ... Werte verarbeiten ...
ts.Write(); // Alle in einem Aufruf schreiben

2.4.Event-System: Bekannte Patterns

Web/React	WinCC Unified
onClick	Click left mouse button
onMouseDown/onMouseUp	Press/Release
Touch-Events	Tapped, Gesture detected
onFocus/onBlur	Focus change
useEffect([], [])	Loaded

3.Custom Web Controls: Die React-Brücke

Die Custom Web Controls (CWC) sind der direkteste Weg, React in WinCC Unified zu integrieren. Ein CWC ist im Wesentlichen eine Single Page Application, die in einem isolierten Container innerhalb der Runtime läuft.

3.1.Architektur eines CWC

MyCWC/
├── manifest.json    # Interface-Definition
├── index.html       # Einstiegspunkt
├── bundle.js        # Kompilierter React-Code
└── assets/          # Bilder, CSS

Die manifest.json definiert den Vertrag zwischen CWC und WinCC Runtime:

{
  "name": "MyReactGauge",
  "properties": [
    { "name": "Speed", "type": "number" },
    { "name": "MaxSpeed", "type": "number" }
  ],
  "events": [
    { "name": "OnOverSpeed" }
  ]
}

3.2.Datenfluss zwischen React und WinCC

1. SPS-Variable ändert sich → WinCC Runtime erkennt Änderung
2. Runtime pusht Wert → CWC erhält neue Props
3. React rendert → Virtual DOM Diff, UI-Update
4. Benutzer interagiert → React emittiert Event
5. WinCC reagiert → Script schreibt SPS-Variable

Erfolgreich verwendete Libraries (Siemens-Beispiele):

• Gauge.js für Zeiger-Anzeigen
• ApexCharts.js für Diagramme
• Beliebige npm-Packages (clientseitig)

4.Praktische Einschränkungen

4.1.Kein direkter DOM-Zugriff

In Standard-Screens gibt es keinen direkten DOM-Zugriff wie im Web. Stattdessen nutzt man das proprietäre Objektmodell:

// Web: DOM-Zugriff
document.getElementById('motor').style.backgroundColor = 'green';

// WinCC Unified: Objektmodell
Screen.Items('Motor').BackColor = 0xFF00FF00; // ARGB-Hex-Format

CSS-Syntax ist nur in Custom Web Controls verfügbar - in Standard-Screens erfolgt Styling über Properties.

4.2.Single-Threaded Architektur

WinCC Unified Scripts laufen in zwei Node.js-Prozessen - einer für Screen-Scripts, einer für Task Scheduler. Beide sind single-threaded:

• Alle Screen-Scripts teilen sich einen CPU-Kern
• Langlaufende Berechnungen blockieren andere Scripts
• Asynchrone Patterns (async/await) sind daher kritisch wichtig

4.3.TypeScript: Nur extern

TypeScript wird nicht nativ im TIA Portal unterstützt. Der empfohlene Workflow:

1. In VS Code mit TypeScript entwickeln
2. ESLint für Siemens-spezifische Regeln nutzen
3. Code nach TIA Portal kopieren

Siemens stellt ein VS Code Development Guide bereit (SIOS 109801600).

5.Debugging mit Chrome DevTools

Eines der mächtigsten Features: Remote Debugging via Chrome DevTools.

5.1.Setup

1. Skript-Debugger im SIMATIC Runtime Manager aktivieren
2. Chrome öffnen: chrome://inspect
3. Port 9222 der HMI-Runtime verbinden

5.2.Was funktioniert

Feature	Status
Breakpoints setzen	✅
Step-through Debugging	✅
Variable-Inspektion	✅
Console (HMIRuntime.Trace)	✅
Sources Tab	✅ (nur aktueller Screen)
Network Tab	✅
Änderungen speichern	❌ (muss in TIA Portal)

Das übertrifft das "printf-Debugging" älterer HMI-Systeme deutlich und ermöglicht die Diagnose komplexer Logikfehler und Race Conditions.

6.Ausblick: Web-Dashboards als Ergänzung

Für übergeordnete Visualisierungen bietet sich eine Architektur an, die WinCC Unified mit echten Web-Dashboards kombiniert:

[S7-1500 SPS] ⟷ [OPC UA / Open Pipe] ⟷ [Node.js Backend] ⟷ [Next.js Dashboard]

Die Open Pipe Schnittstelle in WinCC Unified ermöglicht die Kommunikation mit externen Applikationen - Python für KI/ML, Node.js für komplexe Datenbank-Interaktionen, oder Custom-Hardware ohne SPS-Treiber.

7.Infografik: Web-Technologien in WinCC Unified

Die Infografik zeigt alle Synergien zwischen Web-Entwicklung und WinCC Unified auf einen Blick: V8 Engine, Komponenten-Patterns, State Management, Debugging und Custom Web Controls.

8.Fazit: Transferwissen als Wettbewerbsvorteil

Mit WinCC Unified hat Siemens eine echte Brücke zwischen OT und IT in modernen SCADA-Systemen geschlagen:

• Google V8 Engine mit ES6-JavaScript - bekannte Syntax für Web-Entwickler
• Faceplates folgen dem Komponenten-Pattern aus React
• Custom Web Controls ermöglichen direkte React-Integration
• Chrome DevTools für professionelles Debugging
• Open Pipe für KI/ML-Integration und externe Applikationen

Automatisierungstechniker mit Web-Kenntnissen haben einen klaren Vorteil - sie verstehen die zugrundeliegenden Patterns und können moderne Entwicklungspraktiken einsetzen.

Weiterführende Ressourcen:

• Tips and Tricks for Scripting (SIOS 109758536)
• Programming Custom Web Controls (SIOS 109779176)
• VS Code Development Guide (SIOS 109801600)
• GitHub: CWC-in-WinCC-Unified

Sie planen ein HMI-Projekt mit WinCC Unified oder möchten Custom Web Controls entwickeln? Ich bringe die Erfahrung aus beiden Welten mit - Automatisierungstechnik und Web-Entwicklung. Lassen Sie uns sprechen.