Page 5 of 5

Re: Successful test

Posted: Sat Aug 31, 2019 3:14 pm
by [-hh]
HTML5 Native Field_v106

Find the source code in a "T-version": (sorry, currently not available)
That version is changed from v106 a little bit so that it works without changes by using button "Test" from the LC toolbar. ["Test" works best with the auto-generated html file of LC >= 9.0.5. In LC 8.1.10 the test target can not be set.]

The standalone works with Chrome, Firefox** and Safari on Mac, Windows and linux.

[This is similar to an external/widget with a "native" display. The HTML5 field is created with javascript and displayed on top of our standalone canvas. This uses NOT a javascript library, I wrote it by my own in < 300 lines of LC and JS.]

As usual 'cmd' means the cmdkey on mac and the ctrlkey on win/nux.

KEYBOARD. You have UTF-8 input support.

RICH TEXT. There is a set of LC buttons that allow to set styles for the selection (in both fields). The buttons have tooltips attached.

COLORS. Click the color swatches to apply the color, rightClick the color swatches to edit their color.

TEXTFONTS. The upper 15 listed fonts are SYSTEM FONTS that have most systems with modern browsers available. Add the fonts that you and your users have on their system to that list.
Select a fontName and a fieldTextSize (>8) or a fontSize (HTML size 1-7). Then click button Field or button Selection to apply.

For adding webfonts use for example the GoogleFonts-Helper. See a working example of this stack with webfonts on


NOTE. A popup/pulldown menu for the fontNames is covered by a native display if intersecting.

CLIPBOARD. We have full access to the system clipboard (styled Text only).
Use cmd-A, cmd-X, cmd-C and cmd-V as usual or do it using the context menu.

DRAG/DROP. Drag from one field to the other or drag the file icon of an UTF-8 file from the desktop to the fields (or from the fields to any app that accepts text drops).
**[Currently Firefox has problems but only when dragging from one field to the other: dragText is lost (use 'Undo' then)]

Re: Successful test

Posted: Thu Nov 28, 2019 11:28 pm
by [-hh]
html5IDE v_105 alpha
(Dec 03, 2019: added import of local images)

This is a LC-playground in the browser with 'integrated'
  • propertyInspector (html5PI)*,
  • dictionary (html5Dict)*,
  • scriptEditor (html5SE)*,
  • tools (html5IDE main).
It works with Chrome, Safari (fastest) and Firefox (slowest) on Mac, Windows and linux.

You can create cards and objects on these cards, edit their properties and their scripts.
Moreover there is a Paint-section on each card and a messageBox.
You can save and load scripts, but not (yet) the created cards.

This "IDE" is is made out of 6 independent html5 standalones (in frames) that send messages to each other. Each of these standalones can separately (and then fast) be reloaded.

There is a compact help/more info in the standalone (use btn "H" of the Tools).

Enjoy the playground starting from

The server is very fast (serves from SSD, for short intervals even from RAM). Nevertheless:

** Please be patient **
Loading the standalone needs here, using Safari and a 100 MBit connection up to 20 seconds (first time only), so up to two minutes with a 16 MBit connection.

[You can see the source code of the main stack in the html5ScriptEditor)]

* The dictionary is adjusted from the html5 version of Bernd Niggemann's tinyDict (thanks Bernd). The script editor is based on the excellent library Codemirror (MIT-licensed).

Re: Successful test

Posted: Thu Nov 28, 2019 11:40 pm
by bogs
That is just plain fascinating, very big thumbs up.

Re: Successful test

Posted: Thu Dec 05, 2019 10:51 pm
by AndyP
Oh Wow!

This is really exciting, looking forward to see how this progresses.

Way cool.

I see you have a LCS mode. Is this a full CodeMirror mode file? If so it would be great to have this added to the CodeMirror modes list.

Again as Bogs said "very big thumbs up"

Re: Successful test

Posted: Fri Dec 06, 2019 1:07 pm
by [-hh]
AndyP wrote:... looking forward to see how this progresses ...
Please see ... 57430.html
AndyP wrote:... have this added to the CodeMirror modes list ...
Marijn Haverbeke, the author of CodeMirror, wrote in 2016 that they stopped accepting new modes for the main distribution:

I played around with ACE and CodeMirror and their modes and wrote (undocumented) several LCS modes for that.

For the "html5-playground" I decided to use CodeMirror. The current LCS mode for that is (most probably) the attached one.
I had also one for livecodebuilder but (most probably) trashed it as I use BBEdit for LCB.

