Successful test

Bringing your stacks to the web

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Thierry
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 875
Joined: Wed Nov 22, 2006 3:42 pm

Re: Successful test

Post by Thierry » Wed Aug 17, 2016 9:47 am

Klasse, Hermann :)
!
SUNNY-TDZ.COM doesn't belong to me since 2021.
To contact me, use the Private messages. Merci.
!

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

Re: Successful test

Post by [-hh] » Sat Nov 26, 2016 2:29 am

[Thank you all for the flowers.]

We are going a big step forward with the new

Code: Select all

do <string> as "javaScript"
what should, TMHO, more exactly be called

Code: Select all

do <string> as "HTML5"
Why? We can and should use newest HTML5 modules, because the HTML5 standalone needs newest browser versions anyway.

The newest standalone gives an example of how to solve the basic local data transfer from the current web page to the standalone and vice versa, see here or here.

To have this working is very important because the communication for an upload from and a download to the current page is independently solvable (optionally with newest HTML5 methods).


A few lines of details.
The transport of text works with 'classic' HTML/javascript methods, although the part standalone to webpage is a bit tedious from encoding issues, see the script (in total less than 100 lines) of the downloadable stack. [One funny problem to solve was how to "do" a string that contains LC comment chars.]

The transport of images from the standalone to the web page is, after knowing that only one line of base64 encoded data is accepted, a 'classic' HTML/javascript method.

The other direction uses a HTML5 module (the link is given on the standalone's web page) to load a local image file to a canvas, using base64 encoded data as source, what is what we need for importing to the standalone. This is very modern and easily extendible to reading the metadata of the images.

______
The default images of the standalone (use radio buttons) show
  • Exhibition at Edinburgh Castle: 'berndN', sleeping during my speech about HTML5.
  • Hermann Hesse (image from allquotes.info)
  • Thistle Street on Aug 2, 2016
You'll get a nice mirror effect at the bottom of your web page, if you load an image, then export it, then flip it horizontal (btn 'FlipH') and then export it again.
 
Attachments
doAsJS-Test1.png
doAsJS-Test.png
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: Successful test

Post by [-hh] » Tue Nov 29, 2016 2:15 pm

For compiling the JS-Test standalone by yourself you need the used stack and the js-resources.

For 'newcomers' who don't know how to get these via the HTML source I collected everything here (you don't need any additional knowledge, no JS, no HTML, no CSS for that, just concentrate on the stack).

How to test or work with the JS-Test standalone without a webserver.

1. Unzip 'hhJSTest' (includes js and CSS resources).
2. Unzip 'testJS2.livecode.zip' (this is the input stack).
2. Open the input stack "testJS2.livecode"
2. Adjust the default build folder to the unzipped folder 'hhJSTest'.
3a. Compile the standalone with 9.0.0-dp2 community version.
3b. [Simply ignore the newly generated html-file]
3c. Rename the generated "standalone.zip" to "javaScriptTest-9.0.0-dp-2.zip"
4. Open 'javaScriptTest-9.0.0-dp-2hhX.html' with Safari or Firefox.

If you use a newer LC version for compiling then change the entries in
lines 21 and 23 of 'javaScriptTest-9.0.0-dp-2hhX.html' accordingly and change the name in (3c) accordingly.
For example this is the HTML for 9.0.0-dp-3 Indy version: javaScriptTest-9.0.0-dp-3hhX.html
[Community users replace "commercial" with "community" in line 23].
 
Attachments
javaScriptTest-9.0.0-dp-3hhX.html.zip
Example HTML file for 9.0.0-dp3 Indy.
(2.45 KiB) Downloaded 471 times
hhJSTest.zip
Resources, use as build folder when compiling the HTML5 standalone.
(169.31 KiB) Downloaded 460 times
testJS2.livecode.zip
Input stack (includes only one instead of three pictures).
(187.01 KiB) Downloaded 439 times
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: Successful test

Post by [-hh] » Fri Dec 09, 2016 9:49 pm

Easy Crop — a polygon tool and a bezier curve tool for cropping

I was trying to make new crop tools that are intended to use in the first non-beta version of imageJIT (2017).
It is an ordinary polygon tool and (not only for experts) a bezier tool for cropping unusual shapes from an image.

Then I tested this to be fast enough for HTML5 and decided to share it (not yet the source code, but you may be able to do this by yourself). Here it is, contains some surprisingly fast math:
  • rotating, mirroring and proportional zooming of polygons,
  • using convex hulls for diminishing large lists of points,
  • tracing an object for creating a crop tool 'on the fly',
  • fast creation of bezier curves of order up to 16 (2=quadratic, 3= cubic, ...),
  • creating "symmetric polygons" from a given one,
  • animating selected regions ('marching ants'),
  • rightClick handles to add/delete (control) points.
