Javascript function tied to hotspot and not entire canvas?

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
jpatten
Posts: 5
Joined: Thu Feb 02, 2017 2:01 pm
Location: Modesto, California
Contact:

Hi All,

I have a javascript function that is being called from a hotspot. The function looks like the following in the skin.js:

Code: Select all

this._svg_1.onclick=function (e) {
				window.addEventListener('click', function() {liveCode.myLiveCodeHandler2();});
			}
This works the first time you click the hotspot. However, the function then gets triggered just by clicking the canvas and not the hotpsot. I only want it triggered by the hotspot.

I built a very basic html page to simplify the problem for myself. The following script works fine in the browser window, and the functions are called only when the user clicks each button:

Code: Select all

<!DOCTYPE html>
<html>
<body>

<p>Click the button to trigger a function that will trigger an answer dialog in LiveCode.</p>

<button id="1">Button 1</button>

<p>

<button id="2">Button 2</button>

<script>
var myFunction = document.getElementById('1').addEventListener('click', function() {liveCode.myLiveCodeHandler2();});
//the above button is identified by having the id of '1'. That is how it is able to call a specific function.

var myFunction2 = document.getElementById('2').addEventListener('click', function() {liveCode.myLiveCodeHandler1();});


document.getElementById(clicked_id).onclick = myFunction
document.getElementById(clicked_id).onclick = myFunction2
// The above script is getting the button IDs when a user clicks on a button.

</script>

</body>
</html>
This script use an expression to return the id of the button clicked, and then uses the id to determine which var myFunction to execute.

How to I get Pano2VR skin.js to specifically identify the hotspot that is being clicked on? I’m not very familiar with JavaScript, but it seems the issue is with the line:

Code: Select all

window.addEventListener('click', function() 
Thank you!

John Patten
SUSD
IronWagen
Posts: 47
Joined: Mon Nov 30, 2015 4:34 pm

Hi,

In the skin editor, add a 'Mouse Click' action to your hotspot and make it 'Go to URL' and set the URL to javascript:myfunction(me.hotspot.title, me.hotspot.description, this); Now when you click on the hotspot it launches the myfunction with the hotspot title, description and the html element it self as parameters.

Pano2VR does not create ids for html elements. I have struggled with this same problem. If passing the element with 'this' is not enough, you could make a 'Reload' action in the skin editor which fires every time a panorama is loaded. Make it launch a function and in that function loop through all of the hotspots and give them ids according to the loop index. Example (Jquery):

$(".ggskin_hotspot").each(function(i) {
id = 'hotspot_'+i;
$(this).prop('id',id);
});

Other way is to modify the skin.js and add an id to hotspot like: this.__div.setAttribute('id', me.hotspot.id);
You could even remove the 'Mouse click' action in the skin editor and replace it with this in the reload function:

$(".ggskin_hotspot").bind("touchstart touchend touchmove click",function(event){
hotspotid = this.id;
doClick(hotspotid, event);
});

I hope this helps!
Post Reply