Einen horizontalen Tank als dynamisches SVG für WinCC Unified erstellen

SVG beschreibt ein Bild mit Formen und Linien statt mit einem festen Pixelraster. Es eignet sich für Symbole, die in verschiedenen Größen scharf bleiben sollen: Tanks, Ventile, Motoren und Anzeigen.

Ein parametriertes Widget für WinCC Unified verwendet das Format .svghmi. Es ergänzt die Grafik um eine Schnittstelle mit Parametern wie FillLevel oder einer Farbe. Diese lassen sich in TIA Portal mit HMI-Variablen verbinden. Ein Wert verändert die Grafik; für einen Tank von 0 bis 100 Prozent brauchst du keine 101 Einzelbilder.

Ein normales .svg kann als Grafik verwendet werden. Die Umbenennung in .svghmi allein fügt jedoch keine dynamische Schnittstelle hinzu.

• Nutze dynamische SVGs für Füllstände, Gerätezustände, Farbwechsel oder einfache wertgesteuerte Bewegungen.
• Wähle ein CWC für eine umfangreichere Weboberfläche, eine spezielle Tabelle oder mehrere Interaktionen.
• Beginne mit einer einfachen Grafik, damit die Wirkung jedes Parameters klar bleibt.

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

Verwende ein Testprojekt mit Unified-Gerät, leerem Bild und kompatiblen Runtime- oder Simulationskomponenten. Diese Anleitung orientiert sich an V21.1; andere WinCC-Editionen und ältere Versionen können abweichen.

• Zum Zeichnen eignen sich ein Vektoreditor wie Inkscape und ein Texteditor für die HMI-Schnittstelle.
• Für einen direkten Test kannst du unten unser kleines .svghmi-Beispiel herunterladen. Eine SPS ist nicht nötig.
• Verwende Formen und Effekte, die WinCC Unified unterstützt. Eine korrekte Browserdarstellung beweist nicht, dass jedes SVG-Element auf dem HMI-Gerät funktioniert.

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

Der Tank besteht aus einem abgerundeten Körper, zwei Stützen und Farbverläufen für die Metalloptik. Die Flüssigkeit ist ein separates Rechteck, das innerhalb des Tanks beschnitten wird. Nur ein Parameter ändert sich: FillLevel von 0 bis 100.

1. 1

   Statische Teile zeichnen

   Zeichne den horizontalen Körper, die Stützen und den oberen Anschluss. Verwende eine viewBox von 400 × 250. Lege die Tanksilhouette in einem clipPath ab, damit die Flüssigkeit nicht über die abgerundeten Enden hinausragt.

2. 2

   HMI-Schnittstelle hinzufügen

   Ergänze im Texteditor die Siemens-HMI-Namensräume und einen Abschnitt hmi:self. Definiere FillLevel mit hmi:paramDef, Typ number und Standardwert 50. Unsere vollständige Datei enthält diese Struktur bereits.

3. 3

   Flüssigkeitsfläche anbinden

   Verknüpfe hmi-bind:height und hmi-bind:y mit ParamProps.FillLevel. Mit wachsender Rechteckhöhe steigt seine Oberkante; der Boden bleibt fest. Der clipPath begrenzt die Flüssigkeit, Converter.Bounds den angezeigten Wert auf 0–100.

4. 4

   Als .svghmi speichern

   Speichere das XML als UTF-8 mit der Endung .svghmi, nicht .svghmi.txt. Bewahre eine bearbeitbare Kopie auf. Ein allgemeiner Vektoreditor kann beim erneuten Speichern Siemens-Attribute entfernen; vermeide diesen Schritt nach dem Einfügen der Bindungen.

FillLevel bezeichnet hier den prozentualen Flüssigkeitsstand nach Höhe. Bei einem horizontalen Tank entspricht dieser meist nicht dem Volumenanteil. Für Liter oder Volumen ist 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://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 · Dynamische SVG-Grafiken erstellen (109782045)