Enjoy this demo of LC's incredible easy to get graphics possibilities.
And, thanks to the new import/export possibilities, also use it.


Start 'EasyCrop' from the index here (US) or here (EU).
Attachments
easyCropA.png
Bezier crop tool in action:
14 (control) Points = 15 points, made symmetrical by script.
easyCropA.png (48.94 KiB) Viewed 16362 times
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: Successful test

Post by [-hh] » Sat Jun 03, 2017 1:06 am

LCImageToolboxHTML5_Basic

This is a HTML5 standalone version of LCImageToolbox89_Basics
(download: (Sorry, currently not available)).

It is once again a demo how to
       do as "javascript"
what is available in the HTL5 deployment. As we don't have that in LC Script it needs some patience and basic javascript knowledge to develop that way.

The standalone has become pretty fast what compensates for rather long loading times (also these are shorter now than some months before).

The javascripts use HTML5/canvas2d (no webgl because of hardware issues with that). The succesful work with that opens more ideas for interesting applications as canvas2d also handles graphics, audio and video, accessible in a similar way as images.

The timing you see in the standalone are the LC-times, not the screen update of the browser which is of course slower while a browser is caching large imageData.
Latest Safari and Chrome Canary (but not yet Chrome) are fastest with the screen updates. Also tested to be OK here with latest Firefox and latest Opera. As always: doesn't run in IE/Edge.

Start 'LCImageToolBox' from the index here (US) or here (EU).

[If you wish to look at the source then you have to download not only the zip (as described in the first post) but also the HTML that loads the standalone and the js-files that the HTML loads.]
Attachments
lcimagetoolbox.png
lcimagetoolbox.png (16.62 KiB) Viewed 15804 times
Last edited by [-hh] on Thu Dec 12, 2019 12:21 am, edited 1 time in total.
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: Successful test

Post by [-hh] » Thu Jun 08, 2017 5:39 pm

Video-fun-HTML5

This demo shows how to use video/audio in a HTML5 standalone by using the source in the "calling webpage" via 'do as "javascript"'.

A (optionally hidden) demo video is shown in an image in the standalone. The images are frames taken from the video every 33 ms and then optionally changed by image filters like 'posterize' or 'rgb-factors'. That is, we do a kind of 'postprocessing' the video.
The javascripts for that use HTML5/canvas2d (no webgl because of hardware issues with that).

The timing you see in the standalone is the overall time for all actions to get the image. Performance depends strongly on your hardware and reaches 30fps on a medium fast machine with a decent graphic card and a fast Browser (for example MacMini/Intel HD4000, Safari 10).

Latest Safari and Chrome are fastest with the screen updates. Also tested to be OK here with latest Firefox and latest Opera. As always: doesn't run in IE/Edge.

Start 'Video-fun' from the index here (EU) or here (US).

