Successful test

Bringing your stacks to the web

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2093
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 264 times
shiftLock happens

Post Reply

Return to “HTML5”