1. 1

   Datei im Projekt ablegen

   Erstelle bei Bedarf UserFiles\SVGControls im Projektordner. Kopiere HmixHorizontalTank.svghmi dorthin. Für diesen Ablauf gehört die eigentliche .svghmi-Datei in den Ordner, kein ZIP.

2. 2

   Dynamische Widgets öffnen

   Öffne das Unified-Bild und Werkzeuge → Dynamische Widgets (Tools → Dynamic widgets). Aktualisiere die Palette nach dem Hinzufügen oder Ändern. Wird eine neue Datei nicht angezeigt, öffne das Projekt erneut.

3. 3

   Platzieren und prüfen

   Ziehe HMIx Horizontal Tank ins Bild. Suche in seinen Eigenschaften den benutzerdefinierten Parameter FillLevel und stelle den statischen Wert 50 ein. Prüfe die Darstellung, bevor du eine Variable verbindest.

Verwende für diese Datei Dynamische Widgets. Ein gewöhnliches SVG in die Grafiksammlung zu importieren ist ein anderer Ablauf und erzeugt diese Parameter nicht.

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

1. 1

   Internen Wert anlegen

   Erstelle die interne HMI-Variable TankLevel mit einem numerischen Datentyp, etwa Real, ohne SPS-Verbindung. Diesen Wert wirst du von Hand ändern.

2. 2

   Parameter verbinden

   Markiere den Tank, wähle für FillLevel die Dynamisierung Variable und anschließend TankLevel. Der Parametername gehört zur SVG-Datei, der Variablenname zum HMI-Projekt.

3. 3

   Numerisches E/A-Feld hinzufügen

   Platziere es neben der Grafik, wähle Eingabe/Ausgabe und verbinde den Prozesswert ebenfalls mit TankLevel. Setze, falls verfügbar, Eingabegrenzen von 0 und 100.

4. 4

   Übersetzen und drei Werte testen

   Lege das Startbild fest, übersetze die HMI und starte die unterstützte Simulation oder die Unified-PC-Test-Runtime. Öffne den Runtime-Client, melde dich bei Bedarf an und gib nacheinander 0, 50 und 100 ein. Bestätige jede Eingabe und beobachte die Flüssigkeit.

5. 5

   Größe und erneutes Öffnen prüfen

   Öffne das Bild erneut und prüfe den aktuellen Wert. Teste eine zweite Instanz in anderer Größe: Der Umriss soll scharf und die Füllung innerhalb des Tanks bleiben.

Der Schieberegler unten erklärt das erwartete Ergebnis. Er ist unabhängig von TIA Portal und kommuniziert nicht mit deinem Projekt.

• Das Widget fehlt: Prüfe UserFiles\SVGControls, die tatsächliche Dateiendung, gültiges XML und die HMI-Schnittstelle. Aktualisiere anschließend die Palette.
• Der Tank erscheint, füllt sich aber nicht: Prüfe die HMI-Bindungen und ob FillLevel dieselbe Variable wie das E/A-Feld verwendet.
• Die Füllung wächst nach unten: Die obere Position muss sich gleichzeitig mit der Höhe ändern. Unser Beispiel hält den Boden fest.
• Die Darstellung weicht vom Vektoreditor ab: Vereinfache nicht unterstützte Effekte, CSS und Schriftabhängigkeiten. Prüfe das Zielgerät zusätzlich zur Browservorschau.
• Eine Aktualisierung verliert Verknüpfungen: Umbenannte, entfernte oder im Typ geänderte Parameter können Instanzen beschädigen. Behalte die Schnittstelle bei oder konfiguriere die betroffenen Instanzen neu.

Nach dem erfolgreichen Test im Bild kannst du dynamische SVG-Bibliothekstypen zur Wiederverwendung in Bildern und Faceplates erkunden. Das ist ein nächster Schritt, keine Voraussetzung für diesen Test.

Siemens · Dynamische SVG-Grafiken aktualisierenSiemens · Dynamische SVGs als Bibliothekstypen