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: 3233
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Example HTML5 conversion

Post by bn » Wed Nov 11, 2015 9:56 pm

yet another HTML5 example

http://berndniggemann.on-rev.com/easter/easteregg.html

fool around with the sliders, the stack is completely useless but fun to watch.

Kind regards

Bernd

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

Re: Example HTML5 conversion

Post by bn » Wed Nov 25, 2015 10:37 pm

a kind of circular progress/warning

entirely made of LC Graphics

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

Kind regards
Bernd

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

Re: Example HTML5 conversion

Post by bn » Sun Jan 17, 2016 3:17 am

SteamPunkProgress

Of course completely useless.

http://berndniggemann.on-rev.com/steam/ ... gress.html

chained animated graphics, all made of Livecode graphics. Many gradients. Really pushes the HTML5 engine to its limits. (roughly 100% in Safari in a MacBookPro Mid 2010) Depending on your hardware your mileage may vary.

for more examples of HTML5 apps: http://berndniggemann.on-rev.com

Kind regards
Bernd

DR White
Posts: 421
Joined: Fri Aug 23, 2013 12:29 pm
Location: Virginia, USA

Re: Example HTML5 conversion

Post by DR White » Sat Jan 23, 2016 5:48 pm

Bernd,

That is a very cool HTML5 app example.

I have been playing with LC for about 3 years, although I still consider myself a beginner. I have a Indy license with server.

How do I start to learn about "The basics of using LC to develop HTML5 apps on a website."?

Thanks,

David

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

Re: Example HTML5 conversion

Post by bn » Mon Jan 25, 2016 7:22 pm

David,
That is a very cool HTML5 app example.
thank you.
How do I start to learn about "The basics of using LC to develop HTML5 apps on a website."?
Actually it is fairly easy to deploy a stack to a website.

In your stack you choose in standalone settings "HTML5" and then build your standalone. It will built a standalone in a folder that contains currently (for DP 10) 4 files.
standalone folder.png
You upload those for (or more for e.g. DP13) into a folder you create on your website. You could use ftp or cPanel to do that.

Then you use the link to the html file (in this case the steampunkprogress.html) as a full link (berndniggemann.on-rev.com/steam/steampunkprogress.html) and that is it.

Some things to note. HTML5 is currently not finalized as far as features are concerned and some things are bound to be changed. DP12 and DP13 were slow as far as animations are concerned that is why I used DP10 for animation heavy stacks.
When doing animation for HTML5 it is important to use "send in time" instead of a repeat loop to do a screen refresh. But since using "send in time" is a good idea for animation anyways, no big deal.

That is about it, the rest is experimenting what works out of the box or what has to be tweaked for HTML5. Up until now you can not call your server from within a HTML5 app. This limits the use of HTML5 apps to being self contained. No saving of data between sessions.

When the HTML5 app is built using the community version of LC you have a small "LC" icon on the bottom right which lets you download the stacks, you unzip them an can inspect the stack.

All my HTML5 Examples use the community edition and you can see the stacks. Hermann has a some examples that also let you download the stacks.

Kind regards
Bernd

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

Re: Example HTML5 conversion

Post by bn » Sat May 07, 2016 12:01 pm

HTML5 example where the imageData of an image is constructed on the fly.
LC 8.0 engine.

The imageData of an image is stored in 2 custom properties, once forward once reversed.Those are assembled on the fly to mirror a scene dynamically by using a slider.

http://berndniggemann.on-rev.com/strang ... World.html

Kind regards
Bernd

The whole idea was inspired by a stack from Wilhelm Sanke, the image used it also by Wilhelm Sanke. The code is a rewrite and optimization by me.
The point of the rewrite was a speed increase that turned out to be sufficient to make mirroring an image into a dynamic feature.

Post Reply

Return to “HTML5”