Executing LC from JavaScript in Browser Widget?

jpatten · Post by **jpatten** » Mon Feb 13, 2017 10:59 pm

Hi All,

I'm in need of some JavaScript intervention

A few weeks back I started toying with the idea of getting a hotspot in a panorama, which was sitting inside a browser widget, to communicate with LiveCode. The initial discussion was here: http://lists.runrev.com/pipermail/use-l ... 34509.html

That work was started after I saw a similar thing posted here: http://forums.livecode.com/viewtopic.ph ... 24#p145062 This was done with the Google Maps API and map markers.

It took me a while, as I have almost no JS experience, but eventually I got a pano, created with a trial version of Pano2VR http://ggnome.com/pano2vr , to trigger the LiveCode handler via a hotspot within the panorama. However, once the hotspot is clicked, any click within the browser widget triggers the handler in LiveCode. I have not been able to figure out what JavaScript I need to use to limit this JS function to only the hotspot?

So in an effort to make the problem as simplified as I can, I created a LiveCode project that has one button that triggers the javascript function, liveCode.myLiveCodeHandler, and triggers LiveCode to open and answer dialog window. The button works. However, it suffers from the same problem as the panorama LiveCode project. You can click within any part of the browser widget, and it will trigger the answer dialog in LiveCode.

Could someone spell out for me what Javascript code I need to use in order to get the LiveCode handler to work when clicking the button?

I have attached a copy of the stack below.

I would be greatly appreciative!

Thank you!
John Patten
SUSD

jpatten · Post by **jpatten** » Tue Feb 14, 2017 12:34 am

Ok, made some progress...

So I figured I had to identify the specific button, or id, that I was clicking on. After the first click of the button, and the triggering of the LiveCode handler, the handler was triggered just by clicking the "canvas" of the browser widget. That lead me to believe that the original javascript could not determine what object should trigger the javascript function. So if I could identify the button id in the javascript function that should help.

So that is what I did. The following html/javascript code should be set in the custom property of the stack (in the example stack I shared.)

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>

The way these functions and variables are written in JavaScript are very confusing coming from LiveCode. They almost seem written backwards. Now that I think about it, why couldn't I reverse the myFunction and myFuntion2 so it looks more like a variable I'm familiar with...? Wait, those aren't variables because they don't say var in front of them.... I don't know what you would call these, "document.getElementById(clicked_id).onclick = myFunction"...expressions?

In any case, this seems to work by identifying the button ID that is clicked on and then directing it to the proper function.

A little progress....

capellan · Post by **capellan** » Thu Feb 16, 2017 11:13 pm

This forum thread could become more visible in the Rich Media forum if you change the subject from "Executing LC from JavaScript in Browser Widget?" to something like "VR Panorama using browser widget"

At first, when I read the title, I though that this question belonged to another forum in this site.

[-hh] · Post by **[-hh]** » Sat Mar 11, 2017 1:52 am

Hi John, saw this too late, but the following may still be helpful for the project.

You script too much. This is now a simple html for a click button that calls your handler. Nothing else needed.

Code: Select all

<html><head></head><body><p><center>
   <button onclick="liveCode.myLiveCodeHandler2('Hello',123,'Bye');">Click me</button>
</center></p></body></html>

You may also catch the mouseLoc/clickLoc in your LC handler.

Code: Select all

-- in script of the widget or script of the card
on myLiveCodeHandler2 pID, pArg1, pArg2
   put the mouseLoc into fld 2
   answer "You clicked the 'Click Me' button" & cr & (pID, pArg1, pArg2)  as sheet
   --go next card
end myLiveCodeHandler2

LiveCode Forums

Executing LC from JavaScript in Browser Widget?

Executing LC from JavaScript in Browser Widget?

Re: Executing LC from JavaScript in Browser Widget?

Re: Executing LC from JavaScript in Browser Widget?

Re: Executing LC from JavaScript in Browser Widget?