Example HTML5 conversion

Bringing your stacks to the web

Moderators: heatherlaine, Klaus, FourthWorld, robinmiller, kevinmiller

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3229
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Example HTML5 conversion

Post by bn » Tue Sep 01, 2015 11:31 am

Hi all,

I have an overview of my HTML5 stacks at
http://berndniggemann.on-rev.com

(thanks Hermann for the html template of the site)

I also make a reference to them in this first post and post them individually in this thread

I just took a stack I posted on livecodeshare
http://livecodeshare.runrev.com/stack/445/Colorpuzzle
and knowing nothing about HTML I just made a HTML5 standalone

It worked surprisingly well. Amazing, just converting it to HTML5 was only compile time.

The stack lets you pick a color from the bottom pane and then this color sticks to the cursor and you move it to the top pane to match the color and click again. Then you either have a hit or a miss. Counter work.
The interface (sticking color square) was intended for touch devices.
The 3 right sided sliders let you adjust the colors to make it more difficult/easier. Just play with them.
Some elements like buttons/sliders don't look quite right but basically it works.
Tested in Safari.

here is the link to the HTML5 version
----------------------------------
http://berndniggemann.on-rev.com/colorp ... uzzle.html
----------------------------------


more HTML5 example links from postings in this thread further down follow here

------------------------------------------------------------------------
Scrolling images, taxes graphics:
http://berndniggemann.on-rev.com/scroll ... croll.html

see also http://forums.livecode.com/viewtopic.ph ... 14#p131728

------------------------------------------------------------------------
Paint with graphics/gradients and take snapshot to add to image
http://berndniggemann.on-rev.com/paintg ... dient.html

see also http://forums.livecode.com/viewtopic.ph ... 14#p133410

------------------------------------------------------------------------
looks like a lava-lamp
http://berndniggemann.on-rev.com/easter/easteregg.html

see also http://forums.livecode.com/viewtopic.ph ... 46#p134346

------------------------------------------------------------------------
circular progress/warning
http://berndniggemann.on-rev.com/progress/progress.html

see also http://forums.livecode.com/viewtopic.ph ... 66#p134966

------------------------------------------------------------------------
a steampunk progress machine
http://berndniggemann.on-rev.com/steam/ ... gress.html

really taxes the engine

see also http://forums.livecode.com/viewtopic.ph ... 15#p136775

------------------------------------------------------------------------
strangeWorld
http://berndniggemann.on-rev.com/strang ... World.html
on the fly mirroring of image via imageData

see also http://forums.livecode.com/viewtopic.ph ... 85#p142185


Kind regards

Bernd
Last edited by bn on Mon May 09, 2016 4:28 pm, edited 9 times in total.

scrabbles
Posts: 25
Joined: Sat Dec 20, 2014 4:32 am
Location: Melbourne, Australia

Re: Example HTML5 conversion

Post by scrabbles » Wed Sep 02, 2015 10:40 am

That was a good little game to play. Impressive it all transpiled, including graphics.

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

Re: Example HTML5 conversion

Post by [-hh] » Wed Sep 02, 2015 11:49 am

Hi Bernd,

we had the same idea of posting positive examples, at closely the same time. While preparing my post I had a break and didn't notice the work you did meanwhile, sorry (aber auch: Doppelt genäht hält besser!).

I tested your fine example using several browsers. The colour shading had small differences, but not more than between two different monitors. This is unavoidable, in sum a really good result!

What I'm interested in is that fullscreen (button at top right) works from a local file but not from your webserver. Are there serverside preferences that block this?

Hermann
shiftLock happens

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3229
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Example HTML5 conversion

Post by bn » Wed Sep 02, 2015 12:20 pm

Hi,

@scrabbles thank you for your kind words

@Hermann

