LC to JavaScript to PHP roundtrip

Bringing your stacks to the web

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

Post Reply
seaniepie
Posts: 143
Joined: Wed Sep 07, 2011 10:56 am

LC to JavaScript to PHP roundtrip

Post by seaniepie » Sun Jul 07, 2019 12:05 am

Hey,

I am really struggling to find any decent example code for even implementing the LC to Javascript let alone onward to PHP. Can anyone out there help me get my head around the basic procedure for doing this with some generic example code?

I want to produce a number of APIs that will make use of this kind of roundtripping. I know it 'can' be done but there is virtually no documentation or guide out there for any part of it from LC or here on this forum. The dictionary is practically useless and we still can't search any of the guides yet! The release notes have conflicting information and hard to tell when they are talking about emscripten HTML5/JS or LC Browser/widget use of HTML5 and JS. It's proving very frustrating.

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6965
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: LC to JavaScript to PHP roundtrip

Post by FourthWorld » Sun Jul 07, 2019 12:16 am

Unless you're using Node.js, JS and PHP are on opposite sides of the transaction, so I'm having a hard time understanding your goal.

More confusing is the customary use of "round trip" with program translation, which usually implies converting to something else and then back again to the original.

As for searching, now that all internal documentation is on the Web I just use Duck Duck Go and usually find what I'm looking for.

Are you making something for the browser, or the server?
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

seaniepie
Posts: 143
Joined: Wed Sep 07, 2011 10:56 am

Re: LC to JavaScript to PHP roundtrip

Post by seaniepie » Sun Jul 07, 2019 9:51 am

I am aware of the JS PHP issue and am using AJAX/JQuery to overcome this.

My biggest issue is getting data out of LC and back in. Strike the, my biggest issue is that there is practically no useful documentation for HTML5 usage. But all I want for now is a simple, usable command sequece, uptodate, not from 2015 early days emscripten, that tells us how to get data, client side, from LC to JS and from JS to LC.

Ps
Duck Duck Go can only show what exists and mixed up with a bunch of other references not necessarily from the LC documentation (unless you know the command that narrows it down to just the LC docs alone). I use google myself which does the same thing but it. It’s still a stupid way to go about something that should exist with the actual LC internal guide. Please don’t get distracted by this from the original intent of this post, that of HTML5 guidance.

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2166
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: LC to JavaScript to PHP roundtrip

Post by [-hh] » Sun Jul 07, 2019 3:21 pm

