Dokumentation

Schnellstart

1. SVG laden — per Drag & Drop auf die Arbeitsfläche oder über Load SVG in der Symbolleiste. Die Datei wird beim Import automatisch bereinigt und optimiert, fehlende Element-IDs werden dabei erzeugt.
2. Element auswählen — auf der Arbeitsfläche oder im Elementbaum anklicken. Mit Strg- oder Umschalt-Klick wählen Sie mehrere aus und bearbeiten sie gemeinsam.
3. Bindung hinzufügen — im Bindungs-Panel Add Binding wählen und einen Typ aussuchen. Der Parametername ist das, was das Faceplate später in WinCC anbietet.
4. Simulieren — Simulate öffnet je Parameter ein Bedienelement, und die Zeichnung reagiert live. Dafür ist ein kostenloses Konto erforderlich. Beim Schließen kehrt die Arbeitsfläche zu Ihrem Entwurf zurück.
5. Exportieren — Export .svghmi erzeugt eine produktionsreife Datei für das TIA Portal, mit allen Parametern fertig deklariert für das Faceplate.

Alle fünf Schritte an einer Grafik: Einen Motor als laufend, gestoppt oder gestört anzeigen.

Navigation auf der Arbeitsfläche

• Zoomen — Mausrad über der Arbeitsfläche, Pinch-Geste auf dem Trackpad, die Schaltflächen − / + unten links oder die Tasten + und −. Auf einem Touchscreen mit zwei Fingern aufziehen.
• Einpassen — 0 drücken oder auf die Prozentanzeige bzw. die Einpassen-Schaltfläche klicken. „100 %“ bedeutet, dass die Zeichnung das Panel ausfüllt — unabhängig davon, wie groß die Datei angelegt ist. Auch sehr kleine Grafiken füllen damit den Arbeitsbereich.
• Verschieben — Leertaste halten und ziehen; das funktioniert überall, auch über einer Form. Mit gedrückter mittlerer Maustaste ziehen oder mit links auf leerem Hintergrund tut dasselbe. Ziehen Sie ohne Leertaste mit links an einer Form, verschieben Sie die Form.

Zoomen und Verschieben wirken sich nur auf die Vorschau aus, nie auf die exportierte Datei.

Bindungstypen

Eine Bindung verknüpft eine Eigenschaft eines Elements mit einem Parameter, den das Faceplate in WinCC anbietet. Der Parametertyp sagt Ihnen, was das Faceplate später abfragt.

Jeder Typ mit einem Beispiel hat eine eigene Seite — was er macht, wann man ihn nimmt und welche Tutorials ihn verwenden. Ausgangspunkt istdie Tutorial-Übersicht.

Bedingte Farben

Vier Bindungstypen steuern eine Farbe aus etwas anderem als einem Farbparameter. Wählen Sie den Typ, der zur Form Ihrer SPS-Daten passt:

• Cond. Fill / Stroke (Boolean) — ein Bool, zwei Farben. „Rot, wenn das Alarmbit gesetzt ist, sonst grau.“
• Cond. Fill / Stroke (Multi-Bool) — eine Liste boolescher Parameter mit je eigener Farbe plus Fallback. Der erste Parameter, der wahr ist, gewinnt — die höchste Priorität gehört also nach oben.
• Cond. Fill / Stroke (Number) — ein ganzzahliger Parameter und eine Tabelle aus Wert-→-Farbe-Zeilen plus Fallback. Genau das ist der Typ für eine Zustandszahl aus der SPS.

Ein Farbfeld kann Fest sein — hier zur Entwurfszeit gewählt — oder Parameter. Dann entsteht ein HmiColor-Parameter, und WinCC liefert die Farbe zur Laufzeit.

Prioritätsreihenfolge in der Praxis, an zwei Endschaltern:Ein Ventil als offen, geschlossen, fahrend oder gestört anzeigen. Referenz zum Typ: Cond. Fill (Multi-Bool).

Farbe über eine Zustandszahl aus der SPS steuern

Ein häufiges Muster: Die SPS schreibt für den Zustand eines Geräts eine einzelne Ganzzahl, und jeder Zustand soll eine andere Farbe zeigen. Dafür gibt es Cond. Fill (Number):

