Dynamisches SVG (SVGHMI) für WinCC Unified & V8 erstellen: Schritt-für-Schritt-Anleitung, von Hand oder mit KI

Stell dir einen Tank vor, der auf einem Maschinenbildschirm gezeichnet ist. Ein normales Bild zeigt immer denselben Füllstand. Bei einem dynamischen SVG steigt und fällt die Flüssigkeit mit einer Zahl, und die Zeichnung bleibt dieselbe. Damit kannst du auch anzeigen, ob ein Ventil offen ist, die Farbe eines Motors ändern oder ein Bauteil nur bei Bedarf einblenden.

SVG ist ein Bildformat aus Formen und Linien, deshalb lässt es sich vergrößern, ohne pixelig zu werden. Damit WinCC Unified Teile der Zeichnung verändern kann, deklariert die Datei Eingänge, sogenannte Parameter, und wird mit der Endung .svghmi gespeichert. In TIA Portal erscheint sie in der Palette Dynamische Widgets.

Ein Parameter ist eine Einstellung, die der Ersteller zur Verfügung stellt. Bei diesem Tank heißt er FillLevel und nimmt eine Zahl von 0 bis 100 an: Bei 50 steht die Flüssigkeit auf halber Höhe. Später verbindest du ihn mit TankLevel, einer HMI-Variablen: dem Ort, an dem das Projekt die eingegebene Zahl speichert. Die Namen unterscheiden sich, weil der eine zur Zeichnung und der andere zum Projekt gehört.

Jede Ressource hat eigene Parameter. Der Download dieser Anleitung enthält nur FillLevel. Die Farb- und Sichtbarkeitsbeispiele im Schema zeigen weitere Möglichkeiten dynamischer SVGs; es sind keine Einstellungen dieser Datei.

Siemens · Dynamische SVG-Grafiken erstellen (109782045)Siemens · Dynamische SVG-Grafiken verwaltenSiemens · SVGHMI-Grafiken in WinCC V8

Du brauchst TIA Portal mit WinCC Unified (die Schritte zeigen V21.1) und dessen Simulation oder Unified PC Runtime, das Programm, das das Bild ausführt. Du verwendest eine interne Variable, die in der HMI liegt, deshalb ist keine SPS nötig.

Aktiviere in Windows die Dateinamenerweiterungen (Explorer → Ansicht → Anzeigen → Dateinamenerweiterungen). So siehst du, ob die Datei wirklich auf .svghmi endet und nicht auf .svghmi.txt, den häufigsten Fehler beim Speichern.

1. 1

   Wo · Explorer → Arbeitsordner

   Lade den Tank herunter und lege eine Arbeitskopie an

   Lade HmixHorizontalTank.svghmi mit der Schaltfläche in diesem Abschnitt herunter. Es ist eine einzelne Datei: Du musst nichts entpacken. Bewahre das Original auf und kopiere die Datei in einen Ordner namens MeinTank. Öffne die Kopie mit einem Texteditor wie Visual Studio Code oder Notepad++ (Rechtsklick → Öffnen mit). Du siehst Text, weil die Zeichnung durch bearbeitbare Anweisungen beschrieben wird.

   ✓

   Prüfen: MeinTank\HmixHorizontalTank.svghmi ist im Editor geöffnet.

2. 2

   Wo · TIA Portal → Unified-Gerät → Bilder

   Bereite das Bild vor, in dem du ihn platzierst

   Öffne oder erstelle ein Testprojekt mit einem WinCC-Unified-Gerät. Erstelle ein leeres Bild namens TestTank und speichere das Projekt. Notiere dir, wo sein Ordner liegt: standardmäßig unter Dokumente\Automation\<Projektname>.

   ✓

   Prüfen: Du hast die Grafikdatei im Editor und das Bild TestTank in TIA Portal und weißt, wo der Projektordner liegt.

Siemens · Unterstütztes SVG-Format und Einschränkungen