[If you wish to look at the source code then don't forget to download not only the zip (as described in the first post of this thread) but also the 'calling' HTML page that loads the standalone and the input js-files of that page.]
Attachments
video-fun.png
One of the video frames, 'posterized' with param 59.
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: Successful test

Post by [-hh] » Wed Jun 14, 2017 3:00 pm

SVTtoPNG-HTML5

This is a HTML5 standalone that is based on stacks that Jonathan and I made, see livecodeshare.runrev.com or 'Sample stacks' (the stacks use a clever conversion idea of Jonathan).

Launch SVGtoPNG_HTML5 from the index here:

(EU) http://hyperhh.org/html5/index-large.html#as
(US) http://hh.on-rev.com/html5/index-large.html#as

You can import your local SVGs (which will be forgotten as soon as the web page is closed) and export to the web page, enabling the usual rightClick-the-image-possibilities of your browser.

This is how the main browsers 'perform' with this standalone for me:
  • Latest Chrome and especially Opera do a very good job with even complicated SVGs.
    (Opera has also greatly improved loading speed.)
  • Firefox (which is usually the most stable browser) works has nearly the same input performance. But resizes now often to square shapes and even looses sometimes content (e.g. 'Tiger').
  • Safari has no problems with 'inkscape-style' SVGs but with some more complicated, else it is very fast
  • The standalone doesn't run in IE/Edge.
Short test: Select the tiger image. If your browser resizes and exports this image without loosing content then it is very likely to work with all 'standard-compliant' SVGs.

[If you wish to look at the source code then don't forget to download not only the zip (as described in the first post of this thread) but also the 'calling' HTML page that loads the standalone (the small javascript is inline).]
Attachments
SVG2PNG_HTML5.png
Output from an SVG icon of the open_icon_library
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: Successful test

Post by [-hh] » Fri Jun 16, 2017 5:28 am

Basic test of fetchURL

A basic test of the new feature "fetchURL" of the LC 9.0.0-dp7
HTML5 standalone builder: Load files (here images) from a server.
The load origin has to be on the same domain as the webpage that
loads the standalone.

(EU) http://hyperhh.de/html5/testFetch-9.0.0-dp-7X.html
(US) http://hh.on-rev.com/html5/testFetch-9.0.0-dp-7X.html

Note for your own trials:
Even different virtual adresses let the download fail. For example
if the webpage starts with "hyperhh.de" then the images have to be
called explicitly from hyperhh.de while download from "hyperhh.org"
(which is simply another name for the same domain) fails.
You may try that by your own with the first link above.

Download the source as described in the first post.
Attachments
testFetchURL.jpg
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: Successful test

Post by [-hh] » Tue Oct 03, 2017 9:27 pm

Regular Star Polygons

This is a demo of the starPolygon property of widget "hhPolygon" (say: it tests the new HTML5 ability of displaying widgets). You can doubleClick the widget to switch to edit mode and drag the vertices of a star polygon. But DO NOT rightClick one of the vertices. The original widget let's you add or delete vertices but this crashes the HTML5 standalone (because of the not working popup menu).

Call it from the index:
(EU) http://hyperhh.de/html5/index-large.html#as
(US) http://hh.on-rev.com/html5/index-large.html#as

Download the source as described in the first post of this thread.
Attachments
7_3 star polygon.png
A star polygon with Schlaefli symbol 7_3
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: Successful test

Post by [-hh] » Thu Oct 05, 2017 7:35 pm

Oriented Text

This is a HTML5-test of some features of the LCB widget "OrientedText" (which is common work with Cyril Pruszko). Don't start with 'huge' widget sizes (screensize) or your browser may become unresponsive.

It shows also how big differences of identical code can become if using different browsers and/or servers. Fastest is with my test (and 'acceptable close' to original speed of the widget) using Safari 11. The fastest server is for me the one from EU (which is also closest ...).

Call it from the index:
(EU) http://hyperhh.de/html5/index-large.html#as
(US) http://hh.on-rev.com/html5/index-large.html#as

Download the source as described in the first post of this thread.
Attachments
orientedText151.png
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: Successful test

Post by [-hh] » Thu Nov 09, 2017 3:30 pm

Export Text to local file

Rolf Kocherhans has contributed a HTML standalone that shows how to export UTF8-text from a standalone to a local UTF8-file.

This uses javascript to create a download link that contains the (UTF8 text, base64 encoded) file contents. Your browser converts this when downloading automatically to an UTF8 encoded text file.

See
http://hh.on-rev.com/html5/community.html [US]
or
http://hyperhh.org/html5/community.html [EU]
shiftLock happens

sphere
Posts: 1145
Joined: Sat Sep 27, 2014 10:32 am
Location: Earth, Except when i Jump

Re: Successful test

Post by sphere » Fri Nov 10, 2017 3:57 pm

Very useful !

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

Re: Successful test

Post by [-hh] » Thu Dec 27, 2018 12:27 am

FrameTalkHTML5
(This is my end-of-year gift 2018 for the community.)

It is a HTML5 standalone that can talk (send/ receive messages) to other instances of itself in frames of the same browser window. The instances of the standalone can come from different (local or remote) servers.

The "installation" uses "postMessage" on the javaScript side and a javascriptHandler of the HTML5-standalone on the LC side.

[1] Use the 2x2 demo "FrameTalkHTML5" from a browser widget.
Download: (Sorry, currently not available)

This sample-stack contains a browser widget that loads the frameset
from two different servers.
*** You can moreover send a message from the stack to each of the four frames displayed in the widget and vice versa. ***

The stack has large help (incl. the URL of the source code of the HTLM5 standalone used in the frames).

[2] Call a 2x2-demo "FrameTalkHTML5" in your (ordinary) browser from the index (scroll to bottom), see
(EU) http://hyperhh.de/html5/index.html
or
(US) http://hh.on-rev.com/html5/index.html
In this versions the "top" (the frameset) simply answers back a 'Got it' to the sending standalone in its frame.
 
Attachments
frameTalk.png
Last edited by [-hh] on Thu Dec 12, 2019 12:19 am, edited 1 time in total.
shiftLock happens

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Successful test

Post by bogs » Thu Dec 27, 2018 12:28 pm

Sounds intriguing -hh. Hope you have a great New Years day :D
Image

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

Re: Successful test

Post by [-hh] » Thu Dec 27, 2018 2:11 pm

Thanks bogs. The same to you. Keep posting with your enormous posts-per-day rate.
shiftLock happens

Post Reply

Return to “HTML5”