SVG´s in the QuickHMI Editor

Create easily your own custom controls with the QuickHMI Editor.

How to do this you will learn in the following chapters.

Create and delete SVG controls

To create a new SVG control, click on "SVG controls" in the Project explorer.

It opens the „SVG Control Manager“, which is like the HTML Manager. With the plus icon you have the option to create a new SVG.

Then determine the name of your new SVG and continue with "OK".

An empty SVG is created for which properties, actions and contents can be defined via syntax. This happens in the "SVG" area of the "SVG Control Manager".

QuickHMI shows you which code lines are responsible for this.

How you define actions and properties you see in the following chapter:

>> Add actions and properties

After you have defined the SVG, check your entries. Use the "Check"-button. This will be greyed out after finish of the checkup.

Then the defined SVG appears at the bottom of the "Preview" section. The “Detected properties” section lists all the properties and actions that you have defined for the SVG.

For more information, see the "ViewBox" sub topic.

>> ViewBox

In addition, you can specify which section of the "SVG Control Manager" should be highlighted. Use the small frame icon in the top corner of each section.

To finally create the SVG control, click on the left diskette icon above the "SVG" section. With the right diskette icon (with the red X),

you can undo previously made entries and changes.

The created SVG control appears under "SVG" with the other controls. With these SVG controls you can interact like all the other controls.

How to use SVG controls and standard controls, you see in the following chapter:

>> Using the control elements

Export and import SVG´s

To export a created control element, click on the dedicated button in the "SVG controls" section.

Then select the file path and export the SVG. This will be exported under the same name as created in the "SVG Control Manager".

For example, the SVG can be opened in a browser.

To import an existing control, click on the dedicated button in the "SVG controls" section. Then select your desired SVG and confirm.

This will be loaded into the "SVG Control Manager" and can be edited.