Der Tank besteht aus drei Teilen: einem festen Körper, einem blauen Rechteck für die Flüssigkeit und einem Ausschnitt in der Innenform des Tanks. Der Ausschnitt wirkt wie eine Schablone: Er blendet alles aus, was übersteht. Ändert sich der Füllstand, ändert sich nur der sichtbare Teil der Flüssigkeit.

Zeichnest du eine Ressource von Grund auf, erstellst du die Teile zuerst in einem Vektoreditor und speicherst sie als SVG; danach ergänzt du den HMI-Teil (Parameter und Verknüpfungen) mit einem Texteditor, wie in diesem Beispiel. Eine .svg einfach in .svghmi umzubenennen macht sie nicht dynamisch. Hier sind die Teile schon gezeichnet, und du passt ihr Verhalten an.

1. 1

   Wo · Texteditor → suchen (Strg+F) nach id="liquid"

   Finde den Teil, der sich verändert

   Suche nach id="liquid": Das ist das Rechteck, das die Flüssigkeit darstellt. Körper und Stützen stehen in anderen Zeilen und verändern sich nicht. Die Gruppe, die es enthält, verwendet clip-path, den Ausschnitt, der das Blau innerhalb des abgerundeten Umrisses hält.

   So ist der Tank in Ebenen aufgebaut

   1. 1

      Feste Zeichnung

      Körper, Stützen und Anschlüsse verändern sich nicht, wenn der Füllstand steigt.

   2. 2

      Flüssigkeitsrechteck

      Seine Höhe und die Position seiner Oberkante ändern sich. Die Unterkante bleibt an ihrem Platz.

   3. 3

      Innerer Ausschnitt

      Zeigt die Flüssigkeit nur innerhalb des abgerundeten Tankumrisses.

   Die Ebenen ergeben eine einzige Grafik

   FillLevel = 50

   Die Flüssigkeit steht auf halber Höhe und wird an den Enden beschnitten. Körper und Stützen behalten ihre Form.

   ✓

   Prüfen: Du weißt, welcher Teil die Flüssigkeit ist und warum sie wachsen kann, ohne aus dem Tank herauszuragen.

2. 2

   Wo · Texteditor → suchen nach hmi:paramDef

   Finde den Parameter und ändere seinen Anfangswert

   Weit oben, innerhalb von <hmi:self>, steht die Zeile, die FillLevel deklariert. type="number" besagt, dass er eine Zahl empfängt, und default="50" legt seinen Anfangswert fest. Ändere nur default="50" in default="25". Ändere den Namen FillLevel nicht: Unter diesem Namen siehst du ihn in TIA Portal.

   ✓

   Prüfen: Bei deiner Variante startet jeder neue Tank mit 25 % Höhe statt der ursprünglichen 50 %.

3. 3

   Wo · Texteditor → zurück zu id="liquid"

   Verfolge die Verbindung zwischen Zahl und Flüssigkeit

   Das Rechteck hat zwei Verknüpfungen: hmi-bind:height ändert die Höhe der Flüssigkeit und hmi-bind:y verschiebt ihre Oberkante; zusammen halten sie die Unterkante fest. Beide verwenden SafeLevel, einen in hmi:localDef mit Converter.Bounds berechneten Wert, der FillLevel zwischen 0 und 100 hält. Selbst wenn 140 oder −20 ankommt, tritt die Flüssigkeit also nie aus dem Tank aus. Ändere diese Zeilen nicht.

   ✓

   Prüfen: Du verstehst den ganzen Weg: Der Parameter empfängt eine Zahl, und die Verknüpfungen machen daraus eine sichtbare Höhe.

4. 4

   Wo · Texteditor → Speichern

   Speichere die Datei mit vollständiger Endung

   Speichere die Änderungen (Strg+S) mit UTF-8-Kodierung und behalte den Namen HmixHorizontalTank.svghmi bei. Prüfe im Explorer, dass er nicht auf .svghmi.txt endet. Öffne oder speichere diese Datei nicht mit einem allgemeinen Zeichenprogramm: Es könnte die Attribute hmi: und hmi-bind: entfernen, die sie dynamisch machen.

   ✓

   Prüfen: Du hast eine .svghmi mit der Zeichnung, ihrem Parameter und den Verknüpfungen dazwischen, bereit für TIA Portal.