I also noticed that fullscreen for the server version did not work, just had a look at the code and could not find anything that would give a hint. (no resize handlers etc.)
But fullscreen did not work for local access either (by double clicking the "colorpuzzle.html" file in the folder and looking at the puzzle locally.

Another thing that I did not understand was that on my iPad using iOS 8.1 there was a type input field showing up that I could not get rid of. No text field is focusable. ???

I see you are very productive in posting Rasberry suitable stacks. The collection grows and grows. Very impressive.

Kind regards
Bernd

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

Re: Example HTML5 conversion

Post by [-hh] » Wed Sep 02, 2015 1:11 pm

Hi Bernd.

= The text field may come from an answer dialog you have somewhere in a script. This doesn't work yet (simple "ask" works), but the field may be already prepared for that. I couldn't see it with my trials here.
= I tested again fullscreen: Safari does nothing, Firefox (my default browser) goes fullscreen (locally and from server), also Chrome (from a server). We have here the first little cross-browser problem.

What I propose to you is to write down for us the special things that work fine with your stack (dragging, gradient, essential functions, ...). I think this is very helpful at this stage.
You do it in two minutes for your own stack, others need at least an hour to go through your scripts and objects to have it all.
I once saw several "little stacks" of category "graphical goody" by bn. Some of them use special features only, would be interesting to test with HTML5.
Perhaps we should make one thread "graphics examples", one "buttons and fields examples", one "timing examples" (clocks etc) and so on? Certainly others will come in.

Hermann
shiftLock happens

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3229
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Example HTML5 conversion

Post by bn » Wed Sep 02, 2015 1:54 pm

= The text field may come from an answer dialog you have somewhere in a script. This doesn't work yet (simple "ask" works), but the field may be already prepared for that. I couldn't see it with my trials here.
there is no answer dialog in that stack.
= I tested again fullscreen: Safari does nothing, Firefox (my default browser) goes fullscreen (locally and from server), also Chrome (from a server). We have here the first little cross-browser problem.
Just installed FireFox 40.0.3 for Mac and fullscreen did work but the cursor was way way off.
What I propose to you is to write down for us the special things that work fine with your stack (dragging, gradient, essential functions, ...). I think this is very helpful at this stage
You like set theory :) So it depends whether the set of working features is larger then the set of non-working features. Will see what I can extract from my experimentation.

I do know though that some stack with send in time did not work. (a clock among others) I don't know if that is known or even supposed to work.

Kind regards
Bernd

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

Re: Example HTML5 conversion

Post by [-hh] » Wed Sep 02, 2015 4:30 pm

Hi Bernd.
Bernd wrote:there is no answer dialog in that stack.
I meant the command "answer". I just found one usage in your button "Reset".
Bernd wrote:... whether the set of working features is larger than the set of non-working features ...
I think it is currently smaller, there is so much to do for that.
But more inportant, I believe to build stacks and rely on features you know they are working is the better strategy than to build stacks and avoid features, that are not working. The first strategy has success, the second may have success only.
Bernd wrote:I do know though that some stack with send in time did not work.
My first stack in the thread "successful tests" contains an exactly working text clock (click at the bottom field to start/stop). There works "send in time", pure polygon graphics work too. Some other feature of your graphics clock may be crashing, is it a resizable or an at startup resized object?

Hermann
shiftLock happens

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

Re: Example HTML5 conversion

Post by [-hh] » Wed Sep 02, 2015 10:31 pm

Bernd,

I now know from reading the generated html file what your "textbox" is.
It is a progress bar displayed on "slower" machines while async loading the 10 MByte javascript.

If you use the minimal HTML code I forwarded from the HTML5 guide to MaxV's question, it will not be there.

Hermann
shiftLock happens

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3229
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Example HTML5 conversion

Post by bn » Wed Sep 02, 2015 11:51 pm

Hermann,
If you use the minimal HTML code I forwarded from the HTML5 guide to MaxV's question, it will not be there.
unfortunately it did not work. I also made a button to set the traversalOn of every control to false.

