overlapping hotspots

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
dylan
Posts: 15
Joined: Mon Jun 29, 2020 10:22 am
Location: Surrey, UK
Contact:

Fri May 14, 2021 1:15 pm

Hi all
I am using 'Lolly Hotspots' (circular ht_nodes which expand and fill with node image on mouse-over). I've added labels that popout but I have several hotspots close together and end up with overlap. I know I can redo the labels so they are above/below the hotspot which would solve this specific example but wondered if there was a way of hiding all other hotspots on mouse-over as I've had a couple of other tours that could benefit from this too, where there are multiple hotspots in close proximity to each other.
lolly-hotspots.jpg
lolly-hotspots.jpg (130.78 KiB) Viewed 234 times
Any solution or pointers would be really appreciated!

Thanks,
Dylan.
User avatar
Tony
Posts: 1066
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Sat May 15, 2021 4:00 am

Hi Dylan,

Here is an example using two Point Hotspots, Hot One and Hot Two, and one Hotspot Template.

When you roll over either hotspot a large title is displayed. Rollover Hot One and the title appears over Hot Two, rollover Hot Two and the title appears under Hot One.

Lightroom9.png
Lightroom9.png (177.88 KiB) Viewed 224 times

https://p2vr.s3-ap-southeast-2.amazonaw ... index.html


Changing the Z-Index on the circle and popup elements forces the title to always be above the circle

Lightroom8.png
Lightroom8.png (177.6 KiB) Viewed 224 times

https://p2vr.s3-ap-southeast-2.amazonaw ... index.html


In the skin, the container, cnt_popup, with the title has a z-index of 80, while the circle, rct_circle, has a z-index of 60

Lightroom5.png
Lightroom5.png (276.12 KiB) Viewed 224 times
Lightroom6.png
Lightroom6.png (264.97 KiB) Viewed 224 times

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
dylan
Posts: 15
Joined: Mon Jun 29, 2020 10:22 am
Location: Surrey, UK
Contact:

Sat May 15, 2021 12:03 pm

Hi Tony

Thanks for taking the time to reply, especially with such clear screenshots!

Originally I was looking for way to hide all other hotspots when mouse over a specific one, but realised this probably wouldn't be possible when they shared the same hotspot template. I had found another thread in the forum about overlapping hotspots and Z-index was mentioned as solution so I did try changing the z-index of the popup-label, but looks like I didn't try setting z-index of the popup AND the circle.

I'll have a go using your pictures as reference.

Not the first time I've found your information really useful, so again, many thanks Tony.

Dylan.
User avatar
Tony
Posts: 1066
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Sat May 15, 2021 12:50 pm

Hi Dylan,
Thanks for taking the time to reply, especially with such clear screenshots!
No problem
Originally I was looking for way to hide all other hotspots when mouse over a specific one, but realised this probably wouldn't be possible when they shared the same hotspot template.
Not so! I found a way to hide another hotspot even if its only using a single hotspot template :D

Test output here https://p2vr.s3-ap-southeast-2.amazonaw ... index.html

Is this what you are after?

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
dylan
Posts: 15
Joined: Mon Jun 29, 2020 10:22 am
Location: Surrey, UK
Contact:

Sat May 15, 2021 1:18 pm

Hi Tony

Sorry, I've really been trying and just can't get it working. My structure was a bit of a mess with containers and positioning so I've tried to replicate your hierarchy. I've got a z-index of 60 for the circle and the circular image for the actual hotspot, with container above which holds the line and popup-label (this container has a z-index of 80).
Thing is the label still appears under the white circle of neighbouring node.
I've also now messed up the fade and scale of the label and line so that's no longer working, think due to re-ordering the components (I removed the logic for fade and scale and can't get that working again with new structure. Think I'm having one of those days!

Yes, the example you just posted was what I was originally looking for, but hiding all other hotspots. But I'm now determined to get hang of z-index as it clearly works in your first example and really want to understand what I'm doing wrong.

I have attached my skin with all the other stuff stripped out, just in case you were feeling charitable and had time to cast an eye over it :D

Just when I feel like I'm getting the hang of pano2vr I hit a brick wall :shock: :lol:

Cheers!
Dylan.
Attachments
garden-skin2.ggsk
(3.15 KiB) Downloaded 11 times
User avatar
Tony
Posts: 1066
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Sat May 15, 2021 1:50 pm

Hi Dylan,

Seems to be okay now https://p2vr.s3-ap-southeast-2.amazonaw ... index.html

You can download a zip with the files at https://p2vr.s3-ap-southeast-2.amazonaw ... -INDEX.zip

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
dylan
Posts: 15
Joined: Mon Jun 29, 2020 10:22 am
Location: Surrey, UK
Contact:

Sat May 15, 2021 4:19 pm

Thank you so much Tony, that's brilliant!

I shall study my original against what you have done so I can understand where I've gone wrong :D

I've found some of your Pano2vr "Little Bits' useful before and I really appreciate your help today. Top bloke!

Dylan.
User avatar
Tony
Posts: 1066
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Sun May 16, 2021 4:08 am

Hi Dylan,

Here's the skin with the hide hotspot elements.

Tony
Attachments
hotspot_z_hide.ggsk
(2.11 KiB) Downloaded 10 times
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
dylan
Posts: 15
Joined: Mon Jun 29, 2020 10:22 am
Location: Surrey, UK
Contact:

Sun May 16, 2021 12:32 pm

Hi Tony
Hiding the other hotspots on mouse over was my original plan but wasn't sure if it would be visually jarring for them to all disappear, I can check it out for myself with your supplied file, thanks :D

Interested to see what logic/actions are used to achieve it.

Cheers Tony, really useful and am sure there will be others will find it useful too.

Dylan.
Post Reply