Example HTML5 conversion
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
- VIP Livecode Opensource Backer
- Posts: 4002
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Example HTML5 conversion
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
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.
Re: Example HTML5 conversion
That was a good little game to play. Impressive it all transpiled, including graphics.
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Example HTML5 conversion
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
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
-
- VIP Livecode Opensource Backer
- Posts: 4002
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: Example HTML5 conversion
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
@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
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Example HTML5 conversion
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
= 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
-
- VIP Livecode Opensource Backer
- Posts: 4002
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: Example HTML5 conversion
there is no answer dialog in that stack.= 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.
Just installed FireFox 40.0.3 for Mac and fullscreen did work but the cursor was way way off.= 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.
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.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
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
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Example HTML5 conversion
Hi Bernd.
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.
Hermann
I meant the command "answer". I just found one usage in your button "Reset".Bernd wrote:there is no answer dialog in that stack.
I think it is currently smaller, there is so much to do for that.Bernd wrote:... whether the set of working features is larger than the set of non-working features ...
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.
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?Bernd wrote:I do know though that some stack with send in time did not work.
Hermann
shiftLock happens
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Example HTML5 conversion
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
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
-
- VIP Livecode Opensource Backer
- Posts: 4002
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: Example HTML5 conversion
Hermann,
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
unfortunately it did not work. I also made a button to set the traversalOn of every control to false.If you use the minimal HTML code I forwarded from the HTML5 guide to MaxV's question, it will not be there.
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
-
- VIP Livecode Opensource Backer
- Posts: 4002
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: Example HTML5 conversion
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
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
-
- VIP Livecode Opensource Backer
- Posts: 4002
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: Example HTML5 conversion
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
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
-
- VIP Livecode Opensource Backer
- Posts: 3901
- Joined: Sat Mar 24, 2007 2:54 am
- Location: Palo Alto
Re: Example HTML5 conversion
Hi Bernd,
I might have to try some HTML
Simon
Very very cool.a "paint" stack which uses graphics and at the end of a drawing converts them to an image via snapshot.
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!
-
- VIP Livecode Opensource Backer
- Posts: 4002
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: Example HTML5 conversion
Hi Simon,
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
The stack is a slight modification of http://forums.livecode.com/viewtopic.ph ... =30#p43086 "paintGradient"Simon wrote:Hi Bernd,Very very cool.a "paint" stack which uses graphics and at the end of a drawing converts them to an image via snapshot.
I might have to try some HTML
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
Re: Example HTML5 conversion
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!
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
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Example HTML5 conversion
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 ...
Hermann
p.s. Why don't you simply add a check button to toggle drawing mode and paint mode?
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 ...
I'm biased too, biased positive towards HTML5. Already now this funding has TMHO more returns than other (extensively) funded parts ...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.
Hermann
p.s. Why don't you simply add a check button to toggle drawing mode and paint mode?
shiftLock happens