3D Arrows custom positioning on stairs

Q&A about the latest versions
Post Reply
JBShope
Posts: 6
Joined: Thu Jun 15, 2017 12:13 pm

3D Arrows custom positioning on stairs

Post by JBShope » Tue Feb 05, 2019 6:01 pm

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);"
Attachments
Stairs-Clipboard01.jpg
navigation arrows are too close together
Stairs-Clipboard01.jpg (425.5 KiB) Viewed 428 times
Stairs-Clipboard02.jpg
navigation arrows are fine after css adjustment in developer tools
Stairs-Clipboard02.jpg (431.95 KiB) Viewed 428 times

JBShope
Posts: 6
Joined: Thu Jun 15, 2017 12:13 pm

Re: 3D Arrows custom positioning on stairs

Post by JBShope » Thu Feb 07, 2019 10:15 pm

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
Posts: 6
Joined: Thu Jun 15, 2017 12:13 pm

Re: 3D Arrows custom positioning on stairs

Post by JBShope » Wed Feb 13, 2019 5:55 pm

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.
Attachments
Stairs-Clipboard03.jpg
good separation of arrows even when looking straight down.
Stairs-Clipboard03.jpg (315.99 KiB) Viewed 375 times

greytail2018
Posts: 38
Joined: Fri Oct 26, 2018 10:17 am

Re: 3D Arrows custom positioning on stairs

Post by greytail2018 » Thu Feb 14, 2019 4:44 pm

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

User avatar
Hopki
Gnome
Posts: 9651
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: 3D Arrows custom positioning on stairs

Post by Hopki » Sat Feb 16, 2019 9:35 pm

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

JBShope
Posts: 6
Joined: Thu Jun 15, 2017 12:13 pm

Re: 3D Arrows custom positioning on stairs

Post by JBShope » Sun Feb 24, 2019 2:26 am

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
Attachments
Skin_Editor_Duplicate_3D arrows_component.jpg
Skin_Editor_Duplicate_3D arrows_component.jpg (62.06 KiB) Viewed 303 times
Change the Y position property as needed in the duplicated element.jpg
Change the Y position property as needed in the duplicated element.jpg (167.4 KiB) Viewed 303 times
Viewer_Hotspot_Selected_Properties_Panel_Screenshot.jpg
Viewer_Hotspot_Selected_Properties_Panel_Screenshot.jpg (243.5 KiB) Viewed 303 times

Post Reply

Who is online

Users browsing this forum: Google [Bot] and 4 guests