Thumbnail Menu with Two Categories - Pano2VR pro

Post Reply
User avatar
Posts: 11723
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK

Tue Dec 15, 2020 1:37 pm

The component "Thumbnail Menu with Two Categories" comes with Pano2VR and can be found in the Components Toolbox.
The component does what it says and has two categories, to demonstrate how to use it please find attached an example project.
The inspiration behind this menu was so you could build a tour with many locations, with each location having their own subcategories.

This post will reference the attached project on how to use the component.
Download and unzip the attached project.

Probably the most important thing is the folder organisation, you will see the two main categories, HouseA and HouseB.
Then in each folder the subcategories Ground and First.

Why would you use folders and subfolders?
Pano2VR can use the folder name as a tag, but only one level, so in this case, it is easier to select all nodes for a House and give them all a tag rather than having to go in and then tag each node to Ground or First.

If you were going to start a new project, open Pano2VR and save it to the main project folder.
Then select the first folder, HouseA, then select the subfolder Ground and drag it into Panmo2VRs viewer or tour browser.
Then drag in the First folder.

This adds the nodes to Pano2VR with the tags Ground and First.
Now select all the nodes using the tour browser and right button click and select Add/Remove Tag.
Set the tag HouseA.

1.png (17.01 KiB) Viewed 2884 times

Now all nodes have the tag HouseA then the some have the tag Ground and the rest have First.
Do exactly the same for HouseB adding the Ground and First folders to Pano2VR and finally selecting all the nodes and tag them with HouseB.

2.png (17.35 KiB) Viewed 2884 times

Add an HTML5 output and open the skin editor and using the Components Toolbox add the component "Thumbnail Menu with Two Categories".
Save the skin to the projects folder.

The Edit Skin Configuration will now be active, select and open the Edit Skin Configuration window.
In the first table enter the tag and titles for the first category, in this project the tag is HouseA, and its title is House A.
Then the second category is the subcategories, Ground and First.

3.png (83.46 KiB) Viewed 2884 times

The menu also has options, to show the menu on open and also to be used with Touchscreen devices. This option will close the menu when the thumbnail is selected, on menu open you are still in that sub category.
(283.36 KiB) Downloaded 176 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
Posts: 142
Joined: Wed May 20, 2020 10:38 am

Thu Jul 22, 2021 3:09 pm

Is it possible to use this has-touch option with the "Rollover Menu Click" / "Rollover Menu Mouseover" some way, so it's not needed to have two almost identical components in the skin, just to facilitate the lack of mouseover on touch screens?

I tried to figure it out but got a bit lost in the differences..

Post Reply