HMI Navigation

logiccloud allows splitting the HMI into multiple pages and navigating between them at runtime. To improve reuse and flexibility, the navigation mechanism supports sending parameters to the target pages, which can be used for dynamically modifying the page contents.

Page structure

The first page in the HMI is always the default page. This will be automatically loaded when the HMI is opened. Any other page added to the HMI serves as a sub-page.

Every page in the HMI shares the same set of breakpoints, and at each breakpoint a page is sized to that breakpoint’s width and height. At runtime, the page is rendered at whichever breakpoint best matches the browser window.

Placeholders

HMI pages offer the possibility of defining text placeholders that can be referenced on the elements placed on the page. Placeholders can be used in any property of the component by using the syntax ##placeholder_name##. This text will be replaced at runtime with tha actual placeholder value supplied through the navigation mechanism.

Placeholders can be placed anywhere inside the text.

For example a dynamic variable name could be: L##LINE##_M##MACHINE##_ACTIVE. During runtime, if the LINE placeholder is set to 1 and the MACHINE placeholder is set to 2, the resulting variable name will be L1_M2_ACTIVE. This should match an I/O (access variable) defined in the runtime.

This allows creating a more abstract and generalized page, that can easily be reused for identical items.

Tip

To effectively use this mechanism for variables, for example, they should be named in a consistent and hierarchical way. See Example use case below for an example.

Tip

Although there is no rule in placeholder naming, it is reccommended to use a consistent naming format using uppercase letters and underscores. Ex. PROD_LINE_NUMBER, FLOOR etc. This makes the placeholders stand out in the properties text.

Usage with templates

Deprecated

This section describes the legacy templates workflow. HMI Templates and the Template Panel component are deprecated. New HMIs should use Custom Components for reusable layouts — placeholder propagation from pages works the same way.

For flexible and reusable layouts, pages with placeholders and templates with placeholders can be used together. The two concepts work in the same way and page placeholders can be used as placeholder values for the template. When the user will navigate to the page, the page placeholder values will be replaced with their actual values. In turn, this will set the values for template placeholders, which will internally replace them with.

This mechanism can be used recursively, i.e. Pages with Template Panels pointing to Templates that contain other Template panels inside.

Tip

Breaking down complex HMI pages into smaller elements placed in templates, then using the templates and pages with parameters can improve the reusability of the HMI elements without the need to duplicate items visually.

Example use case

Factory floor with production lines

The HMI must replicate the structure of a factory floor, having multiple identical production lines. Each production line has the following elements:

• Started state
• Uptime
• Start trigger
• Product count

To effectively design such a system, the runtime will have access variables for each production line, prefixed by the line number as follows:

Variable name	Type	Direction
L1_START	BOOL	INPUT
L1_STARTED	BOOL	OUTPUT
L1_UPTIME	DT	OUTPUT
L1_PROD_COUNT	INT	OUTPUT
L2_START	BOOL	INPUT
L2_STARTED	BOOL	OUTPUT
L2_UPTIME	DT	OUTPUT
L2_PROD_COUNT	INT	OUTPUT
…	…	…
L<n>_START	BOOL	INPUT
L<n>_STARTED	BOOL	OUTPUT
L<n>_UPTIME	DT	OUTPUT
L<n>_PROD_COUNT	INT	OUTPUT

The HMI can have a production line page with a placeholder named LINE.

Inside the HMI, the components can reference the variables by using the placeholder syntax:

• ##LINE##_START
• ##LINE##_STARTED
• ##LINE##_UPTIME
• ##LINE##_PROD_COUNT

Each Naviagation Component , used for the lines on the main page will pass a value for the LINE placeholder:

• L1
• L2
• ...
• L<n>

This will result in replacing the placeholder with the passed value so for example, when navigating from an item that sets the placeholder to L2, the actual line page will use the replaced variable names:

Variable name
L2_START
L2_STARTED
L2_UPTIME
L2_PROD_COUNT

Active page handling

The HMI navigation system can detect which page is active and reflect this automatically in the state of the Navigation Item component.

Basic active page status

The most basic detection is based on the page itself. If the current page is the same as the target page on the Navigation Item, the item will switch to its active state (typically changes the background and foreground color).

Active page with placeholders

In more advanced scenarios, where pages have Placeholders defined, the active state will be set if the current page and placeholder values match the ones on the Navigation Item.

Multi-level navigation

The most complex scenario is having multi-level navigation. For example, the navigation menu could look like:

Home
├── Line 1
│   ├── Machine 1
│   └── Machine 2
└── Line 2
    ├── Machine 1
    └── Machine 2

If the lines and machines are identical, the HMI pages would be:

Home
Line
Machine

When the user navigates to Machine 1, the corresponding navigation item will be set to active, but Home and Line 1 will not, because they point to other pages.

To enable these navigation items to also reflect the active state (which would highlight the current deep page), the HMI offers the concept of Navigation tags. Each page can have one or more navigation tags defined. These are plain text strings.

Navigation components can also have navigation tags set on them. The navigation component will be active in two cases:

1. The page and placeholder match the navigation item (see Basic active page status and Active page with placeholders sections above), or:
2. The page and navigation item share at least one navigation tag. If at least one navigation tag matches, the component will become active.

Note

Pages and navigation items can have multiple navigation tags, allowing them to become active when the user goes through different navigation paths. For the navigation item to become active at least one of them must match (but it is not required that all tags match).

Features

Configuration

This section controls the behavior and parametrization of the page.

Placeholders - the placeholders section allows defining text placeholders that can be referenced inside the page. Placeholders can be added by clicking on the green add button next to the Placeholders text:

Tip

Multiple placeholders can be defined on a page

Note

For using placeholders in the Naviagation Components, they need to be defined first on the page. Once defined, they will be displayed in the navigation component placeholder section and values can be provided for them.

Navigation tags - the navigation tags are an advanced mechanism used for creating deep navigation structures (see the Multi-level navigation section above for more details). Navigation tags can be added by clicking on the green add button next to the Navigation tags text: