Comment créer un Custom Web Control (CWC) pour WinCC Unified & V8 : guide pas à pas, à la main ou avec l’IA

Un Custom Web Control, ou CWC, est un objet de vue sur mesure réalisé avec des technologies web (HTML, CSS et JavaScript). Vous le placez sur une vue WinCC Unified comme n’importe quel bouton ou champ, mais c’est vous qui décidez de son apparence et de son comportement : un graphique de production, un tableau particulier, un panneau réunissant plusieurs indicateurs…

Notre exemple est un graphique circulaire évidé au centre, où s’affiche le total, avec trois secteurs pour les quantités A, B et C. Quand une quantité change, son secteur grandit ou rétrécit.

Le contrôle reçoit chaque valeur par une propriété : une entrée portant un nom, comme ValueA. Dans TIA Portal, vous relierez cette propriété à une variable IHM, l’endroit où le projet mémorise la valeur. Peu importe au contrôle d’où vient cette valeur : pour ce test, vous la saisirez sur la vue ; sur une vraie machine, elle viendrait d’un automate.

• Utilisez un CWC lorsqu’il vous faut une visualisation ou une interaction que les objets standard de WinCC Unified ne proposent pas.
• Si vous voulez seulement changer la couleur d’un symbole ou afficher le niveau d’un réservoir, commencez par un SVG dynamique : il comporte moins d’éléments.

Siemens · Programmation des Custom Web ControlsSiemens · Custom Web Controls dans WinCC V8

Vous travaillerez à deux endroits : un éditeur de texte pour préparer le contrôle et TIA Portal pour le placer sur une vue. Les fichiers de départ contiennent déjà un graphique complet et fonctionnel : vous n’avez pas de code à écrire, seulement à comprendre chaque partie et à faire une première modification.

Avant de commencer, affichez les extensions de fichiers dans Windows (Explorateur de fichiers → Affichage → Afficher → Extensions de noms de fichiers). Vous verrez ainsi si un fichier se termine vraiment par .zip ou .json, et vous éviterez l’erreur la plus fréquente : des noms comme fichier.zip.zip.

• Il vous faut TIA Portal avec WinCC Unified (les étapes sont présentées en V21.1) et sa simulation ou Unified PC Runtime. Runtime est le programme qui exécute la vue IHM.
• Utilisez un éditeur de texte comme Visual Studio Code et l’Explorateur de fichiers Windows, qui sait déjà créer des fichiers ZIP. Aucun automate n’est nécessaire.

1. 1

   Où · TIA Portal → arborescence du projet → appareil IHM → Vues

   Préparez une vue vide

   Ouvrez ou créez un projet de test avec un appareil WinCC Unified (par exemple, Unified PC). Dans l’appareil, sous Vues (Screens), créez une vue nommée TestCWC et enregistrez le projet. Notez l’emplacement de son dossier : par défaut, TIA Portal le crée dans Documents\Automation\<NomDuProjet>.

   ✓

   À vérifier: Vous avez une vue vide et vous savez quel dossier de votre PC contient le projet.

