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.
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. Depending on the target screen size, multiple resolutions can be defined, each with its own dedicated layout. At runtime, in the browser window, the HMI will automatically choose the best resolution for the screen or browser window size by picking the next equal or smaller resolution. This is done automatically and dynamically, which means the HMI design will respond to resizing the browser.
Since the resolutions are independent, the navigation and structure of the HMI can be adjusted independently for each screen size, allowing different structures and layouts for each resolution, all powered by a responsive behavior.
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 involves creating the HMI screen at the highest resolution, then duplicating and adjusting the layout for lower resolutions. This can be easily 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
📄️ HMI Editor
HMI Editor
📄️ HMI Templates
With logiccloud HMIs you can use templates to create reusable components and pages, and use placeholders to dynamically insert data in those templates. This allows you to create a consistent look and feel for your HMI and to reuse components across multiple pages, while maintaining the flexibility to display different data in the same component. This also helps with decluttering your HMIs, especially when they grow more complex, and keeping them organized.
🗃️ Components
5 items
📄️ 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.