Responsive breakpoints

Responsive breakpoints let you design a single HMI page once and have it adapt to several screen sizes — for example a 24” panel PC, a 10” tablet, and a phone. You configure each component a single time, then fine-tune only its layout (position, size, placement, visibility) for each target size. At runtime, the page automatically renders the layout that best matches the available window size.

This is the recommended workflow for all new HMIs. If you are working with an older project that uses separate resolution folders, see HMI resolutions (Legacy) on the HMI overview page — that model is deprecated and behaves differently.

What a breakpoint is

A breakpoint is a named size target with a width and a height, for example:

Name	Width	Height
Desktop	1920	1080
Tablet	768	1024
Mobile	375	812

These three are the default breakpoints that every new responsive HMI starts with. You are free to rename them, change their dimensions, add more, remove the ones you do not need, or reorder them — see the breakpoint footer below.

A breakpoint does not create a separate copy of your page. Every page in a responsive HMI has exactly one set of components, shared across all breakpoints. The breakpoint only changes how the canvas is sized while you edit, and which per-breakpoint layout values are shown and saved.

The configure-once principle

The core idea of the responsive model is configure once, lay out per breakpoint:

• Configure once. A component’s behavior — color, font, text, states, target variables, interactions, navigation, and every other setting in the configuration bar — is set once and applies at every breakpoint. You never re-enter the same configuration for a different screen size.
• Lay out per breakpoint. Only a component’s geometry is stored per breakpoint: its position, its size, its placement / pin / stretch, its offsets, and whether it is hidden. Switch to a breakpoint, move or resize the component, and the change applies only to that breakpoint.
• 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.

This single-instance principle is the main advantage over the legacy resolution model, where each screen size duplicated the same components and every change had to be repeated by hand in every resolution folder.

The breakpoint footer

In a responsive HMI, the editor shows a breakpoint footer along the bottom of the canvas. (In legacy projects this footer is hidden — its presence is how you can tell you are in a responsive HMI.)

The footer has two areas:

Breakpoint tabs (left)

Each breakpoint appears as a tab showing its name and its width×height. From here you can:

• Switch breakpoint — click a tab to resize the canvas to that breakpoint and edit the layout for that size. The active tab is highlighted.
• Add a breakpoint — click the + button, then enter a name, width, and height in the popover.
• Edit a breakpoint — click the pencil button to edit the currently active breakpoint’s width and height. (The name of an existing breakpoint cannot be changed from the edit popover.)
• Delete a breakpoint — open the edit popover and click Delete. The last remaining breakpoint cannot be deleted.
• Reorder breakpoints — drag a tab and drop it in a new position. The order is purely organisational; it does not change which breakpoint the runtime picks.

Zoom controls (right)

The right side of the footer holds the canvas zoom: a zoom-out button, a slider (10%–400%), a percentage label that resets zoom to 100% (and recenters the canvas) when clicked, and a zoom-in button. Zoom only affects your editing view — it has no effect on what the runtime renders.

Laying out a component per breakpoint

Select a component on the canvas to show its selection handles, then adjust its layout for the active breakpoint.

Each of the following is stored per breakpoint, so the same component can sit and size differently on Desktop, Tablet, and Mobile:

• Place. Drag the component to position it. Its position is remembered for the active breakpoint only.

• Resize. Drag any of the eight resize handles. The new size applies to the active breakpoint only.

• Placement (pin / stretch). Instead of an absolute position, a component can be pinned to an edge or center of the page, or stretched to fill horizontally, vertically, or full-screen. Placement keeps the component anchored when the rendered window does not exactly match the breakpoint size.

  Placement	Behavior
  pinLeft / pinRight	Anchor to the left or right edge.
  pinTop / pinBottom	Anchor to the top or bottom edge.
  pinCenter	Center horizontally on the page.
  stretchHorizontal	Stretch to span the page width, respecting left/right offsets.
  stretchVertical	Stretch to span the page height, respecting top/bottom offsets.
  fullScreen	Fill the page, respecting all four offsets.

• Offsets. When a component is pinned or stretched, its offsets (left / right / top / bottom) set the gap between the component and the edge it is anchored to. Offsets are stored per breakpoint.

• Hide. 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. Hidden components are simply not rendered at that breakpoint.

Settings that change rendering behavior

Placement, offsets, and hide are the layout settings that change how a page renders at a given screen size. Because they are stored per breakpoint, always confirm you are on the intended breakpoint tab before adjusting them.

Apply an attribute to all breakpoints

Sometimes you set a per-breakpoint value on one breakpoint and then decide every breakpoint should use it. Use Apply attribute to all breakpoints to flatten the current breakpoint’s value for that geometry or offset key onto every other breakpoint at once, instead of switching to each tab and re-entering the value by hand.

How the runtime picks a breakpoint

You design each breakpoint’s layout in the editor; the runtime decides which one to render. When the HMI is opened, the page measures the available window size and renders the layout for the matching breakpoint, switching layouts live if the window is resized. Because all breakpoints share one set of components, switching breakpoints only re-positions, re-sizes, or hides components — it never reloads the page or re-evaluates your configuration.

This is fundamentally different from the legacy resolution model, where the runtime picked the next equal-or-smaller resolution folder and rendered that folder’s independent copy of the pages. See HMI resolutions (Legacy).

See also

• HMI overview — creating the HMI and its pages.
• HMI Editor — the editing surface, tools, and configuration bar.
• Custom Components — the recommended way to reuse components across pages and projects (replaces legacy templates).