2. 2

   Où · Explorateur de fichiers Windows

   Téléchargez et extrayez les fichiers de départ

   Téléchargez le graphique circulaire avec le bouton de cette section : c’est un ZIP nommé {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip. Gardez-en une copie intacte. Clic droit → Extraire tout et, dans la boîte de dialogue, remplacez le nom du dossier de destination par HmixPieChart (Windows propose le long nom du GUID).

   ✓

   À vérifier: Dans HmixPieChart, vous voyez manifest.json et les dossiers assets et control.

3. 3

   Où · Visual Studio Code ou votre éditeur de texte

   Ouvrez le dossier dans votre éditeur

   Dans Visual Studio Code, choisissez Fichier → Ouvrir le dossier et sélectionnez HmixPieChart. Si l’arborescence des fichiers n’apparaît pas, ouvrez le panneau Explorateur (Ctrl+Maj+E). C’est depuis ce panneau que vous ouvrirez chaque fichier dans la section suivante.

   ✓

   À vérifier: L’arborescence des fichiers du contrôle apparaît dans la barre latérale de l’éditeur.

Siemens · Installation et utilisation des CWC

Un CWC n’est qu’une poignée de fichiers texte. Inutile de les mémoriser : il suffit de savoir à quoi sert chacun. manifest.json présente le contrôle à TIA Portal, index.html contient ce que vous voyez et code.js décide comment le graphique change quand une valeur arrive.

1. 1

   Où · Éditeur → panneau Explorateur de HmixPieChart

   Vérifiez l’emplacement de chaque fichier

   Le premier niveau contient manifest.json et les dossiers assets et control. Dans control se trouvent index.html, code.js et webcc.min.js. Ce dernier est la bibliothèque officielle de Siemens qui relie le contrôle à WinCC Unified : il est déjà inclus et vous ne devez pas le modifier. assets conserve sa licence et, dans vos propres contrôles, peut accueillir l’icône.

   Un dossier, trois parties qui travaillent ensemble

   • HmixPieChart/
     • manifest.json

       La carte d’identité du contrôle : son nom, son identifiant (GUID) et les valeurs qu’il peut recevoir de WinCC Unified.

     • assets/
       • SIEMENS-LICENSE.md

         La licence fournie avec la bibliothèque de communication de Siemens.

     • control/
       • index.html

         La page qui dessine le graphique. Son apparence y est aussi définie : couleurs, dimensions et disposition.

       • code.js

         Les instructions qui actualisent le graphique quand une valeur change.

       • webcc.min.js

         Le pont de communication avec WinCC Unified. C’est le fichier officiel de Siemens : ne le modifiez pas.

   ✓

   À vérifier: Votre dossier a la même structure que le schéma, sans fichier mal placé.

2. 2

   Où · Éditeur → manifest.json

   Repérez les trois entrées du graphique

   Ouvrez manifest.json et cherchez properties. Vous verrez ValueA, ValueB et ValueC. Chacune indique "type": "number" (elle reçoit un nombre) et une valeur initiale dans default : 45, 35 et 20. Ce sont les trois propriétés qui apparaîtront dans TIA Portal. Plus haut, sous identity, vous trouverez aussi displayname (le nom affiché par TIA Portal, HMIx Pie Chart) et type, avec l’identifiant unique du contrôle. Ne modifiez rien dans ce fichier pendant ce premier test.

   ✓

   À vérifier: Vous savez quelles trois quantités le contrôle reçoit, comment elles s’appellent et où se trouve son identifiant.

3. 3

   Où · Éditeur → control/index.html

   Faites votre première modification visible

   Ce fichier utilise HTML pour organiser le contenu et, dans la balise <style>, des règles CSS qui définissent couleurs et dimensions. Recherchez (Ctrl+F) le texte PIE CHART et remplacez-le par PRODUCTION. Changez uniquement ces lettres, pas les balises <span> qui les entourent, puis enregistrez le fichier (Ctrl+S).

   ✓

   À vérifier: L’en-tête du graphique affiche PRODUCTION : vous avez personnalisé votre contrôle avec une modification facile à vérifier.

4. 4

   Où · Éditeur → control/code.js

   Repérez la partie qui actualise les valeurs

   code.js est écrit en JavaScript, le langage qui décrit les actions du contrôle. Cherchez drawChart : cette fonction calcule le total et dessine les secteurs. Plus bas, WebCC.start établit la connexion avec WinCC Unified et onPropertyChanged signale chaque changement de propriété. Remarquez que ValueA, ValueB et ValueC s’écrivent exactement comme dans le manifeste. Vous n’avez rien à toucher ici.

   ✓

   À vérifier: Vous distinguez l’apparence (index.html) de la logique qui reçoit et dessine les données (code.js).

5. 5

   Où · Explorateur Windows → HmixPieChart → control

   Vérifiez le rendu avant de créer le paquet

   Double-cliquez sur index.html pour l’ouvrir dans votre navigateur. Vous devez voir l’en-tête PRODUCTION et le graphique avec 45, 35 et 20. Il est normal qu’il ne réagisse à rien : en dehors de WinCC, le contrôle n’a pas de variables et affiche ses valeurs initiales. Si PIE CHART apparaît encore, enregistrez la modification dans l’éditeur et rechargez la page (F5).

   ✓

   À vérifier: Le graphique s’affiche avec le texte que vous venez de modifier.

6. 6

   Où · Explorateur Windows → à l’intérieur de HmixPieChart

   Créez le ZIP que TIA Portal importera

   Entrez dans HmixPieChart et sélectionnez ensemble manifest.json, assets et control (Ctrl+clic). Clic droit → Compresser dans un fichier ZIP (sous Windows 10 : Envoyer vers → Dossier compressé). Sélectionnez ces trois éléments, pas le dossier HmixPieChart. Renommez le ZIP obtenu exactement {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip, accolades comprises : c’est le GUID indiqué dans identity → type du manifeste. Si le nom diffère, TIA Portal n’affichera pas le contrôle.

   Du dossier de travail au projet TIA Portal

   1. 1

      Sélectionnez le contenu du dossier

      ✓manifest.json

      ✓assets/

      ✓control/

      Entrez dans HmixPieChart et sélectionnez ces trois éléments. Le dossier HmixPieChart lui-même ne va pas dans le ZIP.

   2. 2

      Compressez et nommez le ZIP avec le GUID

      {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip

      Le nom du ZIP correspond au GUID de manifest.json. Les accolades font partie du nom.

   3. 3

      Copiez le ZIP complet à cet emplacement

      • Votre projet/
        • UserFiles/
          • CustomControls/
            • {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip

      Le ZIP va ici, toujours compressé. Créez UserFiles et CustomControls s’ils n’existent pas.

   ✓

   À vérifier: À l’ouverture du ZIP, vous voyez directement manifest.json, assets et control, et son nom correspond au GUID.

Pour suivre ce guide, conservez l’identité de l’exemple. Quand vous créerez un contrôle indépendant, générez un nouveau GUID (par exemple dans PowerShell avec [guid]::NewGuid()), écrivez-le en majuscules dans identity → type (guid://…) et utilisez le même GUID, entre accolades, comme nom du ZIP. Renommer uniquement le ZIP ne change pas l’identité.

{
  "mver": "1.2.0",
  "control": {
    "identity": {
      "name": "HmixPieChart",
      "version": "1.0",
      "displayname": "HMIx Pie Chart",
      "type": "guid://8D821B43-4EF5-4BF1-A31D-931D283C7C04",
      "start": "./control/index.html"
    },
    "metadata": {
      "author": "HMIx",
      "description": "Educational read-only three-value pie chart"
    },
    "contracts": {
      "api": {
        "methods": {},
        "events": {},
        "properties": {
          "ValueA": { "type": "number", "default": 45 },
          "ValueB": { "type": "number", "default": 35 },
          "ValueC": { "type": "number", "default": 20 }
        }
      }
    },
    "types": {}
  }
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HMIx Pie Chart</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        padding: 20px;
        background: #171e26;
        color: #f3f5f6;
        font:
          14px system-ui,
          sans-serif;
      }
      header {
        display: flex;
        justify-content: space-between;
        color: #bac5ce;
        font-size: 11px;
        letter-spacing: 0.14em;
      }
      main {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        min-height: 240px;
      }
      svg {
        width: 55%;
        max-width: 300px;
        flex-shrink: 0;
      }
      ul {
        list-style: none;
        padding: 0;
        min-width: 110px;
      }
      li {
        display: grid;
        grid-template-columns: 10px 1fr auto;
        align-items: center;
        gap: 10px;
        padding: 14px 0;
        border-bottom: 1px solid #35404a;
      }
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      small {
        display: block;
        margin-top: 4px;
        color: #bac5ce;
        font-variant-numeric: tabular-nums;
      }
      strong {
        font-variant-numeric: tabular-nums;
      }
      @media (max-width: 360px) {
        body {
          padding: 12px;
        }
        main {
          gap: 12px;
        }
      }
    </style>
  </head>
  <body>
    <header><span>HMIx</span><span>PIE CHART</span></header>
    <main>
      <svg viewBox="0 0 220 220" role="img" aria-labelledby="chart-title">
        <title id="chart-title">Distribution of A, B and C</title>
        <circle
          cx="110"
          cy="110"
          r="76"
          fill="none"
          stroke="#35404a"
          stroke-width="28"
        />
        <g transform="rotate(-90 110 110)" fill="none" stroke-width="28">
          <circle id="ValueA" cx="110" cy="110" r="76" stroke="#47d2c8" />
          <circle id="ValueB" cx="110" cy="110" r="76" stroke="#79a9ed" />
          <circle id="ValueC" cx="110" cy="110" r="76" stroke="#f5c16c" />
        </g>
        <text
          id="total"
          x="110"
          y="115"
          text-anchor="middle"
          fill="#f3f5f6"
          font-size="30"
          font-weight="600"
        >
          100
        </text>
        <text
          x="110"
          y="139"
          text-anchor="middle"
          fill="#bac5ce"
          font-size="10"
          letter-spacing="2"
        >
          A + B + C
        </text>
      </svg>
      <ul aria-label="Values and shares">
        <li>
          <i class="dot" style="background: #47d2c8"></i
          ><span>A<small id="ValueA-amount">45</small></span
          ><strong id="ValueA-percent">45%</strong>
        </li>
        <li>
          <i class="dot" style="background: #79a9ed"></i
          ><span>B<small id="ValueB-amount">35</small></span
          ><strong id="ValueB-percent">35%</strong>
        </li>
        <li>
          <i class="dot" style="background: #f5c16c"></i
          ><span>C<small id="ValueC-amount">20</small></span
          ><strong id="ValueC-percent">20%</strong>
        </li>
      </ul>
    </main>
    <script src="webcc.min.js"></script>
    <script src="code.js"></script>
  </body>
</html>

/* HMIx educational pie chart. Values are amounts, not required percentages. */
var values = { ValueA: 45, ValueB: 35, ValueC: 20 };
var keys = ['ValueA', 'ValueB', 'ValueC'];
var circumference = 2 * Math.PI * 76;

function drawChart() {
  // Normalize before adding to avoid overflow for very large finite values.
  var maximum = Math.max(values.ValueA, values.ValueB, values.ValueC, 1);
  var sum = keys.reduce(function (n, key) {
    return n + values[key] / maximum;
  }, 0);
  var offset = 0;
  keys.forEach(function (key) {
    var fraction = sum ? values[key] / maximum / sum : 0;
    var arc = document.getElementById(key);
    var length = fraction * circumference;
    arc.setAttribute('stroke-dasharray', length + ' ' + circumference);
    arc.setAttribute('stroke-dashoffset', String(-offset));
    arc.setAttribute('visibility', fraction ? 'visible' : 'hidden');
    document.getElementById(key + '-amount').textContent = String(values[key]);
    document.getElementById(key + '-percent').textContent =
      Math.round(fraction * 100) + '%';
    offset += length;
  });
  var total = values.ValueA + values.ValueB + values.ValueC;
  document.getElementById('total').textContent = isFinite(total)
    ? String(total)
    : '—';
}

function setValue(key, value) {
  if (keys.indexOf(key) === -1 || typeof value !== 'number' || !isFinite(value))
    return;
  values[key] = Math.max(0, value);
}

drawChart();
if (typeof WebCC !== 'undefined') {
  WebCC.start(
    function (connected) {
      if (!connected) return;
      keys.forEach(function (key) {
        setValue(key, WebCC.Properties[key]);
      });
      drawChart();
      WebCC.onPropertyChanged.subscribe(function (change) {
        setValue(change.key, change.value);
        drawChart();
      });
    },
    {
      methods: {},
      events: [],
      properties: { ValueA: 45, ValueB: 35, ValueC: 20 },
    },
    ['HMI'],
    10000,
  );
}

Siemens · Structure du manifesteSiemens · WebCC et interface avec RuntimeSiemens · Fichiers d’exemple et bibliothèque WebCCSiemens · Création du fichier ZIP

Le paquet est prêt. Vous passez maintenant de l’éditeur de texte à TIA Portal. Le ZIP se place dans le dossier du projet, dans un sous-dossier précis, pour que TIA Portal puisse le trouver.

1. 1

   Où · Explorateur Windows → dossier de votre projet TIA

   Copiez le ZIP dans son dossier de destination

   Ouvrez le dossier du projet noté au début et entrez dans UserFiles (créez-le s’il n’existe pas). À l’intérieur, créez un dossier nommé CustomControls s’il n’existe pas et copiez-y le ZIP. Laissez-le compressé : ne l’extrayez pas et ne copiez pas uniquement index.html.

   ✓

   À vérifier: Le chemin se termine par UserFiles\CustomControls\{8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip.

2. 2

   Où · TIA Portal → vue TestCWC → task card Outils

   Faites-le apparaître dans TIA Portal

   Ouvrez la vue TestCWC. Dans la task card Outils (Tools), à droite, développez la palette Mes contrôles (My controls) et cliquez sur son bouton Actualiser.

   ✓

   À vérifier: HMIx Pie Chart apparaît dans la palette Mes contrôles.

3. 3

   Où · TIA Portal → Mes contrôles → vue TestCWC

   Placez-le sur la vue

   Faites glisser HMIx Pie Chart de la palette vers la vue. Donnez-lui une taille d’environ 480 × 300 pixels et laissez de la place sur un côté pour les trois champs numériques que vous ajouterez ensuite.

   ✓

   À vérifier: La vue contient une instance de votre graphique avec l’en-tête PRODUCTION.

4. 4

   Où · Contrôle sélectionné → fenêtre d’inspection → Propriétés → Propriétés → Interface

   Retrouvez les entrées que vous avez préparées

   Sélectionnez le contrôle et, dans la fenêtre d’inspection, ouvrez Propriétés → Propriétés → Interface. Vous y trouvez ValueA, ValueB et ValueC avec leurs valeurs initiales 45, 35 et 20. Dans la section suivante, vous remplacerez ces valeurs fixes par des variables.

   

   ✓

   À vérifier: Vous voyez les trois propriétés définies dans manifest.json.

Siemens · Installation et utilisation des CWC

Le contrôle a trois entrées ; vous allez maintenant leur fournir des données. Vous créerez trois variables internes (elles vivent dans l’IHM, sans automate) et trois champs E/S. Un champ E/S (entrée/sortie) est une case de la vue dans laquelle on peut lire et saisir un nombre. Chaque case et son secteur du graphique partageront la même variable.

1. 1

   Où · TIA Portal → appareil IHM → Variables IHM → table de variables

   Créez les trois variables de test

   Ouvrez la table de variables standard et ajoutez ProductionA, ProductionB et ProductionC. Dans la colonne Connexion, choisissez Variable interne et sélectionnez un type de données numérique, par exemple Real.

   ✓

   À vérifier: La table contient trois variables internes numériques portant ces noms.

2. 2

   Où · Vue TestCWC → CWC sélectionné → Propriétés → Propriétés → Interface

   Reliez chaque variable à son entrée

   Sur la ligne ValueA, ouvrez la colonne Dynamisation, choisissez Variable et sélectionnez ProductionA. « Dynamiser » signifie que la propriété prend sa valeur dans une variable au lieu d’un nombre fixe. Répétez avec ValueB → ProductionB et ValueC → ProductionC. Laissez Lecture seule activé : le graphique ne fait qu’afficher les données ; vous les écrirez depuis les champs.

   Comment les trois valeurs arrivent jusqu’au graphique

   1. 1

      Vous saisissez un nombre dans chaque champ E/S

      A

      45

      B

      35

      C

      20

      E/S signifie entrée/sortie : le champ affiche une valeur et permet de la modifier pendant le test.

   2. 2

      La variable IHM mémorise ce nombre

      ProductionA

      45

      ProductionB

      35

      ProductionC

      20

      Ce sont des variables internes du projet. Ce test ne nécessite pas d’automate.

   3. 3

      La propriété du contrôle reçoit la valeur

      ValueA

      45

      ValueB

      35

      ValueC

      20

      Reliez chaque propriété à sa variable dans la colonne Dynamisation de l’Interface.

   4. 4

      Le graphique se redessine

      A: 45% · B: 35% · C: 20%

      Avec 45, 35 et 20, la somme est 100. Si vous changez un nombre, les trois parts sont recalculées.

   

   ✓

   À vérifier: Chaque entrée du graphique reçoit une variable différente, comme le montre le schéma.

3. 3

   Où · Vue TestCWC → Outils → Éléments → Champ E/S

   Ajoutez les champs pour saisir les nombres

   Faites glisser trois champs E/S à côté du graphique. Pour chacun, choisissez le mode Entrée/sortie et reliez sa Valeur de processus à ProductionA, ProductionB et ProductionC respectivement. Ajoutez à côté les textes A, B et C pour les distinguer.

   ✓

   À vérifier: Vous avez le graphique et trois champs : un pour A, un pour B et un pour C.

4. 4

   Où · TIA Portal → arborescence du projet → appareil IHM

   Compilez et ouvrez la vue dans Runtime

   Faites un clic droit sur TestCWC et choisissez Définir comme vue initiale (vous pouvez aussi la définir dans Paramètres Runtime → Général). Sélectionnez l’appareil IHM, compilez-le (clic droit → Compiler → Logiciel) et corrigez les erreurs éventuelles. Cliquez ensuite sur Démarrer la simulation ou chargez le projet dans votre Unified PC Runtime. Le client web s’ouvre : connectez-vous avec un utilisateur du projet. Si vous n’en avez pas, créez-en un dans Paramètres de sécurité → Utilisateurs et rôles, attribuez-lui un rôle IHM (par exemple HMI Administrator) et compilez à nouveau.

   ✓

   À vérifier: La vue s’exécute et vous pouvez saisir des nombres dans les champs E/S.

5. 5

   Où · Vue dans Runtime → champs A, B et C

   Vérifiez la première répartition, puis changez A

   Saisissez 45 dans A, 35 dans B et 20 dans C, en validant chaque nombre avec Entrée. Le total doit être 100. Changez maintenant uniquement A à 90 et validez : son secteur grandit et le total passe à 145. Ces nombres sont des quantités, pas des pourcentages : le contrôle calcule la part de chacune dans le total.

   ✓

   À vérifier: Le graphique change dès que vous validez un nombre, sans recharger la vue.

6. 6

   Où · Vue dans Runtime → champs A, B et C

   Vérifiez aussi l’état vide

   Saisissez 0 dans les trois champs : les secteurs colorés disparaissent et il reste un anneau vide avec un total de 0. Saisissez de nouveau 45, 35 et 20, puis rechargez la page du navigateur (F5) pour vérifier que le contrôle lit les valeurs actuelles à son ouverture.

   ✓

   À vérifier: Le contrôle affiche aussi bien les données normales que le cas sans production.

Siemens · Installation et utilisation des CWCSiemens · Exemple de configuration et captures originales

• HMIx Pie Chart n’apparaît pas dans Mes contrôles : ouvrez le ZIP ; son premier niveau doit contenir manifest.json, assets et control, sans dossier intermédiaire. Vérifiez qu’il s’appelle exactement {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip (extensions affichées, pour qu’il ne soit pas en .zip.zip), qu’il se trouve dans UserFiles\CustomControls du projet ouvert, puis cliquez sur Actualiser.
• ValueA, ValueB ou ValueC manque : utilisez le ZIP de ce guide et ne renommez rien dans manifest.json ; les noms distinguent majuscules et minuscules. Le produit Pie Chart du catalogue a d’autres propriétés.
• Le graphique ne change pas dans Runtime : validez le nombre avec Entrée. Vérifiez ensuite que le champ E/S est en mode Entrée/sortie et que le champ et la propriété du contrôle utilisent la même variable.
• Vous ne pouvez pas vous connecter à Runtime : le client demande un utilisateur du projet. Créez-en un dans Paramètres de sécurité → Utilisateurs et rôles avec un rôle IHM, compilez et chargez à nouveau.
• PIE CHART s’affiche encore : enregistrez index.html, recréez le ZIP et remplacez celui du projet. Cliquez sur Actualiser dans Mes contrôles : la fenêtre d’inspection indique que l’objet a été mis à jour. Compilez et chargez de nouveau l’IHM. Modifier seulement le dossier de travail ne change pas ce qui se trouve déjà dans TIA Portal.
• Il fonctionne sur le PC mais échoue sur un Unified Comfort Panel : assurez-vous que toutes les dépendances voyagent dans le ZIP et consultez les restrictions de Siemens pour cet appareil, notamment sur les ressources externes et les requêtes de données.

Une fois que tout fonctionne, changez une seule chose à la fois : d’abord un texte ou une couleur, puis une autre façon de présenter les données. Si vous renommez une propriété ou changez son type, TIA Portal peut perdre sa configuration sur les instances existantes. Validez toujours le contrôle sur l’appareil où il sera utilisé.

Siemens · Restrictions des CWC sur les Unified Comfort Panels

Vous savez maintenant à quoi ressemble un CWC de l’intérieur. Pour créer de nouveaux contrôles sans écrire de HTML ni de JavaScript, vous pouvez utiliser le générateur IA de HMIx (ai.hmix.tech) : décrivez le contrôle en langage courant et l’IA prépare le design, les propriétés, le manifest.json et le paquet {GUID}.zip prêt pour TIA Portal. Vous pouvez commencer gratuitement avec le plan Community.

Ce que vous avez appris ici reste valable : l’importation, la liaison des variables et le test dans Runtime fonctionnent exactement de la même façon.

1. 1

   Où · ai.hmix.tech → Custom Web Control

   Décrivez le contrôle dont vous avez besoin

   Indiquez ce qu’il doit afficher et quelles données il reçoit, par exemple : « Graphique circulaire avec trois quantités de production A, B et C, total au centre et légende avec pourcentages ». Vous pouvez aussi joindre une image de référence.

   ✓

   À vérifier: L’IA génère une première version visuelle que vous pouvez affiner dans le chat ou l’éditeur visuel.

2. 2

   Où · Générateur → étapes de définition et de simulation

   Vérifiez les propriétés et la simulation

   Contrôlez les propriétés proposées par l’IA (les équivalents de ValueA, ValueB et ValueC) et faites-les varier avec les commandes de simulation pour voir comment le contrôle réagit avant de le télécharger.

   ✓

   À vérifier: Le contrôle réagit dans la simulation comme vous l’attendez.

3. 3

   Où · Générateur → étape de génération et d’installation

   Téléchargez le paquet

   Téléchargez le résultat. Le ZIP téléchargé contient la documentation et, à l’intérieur, le paquet {GUID}.zip du contrôle : c’est ce fichier intérieur que vous copiez, toujours compressé, dans UserFiles\CustomControls.

   ✓

   À vérifier: Vous avez un {GUID}.zip au même format que celui de ce guide.

4. 4

   Où · TIA Portal → Mes contrôles

   Importez-le et testez-le comme ici

   Suivez « Importez le CWC dans TIA Portal » et « Reliez des variables et testez dans Runtime » avec les noms de votre nouveau contrôle.

   ✓

   À vérifier: Votre contrôle généré par IA fonctionne sur votre vue WinCC Unified.

Avec le plan gratuit, les contrôles générés sont publiés dans le catalogue HMIx pour que d’autres utilisateurs puissent aussi s’en servir ; les plans payants permettent de les garder privés.