Left-click on a free space on the editor desktop. You can edit the page in the“Properties” window. If you click on the color circle, for example, a new window opens in which you can define the color of the page.
Tip: You can use the “Standard view” property to select which page should be the start page at runtime.
Change page size
The size of the page can also be changed subsequently.
Click on the pencil next to Width or Height to open the “Change page size” window. The height and width of the page can now be changed as required. Please note that components that are outside the new size range will be deleted.
In this example, only“Button 1” remains in the gray area, i.e. within the page, as all others are outside the new size range after the value 600 has been entered for both width and height:
View Manager
You have the option of dividing your project into clear “views” to make navigation within an extensive project much easier. This is done with the“QuickHMI View Manager“.
Right-click on a free space on the editor work surface to switch to the View Manager. You can also open the properties window by holding down the “Alt“keyor by selecting“Edit” in the main menu and then“View Manager“.
The controls are hidden and replaced by the “View” element. The view can now be placed on the editor workspace like any other control element using “drag & drop” , adjusted in size and selected. Selected views, like other objects in the editor, also have properties. These can also be adjusted via the properties window of the selected view.
All views can also be selected in the menu item “Edit” / “Navigation”.
Adding pages, headers and footers or dialogs
Adding pages
To add new pages, headers and footers or dialogs, click on “Add page” in the“Project Explorer”. You can now select the desired type in the project properties.
Adding headers and footers
Select “Header/Footer” as the “Type“. You can now select one of the templates or enter individual values. Once all entries have been made, continue with “OK“.
“Page2” has thus been defined as the header and footer. You can edit these and display them on all other pages.
To do this, select a page that is to contain a header and footer.
In the “Properties“, click the selection button in the “Header” line. All pages that you have previously defined as headers and footers will then appear.
Proceed in the same way for the “Footer“. You can choose which page is to be displayed as the header and which as the footer.
Page2” is defined as the header for“Page1“.
The header is now displayed by default in “Runtime mode“.
The same would apply to the footer if you had previously defined “Page2” as the footer in the properties.
Grouping of pages
In QuickHMI, it is possible to combine several pages into groups. This guarantees an even better overview, especially in larger projects. To do this, select a page and go to its properties. In the “Group” column, enter the desired group name and confirm with Enter. This creates the group and the selected page is automatically assigned to this group. To add further pages to the group, select the desired pages and enter the group name as before under Group and confirm with Enter.
In this example, the group “Group1” has been created and the selected “Page3” and“Page2” have been assigned to it. Once a group has been created, you can simply drag and drop additional pages into this group. If you want to remove pages from a group, simply drag the page to the “Pages and sections” overlay.
To delete groups again, simply remove the group name of the group folder. All pages contained in the group will be removed from the group, but will be retained individually.
In“Runtime mode”, the group appears in the page overview and can be expanded to access the pages it contains.
Responsive design through different layouts
As of QuickHMI Ibex, you now have the option of adapting your visualization or even just individual pages of the visualization to different end devices. The users of your visualization are always offered the best possible user experience with the adaptation.
There are 3 different layouts available per page (small, medium, large). All layouts share the same control elements. A button that is placed in the small layout therefore also appears in the large layout (if this layout is used). If this button is not required there, it can either be hidden (visible property) or placed outside the visible area.
The layouts can be changed at the bottom left of each page using the corresponding icons. You can recognize the currently displayed layout by the fully filled icon and the coloured highlighting. Click on another icon to switch to the respective layout.
Creating a new layout
Layouts that have not yet been created can be recognized by an outlined, greyed-out icon. Clicking on such an icon opens the dialog for initializing a new layout:
When creating a new layout, a basic layout and a resolution must be specified.
The basic layout allows you to select from which existing layout the property values (size, positions, etc.) of the control elements and page are to be adopted.
When selecting the resolution , please note that this directly influences the size of the drawing area (visible area) in the editor. However, you can only indirectly influence the display at runtime by specifying the aspect ratio. The exact resolution may differ due to possible zooming at runtime.
Deleting a layout
If you no longer need a layout, you can delete it by right-clicking on the icon.
Editing a layout
If you want to edit the editor resolution of a layout afterwards, you can do this via the page properties.
Specify when a layout is displayed at runtime
Click on the gear icon next to the layout icons to go directly to the responsive settings for this project. Here you can define the screen widths from which the respective layout should be used at runtime.
A test page for displaying the current device screen width can be found here: https://www.indi-an.com/en/quickhmi/responsive-breakpoints/
