Hotspot Tour Nodes provide a visual link between nodes of a tour and when clicked transition from the current node to the linked node.
Note: for information on linking panoramas visit the Pano2VR Website for information and tutorials https://ggnome.com/doc/hotspots-link-pano/
Settings
Custom Tour Nodes are available within the Dual Language Interactive Skin in the Hotspot (Nodes) section of the Edit Skin Configuration window. (figure #1)
Figure #1: Hotspot (Nodes) settings within Edit Skin Configuration window.
Settings available are;
Show/Hide All Nodes: Globally hide all of the Hotspot Nodes
Arrow Hard Square: Display a hard-edged arrow in a square button
Arrow Hard Round: Display a hard-edged arrow in a round button
Arrow Boomerang Round (Default): Display a curved Boomerang arrow in a round button
Arrow Fat Round: Display a curved Fat arrow in a round button
Show 3D Hotspot Preview/Tool Tip: Display a visual image of the linked node
Use Move to View: Align the panorama to the Node Hotspot before transitioning
Show Tooltips: Display the name of the linked node (not required if you are using 3D Hotspot Preview
Sample Output
The following is a sample output of 3 nodes connected with Point Hotspot (Nodes). The settings are:
Arrow Boomerang Round (Default): True
Show 3D Hotspot Preview/Tool Tip: True
Use Move to View: True
Show Tooltips: False
Issues you may encounter
There is an interesting relationship between the Point Hotspot (Type: Tour Node), the ht_node template, and the placement of the elements within the template.
Depending upon the placement of the Point Hotspots and the placement of the elements within the ht_node template you may end up with overlapping node buttons similar to the image below (figure #2)
Figure #2: Node buttons overlapping
In order to resolve the issue, it’s important to have an understanding of the relationship of all the elements.
In the image below the panorama has one Point Hotspot (Type: Tour Node) and it’s pinned at 0,0. The node button is pointing to it. (figure #3)
Figure #3: Panorama with a single Point Hotspot (Type: Tour Node)
If we tilt the panorama by -90˚ and compare the project view to the Skin Editor view we can see the position of the elements in the ht_node template to their positions related to the panorama.
It’s important to remember that the center of the ht_node template will always be centered on the Z-axis of the sphere and that the offset amount of the button element from the ht_node template center in the skin will be the same distance in the project. (figure #4)
Figure #4: Relative positions of the ht_node template elements in the skin and project.
We can also see from the image of the project that the button width goes from 30˚ to -30˚ grid lines. So any Point Hotspot (Type: Tour Node) we add will have to be, at a minimum, 60˚ apart to prevent any overlap.
In the image below I’ve placed two Point Hotspot (Type: Tour Node) at 30˚ and -30˚ in the panorama and in the output the two node hotspots are slightly separated. (figure #5)
Figure #5: Result of 2 Point Hotspot (Type: Tour Node) separated by 60˚
The problem is that it may not be practical to separate the two Point Hotspot (Type: Tour Node) by that amount, especially if they have to be placed relatively close to each other on a panorama.
Here is an example where I want to transition from this node into either door but the Point Hotspot (Type: Tour Node) are less than 60˚ apart so the node buttons are overlapping each other. (figure #6)
Figure #6: Overlapping node buttons
To resolve this issue the solution is to increase the distance of the button element from the ht_node template center. The default distance of the top of the button to the ht_node template center is -120px. (figure #7)
Figure #7: Default distance from top of button to center of ht_node
I’m going to increase that value by -40px to -160px (figure #8)
Figure #8: Distance increased by -40px to -160px
After saving the skin and republishing the node buttons are clearly separated. (figure #9)
Figure #9: Node buttons after the skin modification.
Note: if you make this change and are using the Show 3D Hotspot Preview/Tool Tip setting make sure to apply the same amount of distance to the hs_preview_image element.