Still the input-keyboard popped up.

Testing this is kind of tedious since I have to upload 17 MB through a slow connection repeatedly when making changes to the stack. (OK changing the html file was fast)

Anyways, thank you.

Kind regards
Bernd

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3229
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Example HTML5 conversion

Post by bn » Thu Sep 17, 2015 9:07 pm

here is another example of HTML5 compilation.

http://berndniggemann.on-rev.com/scroll ... croll.html

It is a stack that scrolls images and taxes graphic display.

use the big swich button to start all three scollers, use the sliders to change speed and direction. Use the small switches to start/stop a single scroller.

I converted the images to BGR instead of RGB (a known bug)
I had to use the clickLoc instead of mouseLoc (a known bug)
I had to use the BGR swap for gradient colors (a reported bug)

Otherwise it works quite well, a bit slower than in the IDE

Kind regards
Bernd

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3229
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Example HTML5 conversion

Post by bn » Sat Oct 24, 2015 3:58 pm

An example of a HTML5 conversion:

a "paint" stack which uses graphics and at the end of a drawing converts them to an image via snapshot.

LC8 dp7, tested on Mac 10.9.5 and Sarari 9.0.1

http://berndniggemann.on-rev.com/paintg ... dient.html

works well after some modifications: option-menu does not work, the default sliders (motif) look awful, changed to custom sliders.

takes a bit to download.

Kind regards
Bernd

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am
Location: Palo Alto

Re: Example HTML5 conversion

Post by Simon » Sat Oct 24, 2015 7:30 pm

Hi Bernd,
a "paint" stack which uses graphics and at the end of a drawing converts them to an image via snapshot.
Very very cool.
I might have to try some HTML :)

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3229
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Example HTML5 conversion

Post by bn » Sat Oct 24, 2015 7:51 pm

Hi Simon,
Simon wrote:Hi Bernd,
a "paint" stack which uses graphics and at the end of a drawing converts them to an image via snapshot.
Very very cool.
I might have to try some HTML :)
The stack is a slight modification of http://forums.livecode.com/viewtopic.ph ... =30#p43086 "paintGradient"

It is really cool to deliver an app via a browser. I tested this stack with my brother who was not at all impressed by the fact that it ran in his browser. And I think that is what is happening. People use the stuff whichever way it is presented, the easier the better. And running it in a browser is kind of "natural" nowadays.

On top many things run very well and at good speed in LC-HTML5. But then again I am biased since I helped fund the thing. :) you want a T-shirt? :)

I think Livecode is really up to something with LC-HTML5, another way to deploy easily to a very accessible "operating system"

Kind regards
Bernd

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

Re: Example HTML5 conversion

Post by peter-b » Sat Oct 24, 2015 8:24 pm

Thank you for your kind words, Bernd!

We're going to do the best we can to make HTML5 deployment work as well as possible and I'm really pleased by the amount of progress we've managed to make so far. We're definitely going to have even better functionality and more working features within before the end of the year. Unfortunately, I don't think it'll ever be possible to make the HTML5 engine work identically to the native engines -- there will be some things that will always just have to work slightly differently. But we'll try to get it as close as possible!
LiveCode Open Source Team — @PeterTBBrett — peter.brett@livecode.com

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

Re: Example HTML5 conversion

Post by [-hh] » Sat Oct 24, 2015 11:41 pm

Hi Bernd,

what a wonderful 'demo', it's already a basic web app.
The sliders are worth an own demo and should become members of "the tools", being widget or not ...
Bernd wrote:On top many things run very well and at good speed in LC-HTML5.
But then again I am biased since I helped fund the thing.
I'm biased too, biased positive towards HTML5. Already now this funding has TMHO more returns than other (extensively) funded parts ...

Hermann

p.s. Why don't you simply add a check button to toggle drawing mode and paint mode?
shiftLock happens

Post Reply

Return to “HTML5”