This blog will detail adding a Thumbnail scroller to the UI, providing another option for navigation within the RPGTV2024 project framework.
Thumbnails in a virtual tour offer several advantages:
Navigation: They allow users to quickly and easily navigate between different sections or rooms.
Preview: Thumbnails provide a visual preview, helping users identify areas of interest.
User Experience: They enhance the overall user experience by making the tour more intuitive and interactive.
Efficiency: They save time by allowing users to jump directly to specific points in the tour without sequentially navigating through the entire space.
Integration: They can provide a standalone option or work with menus, previous/next buttons, maps and floorplans.
The Edit Skin Configuration window Thumbnails section offers several options. The primary ones are a set of thumbnails that show all panoramic nodes in a tour and one that shows only thumbnails related to a sub-category.
The screenshots below show a scrolling thumbnail bar with all panoramic nodes displayed.
Note: on Mobile phones the layout is modified for easy access.
The screenshots below show a scrolling thumbnail bar with sub-category panoramic nodes displayed.
Adding Show All Thumbnail Scroller
Open the 6_TAMAN_SVGMAPMOBILE.(p2vr) file and save it as 7_TAMAN_THUMBNAILS.(p2vr)
Select all of the nodes in the tour except for “Loading”
Right-click and select Add/Remove Tag > Add New Tag
Enter “allthumbs” and select OK
Note: all nodes with the exception of “Loading” have the tag “allthumbs”
Open the Edit Skin Configuration window and scroll to the - [ THUMBNAILS ]- section.
Set the attributes for - [ THUMBNAILS ]-;
Show Thumbnails [uncheck = hide ]: = checked
Show Thumbnails Desktop/iPad [uncheck = hide on start ]: = checked
Show Thumbnails Mobile [uncheck = hide on start ]: = checked
Show Thumbnail Button [uncheck = false ]:= checked
Show Thumbnail Tooltips [uncheck = false ]:= checked
Show All Thumbnails: = checked
Thumbnail Width [ % = 100 to 40 - 10% increments ]: = 100
Leave the other settings the same.
Note: To make the thumbnail scoller more visible we can enable the bottom gradient tint.
scroll to the - [ GRADIENTS & TINTS ]- section.
Set the attributes for - [ GRADIENTS & TINTS ]-;
CSS Filter Bottom Gradient: = checked
Click OK to save the Edit Skin Configuration changes.
Note: This will show the thumbnail scroller, the thumbnail hide button and the thumbnail tooltips on the first and subsequent nodes.
If we were to uncheck the Show Thumbnails Desktop/iPad and Show Thumbnails Mobile then the thumbnail scroller would be hidden and the Show Thumbnail button visible.
Save the project and output the project. The opening node with the thumbnail scroller should look like the example below.
Note: You may see, based on the size of the browser window,an overlap between the menu and thumbnail scroller when the menu is opened and extended.
In the image below we have a Sub-Category menu with the sub-category open and extending behind the Thumbnail Scroller.
There are two ways we can deal with this;
Reduce the size of the percentage width of the Thumbnail Scroller
Auto-hide the Thumbnail Scroller when the mouse is over the menu.
In this case #1 isn’t practical as the width of the Thumbnail Scroller would only show us a couple of nodes. So we will enable Auto-hide.
Open the Edit Skin Configuration window and scroll to the - [ THUMBNAILS ]- section.
Set the attributes for - [ THUMBNAILS ]-;
Auto-hide Thumbnails: = checked
Leave the other settings the same.
Click OK to save the Edit Skin Configuration changes.
Save the project and output the project.
The Thumbnail Scroller is now hidden when the mouse is over the Menu.
Note: Auto-hide works with all menu formats, Single, Expanding and Sub-category.
ADDING THE SUB-CATEGORY THUMBNAIL SCROLLER
Open the 7_TAMAN_THUMBS.(p2vr) file and save it as 8_TAMAN_THUMBSUB.(p2vr)
In the Tour Browser, select streetart from the Filter dropdown to show only the Streetart nodes.
Select all nodes
In the Properties - User Data > User Data section add the word “streetart” to the Description: field.
Click the “Copy Description to all Nodes” button and select the “Selected nodes” option from the popup window.
Repeat the above using the Tour Browser > Filter for “oldbuildings” and “3dtheatre”
Open the Edit Skin Configuration window and scroll to the - [ THUMBNAILS ]- section.
Set the attributes for - [ THUMBNAILS ]-;
Show All Thumbnails: = unchecked
Thumbnail Width [ % = 100 to 40 - 10% increments ]: = 70
Leave all the other settings as they are.
Click OK to save the Edit Skin Configuration changes.
Note: The Thumbnail scroller will now only show the nodes associated with the current active Category.
Save the project and output the project. The opening node with the thumbnail scroller should look like the example below.
Mobile Settings
Note: The Thumbnail toggle button is aligned vertically with the Fixed Buttons and aligned horizontally with the viewport width.
This isn’t an issue on the Desktop or Mobile iPad but can be a problem on the much smaller Mobile phone screen depending upon the Fixed Button configuration
In the example below both the Social Channels (left) and Share to Social (right) buttons have been activated. This doesn’t leave enough room between them for the Thumbnail toggle button.
Open the Edit Skin Configuration window and scroll to the - [ THUMBNAILS ]- section.
Set the attributes for - [ THUMBNAILS ]-;
Show All Thumbnails: = checked
Vertical Position Mobile [ uncheck = raise ]: = unchecked
Leave all the other settings as they are.
Click OK to save the Edit Skin Configuration changes.
Save and output the project.
Note: Now the Thumbnail Toggle button sits above the Fixed Buttons.
This concludes the section on the Thumbnail Scroller
In the next post, we will look at adding Hotspot Nodes to the tour as another alternate option for navigating the tour.
