SVG´s im QuickHMI Editor

Erstellen Sie mit dem QuickHMI Editor ganz einfach Ihre individuellen Steuerelemente.

Wie Sie dies realisieren, erfahren Sie in den folgenden Kapiteln



Anlegen und Löschen eines SVG Steuerelements

Um ein neues SVG Steuerelement anzulegen, klicken Sie im Projekt Explorer auf „SVG Steuerelemente“.


Es öffnet sich der "SVG Control Manager", der ähnlich aufgebaut ist, wie der "HTML Manager".

Mit dem Plus-Icon haben Sie jetzt die Möglichkeit, eine neues SVG anzulegen.




Bestimmen Sie anschließend den Namen Ihres neuen SVG´s, und bestätigen Sie mit „OK“.




Ein noch leeres SVG wird erstellt, für welches jetzt via Syntax Eigenschaften und Aktionen, sowie Inhalte definiert werden können.

Dies geschieht im Bereich „SVG“ des „SVG Control Managers“. QuickHMI zeigt Ihnen an, welche Zeilen dafür zuständig sind.



Wie genau Sie Aktionen und Eigenschaften definieren, erfahren Sie im folgenden Kapitel:


>> Hinzufügen von Eigenschaften und Aktionen


Haben Sie das SVG definiert, lassen Sie Ihre Eingaben überprüfen. Verwenden Sie dazu den „Überprüfen“-Button.

Dieser wird nach Abschluss der Überprüfung ausgegraut. Das definierte SVG erscheint anschließend unten im Bereich „Vorschau“. 

m Bereich „Erkannte Eigenschaften“ werden Ihnen alle Eigenschaften und Aktionen, die Sie für das SVG definiert haben, aufgelistet.




Für weitere Informationen, schauen Sie auch im Unter-Thema "ViewBox".


>> ViewBox




Zusätzlich können Sie bestimmen, welcher Bereich des „SVG Control Managers“ groß hervorgehoben werden soll.

Verwenden Sie dazu das kleine Rahmen-Icon in der oberen Ecke eines jeden Bereiches.




Um das SVG Steuerelement abschließend zu erstellen, klicken Sie auf den Disketten-Button in der Toolbar des SVG Control Managers.

Mit dem Rückgängig-Button recht daneben, können Sie zuvor getätigte Eingaben und Änderungen wieder rückgängig machen.




Das erstellte SVG Steuerelement erscheint bei den anderen Steuerelementen unter „SVG“. Sie können mit Ihnen so interagieren,

wie Sie es mit allen anderen Steuerelementen bereits kennen.


Wie Sie SVG Steuerelemente, sowie Standard-Steuerelemente verwenden, erfahren Sie im folgenden Kapitel:


>> Verwendung von Steuerelementen





Exportieren und importieren von SVG´s

Um ein erstelltes Steuerelement zu exportieren, klicken Sie einfach auf den Export-Button innerhalb der Toolbar. 

Wählen Sie anschließend noch den Dateipfad aus, und exportieren Sie das SVG. Dieses wird unter demselben Namen exportiert, wie Sie es im „SVG Control Manager“ erstellt haben.




Das SVG kann dann beispielsweise in einem Browser Ihrer Wahl geöffnet werden.




Um ein vorhandenes Steuerelement zu importieren, wählen Sie den Import-Button.

Wählen Sie anschließend Ihr gewünschtes SVG aus und bestätigen Sie. Dieses wird dann in den „SVG Control Manager“ geladen und kann bearbeitet werden.