NOTE: This tutorial has been designed and developed to work on Pano2VR Version 7.1.4
In Hotspot Nodes we will cover the following topics:
About Hotspot Nodes ⇑
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 C1_TAMAN_FESTIVAL.(p2vr) file and save it with the name C9_TAMAN_HOTSPOTNODES.(p2vr).
Note: We will start by enabeling the Hotspot Nodes.
Open the Edit Skin Configuration window and scroll to -[ HOTSPOT NODES ]-.
Set additional attributes for -[ HOTSPOT NODES ]-;
Show/Hide all Nodes: = checked
Show the Title of the Node: = checked
Arrow Boomerang Round [ Default ]: = 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.
Note: before we go any further I want to remove previously generated node/hotspot images from the project output folder. This will help to generate better node images.
From the Output panel click and hold down the mouse on the “Trash Can” icon. This will open a message asking if we want to Erase the Output contents but keep the tiles.
The tiles are the images that create the panoramic images and they are abundent and take time to generate so we want to leave them but remove the other project elements.
Click on the message
In the popup message select Yes
Output the project
Then 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.
Note: Do not release the mouse as we will be using Auto Place
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 Taman Festival” 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 may not actually match the target view of the hotspot node. For example the Lilly Pond hotspot node preview shows just a part the art work with the feathers.
We can resolve this by setting the Hotspot Node Properties.
Setting Hotspot Node Properties ⇑
Open the C9_TAMAN_HOTSPOTNODES.(p2vr) file and save it with the name C10_TAMAN_PROPERTIES.(p2vr).
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.
Refining the Target View ⇑
Open the C10_TAMAN_PROPERTIES (p2vr) file and save it with the name C11_TAMAN_TARGETVIEW.(p2vr).
Note: Sometimes the target view isn’t exactly right
As we mouse over the hotspot nodes on the Gas Mask and Lilly Pond nodes the two previews look like this.
For instance the move from the Gas Mask to the Lilly Pond could show a bit more sky and the return from the Lilly Pond to the Gas Mask is a bit too zoomed in and off center.
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).
Note: by default it’s set on “Forward”
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!
You can repeat for the hotspot node on the Gas Mask node.
Note: if after all this the preview image isn’t changed 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.”
You will be asked if this is what you want to do, click on “Yes”
Now republish the project and the node previews will be updated.
Hotspot Node Settings ⇑
Open the C11_TAMAN_TARGETVIEW.(p2vr) file and save it with the name C12_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.
Open the C12_TAMAN_NODESETTINGS.(p2vr) file and save it with the name C13_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 02 hotspot, select it and Option-click (Alt-click) on it 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.
Go to the “Steps to the Theatre” and “Grand Hall” node and set up the nodes there.
Save the project and output the tour.
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.
Open the C13_TAMAN_MULTINODES.(p2vr) file and save it with the name C14_TAMAN_OVERLAPNODES.(p2vr).
In the Tour Browser select the Worm node.
Select the Grand Hall node hotspot (Node 03).
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.
Navigate to the Worm node.
We can clearly see that 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 -[ HOTSPOT NODES ]-.
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.
