Comment créer un SVG dynamique (SVGHMI) pour WinCC Unified & V8 : guide pas à pas, à la main ou avec l’IA

Imaginez un réservoir dessiné sur l’écran d’une machine. Une image ordinaire montre toujours le même niveau. Un SVG dynamique fait monter et descendre le liquide selon un nombre, avec le même dessin. Il permet aussi d’indiquer si une vanne est ouverte, de changer la couleur d’un moteur ou d’afficher une pièce seulement quand c’est nécessaire.

SVG est un format d’image composé de formes et de lignes : on peut donc l’agrandir sans qu’il devienne pixelisé. Pour que WinCC Unified puisse modifier des parties du dessin, le fichier déclare des entrées appelées paramètres et il est enregistré avec l’extension .svghmi. Dans TIA Portal, il apparaît dans la palette Widgets dynamiques.

Un paramètre est un réglage que l’auteur met à disposition. Dans ce réservoir, il s’appelle FillLevel et reçoit un nombre de 0 à 100 : à 50, le liquide atteint la mi-hauteur. Vous le relierez ensuite à TankLevel, une variable IHM : l’endroit où le projet mémorise le nombre que vous saisissez. Leurs noms diffèrent parce que l’un appartient au dessin et l’autre au projet.

Chaque ressource possède ses propres paramètres. Le téléchargement de ce guide contient uniquement FillLevel. Les exemples de couleur et de visibilité du schéma montrent d’autres possibilités des SVG dynamiques ; ce ne sont pas des réglages de ce fichier.

Siemens · Création de graphiques SVG dynamiques (109782045)Siemens · Gestion des graphiques SVG dynamiquesSiemens · Graphiques SVGHMI dans WinCC V8

Il vous faut TIA Portal avec WinCC Unified (les étapes sont présentées en V21.1) et sa simulation ou Unified PC Runtime, le programme qui exécute la vue. Vous utiliserez une variable interne, qui vit dans l’IHM : aucun automate n’est donc nécessaire.

Affichez les extensions de fichiers dans Windows (Explorateur de fichiers → Affichage → Afficher → Extensions de noms de fichiers). Vous verrez ainsi si le fichier se termine vraiment par .svghmi et non par .svghmi.txt, l’erreur la plus fréquente à l’enregistrement.

1. 1

   Où · Explorateur de fichiers → dossier de travail

   Téléchargez le réservoir et gardez une copie de travail

   Téléchargez HmixHorizontalTank.svghmi avec le bouton de cette section. C’est un fichier unique : il n’y a rien à décompresser. Gardez l’original et copiez le fichier dans un dossier nommé MonReservoir. Ouvrez la copie avec un éditeur de texte comme Visual Studio Code ou Notepad++ (clic droit → Ouvrir avec). Vous verrez du texte, car le dessin est décrit par des instructions modifiables.

   ✓

   À vérifier: MonReservoir\HmixHorizontalTank.svghmi est ouvert dans l’éditeur.

2. 2

   Où · TIA Portal → appareil Unified → Vues

   Préparez la vue où vous le placerez

   Ouvrez ou créez un projet de test avec un appareil WinCC Unified. Créez une vue vide nommée TestReservoir et enregistrez le projet. Notez l’emplacement de son dossier : par défaut, Documents\Automation\<NomDuProjet>.

   ✓

   À vérifier: Vous avez le fichier du dessin dans l’éditeur et la vue TestReservoir dans TIA Portal, et vous savez où se trouve le dossier du projet.

Siemens · Format SVG pris en charge et restrictions

Le réservoir comporte trois parties : un corps fixe, un rectangle bleu qui représente le liquide et une découpe reprenant la forme intérieure du réservoir. La découpe fonctionne comme un pochoir : elle masque tout ce qui dépasse. Quand le niveau change, seule la partie visible du liquide change.

