3D Arrow Hotspot with 2D Preview Image/Tool Tip

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

3D Arrow Hotspot with 2D Preview Image/Tool Tip

Post by Hopki » Thu Oct 04, 2018 7:07 pm

3D Arrow Hotspot with 2D Preview Image or Tool Tip
Example: Link

• 3D Arrow Hotspot with preview image and visited check mark
• Preview image or tool tip will always be facing the viewer
• When used with Pano2VR light or Pano2VR Pro with a single node project only the tool tip is visible
• The component can be configured so it does not display the preview image/tool tip using the skin configuration button.

How to use:
Download the file and double click, when asked, add to Pano2VR in your desired category.

To use, open the skin editor and open the components tool box.
Select the category you saved the component then add to your skin. It will connect to Hotspot Type ht_node.
If using Pano2VR light you need to set the Skin-ID to ht_node in the Hotspot Viewer Mode.

Publish your project and thats it!

How it works for those that want to know:
The component is basically the same as the 3D Arrow Hotspot Component that ships with Pano2VR 6 but the "_code" text box has some changes to the javascript.

If you want more elements not to rotate with the arrows then this can be done by adding to the "_code" text box.
At the bottom of the code you will see:

me._hs_preview_image.style.transform=hs+' translate3d(0px,-100px,0px)';
me._tt_ht_3d.style.transform=hs+' translate3d(0px,-50px,0px)’;

If you look at the last part of me._hs_preview_image code string you will see -100px while me._tt_ht_3d is set to -50px.
This effects how much above the arrows the preview image or text box will be above the arrows.

If you wanted more elements not to rotate with the arrows you would get their ID from the skin.js file and add it under me._tt_ht_3d.style.transform=hs+' translate3d(0px,-50px,0px)’;.


Mod for the packaged 3D Arrow Hotspots
Here is a mod you can do to the packed 3D Arrow hotspots which involves adding a line of CSS that hides the preview image or tool tip when the back face displays. This is a simple but very effective mod.
Example: Link

How:
Go to the components tool box and under the Built-In category add the Node 3D Hotspot Silhouette or Simplex.
Expand the tree and select the element: tt_ht_3d.
In the properties and in the CSS Styles add the line under the existing code then click OK:

Code: Select all

-webkit-backface-visibility: hidden; backface-visibility: hidden;
Now select the element: hs_preview_image and do the same adding adding the line of code under the existing code in the CSS Styles then click OK.
Create the output and you will see that as soon as you start to see the back of the preview image or tool tip it will hide.
Regards,
Hopki
Attachments
3d_arrow_hotspot_2d_preview_tooltip.ggskc
(91.05 KiB) Downloaded 43 times

JNewberry
Posts: 55
Joined: Tue Nov 05, 2013 6:03 pm

Re: 3D Arrow Hotspot with 2D Preview Image/Tool Tip

Post by JNewberry » Thu Oct 11, 2018 2:16 am

Could use some help with this; got it added to skin, but not clear about implementing it into tour. I'm using P2VR 6 beta 4.
If using Pano2VR light you need to set the Skin-ID to ht_node in the Hotspot Viewer Mode.

Publish your project and thats it!
I'm not sure what Hotspot Viewer Mode is? I tried adding a hotspot point, and changed skin-id to ht_node, type: tour node, but am not seeing the arrow.

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

Re: 3D Arrow Hotspot with 2D Preview Image/Tool Tip

Post by Hopki » Thu Oct 11, 2018 10:53 pm

HI,
If you have Type Tour Node then you have Pano2VR pro!
But please confirm, do you have Pano2VR 6 pro or Pano2VR 6 light?
Regards,
Hopki

JNewberry
Posts: 55
Joined: Tue Nov 05, 2013 6:03 pm

Re: 3D Arrow Hotspot with 2D Preview Image/Tool Tip

Post by JNewberry » Thu Oct 11, 2018 11:00 pm

do you have Pano2VR 6 pro or Pano2VR 6 light?
I believe pro, though I don't see that designation in about box or anywhere else. I have a pro license and registered that to the app. There is a Google Street View tab; that's only in pro, right?

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

Re: 3D Arrow Hotspot with 2D Preview Image/Tool Tip

Post by Hopki » Thu Oct 11, 2018 11:14 pm

Hi,
Google is in both pro and light but you can not link panos in light.
If you look at the bottom right of Pano2VR it will say which license you have.
Regards,
Hopki

JNewberry
Posts: 55
Joined: Tue Nov 05, 2013 6:03 pm

Re: 3D Arrow Hotspot with 2D Preview Image/Tool Tip

Post by JNewberry » Thu Oct 11, 2018 11:19 pm

Ah, I see: yes, I have pro.

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest