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

Post Reply
User avatar
Hopki
Gnome
Posts: 8761
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 71 times

JNewberry
Posts: 68
Joined: Tue Nov 05, 2013 6:03 pm
Location: Los Angeles, California
Contact:

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: 8761
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: 68
Joined: Tue Nov 05, 2013 6:03 pm
Location: Los Angeles, California
Contact:

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: 8761
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: 68
Joined: Tue Nov 05, 2013 6:03 pm
Location: Los Angeles, California
Contact:

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.

User avatar
bobhenderson@me.com
Posts: 4
Joined: Fri Jul 22, 2016 2:15 pm
Location: Nashville, TN
Contact:

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

Post by bobhenderson@me.com » Tue Oct 23, 2018 11:28 pm

I love this new feature! I have a tour set to display a floor plan at the beginning and then disappear when advancing to the next tour point. When I navigate with the 3D arrow and then display the floor plan again, the floor plan hot spot remembers the last tour point where it was when it was closed, not the current position. Any ideas where to start trouble shooting? I am modifying a previous skin with the new 3D arrow. Thanks

User avatar
Hopki
Gnome
Posts: 8761
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 25, 2018 5:23 pm

I would need to see your skin on how you have put it together.
Also maybe you p2vr file.
Best thing to do is send in your support package, as found under the help menu.
Make sure you include the skin.
Regards,
Hopki

JNewberry
Posts: 68
Joined: Tue Nov 05, 2013 6:03 pm
Location: Los Angeles, California
Contact:

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

Post by JNewberry » Fri Oct 26, 2018 6:27 am

I still can't get this to work--does it work with Simplex v6? I added the 3D arrow component to my skin. What do I do after that? I don't see the arrows.

When I drop the arrow component onto the skin, does it have to go anywhere special? Can I just drop it on the canvas, or do I need to configure it there? I'm probably missing something obvious, but can't get it to work...

User avatar
Hopki
Gnome
Posts: 8761
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 » Fri Oct 26, 2018 1:57 pm

HI,
The V6 Simplex skin already has a Hotspot Template ht_node.
Find this and either delate it or rename it.
Then add the 3D component.

To expand on this when you set a point hotspot it will use the Skin-ID ht_node.
This means it is looking for a Hotspot Spot Template with the ID ht_node.

You could if you wanted rename the 3D Hotspot Template to something different, as an example ht_node_3d.
Then when you set a point Hotspot over type the Skin-ID to say ht_node_3d.

This means that hotspot will use the 3d hotspot.
Skin-ID's is what allows you to have different graphics for different hotspots in a project.
Regards,
Hopki

JNewberry
Posts: 68
Joined: Tue Nov 05, 2013 6:03 pm
Location: Los Angeles, California
Contact:

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

Post by JNewberry » Fri Oct 26, 2018 7:19 pm

Got it, it's working now; I didn't realize I had to delete or rename the existing ht_node.

Thanks Hopki!

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest