General
A custom navigation symbol allowing a horizontal navigation bar to be added to PI Vision displays. The menu itself is editable through html, and the html code supports adding multiple site menus - selectable through the settings blade of the instantiated symbol.
The advantage is that you can quickly add the same navigation bar on top of all PI Vision displays for a site, and have access to an advanced, multi-level menu structure.
Setting up the Navigation Structure in AF
This can only be done by an admin
In order to create the menu structures you will need to use the included AF element templates. There are two XML files included, one of them contains an AF database called "weruNavigationMenu" and contains an example menu structure to get you started. The other XML file only contains the library objects (2x element templates, 2x custom reference types), which can be imported into any existing AF database in order to allow end-users to create site-specific menu structures themselves.
Open PI System Explorer and navigate to the AF database you want to enable menu structures in.
From the zip file "weruNavigationMenu AF Contents.zip" extracted in point above, we have the file "weruNavigationMenu Templates and References.xml". Import it into your database as described in step 7 above.
Check in any changes, if necessary!
Users can now create a menu structure anywhere in this database. Make sure you start by using the template "Main Menu Template", and then use the "Menu Item Template" for all menues below.
Creating the Menu Structure in AF
Assuming your AF Database contains the necessary AF content, open PI System Explorer and go to your database.
Create a new element anywhere, using the AF Element Template "Main Menu Template". Give the element a name describing what the menu contains.
You will now create the actual menu items as child elements of your new element, using the AF Element Template "Menu Item Template". Any element directly under your "Main Menu Template" element will appear as root level menu items, and you can build sub-menu items below each of these using the same approach.
The attributes in each Menu Item element look like this
For a menu item containing a sub-menu, only the "Display Text" is required, but for normal menu items the "URL" should be filled out. The icon attribute allows you to specify icons from the Font Awesome font set, and it will be displayed in front of the Display Text shown in the menu. Find icons by going to Font Awesome and select one. Copy the "fa-" text shown above the icon, before pasting the "fa-" into Icon field. The Order attribute is a 0-based integer allowing you to specify the order each menu item is displayed. If this is left blank, the menu items will be displayed sorted alpha-numerically by the element name.
Creating a new Navigation Menu
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.
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 and colors
This can only be done by an admin
Images
Replace the files under the Images folder (filenames must remain the same)
weruNavigationMenuLogo.png – Size 120px x 70px
weruNavigationMenuProfilingImage.png – Size 200px x 70px
Colors
Go to the file sym-weruNavigationMenu-template.html
Find the <style> tag and change the value under :root to your wanted color.
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.
