HMI

Drag & Drop editor for creating HTML5 visualizations. You will find this by default within the project tree as My HMI. The name of the HMI is displayed as a title in the browser tab and can be changed accordingly.

Create HMI

HMIs can be created with for any resolution. Each resolution represents a breakpoint. If the browser window becomes smaller than a given resolution, the next-smaller one is automatically selected; if the window becomes larger, the next-larger one is selected. This allows you to conveniently design fully-responsive HMIs.

Create new resolution

To create a new resolution, right click or click on the 3 dots on the topmost HMI node and select Add resolution folder. In the dialog you can choose from templates or set the resolution yourself.

Duplicate pages

If you want to duplicate all sub-pages of one resolution to another resolution, please right-click or click on the 3 dots on the corresponding folder and select Duplicate resolution. In the dialog you can select the new resolution. All subpages and elements will be duplicated accordingly.

HMI Editor

Tools

In Tools you can see all available controls. You can drag & drop them onto the drawing area and configure them.

Shortcuts

The shortcuts allow quick actions like backgating, repeat, clear artboard, show HTML code, or show/hide grid.

Drawing area

All controls can be placed in the drawing area and positioned using drag & drop.

Configuration bar

In the configuration bar you can edit the properties of the selected controls.

Layer overview

Here you can see all the elements as layers on the artboard. Via Position you can place them in front of or behind each other.