Hotspots Html5 Javascript Function Calls

Q&A about the latest versions
Post Reply
BHiggins
Posts: 13
Joined: Thu Feb 02, 2012 11:41 am

This is more an FYI because the answer was supplied by Garden Gnome while applying for the forum, but it may be useful to others. Here was my Question:
it used to be that I could place in hotspot url something like: javascript:myFunction('var1','var2'); and it would call the function from the host page perfectly.

Now the latest version of the js file pano2vr_player.js handles the url differently.

This script has been added to the openUrl function:
if(url.indexOf("://")==-1&&url.substr(0,1)!="/"){
url=basePath+url;

}

which adds basePath to javascript:myFunction('var1','var2'); which renders the javascript call useless.

any ideas on how to structure the call from the hotspot editor?

HERE WAS THE ANSWER:

Regarding the base path for the moment you need to hack the skin.js
file and change the method to call the function directly, next version
will do the right thing automatically.

This is acceptable to me... I was hoping I would not have to do that, but given that the problem will be addressed, I am pleased. Here is what needs to be changed in the skin.js file to make the above happen:
(The url will not be carried over properly so you can either parse the url to look for javascript and use only the portion from javascript: on or simply just place the function call in the skin.js file)

Look For this set of code in your hotspot skin function SkinHotspotClass:
this.YOURHOTSPOTNAME.onclick=function () {
me.player.openUrl(me.hotspot.url,me.hotspot.target);
}
replace me.player.openUrl(me.hotspot.url,me.hotspot.target); with your own function call for example:
this.YOURHOTSPOTNAME.onclick=function () {
yourCustomJavascriptFunction('variableHere',variable2Here','etc');
}

Hope this helps someone
ranonE
Posts: 11
Joined: Mon Feb 20, 2012 4:00 pm

Thanks for the explanation. I replaced the line:

Code: Select all

"me.player.openUrl(me.hotspot.url,me.hotspot.target);"
with:

Code: Select all

if ( /* TRUE if match a javascript code  */ ) {
  eval(me.hotspot.url);
} else {
  me.player.openUrl(me.hotspot.url,me.hotspot.target);
}
My problem is that on the hotspot with code "javascript:" I have a double execution of the code.
Any suggestions?

When will you release the next Pano2VR version with a fix in the code?
Thanks.
User avatar
Hopki
Gnome
Posts: 13027
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
As a guide to release dates, please see this link: http://gardengnomesoftware.com/bt/roadmap_page.php
Select Pano2VR in the Project drop down menu, when the roadmap reaches 100%, the build will go for product testing and then on to release.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
ranonE
Posts: 11
Joined: Mon Feb 20, 2012 4:00 pm

Thanks for your reply, Hopki. I will follow the roadmap page frequently.

I'm waiting for someone with my same problem, the double execution of the javascript code on Safari Mobile (iPhone/iPad). The iOS Simulator and Safari on Mac work perfectly, without errors.
BHiggins
Posts: 13
Joined: Thu Feb 02, 2012 11:41 am

ranonE wrote:Thanks for the explanation. I replaced the line:

Code: Select all

"me.player.openUrl(me.hotspot.url,me.hotspot.target);"
with:

Code: Select all

if ( /* TRUE if match a javascript code  */ ) {
  eval(me.hotspot.url);
} else {
  me.player.openUrl(me.hotspot.url,me.hotspot.target);
}
My problem is that on the hotspot with code "javascript:" I have a double execution of the code.
Any suggestions?

When will you release the next Pano2VR version with a fix in the code?
Thanks.
Hi,

I am unsure how you are getting a double execution, but I don't really understand exactly what your code is doing. Can you place the exact code you are using for the "test of javascript", and does the eval statement ignore the part of the url that is erroneous? I can see why you would want to do this to make a universal skin, but if you are stripping out the javascript portion of the url, then I should think that you could make it work at that point. The problem that I was having was that the pano2vrplayer.js script was adding the base to the url, which caused the url not to properly execute.

Burley
ranonE
Posts: 11
Joined: Mon Feb 20, 2012 4:00 pm

BHiggins wrote: Hi,

I am unsure how you are getting a double execution, but I don't really understand exactly what your code is doing. Can you place the exact code you are using for the "test of javascript", and does the eval statement ignore the part of the url that is erroneous? I can see why you would want to do this to make a universal skin, but if you are stripping out the javascript portion of the url, then I should think that you could make it work at that point. The problem that I was having was that the pano2vrplayer.js script was adding the base to the url, which caused the url not to properly execute.

Burley
With the original "skin.js" code, if I insert "javascript:alert('TEST')" into the URL textfield in the Poin Hotspots window, I will have as result a new page in my browser with "javascript:alert('TEST')" in the address bar. In order to prevent this wrong action, as suggested by BHiggins, I modified the "skin.js" file.

Now, with the IF condition I check if my URL textfield contains the JavaScript code (javascript:bla bla bla), if so I run this with eval() function. But I'm getting a double execution on my iPad/iPhone, but no in the iOS Simulator or iMac.

You don't encountered the same problems?
Is there a better way to be able to perform custom functions in JavaScript on mouse click?

Daniel
ranonE
Posts: 11
Joined: Mon Feb 20, 2012 4:00 pm

Someone has encountered the same problem?
BHiggins
Posts: 13
Joined: Thu Feb 02, 2012 11:41 am

Hi ranonE,

I have downloaded version 3.1.3 of pano2VR (I am using the 64Bit Cocoa version(mac)) and the problem as described above seems to be resolved, which in your case should eliminate the need to eval() the code.

Hope that helps you

Burley
ranonE
Posts: 11
Joined: Mon Feb 20, 2012 4:00 pm

I just updated to version 3.1.3 of pano2VR (64bit Cocoa for MAC). I have the same problem. Now I will explain my steps:

- open Pano2VR 3.1.3 64bit Cocoa - Revision 1944/4.7.3 Feb 27 2012, 12:19:25
- add my input file in cube faces format
- add a point hotspot with URL=javascript:alert('test')
- add a HTML5 output format with "simplex_notooltip.ggsk" skin (this skin has the hotspot template)
- create the output
- open the "skin.js" just created and modify the code (view the patch file - skin.js - attached to the post)
- open the HTML output file on [1] Safari on Mac and all work perfectly; [2] iOS Simulator on Mac and all work perfectly; [3] Safari Mobile on iPad/iPhone and have a double alert with "test" string

If I remove the EVAL() function I am no longer receiving any alert messages, on [1]/[2]/[3] (all) cases. Am I wrong something?
skin.js
The skin.js patch
(719 Bytes) Downloaded 498 times
BHiggins
Posts: 13
Joined: Thu Feb 02, 2012 11:41 am

ranonE wrote:I just updated to version 3.1.3 of pano2VR (64bit Cocoa for MAC). I have the same problem. Now I will explain my steps:

- open Pano2VR 3.1.3 64bit Cocoa - Revision 1944/4.7.3 Feb 27 2012, 12:19:25
- add my input file in cube faces format
- add a point hotspot with URL=javascript:alert('test')
- add a HTML5 output format with "simplex_notooltip.ggsk" skin (this skin has the hotspot template)
- create the output
- open the "skin.js" just created and modify the code (view the patch file - skin.js - attached to the post)
- open the HTML output file on [1] Safari on Mac and all work perfectly; [2] iOS Simulator on Mac and all work perfectly; [3] Safari Mobile on iPad/iPhone and have a double alert with "test" string

If I remove the EVAL() function I am no longer receiving any alert messages, on [1]/[2]/[3] (all) cases. Am I wrong something?
skin.js

Hi ranonE,

I figured out before I read this post that (I think I did anyway) it appears as if the pano2vr folks have added a statement in the script that tests for a target, and if you have target="_self" specified then you should be ok. here is the test I did:
- open Pano2VR 3.1.3 64bit Cocoa
- add my input file in cube faces format
- add a point hotspot with URL=javascript:alert('test'); target='_self' --- I add the semicolon (I don't know if this makes a difference or not)
- add a HTML5 output format with "my _custom_Template.ggsk" skin (this skin has the hotspot template)
- create the output
- The skin.js should not need to be modified.

Here is a simple example for you to look at:
http://www.motion-vr.net/test/tour.html

Here is the hotspot code from the xml generated:

<hotspots width="180" height="20" wordwrap="1" >
<hotspot id="hs1" skinid="Hotspot1" pan="-148.469" tilt="0.756077" title="Tour1" url="tour1.xml" target="_self" />
<hotspot id="hs2" skinid="Hotspot2" pan="-1.5269" tilt="-6.2348" title="More Information" url="javascript:alert('test');" target="_self" />
</hotspots>

Also, I checked this on my iPad, and it only executed once. If I omit the target = "_self" and replace leave blank, the javascript function will not work at which a solution like you describe above would need to be implemented. I hope this helps.

Burley
ranonE
Posts: 11
Joined: Mon Feb 20, 2012 4:00 pm

Hi ranonE,

I figured out before I read this post that (I think I did anyway) it appears as if the pano2vr folks have added a statement in the script that tests for a target, and if you have target="_self" specified then you should be ok. here is the test I did:
- open Pano2VR 3.1.3 64bit Cocoa
- add my input file in cube faces format
- add a point hotspot with URL=javascript:alert('test'); target='_self' --- I add the semicolon (I don't know if this makes a difference or not)
- add a HTML5 output format with "my _custom_Template.ggsk" skin (this skin has the hotspot template)
- create the output
- The skin.js should not need to be modified.

Here is a simple example for you to look at:
http://www.motion-vr.net/test/tour.html

Here is the hotspot code from the xml generated:

<hotspots width="180" height="20" wordwrap="1" >
<hotspot id="hs1" skinid="Hotspot1" pan="-148.469" tilt="0.756077" title="Tour1" url="tour1.xml" target="_self" />
<hotspot id="hs2" skinid="Hotspot2" pan="-1.5269" tilt="-6.2348" title="More Information" url="javascript:alert('test');" target="_self" />
</hotspots>

Also, I checked this on my iPad, and it only executed once. If I omit the target = "_self" and replace leave blank, the javascript function will not work at which a solution like you describe above would need to be implemented. I hope this helps.

Burley
Thank you very much for your patience.

Your test work perfectly on my iPad. I discovered that my problem occurred when I changed the path of the XML file. In this case, when I tap on the point hotspot on my iPad, the page is reloaded with the "javascript:alert('test');" in the address bar. Finally we found where it is wrong.

Daniel.
BHiggins
Posts: 13
Joined: Thu Feb 02, 2012 11:41 am

Hi Daniel,

Having many frustrating sessions in the past and receiving help from generous contributors, I am glad I help someone else for a change.

Burley
Post Reply