Successful test

Bringing your stacks to the web

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2182
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" on "SampleStacks" or http://livecodeshare.runrev.com/stack/948/ .

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 1579 times
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2182
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: 3995
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: 451
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: 2182
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 11 times
shiftLock happens

Post Reply

Return to “HTML5”