Navigation Menu

Open

A custom navigation symbol allowing a horizontal navigation bar to be added to PI Vision displays. The menu is completely configurable in AF, having the advantage, that the same navigation bar can be quickly added on top of all PI Vision displays, providing access to an advanced, multi-level menu structure. 

Setting up the Navigation Structure in AF

In order to create the menu structures you will need to use the included AF element templates. The WPVS Installation package contains a XML file, which is called “Navigation Menu Templates and References.xml”.

1. Open PI System Explorer and navigate to the AF database you want to enable menu structures in, or create a new one (recommended).

2. Go to the Library tab and do a right click on the upper most element, which is the name of the database, and select “Import from File…”

3. Choose the Navigation Menu Templates and References.xml file and the click “Ok” with the following configuration:

   Open

   

4. Go to the Elements tab, do a right click on the upper most element, which is “Elements”, and select “New Element”. In the upcoming dialog, choose the “Main Menu Template” as the Element Template

    

5. Rename it to the name you want to give the menu

6. All Child elements need to be derived from the Menu Item Template. The correspond to the items in the navigation bar. Child elements of a child elements are sub-items in the menu structure.

7. An exemplary navigation menu structure may look like this:

8. Each Menu Item Template has the following attributes which can be configured:

• Display Text: The text that the item shows in the navigation menu

• Icon: Can be used to

• Open In: Can be “New Window” or “Same Window” and defines whether the URL opens in the same or in a new window when the user clicks on the item

• Order: Zero based position in the navigation menu

• Tooltip Text: Specifies optionally a tooltip that is displayed to the user when hover over the item

• URL: Specifies the URL that opens if the user clicks on the item

Creating an instance of a Navigation Menu in PI Vision

1. Navigate to PI Vision, create a new display, go to the Navigation AF database and click the upper most element. Select the new symbol in the symbol library and drag the attribute "Site Menu" onto the display.

2. Make sure that the Navigation Menu symbol is on top of all elements, to avoid drop-down menus from being obstructed by other content. This can be done by clicking on the Navigation Menu symbol whilst in edit mode and changing order to "Bring to front".

Change default images

Images

Replace the following files in the PIVision/Scripts/app/editor/symbols/ext/Icons folder (filenames must remain the same)

weruNavigationMenuLogo.png – Size 120px x 70px

weruNavigationMenuProfilingImage.png – Size 200px x 70px

Colors

Edit /PIVision/Scripts/app/editor/symbols/ext/libraries/weruPIVisionSuiteConfig.js and set different hex values in the “weruNavigationMenu” section which contains entries in the following format: PrimaryColor: "#ffffff". These entries correspond to the entries in the configuration pane in the display.

Change images and colors for individual displays

Right click the Navigation Menu and choose “Navigation Menu Configuration”.

Under “Logo” the logo image can be customized, under “Profiling Image” the profiling image. The border color can be adjusted individually as well.