WinCC Unified et React : Synergies pour le développement IHM moderne

Après plus de dix ans dans l'automatisation industrielle avec Siemens WinCC et TIA Portal, j'ai observé un changement fondamental : les panneaux classiques WinCC Basic et Comfort sont remplacés par WinCC Unified – la plateforme SCADA/IHM moderne de Siemens. Cela change fondamentalement la façon dont nous concevons les interfaces IHM.

Le cœur de ce changement : WinCC Unified est basé sur le moteur JavaScript Google V8 – le même moteur qui alimente Chrome et Node.js. Ceux qui connaissent React, TypeScript ou le JavaScript moderne retrouvent soudain des concepts familiers dans le monde de l'IHM industrielle.

Dans cet article, je montre les synergies techniques concrètes entre le développement web et WinCC Unified – basées sur la documentation officielle Siemens et l'expérience pratique.

1.WinCC Unified : Fondamentaux techniques

1.1.Le moteur V8 au cœur

WinCC Unified utilise le moteur JavaScript Google V8, qui « implémente largement » ECMAScript 2015 (ES6) – selon la documentation officielle Siemens. Cela signifie : les fonctionnalités JavaScript modernes comme const/let, les Arrow Functions, les Template Literals, les Classes et les Promises sont disponibles.

Aspect	WinCC Basic/Comfort	WinCC Unified
Scripting	VBScript (propriétaire)	JavaScript (ES6 via V8)
Rendu	Moteur propriétaire	HTML5 + SVG
Runtime	Service Windows	WebRH (Web Runtime Host)
Débogage	Intégré TIA Portal	Chrome DevTools (Port 9222)
Architecture	Monolithique	Client-Serveur (WebSockets)

L'architecture runtime est basée sur un backend similaire à Node.js (WebRH) qui communique via WebSockets avec le frontend navigateur. C'est révolutionnaire pour l'atelier : les opérations asynchrones ne bloquent plus l'interface utilisateur.

1.2.Disponibilité et historique des versions

TIA Portal	Année	Fonctionnalités majeures
V16	2019/2020	Première version, systèmes PC
V17	2021	Unified Comfort Panels, View of Things
V18	2022	Faceplates imbriqués, support PLCUDT
V19	2023	Dynamisation par Expression, aperçu Redondance
V20	2024	Redondance complète des données, Intégrateur MTP, compilation 20-40% plus rapide

2.Synergies : Les compétences web accélèrent la conception IHM

2.1.JavaScript : Même syntaxe, APIs différentes

La syntaxe est identique – mais les APIs diffèrent. Un exemple important :

// React/Web : JavaScript standard
console.log('Moteur démarré');
setTimeout(() => { /* ... */ }, 1000);

// WinCC Unified : APIs spécifiques Siemens
HMIRuntime.Trace('Moteur démarré');
HMIRuntime.Timers.SetTimeout(() => { /* ... */ }, 1000);

Fonctionnalités ES6 disponibles dans WinCC Unified :

• const et let (variables avec portée de bloc)
• Template Literals avec backticks
• Arrow Functions
• Classes et héritage
• Promises et async/await
• Méthodes Array (map, filter, reduce)

Différences d'API importantes :

Web/React	WinCC Unified	Fonction
console.log()	HMIRuntime.Trace()	Sortie de débogage
setTimeout()	HMIRuntime.Timers.SetTimeout()	Temporisateur
Manipulation DOM	Screen.Items()	Accès UI
useState	Tags.Read()/Tags.Write()	Gestion d'état

2.2.Faceplates vs Composants React

Le concept de Faceplate dans WinCC Unified correspond conceptuellement aux composants React :

Composant React :

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} tr/min</span>
    </div>
  );
}

Faceplate WinCC Unified (Script) :

// Instancier un Faceplate via script
let data = {
  MotorName: { Tag: "Motor1.Name" },
  Speed: { Tag: "Motor1.Speed" },
  Running: { Tag: "Motor1.Running" }
};

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

Faceplate WinCC	Équivalent React
Tag Interface	Props pour liaison de données
Property Interface	Props pour configuration
Event Interface	Props callback
Library Types	Packages npm

2.3.Gestion d'état : Tags vs useState

WinCC Unified utilise les Tags comme concept central d'état – comparable au State React, mais avec des mécanismes de déclenchement spécifiques à l'industrie :

WinCC Unified	Équivalent React
Internal Tag	useState
Tag avec Trigger	useState + useEffect
TagSet	useReducer
Session DataSet	React Context

Trois types de déclencheurs pour les changements de Tag :

1. Cyclic Triggers - Temporisés (comme setInterval)
2. Tag Triggers - Sur changement de valeur (comme useEffect avec dependencies)
3. Event Triggers - Sur interaction utilisateur

// Optimisé pour la performance : TagSet pour plusieurs Tags
let ts = Tags.CreateTagSet(["Motor1.Speed", "Motor1.Temp", "Motor1.Status"]);
ts.Read();  // Lire tous en un seul appel
// ... traiter les valeurs ...
ts.Write(); // Écrire tous en un seul appel

