Hotspot Nodes are a feature in Pano2VR that allows users to create interactive elements within virtual tours that jump between designated nodes. Here's a brief overview of Node Hotspots;
Definition: Hotspot Nodes are clickable areas or points in a panorama that link to other panoramas.
Function: They act as navigation tools, allowing viewers to move between different scenes or access additional content within the virtual tour.
Customization: Users can customize the appearance of Hotspot Nodes, including the icon, node preview, and title, via the Edit Skin Configuration window.
Positioning: They can be placed anywhere within the 360-degree panorama, allowing for accurate placement regarding the destination.
Enhanced engagement: They provide a way to make panoramas more interactive and informative, enhancing the overall user experience.
Compatibility: Hotspot Nodes work on both Desktop/iPad and Mobile devices.
Note: The screenshot below shows the implementation of two Hotspot Nodes on the “Gas Mask” node. One links to the “Lilly Pond” node and other one to the “Worm” node.
Adding our first Hotspot Node
Open the 8_TAMAN_THUMBSUB.(p2vr) file and save it with the name 9_TAMAN_HOTSPOTNODES.(p2vr).
Note: To simplify the interface, we will start by turning off the Thumbnails and enabeling the Hotspot Nodes.
Open the Edit Skin Configuration window and scroll to -[ THUMBNAILS ]-.
Set all the attributes for -[ THUMBNAILS ]-: = unchecked
Next, scroll up to -[ HOTSPOT NODES ]-.
Set additional attributes for -[ HOTSPOT NODES ]-;
Show/Hide all Nodes: = checked
Show the Title of the Node: = checked
Show 3D Hotspot Preview/Tool Tip: = checked
Use Move to View: = checked
Overlap [ 0=default | 1,2,3,4 ]: = 0
Click OK to save the Edit Skin Configuration changes.
Select the “Gas Mask” node in the Tour Browser to display it in the viewer.
Click and hold the mouse down on the third node, “Lilly Pond”, and then drag the node into the Viewer.
At the top right of the Viewer, you will see two options, Auto Place and Auto Place Both Ways.
Continue to drag the Lilly Pond node onto the Auto Place Both Ways button and release it.
Note: Once you do this you’ll see the red hotspot symbol with a “lock” icon and the Properties - Point Hotspot panel is displayed.
A red icon means the hotspot is active, while a blue icon means it is not active
Note: The advantage of using the Auto Place Both Ways button is that the return trip from the Lilly Pond to the Gas Mask has already been created for us.
Save the project and output the tour.
Click the “Enter the Park” splash screen button to open the first node.
Pan slightly to the right to see where the arrow is pointing.
Note: We can see a circle with an arrow icon, and when we mouse over the hotspot node, we see a visual image of the destination, the title of the destination and possibly a “tick” icon indicating that we have visited the location before.
Click on the hotspot node to go to the Lilly Pond.
Note: Before the transition the node pans to line up with the hotspot node arrow. This is a function of the “Move to View” enabled in the -[ HOTSPOT NODES ]-.
Pan the Lilly Pond node until the hotspot node arrow points to the Gas Mask node, then click on the hotspot node to return to our starting point.
Note: You may have noticed that the image previews don’t actually match the target view of the hotspot node. For example the Lilly Pond hotspot node preview shows the Gas Mask rather than the art work with the feathers.
We can resolve this by setting the Hotspot Node Properties.
Save the project as 10_TAMAN_TARGETVIEW.(p2vr).
Setting Hotspot Node Properties
Open the Gas Mask node in the Viewer and click on the hotspot node to make it active (red).
In the Properties - Point Hotspot set the following;
ID: = Node 01
Skin-ID: = ht_node (very important)
Auto Place / Lock Position: = uncheck
Pan: = -95.00
Note: With the Node ID I like to identify them as it makes it easier to keep track of them in the List View.
I’ve also changed the Pan: to set the node hotspot central in the opening.
Open the Lilly Pond node, select the node hotspot, and apply the same settings except for the pan;
ID: = Node 01
Skin-ID: = ht_node (very important)
Auto Place / Lock Position: = uncheck
Pan: = 100.00
Save the project and output the tour.
Mouse over the hotspot nodes on the Gas Mask and Lilly Pond nodes.
Note: Now the hotspot node previews accurately represent the Target Views as shown below.
Note: If you aren’t seeing the preview image change, try the following;
Clear the browser cache.
You can delete the output files but retain the tiles by long-pressing the Erase Output Button folder and selecting “Erase Output Folder But Keep Tiles.”
Refining the Target View
Note: Sometimes the target view isn’t exactly right.
For instance the return from the Lilly Pond to the Gas Mask is a bit too zoomed in and off center (see below).
Go to the Lilly Pond node if it’s not already open.
Click on the hotspot node to make it active.
In the Properties - Point Hotspot, click the Target Viewing Parameters button (orange target icon).
This will open the Target Viewing Parameters window.
Pan, zoom the image out in the window to the desired target view and click OK to set changes.
The “Forward” setting has been replaced with values that represent;
Pan: = 84.2
Tilt: = -1.2
Zoom: = 124.5
Note: Yours may be different. If you want you can actually set specific numbers.
Save the project and output the tour.
Note: Here are the target views before and after the changes. Much better!
Repeat for the hotspot node on the Gas Mask node.
Hotspot Node Settings
Save the project as 11_TAMAN_NODESETTINGS.(p2vr).
The first setting will be to hide the 3D preview image and just show the title.
Open the Edit Skin Configuration window and scroll to -[ HOTSPOT NODES ]-.
Set the attributes for -[ HOTSPOT NODES ]-;
Show 3D Hotspot Preview/Tool Tip: = unchecked
Click OK to save the Edit Skin Configuration changes.
Save the project and output the tour.
Note: this will give you a simple hotspot icon and title.
The second setting will remove the 3D title and use the Floating Tooltip.
Open the Edit Skin Configuration window and scroll to -[ HOTSPOT NODES ]-.
Set the attributes for -[ HOTSPOT NODES ]-;
Show the Title of the Node: = unchecked
Click OK to save the Edit Skin Configuration changes.
Save the project and output the tour.
Note: This will give you a simple hotspot icon and when the mouse is over the icon the floating tooltip will appear regardless of the pan of the node.
Hotspot Icon
There are four icons available to use with the Node Hotspot;
Arrow Boomerang Round [ Default ]
Arrow Fat Round
Arrow Hard Square
Arrow Hard Round
Open the Edit Skin Configuration window and scroll to -[ HOTSPOT NODES ]-.
Set the attributes for -[ HOTSPOT NODES ]-;
Arrow Boomerang Round [ Default ]: = unchecked
Arrow Hard Square: = checked
Click OK to save the Edit Skin Configuration changes.
Save the project and output the tour. The hotspot node should look like the screenshot below.
Multiple Nodes
Note: Adding more than one hotspot to a node can sometimes create overlaps between the hotspots. If we add a few more nodes, we can test this.
Save the project as 12_TAMAN_MULTINODES.(p2vr)
Open the Edit Skin Configuration window and scroll to -[ HOTSPOT NODES ]-.
Set the attributes for -[ HOTSPOT NODES ]-;
Arrow Boomerang Round [ Default ]: = checked
Arrow Hard Square: = unchecked
Show 3D Hotspot Preview/Tool Tip: = checked
Click OK to save the Edit Skin Configuration changes and save the project.
Open the Gas Mask node.
Drag the “Worm” node onto the Viewer and the Auto Place Both Ways button.
With the worm hotspot node selected, in the Properties - Point Hotspot, set the following;
ID: = Node 02
Skin-ID: = ht_node (very important)
Distance: = uncheck Auto Place / Lock Position
Position: = Pan: = -181.00 | Tilt: = 0.00
Note: When you add the pan the hotspot will disappear as it’s been moved almost 180˚
In Properties-Point Hotspot, click the Target Viewing Parameters button (orange target icon) and set the target view.
Select OK to set the view.
Pan around to the node and Option-click (Alt-click) on the node hotspot to go to the Worm node.
Drag the “Steps to Theatre” and “Grand Hall” nodes onto the Viewer using the Auto Place Both Ways button.
Note: The List View panel is a quick way to manage all your node hotspots. It is handy for seeing all of the elements added to a node in an easy-to-read list view.
In the Main Menu View, click the “Clipboard” icon to open the List View panel.
Hovering over a listing highlights the node in the Tour Browser. A popup window shows the equirectangular image and some information on the node.
Click on the Point01 listing (Gas Mask) and set the following properties in the Properties - Point Hotspot panel;
ID: = Node 01
Skin-ID: = ht_node (very important)
Distance: = uncheck Auto Place / Lock Position
Position: = Pan: = 270.00 | Tilt: = 0.00
Double-click on the Node 01 listing, and the node will pan to the centre of the Hotspot Node.
Set the Target View
Click on the Point02 listing (Steps to the Theatre) and set the following properties in the Properties - Point Hotspot panel;
ID: = Node 02
Skin-ID: = ht_node (very important)
Distance: = uncheck Auto Place / Lock Position
Position: = Pan: = 20.00 | Tilt: = 0.00
Double-click on the Node 02 listing, and the node will pan to the centre of the Hotspot Node.
Set the Target View
Click on the Point03 listing (Grand Hall) and set the following properties in the Properties - Point Hotspot panel;
ID: = Node 03
Skin-ID: = ht_node (very important)
Distance: = uncheck Auto Place / Lock Position
Position: = Pan: = 165.00 | Tilt: = 0.00
Double-click on the Node 03 listing, and the node will pan to the centre of the Hotspot Node.
Set the Target View
Click on the Main Menu “Clipboard” icon to leave List View.
Save and Output the tour.
Use the Hotspot Node to navigate to the Worm node.
Note: The three Hotspot Nodes are now appear in grouping and are not overlapping each other.
OVERLAPPING NODES
Note: In the next step we will move the Grand Hall hotspot node to a position on the panorama where it’s closer to the Gas Mask hotspot node creating a situation where hotspot nodes overlap each other.
Save the project as 13_TAMAN_OVERLAPNODES.(p2vr)
In the Tour Browser select the Worm node.
Select the Grand Hall node hotspot.
Change the pan position of the Grand Hall hotspot node to = 240.00
Note: This puts the Grand Hall and Gas Mask node hotspots close to each other.
Save the project and output the tour.
The Gas Mask and Grand Hall Hotspot Nodes now overlap each other.
Note: The reason behind this is a little complicated so I’ve created a blog post that explains the situation and details the solution. You can find the post at https://tonyredhead.com/dls/hotspot-nodes-overlapping.
This solution requires modifications to the skin, basically increasing the distance from the hotspot template element to the visual elements. In current skin I’ve created an automated way of applying the solution.
Open the Edit Skin Configuration window and scroll to -[ THUMBNAILS ]-.
Note: the “Overlap” setting modifies the distance between the Point Hotspot Template and the icon and 3D Preview elements. The default setting is 0, increasing in 20% increments for the icon and 10% increments for the 3D Preview.
Set the attributes for -[ HOTSPOT NODES ]-;
Overlap [ 0=default | 1,2,3,4: ]:= 3
Click OK to save the Edit Skin Configuration changes.
Save the project and output the tour.
Navigate to the “Worm” node. The hotspot nodes should look like the example below and no longer overlap.
Note: The screenshot images below show the effect of using 0, 1, 2, 3 and 4 settings on the separation of overlapping nodes (left to right).
Note: Changing the overlap size is global and will affect all Hotspot Nodes throughout the tour.
This concludes the section on the Hotspot Nodes
In the next post, we will look at Replacing the Default Font with a new Font supplied by a client to match their Brand Guidelines.
