'Navigation' Editor
The 'Navigation' editor allows you to define how you can navigate between your HMI pages contained in your project when running the HMI application. The editor reflects the relationship of the HMI pages to each other in a hierarchical manner.
In the 'Navigation' editor, the pages are arranged in a tree structure that you can setup according to your needs. Each page is represented by a thumbnail and the name as shown in the PLANT. The pages are connected by horizontal and vertical lines that show the relationships between the pages.
By assigning an HMI object an 'Action on Click' dynamic (navigation action 'Navigate Right', 'Navigate Left', 'Navigate Up', or 'Navigate Down'), you can move between the HMI pages in the navigation structure according to the defined page relationships.
| Note
Creating a navigation structure in the 'Navigation' editor is optional for a project. |
The 'Navigation' editor also allows you to define which page is shown as startup page when the visualization is started (see the following rules).
The 'Navigation' editor is part of the 'Application' editor group. To open the editor, double-click the 'Application' subnode under the 'HMI Webserver' node in the PLANT and select the 'Navigation' tab.
Overview panel
The overview panel in the lower right corner shows a miniature view of all HMI pages that have been added to the 'Navigation' editor. The color-highlighted rectangle displays what is currently shown in the editor. If you click anywhere in the overview panel, the selected area will be shown in the editor. Double-clicking anywhere in the panel will zoom in the editor on that position. By dragging the color-highlighted area you can scroll up and down within the editor.
Overview panel example
Page relationships
The relationship between the HMI pages in the navigation structure is illustrated by the horizontal and vertical links. A page may have child pages (parent-child relationship) and siblings. For the page relationships the following applies:
- Every page has exactly one parent page, except the startup page (leftmost page on the top). In the figure shown at the beginning of the chapter, for example, 'Page1' is the parent of 'Page4'.
- A page can have several child pages.
- Sibling pages are pages with the same parent page (pages are arranged in the same row). In the figure shown above, for example, 'Page1' and 'Page3' are siblings to each other.
According to the relationship between the pages you can navigate between the pages when running the HMI application. The navigation is done as follows:
- Navigating left and right moves between sibling pages.
- Navigating down moves to the first child of the page (i.e., the leftmost page underneath the page).
- Navigating up moves to the parent of the page. Each sibling page has the same navigate up destination.
'Navigation' editor rules
The following rules apply in the 'Navigation' editor:
- The leftmost page on the top of the 'Navigation' editor is the startup page of the HMI application (the 'Home' page in the example above). In the PLANT, the corresponding page is designated with the
icon. A page dragged to the left or top of the startup page becomes automatically the new startup page (the change is reflected in the PLANT by the startup icon). - Dragging an HMI page instance from the PLANT to the 'Navigation' editor adds the page instance to the navigation structure. Dropping an HMI page on an existing page replaces the existing page with the new page.
- Dragging a page template from the 'Default > Page Templates' folder under the 'HMI' category in the COMPONENTS area and dropping it into the 'Navigation' editor, adds the page to the editor and to the PLANT.
- An instance of an HMI page can only be added once, i.e., a page already used in the editor cannot be dragged again from the PLANT into the 'Navigation' editor.
- A page can only be connected to other pages by dragging and dropping (see further details below). Drawing connection lines manually is not possible.
- In the top row, a page may only be dragged above the startup page (the new page automatically becomes the startup page).
- Moving one or several pages is not possible. The editor automatically arranges the pages.
- Copying, pasting, or cutting one or several pages is not possible.
- Multi-selection of several pages is allowed.
- Deleting one or several pages in the navigation editor deletes the pages from the editor (see further details below). The pages in the PLANT are not affected.