In diesem Beispiel gibt der Prozentwert die Höhe der Flüssigkeit an. In einem liegenden Tank entsprechen 25 % der Höhe nicht 25 % des Volumens: Für eine Anzeige in Litern wäre eine Umrechnung anhand der Tankgeometrie nötig.

<?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 · Dynamische SVG-Grafiken erstellen (109782045)

TIA Portal sucht die dynamischen SVGs jedes Projekts in einem bestimmten Ordner und zeigt sie in der Palette Dynamische Widgets an, aus der du sie ins Bild ziehst.

1. 1

   Wo · Explorer → Ordner deines TIA-Projekts

   Kopiere die Datei in den Projektordner

   Wechsle im Projektordner in UserFiles (lege ihn an, falls er fehlt). Erstelle darin SVGControls, falls es noch nicht existiert, und kopiere deine geänderte Datei dorthin. Ziel ist der Projektordner, nicht der Installationsordner von Siemens.

   Wo du die Tankdatei speicherst

   In deinem Projektordner

   • Dein Projekt/
     • UserFiles/
       • SVGControls/
         • HmixHorizontalTank.svghmi

   Lege SVGControls an, falls es noch nicht existiert, und kopiere die Datei hierher.

   Danach im Bildeditor

   Aktualisiere in der Task Card Werkzeuge die Palette Dynamische Widgets und ziehe den Tank in ein Bild des Unified-Geräts.

   ✓

   Prüfen: Der Pfad endet auf UserFiles\SVGControls\HmixHorizontalTank.svghmi.

2. 2

   Wo · TIA Portal → TestTank → Werkzeuge → Dynamische Widgets

   Aktualisiere die Palette und ziehe den Tank ins Bild

   Klappe bei geöffnetem Bild in der Task Card Werkzeuge (Tools) die Palette Dynamische Widgets (Dynamic widgets) auf und klicke auf deren Aktualisieren-Schaltfläche. Suche den Tank – er erscheint als HMIx Horizontal Tank oder unter seinem Dateinamen HmixHorizontalTank – und ziehe ihn ins Bild. Erscheint er nicht, prüfe den Pfad aus dem vorherigen Schritt, bevor du weitermachst.

   ✓

   Prüfen: Im Bild TestTank steht eine Instanz des Tanks.

3. 3

   Wo · Ausgewählter Tank → Inspektorfenster → Eigenschaften

   Prüfe den Parameter, bevor du ihn verbindest

   Suche bei ausgewähltem Tank FillLevel unter seinen Eigenschaften (du kannst den Namen in das Suchfeld des Inspektorfensters eingeben). Sein Anfangswert sollte 25 sein, wenn du die Änderung vorgenommen hast, oder 50, wenn du das Original importiert hast. Gib den festen Wert 50 ein und bestätige: Die Flüssigkeit sollte im Bildeditor auf halber Höhe stehen.

   ✓

   Prüfen: Die Zeichnung reagiert auf einen festen Wert: Die Datei funktioniert, bevor du eine Variable hinzufügst.

Siemens · Dynamische SVG-Grafiken verwaltenSiemens · Dynamische SVG-Grafiken aktualisieren

Bisher war der Füllstand ein fester Wert. Jetzt verbindest du ihn mit einer Variablen, die du im laufenden Bild ändern kannst: Ein EA-Feld (Ein-/Ausgabefeld) schreibt in TankLevel, und der Tank liest dieselbe Variable über FillLevel. Kein JavaScript nötig.

1. 1

   Wo · TIA Portal → Unified-Gerät → HMI-Variablen

   Lege die Variable an, die den Füllstand speichert

   Öffne die Standard-Variablentabelle und füge TankLevel hinzu. Wähle in der Spalte Verbindung Interne Variable und einen numerischen Datentyp, zum Beispiel Real.

   ✓

   Prüfen: Dein Projekt hat die Variable TankLevel; die SVG-Datei hat weiterhin den Parameter FillLevel.