Si vous dessinez une ressource depuis zéro, créez d’abord les pièces dans un éditeur vectoriel et enregistrez-la en SVG ; ajoutez ensuite la partie IHM (paramètres et liaisons) avec un éditeur de texte, comme dans cet exemple. Renommer un .svg en .svghmi ne le rend pas dynamique. Ici, les pièces sont déjà dessinées et vous allez adapter leur comportement.

1. 1

   Où · Éditeur de texte → rechercher (Ctrl+F) id="liquid"

   Repérez la partie qui va changer

   Recherchez id="liquid" : c’est le rectangle qui représente le liquide. Le corps et les supports sont sur d’autres lignes et ne changent pas. Le groupe qui le contient utilise clip-path, la découpe qui garde le bleu à l’intérieur du contour arrondi.

   Comment le réservoir est construit en couches

   1. 1

      Dessin fixe

      Le corps, les supports et les raccords ne changent pas quand le niveau monte.

   2. 2

      Rectangle de liquide

      Sa hauteur et la position de son bord supérieur changent. Le fond reste en place.

   3. 3

      Découpe intérieure

      Elle n’affiche le liquide qu’à l’intérieur du contour arrondi du réservoir.

   Les couches forment un seul graphique

   FillLevel = 50

   Le liquide atteint la mi-hauteur et est découpé aux extrémités. Le corps et les supports gardent leur forme.

   ✓

   À vérifier: Vous savez quelle partie est le liquide et pourquoi elle peut grandir sans sortir du réservoir.

2. 2

   Où · Éditeur de texte → rechercher hmi:paramDef

   Trouvez le paramètre et changez sa valeur initiale

   Près du début, dans <hmi:self>, se trouve la ligne qui déclare FillLevel. type="number" indique qu’il reçoit un nombre et default="50" fixe sa valeur initiale. Remplacez uniquement default="50" par default="25". Ne changez pas le nom FillLevel : c’est celui que vous verrez dans TIA Portal.

   ✓

   À vérifier: Avec votre variante, chaque nouveau réservoir commence à 25 % de hauteur au lieu des 50 % d’origine.

3. 3

   Où · Éditeur de texte → retour à id="liquid"

   Suivez le lien entre le nombre et le liquide

   Le rectangle a deux liaisons : hmi-bind:height change la hauteur du liquide et hmi-bind:y déplace son bord supérieur ; ensemble, elles gardent le fond fixe. Toutes deux utilisent SafeLevel, une valeur calculée dans hmi:localDef avec Converter.Bounds, qui maintient FillLevel entre 0 et 100. Ainsi, même si 140 ou −20 arrive, le liquide ne sort jamais du réservoir. Ne touchez pas à ces lignes.

   ✓

   À vérifier: Vous comprenez tout le parcours : le paramètre reçoit un nombre et les liaisons le transforment en hauteur visible.

4. 4

   Où · Éditeur de texte → Enregistrer

   Enregistrez le fichier avec son extension complète

   Enregistrez les modifications (Ctrl+S) en encodage UTF-8, en gardant le nom HmixHorizontalTank.svghmi. Vérifiez dans l’Explorateur de fichiers qu’il ne se termine pas par .svghmi.txt. N’ouvrez pas et n’enregistrez pas ce fichier avec un logiciel de dessin généraliste : il pourrait supprimer les attributs hmi: et hmi-bind: qui le rendent dynamique.

   ✓

   À vérifier: Vous avez un .svghmi contenant le dessin, son paramètre et les liaisons entre eux, prêt pour TIA Portal.