1. Form auswählen und eine Cond. Fill (Number)-Bindung hinzufügen.
2. Als Parameternamen eintragen, was das Faceplate anbieten soll — zum Beispiel State.
3. Pro Zustand eine Zeile anlegen. Jede Zeile besteht aus Wert und Farbe: 0 → Rot, 1 → Gelb, 2 → Grün.
4. Die Fallback-Farbe für alle nicht aufgeführten Werte setzen.

Die Zeilen werden von oben nach unten ausgewertet, der erste Treffer gewinnt — ein doppelt vergebener Wert macht die spätere Zeile also unerreichbar. Schalten Sie die Simulation ein und gehen Sie den Parameter einmal durch alle Zustände, um das Ergebnis vor dem Export zu prüfen.

Dasselbe Muster von Anfang bis Ende, mit einer Datei zum Öffnen:Maschinenzustände aus einem SPS-Zustandswort anzeigen.

Farbpalette

Der Reiter Palette enthält benannte Farben — ein Alarmrot, ein Hausgrau — damit Sie nicht jedes Mal einen Farbwert neu eintippen müssen.

Vergeben Sie im Palette-Reiter je Farbe einen Namen und einen Wert. Diese Farbfelder erscheinen anschließend unter jedem Farbwähler im Bindungs-Panel: bei Standard-Füll- und -Konturfarben, bei Aktiv- und Standardfarbe einer booleschen Bedingung sowie in jeder Zeile einer Multi-Bool- oder numerischen Farbtabelle. Ein Klick auf ein Farbfeld übernimmt die Farbe.

Die Palette ist eine Hilfe zur Entwurfszeit. Sie liegt nur in Ihrem Browser, wird nie hochgeladen und ist nicht Teil des exportierten Widgets — ein Klick übernimmt die Farbe schlicht in die Bindung. Soll WinCC die Farbe zur Laufzeit steuern, stellen Sie das Farbfeld stattdessen auf Parameter.

Simulation

Das Öffnen der Simulation setzt — wie Export und XML-Ansicht — ein kostenloses Konto voraus. Die Simulationsleiste listet jeden Parameter auf, den Ihre Bindungen erzeugt haben, und gibt ihm ein passendes Bedienelement: einen Farbwähler für HmiColor, einen Schalter für boolean, einen Schieberegler mit Zahlenfeld für number, ein Textfeld für string.

Die Simulation wirkt nur auf die Vorschau, nie auf die exportierte Datei. Beim Schließen der Leiste erscheint wieder die unsimulierte Zeichnung, und das Entfernen einer Bindung macht sofort rückgängig, was sie angezeigt hat.

Bearbeiten

• Gruppieren und Gruppierung aufheben, Reihenfolge über nach-vorn und nach-hinten ändern, kopieren und einfügen.
• Eine Form auf der Arbeitsfläche ziehen verschiebt sie; eine Zeile im Elementbaum ziehen hängt sie um.
• Rückgängig und Wiederherstellen umfassen 50 Schritte. Ein Farbzug oder ein getippter Parametername kostet einen Schritt, nicht einen pro Tastendruck.
• Das Attribut-Panel bearbeitet die Eigenschaften des gewählten Elements direkt.
• Wählen Sie mehrere Elemente aus, um eine Bindung auf allen gleichzeitig anzulegen oder zu ändern. Wo sich Werte unterscheiden, zeigt das Feld Gemischt und bleibt leer, bis Sie es bewusst setzen.

Vorhandenes Widget importieren

Beim Laden einer .svghmi-Datei werden Bindungen, Ereignisse, Parameter und Metadaten rekonstruiert — Sie können ein früher exportiertes Widget also nahtlos weiterbearbeiten. Änderungen, die außerhalb von DynSVG von Hand an der Datei vorgenommen wurden, bleiben beim erneuten Import möglicherweise nicht erhalten; bewahren Sie davon eine Kopie auf.

Kostenlose Version

Die kostenlose Version erlaubt drei Bindungen pro Widget. Beim Laden einer Datei mit mehr Bindungen bleiben die ersten drei erhalten. Die Lizenzbedingungen für exportierte Dateien stehen in den AGB.

Fehlt etwas?

Über die Feedback-Schaltfläche in der Editor-Kopfzeile können Sie uns Ihre Anregungen schicken. Neue Funktionen stehen im Änderungsprotokoll.