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
Example HTML5 conversion
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
- VIP Livecode Opensource Backer
- Posts: 4000
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: Example HTML5 conversion
a kind of circular progress/warning
entirely made of LC Graphics
http://berndniggemann.on-rev.com/progress/progress.html
Kind regards
Bernd
entirely made of LC Graphics
http://berndniggemann.on-rev.com/progress/progress.html
Kind regards
Bernd
-
- VIP Livecode Opensource Backer
- Posts: 4000
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: Example HTML5 conversion
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
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
Re: Example HTML5 conversion
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
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
-
- VIP Livecode Opensource Backer
- Posts: 4000
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: Example HTML5 conversion
David,
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.
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
thank you.That is a very cool HTML5 app example.
Actually it is fairly easy to deploy a stack to a website.How do I start to learn about "The basics of using LC to develop HTML5 apps on 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.
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
-
- VIP Livecode Opensource Backer
- Posts: 4000
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: Example HTML5 conversion
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.
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.