Overlapping Nodes
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.
The published tour below shows the result of the adjusted distance.
