External communication

Bringing your stacks to the web

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

malte
Posts: 1098
Joined: Thu Feb 23, 2006 8:34 pm
Location: Ostenfeld germany
Contact:

External communication

Post by malte » Tue Nov 22, 2016 11:29 am

Hi,

just curious if the latest additions with do as javaScript will let us communicate from the stack to a Server API now. If so I would be very keen to see an example.

peter-b
Posts: 182
Joined: Thu Nov 20, 2014 2:14 pm
Location: LiveCode Ltd.

Re: External communication

Post by peter-b » Tue Nov 22, 2016 11:45 am

There's no reason why you shouldn't be able to use the new capability to do an XMLHttpRequest and fetch data, but I haven't yet had the opportunity to play around and see what's possible (or not).
LiveCode Open Source Team — @PeterTBBrett — peter.brett@livecode.com

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

Re: External communication

Post by [-hh] » Tue Nov 22, 2016 12:29 pm

Here an example that does NOT work. Throws an exception, error code -1.

Code: Select all

on mouseUp
   put fld "URI" into fu
   put line 10 to -1 of the script of me into js
   replace cr & "--" with cr in js
   replace "xxxxxxxxxx" with fu in js
   put js into fld "result"
   do js as "javaScript"
   put the result & cr before fld "result"
end mouseUp

-- function loadXMLDoc()
--    {
--    var xmlhttp;
--    xmlhttp=new XMLHttpRequest();
--    xmlhttp.onreadystatechange=function()
--    {
--    if (xmlhttp.readyState==4 && xmlhttp.status==200)
--    {
--    return xmlhttp.responseText;
--    }
--    }
--    xmlhttp.open("GET","xxxxxxxxxx",true);
--    xmlhttp.send();
--    }
-- loadXMLDoc();
shiftLock happens

peter-b
Posts: 182
Joined: Thu Nov 20, 2014 2:14 pm
Location: LiveCode Ltd.

Re: External communication

Post by peter-b » Tue Nov 22, 2016 12:47 pm

I think this is failing because you are trying to do a synchronous fetch using an asynchronous API.

When you call "LoadXMLDoc()", it creates and sends the HTTP request -- and then returns to LiveCode. The result of calling "LoadXMLDoc()" is empty. A bit later, when the HTTP request completes, it calls your "onreadystatechange" function that doesn't know what to do.

What happens if you use XMLHttpRequest's deprecated synchronous mode?

Code: Select all

var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
request.send(null);
if (request.status == 200)
    return request.responseText;
else
    return "";
LiveCode Open Source Team — @PeterTBBrett — peter.brett@livecode.com

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

Re: External communication

Post by [-hh] » Tue Nov 22, 2016 1:03 pm

The same result in the console: -1.
I tried an external URI and, in case this is an obstacle, not only from file but also from local server.

Nevertheless:
Communication with the browser via javaScript is a great addition. A big understatement to announce that in a single line!

Thanks a lot for this big progress in the HTML5 builder.

