Pano2VR 4.0/html5 - how to execute js code on hotspot click?

Q&A about the latest versions
Post Reply
KNielepkowicz
Posts: 5
Joined: Mon Jan 13, 2014 12:40 pm

Is there any way to execute javascript code when clicking on hotspot or buton? I'd like to create simila to this : http://xmas.directiongroup.co.uk/ game, but I want to use Pano2VR. I want to avoid changes in generated code (pano2vr_player.js or skin.js).
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

That real reindeer panorama set is being displayed using a GOOGLE VIEW Player. I did look at a couple panoramas but never found a carrot.

Its not clear what you are asking " I want to avoid changes in generated code (pano2vr_player.js or skin.js)."

Please tell us more.

You may learn how to create hotspots here in the documentation http://ggnome.com/wiki/Adding_Hotspots_(Pano2VR)

Hope this helps
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
KNielepkowicz
Posts: 5
Joined: Mon Jan 13, 2014 12:40 pm

Exactly, and custom markers - I know how to do that because I'm programmer and Google Recommended Photographer in Google Business Photos :) Carrot is located on the first floor.

I almost forgot, I've added custom javascript code in order to enabling gyro control - like thomas advised in one of the posts.
1) add the buton with some action, ie zoom out
2) in skin editor find handler for this button and replace javascipr code

But I cant do that for hotspot :( Imagine, You have vr tour in the shop, on every product hotspot is placed. But instead of redirection you're adding products to your basket. Or in the same way, we can create simple games - like that with rudolph ;) I think, some kind of "action hotspot" would be very useful.
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Since you are comfortable with coding, look in the skin.js file for an IF statement similar to this:

Code: Select all

if (hotspot.skinid=='Point Hotspot') {...}
Within the above IF statement add your custom code to the onclick statement. Something like this:

Code: Select all

			this.__div.onclick=function () {
				//me.player.openUrl(me.hotspot.url,me.hotspot.target);
				//me.skin.hotspotProxyClick(me.hotspot.id);
				switch (me.hotspot.id) {
				    case 'Point03' :
				        alert('You clicked hotspot Point03.');
				    case 'Point04' :
				        alert('You clicked hotspot Point04.');
				}
			}
Get your hotspot ID from the Skin ID value that you added to the Hotspot List in the Hotspot Editor. Beware, the skin.js file gets over-written each time the pano tour is output again. So save a copy of skin.js outside your output folder.
ScottWitte
Posts: 96
Joined: Wed Aug 29, 2007 9:33 pm
Location: Milwaukee, USA
Contact:

KNielepkowicz wrote:Is there any way to execute javascript code when clicking on hotspot or buton?
Yes. I do it all the time.

Use the action, "Go To URL". In the URL field enter "javascript:[function(parameters)]" (no quotes). Examples:

javascript:yesPlay();
javascript:loadPano('assets/AssemblyCombo_mbl.xml','');
javascript:autoRotateDelay(.12,4,.5);

Note: You must only use single quotes ('). Double quotes (") crash the player.

Just curious. Did you shoot this?
KNielepkowicz
Posts: 5
Joined: Mon Jan 13, 2014 12:40 pm

Thanks for answers :D For past few days I have been ill, so I can't even sit in front on computer :(

First link isn't my work, only example. This is my vr tour : http://fotomilo.pl/VrTour.aspx?pano=cme ... mochodow_2 , very sad one, lots of unkempt old cars. When collector and owner died, his son inherited almost all of them... and this is the result how he cared about them. Do you know Herman Goring? German minister of aircraft? He had white Mercedes 540K , this car was in collection....
Post Reply