2. 2

   Wo · TestTank → ausgewählter Tank → Eigenschaft FillLevel

   Verbinde den Tankparameter mit dieser Variablen

   Wähle in der Spalte Dynamisierung von FillLevel den Eintrag Variable und dann TankLevel. Damit ersetzt du den festen Wert 50 durch den aktuellen Wert der Variablen.

   Von der eingegebenen Zahl zum sichtbaren Füllstand

   1. 1

      Du gibst 50 in das EA-Feld ein

      Wert

      50

      Im Ein-/Ausgabefeld gibst du während des Tests eine Zahl ein.

   2. 2

      Die HMI-Variable speichert 50

      TankLevel

      50

      TankLevel ist eine interne Variable. Du kannst sie testen, ohne eine SPS anzuschließen.

   3. 3

      Der Parameter FillLevel empfängt 50

      FillLevel

      50

      Verbinde FillLevel in den Eigenschaften des Tanks mit TankLevel.

   4. 4

      Die Flüssigkeit steht auf halber Höhe

      50%

      Teste danach 0 und 100, um beide Grenzen zu prüfen.

   ✓

   Prüfen: FillLevel bezieht seinen Wert aus TankLevel.

3. 3

   Wo · Werkzeuge → Elemente → EA-Feld

   Füge ein Feld zur Eingabe des Füllstands hinzu

   Ziehe ein EA-Feld neben den Tank. Wähle den Modus Ein-/Ausgabe und verbinde seinen Prozesswert mit TankLevel, derselben Variablen. Wenn du möchtest, setze den Text „Füllstand, 0–100 %“ daneben.

   ✓

   Prüfen: Tank und Zahlenfeld verwenden beide TankLevel, daher erscheint die eingegebene Zahl in der Zeichnung.

4. 4

   Wo · TIA Portal → Projektnavigation → HMI-Gerät

   Übersetze, öffne Runtime und teste 0, 50 und 100

   Klicke mit der rechten Maustaste auf TestTank und wähle Als Startbild festlegen. Übersetze das HMI-Gerät (Rechtsklick → Übersetzen → Software), behebe eventuelle Fehler und klicke auf Simulation starten oder lade das Projekt in deine Unified PC Runtime. Melde dich im Web-Client mit einem Projektbenutzer an (hast du keinen, lege ihn unter Security-Einstellungen → Benutzer und Rollen mit einer HMI-Rolle an und übersetze erneut). Gib im EA-Feld 0 ein und drücke Enter; wiederhole das mit 50 und 100.

   ✓

   Prüfen: Bei 0 ist keine Flüssigkeit zu sehen, bei 50 steht sie auf halber Höhe und bei 100 füllt sie den Innenraum. Umriss und Stützen bewegen sich nicht.

Der Schieberegler auf dieser Seite veranschaulicht nur das erwartete Verhalten. Er steuert dein TIA-Portal-Projekt nicht und ersetzt nicht den Test in Runtime.

• Er erscheint nicht unter Dynamische Widgets: Prüfe, ob die Datei in UserFiles\SVGControls des geöffneten Projekts liegt und auf .svghmi endet (nicht auf .svghmi.txt). Klicke in der Palette auf Aktualisieren; erscheint er dann immer noch nicht, vergleiche den Anfang der Datei mit dem Original-Download.
• Der Tank erscheint, aber du findest FillLevel nicht: Prüfe, ob du ihn aus Dynamische Widgets eingefügt hast. Ein als normale Grafik importiertes SVG hat keine Parameter.
• Der feste Wert funktioniert, aber das EA-Feld bewegt die Flüssigkeit nicht: Prüfe, ob Feld und FillLevel dieselbe Variable TankLevel verwenden und ob das Feld im Modus Ein-/Ausgabe ist. Bestätige jede Zahl mit Enter.
• Du kannst dich nicht in Runtime anmelden: Der Client verlangt einen Projektbenutzer. Lege ihn unter Security-Einstellungen → Benutzer und Rollen mit einer HMI-Rolle an, übersetze und lade erneut.
• Deine Änderung von 50 auf 25 ist nicht zu sehen: Prüfe, welche Kopie du in SVGControls gespeichert hast. Aktualisiere die Palette und teste eine neue Instanz: Eine bestehende Instanz behält den Wert, den sie bereits hatte.
• Es sieht anders aus als im Browser: WinCC Unified unterstützt nur einen Teil von SVG. Verwende unterstützte Formen und Effekte und prüfe das Ergebnis auf dem Zielgerät.

