Successful test

Bringing your stacks to the web

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller, robinmiller

[-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 Aug 31, 2019 3:14 pm

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

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

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)]
  
Attachments
NativeHTML5Field.png
NativeHTML5Field.png (15.11 KiB) Viewed 4480 times
Last edited by [-hh] on Wed Dec 11, 2019 11:42 pm, 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 Nov 28, 2019 11:28 pm

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
(EU) http://hyperhh.de/html5/index-large.html#as

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).
 
Attachments
html5IDE.png
Last edited by [-hh] on Tue Dec 03, 2019 10:41 pm, edited 1 time in total.
shiftLock happens

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

Re: Successful test

Post by bogs » Thu Nov 28, 2019 11:40 pm

That is just plain fascinating, very big thumbs up.
ksnip_FASCINATING.png
OMG!!
Image

AndyP
Posts: 459
Joined: Wed Aug 27, 2008 12:57 pm
Location: Seeheim, Germany (ex UK)
Contact:

Re: Successful test

Post by AndyP » Thu Dec 05, 2019 10:51 pm

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"
Andy Piddock

http://2108.co.uk/tinyide/ - Mini LC IDE alternative

http://2108.co.uk/script-editor-themer/ - Script Editor colour theming

http://livecodeshare.runrev.com/stack/897/LiveCode-Multi-Search - Search across 8 LC resources

[-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 06, 2019 1:07 pm

AndyP wrote:... looking forward to see how this progresses ...
Please see http://lists.runrev.com/pipermail/use-l ... 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: https://github.com/codemirror/CodeMirror/pull/4245

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.
 
Attachments
to_CodeMirror.zip
(12.66 KiB) Downloaded 51 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] » Thu Dec 12, 2019 11:16 pm

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.
Note.
The LC "TEST" button needs 9.0.5 or later, the stack works also in 8.1.10.
 
Attachments
NativePlainTextFields.livecode.zip
(3.3 KiB) Downloaded 52 times
NativePlainTextFields.png
shiftLock happens

SparkOut
Posts: 2082
Joined: Sun Sep 23, 2007 4:58 pm

Re: Successful test

Post by SparkOut » Thu Dec 12, 2019 11:20 pm

Staggeringly awesome, again. Thank you Hermann

[-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 Jan 29, 2020 10:16 pm

HTML5: html5Player
(v102 as of Jan 30, 2020)

This is a HTML5 standalone (webApp in the new LC wording).
https://hyperhh.de/html5/html5Player.html
(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
(Inspector+Dictionary+ScriptEditor+Tools)

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 https://hyperhh.de/html5/html5IDE.html until LC does more in that field than renaming it to "WebApps".
Attachments
html5IDE.png
html5IDE.png (22.78 KiB) Viewed 2475 times
html5Player.png
html5Player.png (9.53 KiB) Viewed 2475 times
Last edited by [-hh] on Thu Jan 30, 2020 2:58 am, edited 5 times in total.
shiftLock happens

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

Re: Successful test

Post by bogs » Wed Jan 29, 2020 10:27 pm

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
Image
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] » Mon Feb 03, 2020 1:16 am

Added to html5Player (v104 alpha)
https://hyperhh.de/html5/html5Player.html

1.
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.

2.
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
false,true,false,false,39,ArrowRight

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.]
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 Mar 12, 2020 9:32 pm

(Mar 12, 2020)
TMHO, there is no progress with LC's HTML5 platform ("web apps") since a long time.
So I stopped making new HTML5 standalones.
shiftLock happens

jiml
Posts: 179
Joined: Sat Dec 09, 2006 1:27 am
Location: Los Angeles

Re: Successful test

Post by jiml » Sat Mar 14, 2020 8:22 pm

I stopped making HTML5 standalones.
Very sorry to hear that.
You have made most excellent contributions over the years.
Thank You!

Jim Lambert

SparkOut
Posts: 2082
Joined: Sun Sep 23, 2007 4:58 pm

Re: Successful test

Post by SparkOut » Sat Mar 14, 2020 8:59 pm

jiml wrote:
Sat Mar 14, 2020 8:22 pm
I stopped making HTML5 standalones.
Very sorry to hear that.
You have made most excellent contributions over the years.
Thank You!

Jim Lambert
Yes, exactly my thoughts. Sorry to hear that, and also express my extreme appreciation.
Vielen Dank Hermann

Thierry
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 696
Joined: Wed Nov 22, 2006 3:42 pm
Location: France
Contact:

Re: Successful test

Post by Thierry » Sun Mar 15, 2020 7:22 am

[-hh] wrote: (Mar 12, 2020)
TMHO, there is no progress with LC's HTML5 platform ("web apps") since a long time.
So I stopped making new HTML5 standalones.
Hermann,

I was continually impressed by the results you produce!
and It’s really admirable how you always see projects through
from conception to completion.

I'll miss your spirit and knowledge,
hopefully only in Html5 topics...

Herzliche Grüsse.

Thierry
Last edited by Thierry on Sun Mar 15, 2020 11:15 am, edited 1 time in total.
Regex LiveCode sunnYrex
https://sunny-tdz.com

SparkOut
Posts: 2082
Joined: Sun Sep 23, 2007 4:58 pm

Re: Successful test

Post by SparkOut » Sun Mar 15, 2020 10:03 am

Hopefully we'll not lose Hermann's spirit and knowledge, just a lack of new work on the HTML5 platform.

Post Reply

Return to “HTML5”