We now only need a few working examples (given time, I'll contribute too).

p.s. Isn't jQuery already contained in the engine? Can we use that?
shiftLock happens

peter-b
Posts: 182
Joined: Thu Nov 20, 2014 2:14 pm
Location: LiveCode Ltd.

Re: External communication

Post by peter-b » Tue Nov 22, 2016 1:06 pm

I've drafted a blog post that gives a worked example of using this new capability to manipulate the document surrounding the HTML5 app, and we're currently hoping to publish it tomorrow.

I wonder what's going on with the XMLHttpRequest? This could be a problem for anyone trying to make a liburl backend for HTML5. :(
LiveCode Open Source Team — @PeterTBBrett — peter.brett@livecode.com

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

Re: External communication

Post by [-hh] » Tue Nov 22, 2016 1:15 pm

There will be less problems to load (for example via jQuery) an extern source, text or image, into a <div>.
If LC is now able to read the contents of such a <div> (text or image) into the standalone, this could be a 'workaround'.
shiftLock happens

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

Re: External communication

Post by [-hh] » Wed Nov 23, 2016 8:10 pm

Hi Peter.

Now you posted in LC's blog an example of how to manipulate properties of the canvas by JavaScript.
Fine. I tried to manipulate an element different from the canvas, without success:

Code: Select all

put "var MyDiv1 = document.getElementById('DIV1'); " &cr & \
    "MyDiv1.innerHTML = 'Hello'; " into js
put js into fld "result"; do js as "JavaScript"
put the result & cr before fld "result"
Also a very interesting part is the other direction, the possibility to get something from the page (if not from outside) and have it available in the standalone.

I tried several very elementary things, without success, for example:

Code: Select all

do "return document.getElementById('DIV1').innerHTML;" as "JavaScript"
put the result into fld "result"
The standalone works and then crashes (returning -1 in the console).
Even your minimal example from the 9.0.0-dp2 release notes

Code: Select all

do "document.title" as "JavaScript"
put the result into fld "result"
doesn't work here. Why is 'the result' crashing the standalone?
shiftLock happens

peter-b
Posts: 182
Joined: Thu Nov 20, 2014 2:14 pm
Location: LiveCode Ltd.

Re: External communication

Post by peter-b » Wed Nov 23, 2016 8:33 pm

This is very interesting -- and somewhat concerning. Does JavaScript evaluation seem to work fine, as long as you are not trying to get a result back?
LiveCode Open Source Team — @PeterTBBrett — peter.brett@livecode.com

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

Re: External communication

Post by [-hh] » Wed Nov 23, 2016 8:57 pm

peter-b wrote:Does JavaScript evaluation seem to work fine, as long as you are not trying to get a result back?
Sadly, no. The examples from my last post above don't work at all here whether I'm asking for the result or not.

[Sorry, for my first answer I was fooled by a browser cache from testing the 'pure' javascript. That's why I repost now.]
shiftLock happens

peter-b
Posts: 182
Joined: Thu Nov 20, 2014 2:14 pm
Location: LiveCode Ltd.

Re: External communication

Post by peter-b » Wed Nov 23, 2016 9:05 pm

Okay, I have done some quick tests locally. Can you please confirm which edition of LiveCode 9 DP 2 you're using?

The following works fine for me (Community edition, Firefox 49.0 running on Fedora 24):

Code: Select all

if the platform is "HTML5" then
    do "document.title" as "JavaScript"
    put the result into field 1
end if
LiveCode Open Source Team — @PeterTBBrett — peter.brett@livecode.com

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

Re: External communication

Post by [-hh] » Wed Nov 23, 2016 9:17 pm

No success with LC Indy 9.0.0-dp2, Firefox 50.0 or Safari 10.01, MacOS 10.12.1.

I'll try other LC versions and platforms. Perhaps others come also in with their comfigurations and success reports?
shiftLock happens

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

Re: External communication

Post by [-hh] » Wed Nov 23, 2016 9:48 pm

Peter,

you really owe me a large drink (2017 in Edinburgh).
I have a HTML5 license and _thus_ am one of those, who don't have a working edition. :mrgreen:
Hope you have soon time to repair that for the Indy edition.

All my tests from above do work in the Community edition 9.0.0-dp2 (latest Firefox or Safari or Chrome on Mac OS 10.12.1). This opens the world for HTML5 standalones.

GREAT! Thank you so much again.

So for text both directions <div> <--> standalone work as they should!!
Tomorrow I'll start with testing binary data.

@Malte
We certainly have to solve the SCORM problems with external files --- a problem that is probably not solvable by the HTML5 builder.
shiftLock happens

peter-b
Posts: 182
Joined: Thu Nov 20, 2014 2:14 pm
Location: LiveCode Ltd.

Re: External communication

Post by peter-b » Wed Nov 23, 2016 11:12 pm

I've filed a bug report about the problem:
http://quality.livecode.com/show_bug.cgi?id=18903
LiveCode Open Source Team — @PeterTBBrett — peter.brett@livecode.com

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

Re: External communication

Post by [-hh] » Wed Nov 23, 2016 11:42 pm

Here two simplest of simple examples for those who don't know JS/HTML (and don't want/have to learn it). Just to see the interaction 'in principle'.

[1] Make a new stack, name it "javaScriptTest",
add 2 buttons and 1 field.

[2] Name one button "setDiv" and script it

Code: Select all

-- document.getElementById('DIV1').innerHTML = 'HereComesTheSun';
on mouseUp
   put the internet date into fu
   put line 1 of the script of me into js
   replace "-- " with empty in js
   replace "HereComesTheSun" with fu in js
   put js into fld 1; do js as "javaScript"
end mouseUp
[3] Name the other button "getDiv" and script it

Code: Select all

-- document.getElementById('DIV1').innerHTML;
on mouseUp
   put line 1 of the script of me into js
   replace "-- " with empty in js
   put js into fld 1; do js as "javaScript"
   put the result & cr before fld 1
end mouseUp
[4] Compile the HTML5 standalone. Open the generated file javaScriptTest.html with a text editor and add near the end of it, just before "</body></html>", the line

Code: Select all

<div id='DIV1'>iAmTheWalrus</div>
[5] Open the file javaScriptTest.html in your browser (latest Safari or Firefox; latest Chrome and Opera work also but need a running local webserver).

[6] Now watch the text at bottomleft of the JS console and the field, and click the buttons.
shiftLock happens

Post Reply

Return to “HTML5”