Dans cet exemple, le pourcentage exprime la hauteur du liquide. Dans un réservoir horizontal, 25 % de la hauteur ne correspondent pas à 25 % du volume : pour afficher des litres, il faudrait une conversion fondée sur la géométrie du réservoir.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//SIEMENS//DTD SVG 1.0 TIA-HMI//EN" "http://tia.siemens.com/graphics/svg/1.8/dtd/svg18-hmi.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:hmi-bind--xlink="http://svg.siemens.com/hmi/bind/xlink/"
     xmlns:hmi="http://svg.siemens.com/hmi/"
     xmlns:hmi-bind="http://svg.siemens.com/hmi/bind/"
     xmlns:hmi-element="http://svg.siemens.com/hmi/element/"
     xmlns:hmi-feature="http://svg.siemens.com/hmi/feature/"
     xmlns:hmi-event="http://svg.siemens.com/hmi/event/"
     width="400" height="250" viewBox="0 0 400 250" preserveAspectRatio="xMidYMid meet">
  <hmi:self type="widget" displayName="HMIx Horizontal Tank"
            name="extended.HmixHorizontalTank" version="1.0.0">
    <hmi:paramDef name="FillLevel" type="number" default="50" />
  </hmi:self>
  <defs>
    <hmi:localDef name="SafeLevel" type="number"
      hmi-bind:value="{{ Converter.Bounds(ParamProps.FillLevel, 0, 100) }}" />
    <linearGradient id="steel" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#7f949f" />
      <stop offset="0.28" stop-color="#edf3f5" />
      <stop offset="0.52" stop-color="#bdcbd1" />
      <stop offset="1" stop-color="#667d88" />
    </linearGradient>
    <linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#4cc4df" />
      <stop offset="1" stop-color="#176184" />
    </linearGradient>
    <clipPath id="inside"><rect x="40" y="60" width="320" height="120" rx="60" /></clipPath>
  </defs>
  <!-- One parameter changes liquid height, not volume percentage. -->
  <path d="M100 170L90 220H130L120 170M280 170L270 220H310L300 170" fill="#405866" stroke="#273d49" stroke-width="2" />
  <path d="M86 224H134M266 224H314" stroke="#607987" stroke-width="8" />
  <rect x="180" y="43" width="40" height="17" rx="3" fill="url(#steel)" stroke="#546e7a" />
  <rect x="175" y="54" width="50" height="8" rx="2" fill="#adbec7" stroke="#546e7a" />
  <rect x="40" y="60" width="320" height="120" rx="60" fill="url(#steel)" />
  <g clip-path="url(#inside)">
    <rect id="liquid" x="40" y="120" width="320" height="60" fill="url(#water)"
      hmi-bind:height="{{ LocalProps.SafeLevel * 1.2 }}"
      hmi-bind:y="{{ 180 - LocalProps.SafeLevel * 1.2 }}" />
    <path d="M120 60V180M280 60V180" stroke="#254b60" stroke-opacity="0.22" stroke-width="2" />
    <path d="M55 78H345" stroke="#ffffff" stroke-opacity="0.28" stroke-width="8" />
  </g>
  <rect x="40" y="60" width="320" height="120" rx="60" fill="none" stroke="#546e7a" stroke-width="2" />
  <rect x="354" y="109" width="14" height="28" rx="2" fill="url(#steel)" stroke="#546e7a" />
  <path d="M369 115V131" stroke="#8ea5b1" stroke-width="6" />
</svg>

Siemens · Création de graphiques SVG dynamiques (109782045)

TIA Portal cherche les SVG dynamiques de chaque projet dans un dossier précis et les affiche dans la palette Widgets dynamiques, d’où vous les faites glisser sur la vue.

1. 1

   Où · Explorateur de fichiers → dossier de votre projet TIA

   Copiez le fichier dans le dossier du projet

   Dans le dossier du projet, entrez dans UserFiles (créez-le s’il n’existe pas). À l’intérieur, créez SVGControls s’il n’existe pas encore et copiez-y votre fichier modifié. La destination est le dossier du projet, pas le dossier d’installation de Siemens.

   Où enregistrer le fichier du réservoir

   Dans le dossier de votre projet

   • Votre projet/
     • UserFiles/
       • SVGControls/
         • HmixHorizontalTank.svghmi

   Créez SVGControls s’il n’existe pas encore et copiez-y le fichier.

   Ensuite, dans l’éditeur de vues

   Actualisez la palette Widgets dynamiques de la task card Outils et faites glisser le réservoir sur une vue de l’appareil Unified.

   ✓

   À vérifier: Le chemin se termine par UserFiles\SVGControls\HmixHorizontalTank.svghmi.