2.4.Système d'événements : Patterns familiers

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 : Le pont vers React

Les Custom Web Controls (CWC) sont le moyen le plus direct d'intégrer React dans WinCC Unified. Un CWC est essentiellement une Single Page Application qui s'exécute dans un conteneur isolé au sein du runtime.

3.1.Architecture d'un CWC

MyCWC/
├── manifest.json    # Définition de l'interface
├── index.html       # Point d'entrée
├── bundle.js        # Code React compilé
└── assets/          # Images, CSS

Le manifest.json définit le contrat entre le CWC et le WinCC Runtime :

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

3.2.Flux de données entre React et WinCC

1. Variable API change → WinCC Runtime détecte le changement
2. Runtime pousse la valeur → CWC reçoit de nouvelles Props
3. React fait le rendu → Virtual DOM Diff, mise à jour UI
4. Utilisateur interagit → React émet un Event
5. WinCC réagit → Script écrit la variable API

Bibliothèques utilisées avec succès (exemples Siemens) :

• Gauge.js pour les affichages à aiguille
• ApexCharts.js pour les graphiques
• N'importe quel package npm (côté client)

4.Limitations pratiques

4.1.Pas d'accès direct au DOM

Dans les écrans standard, il n'y a pas d'accès direct au DOM comme sur le web. On utilise à la place le modèle d'objet propriétaire :

// Web : Accès DOM
document.getElementById('motor').style.backgroundColor = 'green';

// WinCC Unified : Modèle d'objet
Screen.Items('Motor').BackColor = 0xFF00FF00; // Format Hex ARGB

La syntaxe CSS n'est disponible que dans les Custom Web Controls – dans les écrans standard, le style se fait via les Properties.

4.2.Architecture single-threaded

Les scripts WinCC Unified s'exécutent dans deux processus Node.js – un pour les scripts d'écran, un pour le Task Scheduler. Les deux sont single-threaded :

• Tous les scripts d'écran partagent un seul cœur CPU
• Les calculs longs bloquent les autres scripts
• Les patterns asynchrones (async/await) sont donc critiques

4.3.TypeScript : Uniquement en externe

TypeScript n'est pas nativement supporté dans TIA Portal. Le workflow recommandé :

1. Développer dans VS Code avec TypeScript
2. Utiliser ESLint pour les règles spécifiques Siemens
3. Copier le code dans TIA Portal

Siemens fournit un VS Code Development Guide (SIOS 109801600).

5.Débogage avec Chrome DevTools

L'une des fonctionnalités les plus puissantes : Remote Debugging via Chrome DevTools.

5.1.Configuration

1. Activer le débogueur de scripts dans le SIMATIC Runtime Manager
2. Ouvrir Chrome : chrome://inspect
3. Connecter le port 9222 du runtime IHM

5.2.Ce qui fonctionne

Fonctionnalité	État
Points d'arrêt	✅
Débogage pas à pas	✅
Inspection des variables	✅
Console (HMIRuntime.Trace)	✅
Onglet Sources	✅ (écran actuel uniquement)
Onglet Network	✅
Sauvegarder les modifications	❌ (doit être fait dans TIA Portal)

Cela dépasse largement le « débogage printf » des anciens systèmes IHM et permet le diagnostic d'erreurs logiques complexes et de conditions de concurrence.

6.Perspective : Les tableaux de bord web comme complément

Pour les visualisations de niveau supérieur, une architecture combinant WinCC Unified avec de vrais tableaux de bord web s'offre :

[API S7-1500] ⟷ [OPC UA / Open Pipe] ⟷ [Backend Node.js] ⟷ [Tableau de bord Next.js]

L'interface Open Pipe dans WinCC Unified permet la communication avec des applications externes – Python pour l'IA/ML, Node.js pour des interactions base de données complexes, ou du matériel personnalisé sans pilote API.

7.Infographie : Technologies web dans WinCC Unified

L'infographie montre toutes les synergies entre le développement web et WinCC Unified en un coup d'œil : moteur V8, patterns de composants, gestion d'état, débogage et Custom Web Controls.

8.Conclusion : Le transfert de connaissances comme avantage compétitif

Avec WinCC Unified, Siemens a créé un véritable pont entre OT et IT dans les systèmes SCADA modernes :

• Moteur Google V8 avec JavaScript ES6 – syntaxe familière pour les développeurs web
• Faceplates suivent le pattern de composants de React
• Custom Web Controls permettent l'intégration directe de React
• Chrome DevTools pour un débogage professionnel
• Open Pipe pour l'intégration IA/ML et les applications externes

Les techniciens en automatisation avec des connaissances web ont un avantage clair – ils comprennent les patterns sous-jacents et peuvent utiliser des pratiques de développement modernes.

Ressources complémentaires :

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

Vous planifiez un projet IHM avec WinCC Unified ou souhaitez développer des Custom Web Controls ? J'apporte l'expérience des deux mondes – automatisation et développement web. Parlons-en.