3D Arrows custom positioning on stairs

[JBShope]

Hi, I'm making my first attempts at creating a custom tour and I have a question about the 3D Arrows. I have them working great in the tour except on a set of stairs. There is a hotspot at the bottom of the stairs, one on a halfway landing, and one at the top of the stairs after making a u-turn. The problem is that the arrows going down the stairs and up the stairs are too close together and it is difficult to select the going down the stairs arrow. I've included a pic from the tour showing this.

If I use developer tools in firefox I can adjust the height between the arrows so that it is easy to select either arrow. I've included a pic from the tour showing this adjustment. The only thing I'm adjusting in the CSS is changing the "top: 546px;" to "top: 475px;" ...I've underlined it below

What would be the best way to do this for this set of arrows only and not the others?

Regards,
~jim

Code excerpt from firefox web developer:
div class="ggskin ggskin_hotspot " style="height: 0px; left: 717px; position: absolute; top: 475px; visibility: inherit; width: 0px; pointer-events: auto; transform-style: preserve-3d; transform-origin: 50% 50% 0px; transition: left 0s ease 0s, top 0s ease 0s; transform: perspective(500px) translate3d(0px, 364px, 0px) rotateZ(0deg) rotateX(-16.7424deg) rotateY(-1.98806deg) rotateY(-10.28deg) rotateX(-19.62deg) rotateX(90deg);"

[JBShope]

Hi,
Just checking back to see if anyone had any ideas how to accomplish this? I tried again and I'm out of ideas...

Regards,
~jim

[JBShope]

Stuck with it and was able to figure it out. It's all built into Pano2VR so nothing custom coded or css is needed. Just had to read the docs and watch the videos a few more times. This is useful for stairs, tight ascending/descending turns, switchbacks on trails etc.

[greytail2018]

Am interested in this and wondered which video tutorials helped you figure this out?

[Hopki]

Hi
Please see this page: https://ggnome.com/doc/pano2vr/6/skin-c ... w-hotspots
Regards,
Hopki

[JBShope]

Hi, The most helpful video is the one Hopki posted, but you need to know a few things that might not seem obvious at first...

My problem was getting a good separation between 3D arrows when trying to navigate a published tour, especially when trying to fat finger various touch devices. if you tried looking down the stairs and then hitting the down arrow, you could only select the up the stairs arrow because it's touch/click area overlapped the down arrow except for a tiny little section that was almost impossible to select properly.

How-to in a nutshell and yet still wordy

Once you've gotten the new 3D Arrows working in the first place... (see video Hopki linked to above)

In the Skin Editor, copy and paste the relevant 3D arrow ht_node (hotspot tour node) including all of the arrow navigation "pieces" included under it and then name the new instance something else that makes sense. In my case I chose "ht_node-stairs-up" (see pic)

Now, still in the Skin Editor go into the different pieces of your newly duplicated component (pieces= tt_ht_3d, hs_preview_image, chevron_white, chevron_black, chevron_white_lower) and change the Y: position property to a number that gives the amount of separation you are looking for (see pic). In my case I change the three arrow images' Y: positions from -120 to -280 and the preview image Y: position from -220 to -380. I'm not using 3D titles currently but I'm sure changing the Y: position of the 3d text works the same.

Now the trick,
In the main Viewer window select the specific hotspot marker that is being pointed to by an arrow in your finished tour (see pic). In my case the "point hotspot of type tour node" at the top of the stairs was the arrow in my finished tour that was blocking the arrow underneath, so I chose to move that arrow. Having selected the hotspot, you'll most likely then see the Properties panel for that hotspot. In that panel you want to change the "Skin-ID" parameter to the name you gave your newly duplicated and customized component from earlier, in my case "ht_node-stairs-up" (see pic).

That's it really! It only effects that specific link (one-way) between the hotspots and just that one arrow in your tour. The hotspot/arrow from the top of the stairs back down to the switchback area is not effected.

Regards,
~jim