2. 2

   Où · TIA Portal → TestReservoir → Outils → Widgets dynamiques

   Actualisez la palette et faites glisser le réservoir

   Avec la vue ouverte, développez Widgets dynamiques (Dynamic widgets) dans la task card Outils et cliquez sur son bouton d’actualisation. Cherchez le réservoir — il apparaît sous le nom HMIx Horizontal Tank ou sous son nom de fichier, HmixHorizontalTank — et faites-le glisser sur la vue. S’il n’apparaît pas, vérifiez le chemin de l’étape précédente avant de continuer.

   ✓

   À vérifier: Une instance du réservoir se trouve sur TestReservoir.

3. 3

   Où · Réservoir sélectionné → fenêtre d’inspection → Propriétés

   Vérifiez le paramètre avant de le relier

   Le réservoir étant sélectionné, trouvez FillLevel parmi ses propriétés (vous pouvez le saisir dans le champ de recherche de la fenêtre d’inspection). Sa valeur initiale doit être 25 si vous avez fait la modification, ou 50 si vous avez importé l’original. Saisissez une valeur fixe de 50 et validez : le liquide doit se placer à mi-hauteur dans l’éditeur de vues.

   ✓

   À vérifier: Le dessin réagit à une valeur fixe : le fichier fonctionne avant même d’ajouter une variable.

Siemens · Gestion des graphiques SVG dynamiquesSiemens · Mise à jour des SVG dynamiques

Jusqu’ici, le niveau était une valeur fixe. Vous allez maintenant le relier à une variable que vous pourrez modifier pendant l’exécution de la vue : un champ E/S (entrée/sortie) écrit dans TankLevel et le réservoir lit cette même variable via FillLevel. Aucun JavaScript n’est nécessaire.

1. 1

   Où · TIA Portal → appareil Unified → Variables IHM

   Créez la variable qui mémorise le niveau

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

   ✓

   À vérifier: Votre projet possède la variable TankLevel ; le fichier SVG conserve le paramètre FillLevel.

2. 2

   Où · TestReservoir → réservoir sélectionné → propriété FillLevel

   Reliez le paramètre du réservoir à cette variable

   Dans la colonne Dynamisation de FillLevel, choisissez Variable et sélectionnez TankLevel. La valeur fixe 50 est ainsi remplacée par la valeur actuelle de la variable.

   Du nombre saisi au niveau affiché

   1. 1

      Vous saisissez 50 dans le champ E/S

      Valeur

      50

      Le champ d’entrée/sortie permet de saisir un nombre pendant le test.

   2. 2

      La variable IHM mémorise 50

      TankLevel

      50

      TankLevel est une variable interne. Vous pouvez tester sans connecter d’automate.

   3. 3

      Le paramètre FillLevel reçoit 50

      FillLevel

      50

      Dans les propriétés du réservoir, reliez FillLevel à TankLevel.

   4. 4

      Le liquide atteint la mi-hauteur

      50%

      Essayez ensuite 0 et 100 pour vérifier les deux extrêmes.

   ✓

   À vérifier: FillLevel prend sa valeur dans TankLevel.

3. 3

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

   Ajoutez un champ pour saisir le niveau

   Faites glisser un champ E/S à côté du réservoir. Choisissez le mode Entrée/sortie et reliez sa Valeur de processus à TankLevel, la même variable. Si vous le souhaitez, ajoutez à côté le texte « Niveau, 0–100 % ».

   ✓

   À vérifier: Le réservoir et le champ numérique utilisent tous deux TankLevel : le nombre saisi se verra donc dans le dessin.

4. 4

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

   Compilez, ouvrez Runtime et testez 0, 50 et 100

   Faites un clic droit sur TestReservoir et choisissez Définir comme vue initiale. Compilez l’appareil IHM (clic droit → Compiler → Logiciel), corrigez les erreurs éventuelles et cliquez sur Démarrer la simulation ou chargez le projet dans votre Unified PC Runtime. Connectez-vous au client web 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 avec un rôle IHM et compilez à nouveau). Saisissez 0 dans le champ E/S et appuyez sur Entrée ; recommencez avec 50 et 100.

   ✓

   À vérifier: À 0, aucun liquide n’est visible ; à 50, il atteint la mi-hauteur ; à 100, il remplit l’intérieur. Le contour et les supports ne bougent pas.

