The main screen contains several fixed skin elements, including the menu. This document details the makeup of the menu, how to create the menu, and what menu variations are available to use.
Exploring the Menu
Desktop & iPad
The menu can appear in different configurations on the desktop and the look is based upon selections made in the Edit Skin Configuration window. The styles of the menu are Hierarchical and Single. (working versions below)
Above: Hierarchical menu version - open in new window
Above: Single menu version - open in new window
Mobile
On mobile devices, iPhones, Android Phones, and Android Tablets, the menus are also Hierarchical or Single. (figure #1)
Figure #2: Hierarchical and Single Menus on Mobile
Definitions
The elements and functions that go to make up a Hierarchical menu and Single menu are similar across both menus. The major exception being that the Single menu doesn’t have Categories. (figure #3a,b)
Figure #3a: Hierarchical menu desktop & iPad
Figure #3b: Single menu on mobile
The nodes that are represented in the menus above are identified by Tags that are used to filter the results.
Tags
Tags are created and applied to the nodes in the Tour Browser window.
As an aid in creating Tags and to speed up the workflow, my recommendation is that the panoramas are located in appropriately named folders. Each panorama should also be named as it will appear in the tour. (figure #4)
Figure #4 The panorama folder and the nodes named and located in the appropriate folders.
Adding the Menus
1. In the Project folder open the Panoramas folder
2. Drag the Green Grid folder into the Tour Browser window
3. Repeat with the Black Grid and White Grid folders
Note: Pano2VR orders the nodes alphabetically so you may have to rearrange some nodes. In our case we need to move the white grid 2 nodes to the left by dragging and dropping it.
Dragging a folder of panoramas into the Tour Browser prompts Pano2VR to automatically create the Tags: Green Grid, Black Grid, or White Grid from the folder name and associates them with the nodes contained within that folder. (figure #5)
Figure #5: Tags added automatically to the nodes
Reference: https://ggnome.com/doc/glossary_tag/
Cloners
The nodes are automatically displayed and organized within the Menu using Cloners. Cloners will automatically clone anything that is placed within it. The cloner is used to display nodes either by 'Node' or 'Table.'
The Hierarchical menu uses the 'Source: Table' method to define tags and titles manually. The table will group nodes based on their assigned tags to create menu groups or categories. (figure #6)
Figure #6: Source: Table
The Single menu uses 'Source: Node' and displays nodes based on a specific tag set as a filter. (figures #7)
Figure #7: Source: Nodes
Reference: https://ggnome.com/doc/props-cloner/
Menu Tables
Cloner Menu Tables are exposed and can be accessed via the Edit Skin Configuration window.
As the skin supports dual languages, we need a table for each language for Desktop and Mobile devices. This means a total of 4 tables: Main Menu EN, Main Menu IT, Mobile Menu EN, and Mobile Menu IT (figure # 8)
Figure #8: Menu Table in the Edit Skin Configuration window
Adding Tags to the Menu Tables
1. Double Click into a blank field in a Menu Table
2. Single Click to show the drop-down arrow
3. Open the drop-down and select a tag from the list of available tags
Note: the dropdown will only show Tags that haven’t been used in the table
4. Enter the Title in the blank Title field (figure #9)
Figure #9: Adding the tag 'White Grid' to the Mobile Menu IT: menu table
Publishing the Hierarchical Menu
Once the cloners are configured, the next step is to define the style of the menu in the Edit Skin Configuration window. We will start by using the basic tags Green Grid, Black Grid, and White Grid added when we loaded the panorama folders
Desktop and iPad
1. Open the Edit Skin Configuration window
2. Scroll down to the Fixed Skin Elements section
3. Check 'Show Main Menu'
4. Uncheck 'Single Menu' (figure #10)
Figure #10: Edit Skin Configuration settings for Hierarchical Menu Desktop & iPad
Mobile and Android Tablets
1. Scroll down to the Mobile Menu section
2. Check 'Show Mobile Menu'
3. Check 'Show Menu on Open'
4. Check 'Change Category on Node Change'
5. Uncheck 'Hide Sub Menu Mobile' (figure #11)
Figure #11: Edit Skin Configuration settings for Hierarchical Menu Mobile & Android Tablets
Node Names
Before we publish the tour there is one more thing we have to do and that is to set up the project to use the names given to the panoramas.
1. Select the first node green-grid
2. Open the User Data panel if it’s not already open
3. In the Title: field enter $(ib)
Note: $(ib) is a Pano2VR placeholder that will extract the image base name from the panorama and use it in the project.
4. Click on the ‘copy’ icon next to the title field to copy the placeholder to all nodes (figure #11)
Figure #12: Adding Panorama name placeholder
Note: if you are using dual languages you will have to add the alternative language for each node into the Description field.
5. If all of the other settings for the project are ready, you can go ahead and publish the tour.
Adding Tags for the Desktop Single Menu
The Single menu allows us to highlight specific nodes that we would like to include in the menu. A cloner filter is applied to the Single menu cloner. In this example, the Tag name is Single, but a custom tag name can be used and set in the Edit Skin Configuration
Desktop and iPad
1. Open the Project
2. Command-click to select all of the nodes you want to appear in the Single menu
3. Right-click on one of the nodes and select 'Add/Remove Tag'
4. From the dropdown menu select 'Add New Tag' (figure #12)
Figure #12: Adding a new tag to the selected Nodes
5. In the New Tag window add the name 'Single' (figure #13)
Figure #13: Adding the Single tag
6. Select OK, and all of the selected nodes have the tag ‘Single’
Publishing the Single Menu
Once the Single tags are applied to the nodes, the next step is to define the style of the menu in the Edit Skin Configuration window.
Desktop and iPad
1. Open the Edit Skin Configuration window
2. Scroll down to the Fixed Skin Elements section
3. Check 'Show Main Menu’
4. Check 'Single Menu' (figure #14)
Figure #14: Edit Skin Configuration settings for Single Menu
Note: If you used a different name for the tag you can enter it in the 'Set Single Tag' text field
If all of the other settings for the project are ready you can go ahead and publish the tour.
Adding Tags for the Mobile Single Menu
The Single menu allows us to highlight specific nodes that we would like to include in the menu. A cloner filter is applied to the Single menu cloner. In this example, the Tag name is Mobile.
Mobile and Android Tablets
1. Open the Project
2. Command-click the nodes that you want to appear in the Mobile Single menu. In this example, I'm selecting each Grid panorama and the first numbered panorama from each folder
3. Right-click on one of the nodes and select 'Add/Remove Tag'
4. From the dropdown menu select 'Add New Tag' (figure #15)
Figure #15: Adding a new tag to the selected Nodes
5. In the New Tag window add the name 'Mobile' (figure #16)
Figure #16: Add the ‘Mobile’ tag
6. Select Ok and all of the selected nodes have the tag Mobile assigned to them
Publishing the Mobile Single Menu
Once the Mobile tags are applied to the nodes, the next step is to define the style of the menu in the Edit Skin Configuration window.
Desktop and iPad
1. Scroll down to the Mobile Menu section
2. Check 'Show Mobile Menu'
3. Check 'Show Menu on Open'
4. Check 'Change Category on Node Change'
5. Check 'Hide Sub Menu Mobile' (figure #17)
Figure #17: Edit Skin Configuration settings for Single Menu Mobile & Android Tablets
If all of the other settings for the project are ready you can go ahead and publish the tour and view the tour on a mobile device (figure #18)
Figure #18: Mobile Single menu on Samsung S8 phone
That completes the section on menus.