The following zip contains
  • the mode: livecodescript.js,
  • the themes: hhlight and hhdark,
and should work with any newer CodeMirror distribution.

Re: Successful test

Posted: Thu Dec 12, 2019 11:16 pm
by [-hh]
HTML5: Native PlainText Fields (basic example)

The attached stack has a script of 90 lines. This includes (beside comments)
  • all you need for creating an input field (one line) and a textarea.
    Both display plain text only but with all usual keyboard features (UTF-8 and cmd-A/C/V/X/Z) and drag&drop.
  • all you need for the UTF-8 text exchange between LC and these native fields.
The technique I use
is to create the fields as LC fields. Then the script takes the rectangles, the textFont (if available in the browser), the textSize, the foreColor and the backColor of the fields as properties for the native fields.

You can still use the LC-fields as container but they don't display (except you hide the native fields). And by changing these properties of the fields as usual from LC, you simply call "setRects" and "setStyles" from LC to adjust the native fields correspondingly.

[We could also have key events being sent to LC from the fields but that's a bit beyond our simple example here.]

What you have to do? Close to nothing:
  • Unzip and open the stack in LC 9.0.5 or later
  • Adjust the standalone application settings (the build folder),
  • Hit button "TEST" of the LC Toolbar.
The LC "TEST" button needs 9.0.5 or later, the stack works also in 8.1.10.

Re: Successful test

Posted: Thu Dec 12, 2019 11:20 pm
by SparkOut
Staggeringly awesome, again. Thank you Hermann

Re: Successful test

Posted: Wed Jan 29, 2020 10:16 pm
by [-hh]
HTML5: html5Player
(v102 as of Jan 30, 2020)

This is a HTML5 standalone (webApp in the new LC wording).
(audio/video streaming then only works from https-streams!).

This is a "standalone-Plus" that is, it is extended by javascript for several features that are not (yet) implemented in LC-HTML5 or not possible with LC.

It can do among other the following.
  • Load (ordinary) local LC stacks by click or drag and drop.
    The stacks will run if they would compile and run with the HTML5 standalone builder (but you don't have to compile).
    The stacks MUST have one of the file endings .rev, .livecode or .livecodescript.
  • Load and display local or remote images (drag and drop images or copy/paste image urls is supported).
  • Load and display local audio/video (for cross-browser support use mp3 and mp4 only).
  • Open a webview for audios, videos, pdfs and genrally html pages (if the serving host allows iFrames).
    In such a webview you can safely run also HTML5 standalones that don't work in the html5Player because you inject javascript handlers/objects to the loading page.
  • Open one or several webcam views (works in newer Chrome, Safari, Brave, not in Firefox).
All views are displayed in panels that are draggable and resizable (incl. minimize and maximize).

HTML5: html5IDE

The above html5Player will complete my experimental html5IDE that is close to ready. I can also meanwhile save edited stacks.
But I don't publish newer versions than until LC does more in that field than renaming it to "WebApps".

Re: Successful test

Posted: Wed Jan 29, 2020 10:27 pm
by bogs
As it is, I think you've about pushed the limits of what it can do anyway as it stands. Somehow, "Awesome" doesn't say enough, really

Re: Successful test

Posted: Mon Feb 03, 2020 1:16 am
by [-hh]
Added to html5Player (v104 alpha)

Your added local (uncompiled) stacks can use as textfont

Aclonica, Andale Mono, DejaVu Sans, DejaVu Serif, Impact, Inconsolata, Optima, Permanent Marker, Skia, Verdana

else textfont falls back to Droid Sans.

html5Player adds a function keyCombo to your stack (as behavior) that you may use.
It is updated on every keydown, keyup, mousedown and mouseup in the browser window.
[See the stack "FontAndKeyTester" of btn "StackURL" of html5Player.]

keyCombo() returns the downstates, keyCode and key:
Alt, Shift, (Ctrl or Cmd), CapsLock, KeyCode, Key. For example

The shiftkey, the cmdkey etc. currently always report "up" in LC-HTML5.
But you may now use in your local stack, running in htmlPlayer (e.g.):
"if item 2 of keyCombo()" instead of "if the shiftkey is down".

3. (Just for fun!)
Apply a color-filter to all *open* windows, one of

grayscale(x), invert(x), sepia(x), roentgen(x), blur(x)

where the amount x is taken from a slider value.
[New windows have no filter, you have to reapply.]