Le curseur de cette page illustre seulement le comportement attendu. Il ne commande pas votre projet TIA Portal et ne remplace pas le test dans Runtime.

• Il n’apparaît pas dans Widgets dynamiques : vérifiez que le fichier se trouve dans UserFiles\SVGControls du projet ouvert et se termine par .svghmi (et non .svghmi.txt). Cliquez sur Actualiser dans la palette ; s’il n’apparaît toujours pas, comparez le début du fichier avec le téléchargement d’origine.
• Le réservoir apparaît, mais FillLevel est introuvable : vérifiez que vous l’avez inséré depuis Widgets dynamiques. Un SVG importé comme graphique ordinaire n’a pas de paramètres.
• La valeur fixe fonctionne, mais le champ E/S ne fait pas bouger le liquide : vérifiez que le champ et FillLevel utilisent la même variable TankLevel et que le champ est en mode Entrée/sortie. Validez chaque nombre avec Entrée.
• 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.
• Votre changement de 50 à 25 n’apparaît pas : vérifiez quelle copie vous avez enregistrée dans SVGControls. Actualisez la palette et essayez une nouvelle instance : une instance existante conserve la valeur qu’elle avait déjà.
• Le rendu diffère de celui du navigateur : WinCC Unified prend en charge un sous-ensemble de SVG. Utilisez des formes et des effets pris en charge et vérifiez le résultat sur l’appareil cible.

Une fois ce test réussi, vous pouvez enrichir votre SVG avec des paramètres de couleur (HmiColor) ou de visibilité (boolean). Pour le réutiliser dans des faceplates, consultez la procédure Siemens de création d’un type de SVG dynamique dans une bibliothèque.

Siemens · Mise à jour des SVG dynamiquesSiemens · Format SVG pris en charge et restrictionsSiemens · SVG dynamiques comme types de bibliothèque

Dessiner un équipement industriel et écrire ses liaisons hmi-bind à la main prend du temps. Le générateur IA de HMIx (ai.hmix.tech) crée des SVG dynamiques pour WinCC Unified et V8 à partir d’une description ou d’une image de référence : il dessine le symbole ou l’équipement, propose les paramètres (niveau, couleurs, visibilité, rotation) et génère le fichier .svghmi. Vous pouvez commencer gratuitement avec le plan Community.

Ce que vous avez appris ici reste valable : l’importation depuis UserFiles\SVGControls, la liaison des paramètres aux variables et le test dans Runtime sont identiques.

1. 1

   Où · ai.hmix.tech → SVG dynamique

   Décrivez le graphique dont vous avez besoin

   Précisez l’équipement, la vue et les états, par exemple : « Réservoir horizontal en acier inoxydable, vue de face, niveau de liquide 0–100 % et couleur du liquide configurable ». Choisissez si vous voulez un symbole schématique (P&ID) ou un équipement détaillé.

   ✓

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

2. 2

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

   Vérifiez les paramètres et la simulation

   Contrôlez les paramètres proposés (par exemple, un niveau comme FillLevel) et faites-les varier dans la simulation pour confirmer que le liquide monte depuis le fond et reste dans le contour.

   ✓

   À vérifier: Le dessin 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 fichier .svghmi

   Téléchargez le .svghmi généré. C’est un fichier unique, comme celui de ce guide.

   ✓

   À vérifier: Vous avez un .svghmi prêt à copier dans UserFiles\SVGControls.

4. 4

   Où · TIA Portal → Widgets dynamiques

   Importez-le et testez-le comme ici

   Suivez « Importez le SVG dynamique dans TIA Portal » et « Reliez une variable » avec les noms de vos paramètres.

   ✓

   À vérifier: Votre SVG généré par IA change dans Runtime avec vos variables.

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