Créer une cuve horizontale en SVG dynamique pour WinCC Unified

SVG décrit une image à l'aide de formes et de lignes plutôt que d'une grille fixe de pixels. Il convient aux symboles qui doivent rester nets à différentes tailles : cuves, vannes, moteurs et indicateurs.

Un widget paramétré pour WinCC Unified utilise le format .svghmi. Celui-ci ajoute au dessin une interface avec des paramètres comme FillLevel ou une couleur. TIA Portal les expose pour les relier à des variables HMI. Une valeur transforme le dessin : inutile de préparer 101 images pour une cuve de 0 à 100 %.

Un .svg ordinaire peut servir de graphique, mais le renommer en .svghmi n'ajoute pas d'interface dynamique.

• Utilisez un SVG dynamique pour les niveaux, états d'équipements, couleurs variables ou mouvements simples pilotés par des valeurs.
• Choisissez un CWC pour une interface web plus riche, un tableau personnalisé ou plusieurs interactions.
• Commencez avec un dessin simple pour comprendre l'effet de chaque paramètre.

Siemens · Gestion des graphiques SVG dynamiquesSiemens · Format SVG pris en charge et restrictions

Utilisez un projet d'essai avec un appareil Unified, une vue vide et des composants Runtime ou de simulation compatibles. Ce guide suit V21.1 ; les autres éditions WinCC et les anciennes versions peuvent différer.

• Pour dessiner manuellement, utilisez un éditeur vectoriel comme Inkscape et un éditeur de texte pour l'interface HMI.
• Pour un essai immédiat, téléchargez notre petit exemple .svghmi ci-dessous. Un automate n'est pas nécessaire.
• Utilisez des formes et des effets pris en charge par WinCC Unified. Un SVG bien affiché dans un navigateur ne garantit pas que tous ses éléments fonctionnent sur l’appareil HMI.

Siemens · Format SVG pris en charge et restrictions

La cuve associe un contour arrondi, deux supports et des dégradés pour l’aspect métallique. Le liquide est un rectangle indépendant, découpé à l’intérieur de la cuve. Un seul paramètre change : FillLevel, de 0 à 100.

1. 1

   Dessiner les éléments fixes

   Dessinez le corps horizontal, les supports et la trappe supérieure. Définissez un viewBox de 400 × 250. Placez la silhouette de la cuve dans un clipPath pour empêcher le liquide de dépasser des extrémités arrondies.

2. 2

   Ajouter l'interface HMI

   Dans un éditeur de texte, ajoutez les espaces de noms HMI Siemens et une section hmi:self. Définissez FillLevel avec hmi:paramDef, le type number et la valeur par défaut 50. Notre fichier complet contient déjà cette structure.

3. 3

   Relier la forme du liquide

   Reliez hmi-bind:height et hmi-bind:y à ParamProps.FillLevel. Lorsque le rectangle grandit, son bord supérieur monte et le fond reste fixe. Le clipPath contient le liquide et Converter.Bounds limite l’affichage à 0–100.

4. 4

   Enregistrer en .svghmi

   Enregistrez le XML en UTF-8 avec l'extension exacte .svghmi, et non .svghmi.txt. Gardez une copie modifiable. Après l'ajout des liaisons HMI, évitez un nouvel enregistrement dans un éditeur vectoriel générique susceptible de supprimer les attributs Siemens.

FillLevel indique ici le pourcentage de hauteur du liquide. Dans une cuve horizontale, il diffère généralement du pourcentage de volume. Afficher des litres ou un volume exige une conversion adaptée à la géométrie de la cuve.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//SIEMENS//DTD SVG 1.0 TIA-HMI//EN" "http://svg.siemens.com/hmi/svg10-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)

1. 1

   Placer le fichier dans le projet

   Dans le dossier du projet, créez UserFiles\SVGControls si nécessaire. Copiez-y HmixHorizontalTank.svghmi. Ce parcours utilise le fichier .svghmi lui-même, pas un ZIP.

2. 2

   Ouvrir les widgets dynamiques

   Ouvrez la vue Unified et Outils → Widgets dynamiques (Tools → Dynamic widgets). Actualisez la palette après un ajout ou une modification. Si un nouveau fichier n'apparaît pas, rouvrez le projet.

3. 3

   Insérer et vérifier

   Faites glisser HMIx Horizontal Tank dans la vue. Dans ses propriétés, trouvez le paramètre utilisateur FillLevel et attribuez-lui la valeur statique 50. Vérifiez que le dessin apparaît avant de relier une variable.

Utilisez les widgets dynamiques pour ce fichier. Importer un SVG ordinaire dans la collection de graphiques est un autre parcours qui ne crée pas ces paramètres.

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

1. 1

   Créer une valeur interne

   Ajoutez une variable HMI interne TankLevel, d'un type numérique comme Real, sans connexion à l'automate. Vous modifierez cette valeur à la main.

2. 2

   Relier le paramètre

   Sélectionnez la cuve, choisissez la dynamisation par variable pour FillLevel, puis TankLevel. Le nom du paramètre appartient au SVG ; celui de la variable appartient au projet HMI.

3. 3

   Ajouter un champ E/S numérique

   Placez-le près du dessin, sélectionnez le mode entrée/sortie et reliez sa valeur de processus à la même TankLevel. Fixez les limites de saisie à 0 et 100 si elles sont disponibles.

4. 4

   Compiler et essayer trois valeurs

   Définissez la vue initiale, compilez la HMI et lancez sa simulation compatible ou le Runtime Unified PC d'essai. Ouvrez le client Runtime, connectez-vous si nécessaire et saisissez 0, 50 puis 100. Validez chaque saisie et observez le liquide.

5. 5

   Vérifier taille et réouverture

   Rouvrez la vue pour vérifier la valeur actuelle. Testez une deuxième instance à une autre taille : le contour doit rester net et le liquide à l'intérieur de la cuve.

Le curseur ci-dessous illustre le résultat attendu. Il est indépendant de TIA Portal et ne communique pas avec votre projet.

• Le widget est absent : vérifiez UserFiles\SVGControls, l'extension réelle, la validité du XML et l'interface HMI, puis actualisez la palette.
• La cuve apparaît sans se remplir : vérifiez les liaisons HMI et assurez-vous que FillLevel utilise la même variable que le champ E/S.
• Le remplissage descend : la position supérieure du liquide doit changer en même temps que sa hauteur. Notre exemple conserve un fond fixe.
• Le rendu diffère de l'éditeur vectoriel : simplifiez les effets non pris en charge, le CSS et les dépendances de polices. Vérifiez l'appareil cible en plus de l'aperçu du navigateur.
• Une mise à jour perd une liaison : renommer, supprimer ou changer le type d'un paramètre peut affecter les instances existantes. Conservez l'interface ou reconfigurez les instances concernées.

Après ce premier essai dans une vue, explorez les types SVG dynamiques de bibliothèque pour les réutiliser dans des vues et des faceplates. C'est une étape suivante, pas un préalable au test.

Siemens · Mise à jour des SVG dynamiquesSiemens · SVG dynamiques comme types de bibliothèque