Sobald dieser Test funktioniert, kannst du dein SVG um Farbparameter (HmiColor) oder Sichtbarkeitsparameter (boolean) erweitern. Um es in Faceplates wiederzuverwenden, sieh dir das Siemens-Verfahren zum Erstellen eines dynamischen SVG-Typs in einer Bibliothek an.

Siemens · Dynamische SVG-Grafiken aktualisierenSiemens · Unterstütztes SVG-Format und EinschränkungenSiemens · Dynamische SVGs als Bibliothekstypen

Industrieanlagen zu zeichnen und ihre hmi-bind-Verknüpfungen von Hand zu schreiben, kostet Zeit. Der KI-Generator von HMIx (ai.hmix.tech) erstellt dynamische SVGs für WinCC Unified und V8 aus einer Beschreibung oder einem Referenzbild: Er zeichnet das Symbol oder die Anlage, schlägt die Parameter vor (Füllstand, Farben, Sichtbarkeit, Drehung) und erzeugt die .svghmi-Datei. Du kannst kostenlos mit dem Community-Plan starten.

Was du hier gelernt hast, gilt weiterhin: Import aus UserFiles\SVGControls, Verbindung der Parameter mit Variablen und Test in Runtime sind identisch.

1. 1

   Wo · ai.hmix.tech → Dynamisches SVG

   Beschreibe die Grafik, die du brauchst

   Nenne Anlage, Ansicht und Zustände, zum Beispiel: „Liegender Edelstahltank, Frontansicht, Flüssigkeitsstand 0–100 % und einstellbare Flüssigkeitsfarbe“. Wähle, ob du ein schematisches Symbol (R&I) oder eine detaillierte Anlage möchtest.

   ✓

   Prüfen: Die KI zeichnet eine erste Version, die du im Chat oder im Vektoreditor verfeinern kannst.

2. 2

   Wo · Generator → Schritte Definition und Simulation

   Prüfe Parameter und Simulation

   Prüfe die vorgeschlagenen Parameter (zum Beispiel einen Füllstand wie FillLevel) und verändere sie in der Simulation, um zu bestätigen, dass die Flüssigkeit von unten steigt und innerhalb des Umrisses bleibt.

   ✓

   Prüfen: Die Zeichnung reagiert in der Simulation wie erwartet.

3. 3

   Wo · Generator → Schritt Generierung und Installation

   Lade die .svghmi-Datei herunter

   Lade die erzeugte .svghmi herunter. Es ist eine einzelne Datei, wie die dieser Anleitung.

   ✓

   Prüfen: Du hast eine .svghmi, bereit zum Kopieren nach UserFiles\SVGControls.

4. 4

   Wo · TIA Portal → Dynamische Widgets

   Importiere und teste es wie hier

   Folge den Abschnitten „Importiere das dynamische SVG in TIA Portal“ und „Verbinde eine Variable“ mit den Namen deiner Parameter.

   ✓

   Prüfen: Dein mit KI erstelltes SVG verändert sich in Runtime mit deinen Variablen.

Im kostenlosen Plan werden generierte Ressourcen im HMIx-Katalog veröffentlicht, damit auch andere Nutzer sie verwenden können; mit kostenpflichtigen Plänen bleiben sie privat.