HMI

The HMI section of a project allows defining HTML5-based visualisations using an integrated drag & drop editor. You will find this in the project tree as “My HMI” by default. The name of the HMI is displayed as the title in the browser tab and can be changed accordingly.

Note

HMI support depends on the project type. *PLC only and PLC library projects do not support HMI screens. For more details, check the Project types section of the documentation.

Creating the HMI

The HMI editor supports creating one or more pages to display data from the runtime. To target multiple screen sizes — for example a 24” panel PC, a 10” tablet, and a phone — the editor offers a responsive breakpoints workflow. At runtime, the browser picks the closest matching breakpoint based on the available window size, and the page lays itself out accordingly.

Responsive breakpoints

A single page defines all of its components once and reuses them across one or more breakpoints. Each breakpoint is a named size target (for example Desktop 1920×1080, Tablet 1024×768, Mobile 375×667). Breakpoints are managed from the responsive footer at the bottom of the editor — click a breakpoint to switch the canvas to that size, or use the + button to add a new one (name, width, height).

The key idea is that every component on the page is a single instance shared by every breakpoint:

• Configure once. Attributes such as color, font, states, target variables, behavior and interactions are set once on the component and apply at every breakpoint. There is no need to re-enter the same configuration for every screen size.
• Place and resize per breakpoint. Only the component’s geometry — position, size, placement / pin / stretch, offsets, and visibility — is stored per breakpoint. Switch to a breakpoint, move or resize the component, and the change applies only to that breakpoint.
• Hide per breakpoint. A component can be hidden at specific breakpoints without affecting the others (for example, hide a side panel on mobile but keep it on tablet and desktop).
• One source of truth. When you need to change a component’s color, label, target variable, or state logic, edit it once and every breakpoint immediately reflects the change. No more visiting every resolution folder and reapplying the same edit.

This is the recommended workflow for new HMIs.

HMI resolutions (Legacy)

Deprecated

Multi-resolution HMI projects — where each screen size lives in its own resolution folder with an independent set of pages and components — are deprecated. Existing legacy projects continue to work and are not removed, but they are no longer actively supported. The Responsive breakpoints workflow above replaces them and addresses their main pain point: in the old model, every resolution duplicated the same component instances, so any change had to be repeated across each resolution folder by hand.

In the legacy model, the navigation and structure of the HMI could be adjusted independently for each screen size, since each resolution held its own pages. At runtime, the HMI would pick the next equal or smaller resolution and render that one.

Create new HMI resolution

To create a new resolution, right click or click on the 3 dots on the “My HMI” tree node and select Add resolution folder.

A dialog will be displayed, where either a standard resolution can be selected, or a custom one can be manually input:

Duplicate HMI resolution

The typical workflow involved creating the HMI screen at the highest resolution, then duplicating and adjusting the layout for lower resolutions. This was achieved by using the ‘Duplicate resolution’ feature from the main HMI context menu.

Creating HMI pages

When adding an HMI resolution, a page will be added by default. The first page in the list is the default (home page). Multiple pages can be added either by choosing the ‘Add page’ or ‘Duplicate page’ options in the resolution context menu:

Further details