seaniepie wrote:My biggest issue is getting data out of LC and back in. Strike the, my biggest issue is that there is practically no useful documentation for HTML5 usage. But all I want for now is a simple, usable command sequece, uptodate, not from 2015 early days emscripten, that tells us how to get data, client side, from LC to JS and from JS to LC.
May be the documentation is sparse but there are a several samples (e.g. among the last ones of http://hyperhh.de/html5/ ).

This is similar to using javascript via a browser widget.
In a HTML5 standalone use
do <javascript string> as "javascript"
From the dictionary:
The result is set to the value returned by executing the script, as long as the value is a scalar (a string, number, boolean or undefined). Returning JavaScript arrays or objects is not supported.
This is a complete documentation. It is clear from that to use (usually) strings for the data transport, for example via base64Encoding (especially for images) or JSON.

Moreover, starting with LC 9, you have also javascriptHandlers ("cJavascriptHandlers") available for HTML5 standalones. See paragraph "HTML5 callbacks" in the release notes https://downloads.livecode.com/livecode ... -9_0_0.pdf

So, for LC->JS->LC you execute a javascript string in your calling web page and evaluate the result or a callback via a javascriptHandler in your standalone.
For JS->LC->JS you execute a callback via a javascriptHandler in your webpage and get the evaluated data back via a javascript string.
Javascript functions may be part of the javascript string or already defined in the calling web page.

The similarity between browser widget and a HTML5-standalone calling webpage enables us to do a lot of first tests in the IDE, for example by using

Code: Select all

on executeJS str
  if the platform is "HTML5" then
    do str as "javascript"
  else
    do str in widget "browser"
  end
end executeJS
and using the same names for the cJavascriptHandlers of the stack and the javascriptHandlers of the widget.

p.s. Can't see any advantage of using php client side (with HTML5 standalones).
shiftLock happens

seaniepie
Posts: 143
Joined: Wed Sep 07, 2011 10:56 am

Re: LC to JavaScript to PHP roundtrip

Post by seaniepie » Sun Jul 07, 2019 7:04 pm

Most of not all of your examples HH seem to be locked so we can’t see the code. So, lovely to see it perhaps can or can’t do these things but as for how....?

Php won’t be client side hence the need for AJAX to talk to it server side.

For some reason, when using 9.5 dp, javascriptHandlers was showing up as an error no matter what iteration of usage I tried. One release note said we use POST to send messages to the js handlers using javascriptHandlers to set the returns up. But that didn’t work so I assumed this must be out of date. Indeed, the dictionary does not list javascriptHandlers as a HTML5 property and does not come up in the list of usable terms when you select the HTML5 filter tag. And the syntax only lists it with regards widgets.

So, is ‘do as JavaScript’ the ONLY way to send messages to the browser. At least if you say yes, we have a definitive answer on this forum for the question.

And can you confirm that javascriptHandlers is the ONLY way to set up a return message from the browser via js, again so we have it on record here (even if it is broken in 9.5dp1).

Thanks both Richard and HH for your input. I am not ungrateful - I’m just puzzled and wish the answers were easier to track down. Let’s make it easier here and now for everyone else.

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2166
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: LC to JavaScript to PHP roundtrip

Post by [-hh] » Sun Jul 07, 2019 9:07 pm

What do you want? I am an ordinary LC user and have the same infos as you.
If you wish to complain about what you get for your HTML5 license then write to LC support.

I really wonder about your selective reading.
Most of not all of your examples HH seem to be locked so we can’t see the code.
To the contrary, the source of nearly all is available. The 'how-to', as often mentioned (for example in the first post of forums/HTML5/Successful tests) is given here: viewtopic.php?p=139080#p139080
... So, is 'do as JavaScript' the ONLY way to send messages to the browser....
As I said above: it is "the" way to send messages to the calling webpage from a HTML5 standalone.
... the dictionary does not list javascriptHandlers as a HTML5 property ...
That's why I linked above to the release notes that describe in detail how to use the cJavaScriptHandlers of the stack/standalone for callbacks.
... And can you confirm that javascriptHandlers is the ONLY way to set up a return message from the browser via js ...
You call one of the cJavascriptHandlers directly from the webpage. You can also get content from JS by using "do as javascript" from LC and then evaluate "the result". As written above ...

My HTML5 example "Do as JS (Basic test)" was written in LC 8, while callbacks were not yet available. So importing an image required to load it from the browser and then loading it into the standalone using "do as javascript". Now (in LC 9) you could do that import to LC directly after loading the image into the browser and then call a cJavascriptHandler of the standalone.

p.s. Some of my examples (FrameTalk, FetchURL) don't work in all of Safari/Firefox/Chrome/Opera.
The reason is the different handling of the Same-Origin-Policy between the browsers and even different versions of the browsers.
shiftLock happens

seaniepie
Posts: 143
Joined: Wed Sep 07, 2011 10:56 am

Re: LC to JavaScript to PHP roundtrip

Post by seaniepie » Sun Jul 07, 2019 9:31 pm

Why are you being aggressive?

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2166
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: LC to JavaScript to PHP roundtrip

Post by [-hh] » Sun Jul 07, 2019 10:28 pm

It's annoyed rather than aggressive. Because I don't like to write clear things twice. And why should I give statements about the ONLY ways to communicate with HTML5 standalones?

So sorry, it's my fault, I shouldn't have posted here.
shiftLock happens

seaniepie
Posts: 143
Joined: Wed Sep 07, 2011 10:56 am

Re: LC to JavaScript to PHP roundtrip

Post by seaniepie » Sun Jul 07, 2019 10:41 pm

I apologise if my tone came across as harsh. I was trying my best to show true appreciation, especially by my last sentence. Sorry :( I can't believe I am getting these personal attack on here again! I thought I was asking reasonable, straight forward questions. Instead of answers, I get questioned about my motives :shock: Harsh!

9.0.0 stable release notes:
HTML5 Callbacks - enable calling handlers in LiveCode emscripten standalones from JavaScript
Note This is still an experimental feature - details may change as development continues.
Stack setup
Each stack can be configured to expose its handlers & functions to JavaScript. This is done through a custom property of the stack - cJavascriptHandlers . (This will be replaced in the future by a
javascriptHandlers property which will then be a reserved keyword)
. The cJavascriptHandlers property is a return-delimited list of handler names. The named handlers do not have to be defined at
the time the stack is loaded, however calling an undefined handler from JavaScript will result in an error.
Calling from JavaScript
The standalone engine will create a liveCode object on the DOM document object. To this object will be attached the findStackWithName method that can be called to return a JavaScript stack object.
Each stack object will have methods corresponding to the exposed handlers of that stack. For instance, a stack with the cJavascriptHandlers property set to :

Code: Select all

performAction setProperty getProperty
will have methods named accordingly, which when executed will call the corresponding handler with the provided arguments.
JavaScript Example:

Code: Select all

var myStack = document.liveCode.findStackWithName(“HTMLTest”); 
var oldDocTitle = myStack.getProperty(‘documentTitle’); 
myStack.setProperty(‘documentTitle’, ‘Important Document’);
 myStack.performAction(‘sendEmail’);
AND also in 9.0.0 stable release notes:
Calling JavaScript from HTML5
JavaScript has been added to the alternateLanguages on the HTML5 platform.
It is now possible to call JavaScript code from HTML5 standalones by using the do <script> as <alternateLanguage> form of the do command.
This allows HTML5 standalones to interact with the browser within which they are running. The value of the JavaScript expression will be placed in the result variable:

Code: Select all

local tDocTitle
do "document.title" as "JavaScript" 
put the result into tDocTitle
These are the only notes to be found anywhere and only available in a release note in June of last year. Because it made the note about cJavascriptHandlers being replaced by 'a' javascriptHandlers' property which now exists in the dictionary, it seemed reasonable to assume that this was adopted. Either way, now it is definitely not working as quoted in the dictionary. Try it, you'll see. It throws up an error.

Not working, even if you put the name of the widget as you should:

Code: Select all

set the javascriptHandlers of widget to pHanderList
Also not working:

Code: Select all

-- Set up the browser javascript handler list
-- This code goes in a suitable setup handler
set the javascriptHandlers to "myJSHandler" & return & "myOtherJSHandler"

seaniepie
Posts: 143
Joined: Wed Sep 07, 2011 10:56 am

Re: LC to JavaScript to PHP roundtrip

Post by seaniepie » Sun Jul 07, 2019 10:48 pm

[-hh] wrote:
Sun Jul 07, 2019 10:28 pm
And why should I give statements about the ONLY ways to communicate with HTML5 standalones?
Because, as I stated, I am trying to make it absolutely clear for everyone simply because of the lack of documentation and so that I can begin compiling a definitive set of instructions that can be included in the LC Dictionary as I am woefully aware that LC's own resources for the docs have always been lacking. Help me to help you, me and everyone else. Please.

I'm sorry again I hadn't fully understood your description and missed what you felt to be most relevant amongst the rest of it, especially as twice you referred to is as 'javascriptHandelers' rather than the more relevant 'cJavascriptHandlers' you placed in parenthesis as if you had demoted it.

seaniepie
Posts: 143
Joined: Wed Sep 07, 2011 10:56 am

Re: LC to JavaScript to PHP roundtrip

Post by seaniepie » Sun Jul 07, 2019 10:56 pm

go back to my original post and tell me what part of it was unreasonable or provocative in any way.
If you wish to complain about what you get for your HTML5 license then write to LC support.
Where did I say even once anything against what I paid for, or any other complaint, for that matter? It is hard not to take these kinds of affronts personally. (I may have been thinking it a teeny bit but I'm confident I can work it out - eventually - perhaps with a little bit of help - if anyone is willing to provide any :?

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2166
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: LC to JavaScript to PHP roundtrip

Post by [-hh] » Sun Jul 07, 2019 11:40 pm

The term javascriptHandler is generally used for callbacks from JS to LC.

These are defined by the javascriptHandlers of widget <wName> for a browser widget
and by the cJavascriptHandlers of stack <sName> for a HTML5 standalone.

Code: Select all

put "handler1"&cr&"handler2" into pHandlerList
[Browser widget:

Code: Select all

set the javascriptHandlers of widget "browser" to pHandlerList
For many examples see viewtopic.php?f=93&t=29018 ]

HTML5 standalone:

In the stack 'HTMLTest' (stack script) write

Code: Select all

on openstack
  set the cJavascriptHandlers of this stack to pHandlerList
end openstack

on handler1 p1,p2
  put p1 into fld p2
end handler1
In the webpage write:

Code: Select all

<script>function callLC(s1,s2) {
var myStack = document.liveCode.findStackWithName('HTMLTest');
myStack.handler1(s1,s2); }</script>
Then in the webpage use directly

Code: Select all

var str= 'Hello'; callLC(str,'myField');
or from LC

Code: Select all

on mouseUp
  do "callLC('Hello','myField')" as javascript
end mouseUp
Both writes "Hello" into fld "myField".

p.s. A browser widget can't be used in a HTML5 standalone.
shiftLock happens

seaniepie
Posts: 143
Joined: Wed Sep 07, 2011 10:56 am

Re: LC to JavaScript to PHP roundtrip

Post by seaniepie » Sun Jul 07, 2019 11:59 pm

That's awesome, Perfect! Thanks, HH. This explains it very well.

--: Were any of you able to test and determine if the browser widget usage of the 'javascriptHandlers' property is indeed broken? There is a bug report for Android non-function https://quality.livecode.com/show_bug.cgi?id=21284 but nothing to say it does not even parse in the script editor at all. Thanks

seaniepie
Posts: 143
Joined: Wed Sep 07, 2011 10:56 am

Re: LC to JavaScript to PHP roundtrip

Post by seaniepie » Wed Jul 10, 2019 1:22 am

I worked out an awesome little cheat where I only need 1 handler in LC that can deal with any message from JS:

In Livecode have a handler like this to accept something from JS:

Code: Select all

on js_ReturnFromJS pCommand,p1,p2,p3,p4,p5,p6,p7,p8,p9
   put pCommand && "p1,p2,p3,p4,p5,p6,p7,p8,p9" into tScript
   do tScript
end js_ReturnFromJS
Add as many parameter 'p' numbers as you feel you'll need.

In JavaScript just use this call any time you want to send something back to LC:

Code: Select all

// This only once in each js function you need access to the stack:
    var myStack = document.liveCode.findStackWithName('{myStackName}');
   
// A variation on myStack.js_ReturnFromJS('{LC_CallName},'{Par1','Par2',etc...)
// whenever you need it:
    myStack.js_ReturnFromJS('testCommand','Johnny Walker','52 Abram Street');
For this example, back in LC, I have this:

Code: Select all

on testCommand pName, pAddress
   answer pName && pAddress
end testCommand
which, of course, displays a dialogue with the two parameters sent and all other parameters ignored by LC.

This way you only need to have this in your openStack handler:

Code: Select all

  set the cJavascriptHandlers of this stack to "js_ReturnFromJS"
or whatever name you choose. :mrgreen:

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2166
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: LC to JavaScript to PHP roundtrip

Post by [-hh] » Wed Jul 10, 2019 8:08 am

Glad you got the JS->LC part.

Using only "do" for callbacks can eat time and create problems, for example if one or several of the params is 10 MByte data, e.g. huge encoded imageData.

Of course we can use, as always in LC, several params (or use the params) of which one is a switch, so you still have only one callback handler.

In your case this could read:

Code: Select all

on js_ReturnFromJS pSwitch,p1,p2,p3,p4,p5,p6,p7,p8,p9
  switch pSwitch
    case "do"
      do p1 && p2
      break
    case "text"
      put p1 into fld p2
      break
    case "image"
      set width of img p1 to p2
      set height of img p1 to p3
      set text of img p1 to base64Decode(item 2 of p4)
      break
    case "timing"
      put the millisecs - p1 into fld "timing"
      break
    default
      put the internet date && the params into fld "Test"
  end switch
end js_ReturnFromJS
shiftLock happens

Post Reply

Return to “HTML5”