Browser Widget usage examples

LiveCode Builder is a language for extending LiveCode's capabilities, creating new object types as Widgets, and libraries that access lower-level APIs in OSes, applications, and DLLs.

Moderators: LCMark, LCfraser

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

Browser Widget usage examples

Post by [-hh] » Sun Mar 19, 2017 8:54 pm

Widget usage example #1: Ken-Burns-Effect
(description for local usage corrected).

This uses an 'ordinary' (unchanged) browser widget. We simply prepare a HTML file with CSS and javascripts 'inline' and set the widget's htmlText. Requires LC 8 or later.

Effectively this is a GUI to the implementation of the effect by John@Toymakerlabs (GitHub).
The CSS is slightly changed and parameter options for "hard coded" values in the calling HTML and CSS were added. Thus you can easily test and build your own effect without editing several files.

Note. The images of my example are loaded asynchronous from a server, 11 MByte in sum. If you have a slow connection then please first reduce the images list to the first nine (= 1 MByte in sum, click btn "images") or use files from your local server.

As soon as you are contented with a setting hit button COPY. Then you get a static copy of the current state (as htmlText). This is SELF-CONTAINED, scripts and CSS are 'inline', in sum at about 112 KByte. Now

+ 1a. Go to a (new) stack and create a fld "HTML".
+ 1b. Paste to the field and make it invisible.
+ 2a. Create a widget "KenBurns".
+ 2b. Set the htmltext of widget "KenBurns" to fld "HTML".
Then you are done and your effect plays. To STOP simply set the htmlText of widget "KenBurns" to empty.

Note. The URL of the widget is always empty, we don't need anything else than image files from a server, may be a local server.

If you need a bit more help then look into the script of btn "COPY".
If you change parameters then the htmlText of the browser widget is updated immediately.

This works for a usage without a (local) server:
Hit the button "COPY" while the show (adjusted to your taste) is running and write the clipboard (= the htmltext of the widget) out to a local ".html"-file. Then use images from a folder relative to that file (server is also allowed):
You can for image pathes and descriptions edit the html file at about line 500.
Then set the URL of your widget to that local file.

Available parameters.
Transition settings (ease etc.), image pathes (from server, may be a local server), width and height of the frame, also as fixed proportion e.g. 16:9, scale (used for zooming), duration and fadeSpeed (millisecs). And, optionally, text below the show (Title, images subtitles).
Help to the parameter setting is enclosed in the stack.

Platforms.
Using LC 8.1.3/9.0.0-dp6 the stack runs (tested) smoothly a 960x540-show on Mac 10.12 and Win 7/10. On Linux (Mint 181c) I got sadly soon the "linux-something-dialogs". I hope that somebody has on linux more success with the browser widget and/or can help me to work around this bug.
Attachments
KenBurns.livecode.zip
Nothing else needed (images are by default loaded from server).
New version: Corrected help and a layout fault.
(49.61 KiB) Downloaded 697 times
KB-BR.jpg
Fading from a well known LiveCoder to the LCC logo (click to enlarge)
Last edited by [-hh] on Thu Jun 01, 2017 12:06 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: Browser Widget usage examples

Post by [-hh] » Sun Mar 26, 2017 12:29 am

Widget usage example #2: LC-ImageToolBox89
(see credits at top of the HTMLText in the stack)

This is part of a series that will appear in three branches.
  • imageToolBox89
    Needs LC 8/9, uses a browser widget. Thus for Mac/Win and for linux**. Should work after a few adjustments only in mobile too.
    Available (Jan 13, 2019): LCImageToolbox_89_v190
  • imageToolBox67
    Needs LC 6/7/8/9, uses a revBrowser instance, so for Mac only (Win revBrowser doesn't support Canvas2d).
    Available (Jan 13, 2019): LCImageToolbox_6789MAC_v190
  • imageToolBoxJIT
    Uses luaJIT (included). For LC 6/7/8/9 on Mac/Win/linux and LC 6/7 on Raspi.
    (Project stopped because on Raspi 2b/3 ImageMagick runs with acceptable speed and is a wonderful GUI-implementation)
LC-ImageToolBox89 (and LC-ImageToolBox67):
We use Canvas2D only (no webGL because of issues with some graphic cards) in a hidden browser. Performance depends on your hardware (or virtual machine hardware part).
The URL of the browser is always empty, its htmlText is set by the script. Look at the javascript part of the HTML field to see that the core of the scripts is very similar to handling the imageData in LCScript.

To show this similarity to imagedata in LCScript is the main purpose of this stack. There are a lot among you who will add and change effects without knowing javascript, simply by using an existing function as 'template'.

The stacks are (because of included image examples) too large for the forum.
Download: (sorry, currently not available)

** There is now a workaround for using the browser widget in linux. See post #2a below.
 
Attachments
LCImageToolbox67_102.png
The revBrowser version LC-ITB-67 v102.
LCImageToolbox89_102.png
The browser widget version LC-ITB-89 v102.
Last edited by [-hh] on Wed Dec 11, 2019 11:38 pm, edited 5 times 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: Browser Widget usage examples

Post by [-hh] » Mon Mar 27, 2017 11:10 pm

Widget usage example #3: DemoVideoBack
  • The stack shows one way to overlay a browser widget by LiveCode objects.
  • Moreover the htmlText contains the few lines that show how to load and use a webFont (so that the display is very similar in Mac/Win) and
  • How to use a javascriptHandler for "notifying" LiveCode of an action on the video (pause/restart).
For the backvideo I used heavily this wonderful article
http://thenewcode.com/777/Create-Fullsc ... ound-Video

In order to take no bandwidth away from them for our trials the demo loads the backvideos ('their' backvideos) from hh.on-rev

An mp4 = 7.2 MByte, needed by the Mac browser widget,
A webm = 3.7 MByte, needed by the Win browser widget.

So don't hesitate to 'play' with the demo.
Tested to work on LC 8/9 on Mac 10.12. and Win 7+10

For the linux browser widget this is here sadly again a demo for the "something"-bug.

Hint. If the "Floater" window is hidden (because it should currently not float) then you can make it visible via LC's "Window" menu.

The stack has, incl. *all* htmlText(HTML+CSS+javascript) and a browser widget < 30 KByte !!
Attachments
DemoVideoBack.livecode.zip
(9.95 KiB) Downloaded 713 times
demoBackVideo.png
Last edited by [-hh] on Thu Jun 01, 2017 12:07 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: Browser Widget usage examples

Post by [-hh] » Fri Apr 14, 2017 3:07 pm

Widget usage example #2a: Instructions for making the browser widget usable on linux.

The following removes also some problems on linux with the property inspector, the script editor and the dictionary.
Attached you'll find a stack that does the following interactively in two steps, may you save some time. For 'linux'-people it certainly suffices to read the following once.
____________
Instructions for the uninitiated in an extremely detailed description in case you wish to do it 'manually'. You have to do that ONCE for each LC version.

As example I use LiveCode Indy Edition 8.1.3_32bit
Replace <user> with your_login_name. Some desktop environments (e.g. Cinnamon)
may crash if you try to use tilde (~) for /home/<user>/ in the paths below:

Install LiveCode 'for this user only'.

1) Go to your home folder.
2a) If you cant see the .runrev folder then type ctrl-H.
2b) Open the folder .runrev/components/livecodeindy-8.1.3.x86
3a) RightClick to make a new text document.
3b) Type or paste

Code: Select all

#! /bin/bash
export LC_ALL= LC_NUMERIC=C 
export LIBGL_DRI3_DISABLE=1
"/home/<user>/.runrev/components/livecodeindy-8.1.3.x86/LiveCode\ Indy.x86"
[Thanks and credit: The above script was elaborated by Max Vessi ('MaxV').]

3c) Save it as "livecode.sh" and make it executable (rightClick: choose properties/permissions/execute).
4) Go to your home folder
5a) open the folder .local/share/applications
5b) RightClick the file "LiveCode Indy 8.1.3" and choose "properties"
5c) Type or paste as command (incl. the quotes):
"/home/<user>/.runrev/components/livecodeindy-8.1.3.x86/livecode.sh"
5d) Choose permissions and check "Execute".

After that launch LiveCode 8.1.3 as usual from the desktop icon or launch bar icon etc.
____________
Attachments
createLClauncher.livecode.zip
LC stack that does on (most) linux flavours the steps above interactively.
(2.38 KiB) Downloaded 561 times
Last edited by [-hh] on Thu Jun 01, 2017 12:07 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: Browser Widget usage examples

Post by [-hh] » Sat May 13, 2017 10:57 pm

SVG Icon widget and Browser widget #4: AutoDraw_SVGicon.livecode

Download: (sorry, currently not available)

Works in any version of LC 8/9 on Mac/Win/linux (having a correctly running browser widget). Uses the javascript engine of the browser widget.

Choose any icon of the SVG Icon Library for the SVG Icon widget and optionally transform it (rotate,scale,skew,transform in the HTML).
Then the outline of the icon is progressively drawn at a selectable speed.

The wonderful (MIT-licensed) js 'drawSVG' by Leonardo Santos is used for that
(see https://github.com/lcdsantos/jquery-drawsvg ).

The stack allows to apply and preview this for all available LC-SVGIcons.
It also contains help how to use this in your stacks.

Find more (unnumbered) widget usage examples for the browser widget (by Jonathan Lynch or me) here:
Use "Sample Stacks" of the LC-Toolbar or livecodeshare.
Attachments
autoDraw.png
Partially drawn (left) and full drawn (right) microphone icon outline.
autoDraw.png (17.12 KiB) Viewed 25996 times
Last edited by [-hh] on Wed Dec 11, 2019 11:37 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: Browser Widget usage examples

Post by [-hh] » Thu Jun 01, 2017 12:25 am

Widget usage example #5: Getting MouseEvents

This example shows how to get mouse events in a browser widget by one single "javascriptHandler" in LC and a few lines in the HTML.

Just copy and paste -- no need to have special javascript knowledge.
You should have full control over the HTML you display in the browser widget (or you have to work a bit harder and add the event handlers by javascript, what will be your own job).

The example uses an ordinary image in your HTML as "base object", i.e. you get
      the mouseLoc, the clickLoc, the mouseMove coords
all relative to the topleft of that image, no matter where it resides or to where it is floated in the webpage.
By that you can for example determine 'click regions' of your image in LC Script and use then these for actions in LC Script after mouse events in the browser widget.

Moreover: Shift-MouseDown lets you grab the browser widget, the scroll wheel over the widget lets you set the blendLevel of a clock widget (visible together with the "help").

Tested to run with latest versions of LC 8/9 on MacOS 10.12/ Win7-10/ Ubuntu.
 
Attachments
browserEvents_001.livecode.zip
(5.74 KiB) Downloaded 642 times
BrowserEvents.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: Browser Widget usage examples

Post by [-hh] » Mon Jun 12, 2017 7:28 pm

Widget usage example #2b: LC-ImageToolBox_Basics_ROI

These are extensions of the 'Widget usage example #2':
  • LCImageToolBox89_Basics_ROI
    Needs LC 8/9, uses a browser widget. Thus for Mac/Win and for linux**.
  • LCImageToolBox6789_Basics_ROI
    Needs LC 6/7/8/9, uses a revBrowser instance, so for Mac only (Win revBrowser doesn't support Canvas2d).
A special feature is added to the Basic-versions:

It is sometimes of interest to process a single sub-region of an image, leaving other regions unchanged. This is commonly referred to as region-of-interest (ROI) processing.

We specify such regions by an editable polygon that starts from an N-Polygon: You choose the number of vertices, drag the vertices and add or delete vertices (by rightClicking the vertices). Oval and rectangular shapes are also available.
These ROI-selecting shapes can be dragged around or zoomed in/out.

Finally you choose for a selection to use it as ROI or use not it (everything else) as ROI. Of course the handling of the whole image is still also an option.

May give nice effects. An example is attached as image.

Get the stacks here: (sorry, currently not available)
___
** There is now a workaround for using the browser widget in linux. See post #2a above.
Attachments
roi_not_oval.jpg
Set a gamma of 3.0 of the ROI = not the oval
(960x640 pixels processed in 145 ms)
Last edited by [-hh] on Wed Dec 11, 2019 11:37 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: Browser Widget usage examples

Post by [-hh] » Thu Jun 29, 2017 12:08 am

Widget usage example #6: Basic speed comparison

Here is a stack that compares simple grayLevel- and invert-filter for an image of size 1920x1080 using LC Script or HTML5/JS, needs LC 8 or 9. It shows the power of this "external" we have via LC Builder/the browser widget.

Type in the msg box:
go stack url ("http://hh.on-rev.com/xstacks/speedComparison.livecode")
or
go stack url ("http://hyperhh.org/xstacks/speedComparison.livecode")

or download the file
http://hh.on-rev.com/xstacks/speedCompa ... vecode.zip (1 MByte)
or
http://hyperhh.org/xstacks/speedComparison.livecode.zip (1 MByte)

The LC Script version is, TMHO, rather fast (feel free to improve it).
The HTML5/js version could be optimized but that may be too hard for the result ...
Thus the first HTML5/JS call is slower than the following (initiates caching). The average speed improvement depends on your hardware, this HTML5/JS version will be in average 20-60 times faster than LC Script.

Note. The improvement is mostly due to the fact, that HTML5/JS uses your graphics hardware. With a decent graphic card the speed factor is here (for less simple filters) up to 100.
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: Browser Widget usage examples

Post by [-hh] » Tue Jul 18, 2017 12:03 am

Widget usage example #7: Math formulas

This is a simple Livecode GUI to KaTeX which does basic Math typesetting via javascript:
https://khan.github.io/KaTeX/
I made this stack because one often needs a single math formula rather than a full TeX-page.

Most LiveCode users haven't installed TeX, the best typesetting engine on earth.
So KaTeX is a very clever replacement that uses Unicode symbols via javascript on base of 'usual' TeX commands and TeX spacing and kerning.
katex.png
Output of KaTeX in your browser widget.
You don't have anything to install, just use your browser widget that downloads the needed javascript and CSS from a CDN.

The stack runs on Mac/Windows/linux (where the browser widget works correctly) with LC 8/9.

Edit: WARNING. Sorry, just noticed that taking a snapshot with crosshair-selection hangs the OS in linux ... (reported: #20104). So you have on linux to work around that (change script of button "GetImage").
 
Attachments
katex.livecode.zip
The KaTeX helper stack (v2=removed typos and improved help)
(14.57 KiB) Downloaded 536 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: Browser Widget usage examples

Post by [-hh] » Mon Dec 04, 2017 12:17 am

Widget usage example #8: **LiveCodeStars**

The first of my end-of-this-year gifts to the community is dedicated to the LC Team, especially to the makers of the browser widget.

It is a hybrid of LC animation and using (via javascript) CSS transforms.
At the very end it looks like a glitter-flitter christmas tree.
See : (sorry, currently not available)


Tested [with LC 8.1.6 and LC 9.0.0-dp10]
= runs on Mac 10.13.1 with LC 8.1.6 and 9.0.0-dp10
= runs on Win 7/10 with LC 8.1.6 and 9.0.0-dp10
= runs on linux Mint 32bit, Ubuntu 64bit with LC 8.1.6.

Using Windows it has sometimes problems right after opening the stack. Then simply *quit LC* (to close the defunct cef-process) and restart it.
On linux, it doesn't run with LC 9.0.0-dp10 (the general browser bug there). Also, on linux, it needs the usual browser 'patch' ( viewtopic.php?p=153351#p153351 ).

Please report back if you have problems. I invested several hours to make it run on all three platforms (the problem is the old Chromium 47 used by LC 8 while LC 9-dp10 uses Chromium 51).
Attachments
stars.png
Last edited by [-hh] on Wed Dec 11, 2019 11:36 pm, edited 1 time in total.
shiftLock happens

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

Re: Browser Widget usage examples

Post by bogs » Mon Dec 04, 2017 12:48 am

Very nice HH :D
Encountered no problems, but had some unexpected surprises (nothing dire).
  • When it opened, it was little bigger than the size of the button.
  • When it opened, initially thought the button was more like a credit or title. Felt more than a little dumb sitting there waiting for something to happen before I started poking things :oops:
  • When the 2nd screen opened, it opened center screen. Not realizing attempting to move it would have any effect, I managed to close it 3 times before seeing the whole thing :oops:
  • Didn't see the flashy glitter thing, but overall very cool.
Thanks for the gift though, it was adorable.
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: Browser Widget usage examples

Post by [-hh] » Fri Dec 29, 2017 1:47 am

Widget usage example #9: hhTextEditBasic
(Close to a basic TextEdit widget)

Uses a browser widget as "text field" extending by that LC's htmltext of fields to a larger set of text styling (e.g. justified textAlign), transforms/3D-rotations and filters (blur, sepia etc.).
Of course you can edit the transformed/rotated/filtered text _while_ it is transformed/rotated/filtered -- a funny training for your imagination ...

Saving and restoring is implemented, also exporting (incl. effects) to a html-file.

** You edit, just as with fields, the 'output' and only optionally the HTML-source! **
It has NO 'package'-dependencies, uses HTML5, JavaScript, CSS3 and some features of LiveCode only.

Tested to work using LC 8.1.8 on Mac 10.13, Win 7/10 and Ubuntu.
Works moreover using LC 9.0.0-dp11 on Mac and Win7/10.
(The browser widget is 'buggy' on linux/LC 9 up to dp11).

Download: (sorry, currently not available)

The stack contains also
• hhTextEdit-Zero (a one-liner) and
• hhTextEdit-Mini (very basic textEdit only).

More features in hhTextEdit-Full (to appear in 2018).

Have fun!
Attachments
textEditBasic2.png
TextEditBasic (editable) with rotateY = 180 degrees and text-align = justify.
Last edited by [-hh] on Wed Dec 11, 2019 11:35 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: Browser Widget usage examples

Post by [-hh] » Sat Jan 06, 2018 5:13 am

Widget usage example #10: hhTextEditFull

HHTextEditFull v1.3.6 builds upon hhTextEditBasic and
  • uses the _livecode.com_ browser widget
  • uses the _summernote.org_ editor
  • snippets of Bootstrap3 by _w3schools.com_
  • uses the _codemirror.net_ code editor
  • uses the _khan.github.io/KaTeX_ TeX engine
Download : (sorry, currently not available)

Help is included in the editor.
There are such a lot of features. I couldn't test all.

Testing results, using LC 8.1.8 and LC 9.0.0-dp11:
  • on MacOS 10.13.2: no issues
  • on Win 7 and Win 10: rarely (irrelevant) messages from
    the browser widget
  • linux: Mint173c-32bit and Ubuntu/Xubuntu 16.04-64 bit:
    The image dialog for embedding local images (base64 encoded)
    doesn't work. I'll work around that in a future version.
The more I test, the more issues appear.
Some things are randomly not working. Given time I'll try to work around these 'bugs'.
I tried to make a version that runs on all desktop platforms — at least when using LC 8.
Probably I'll have to take out some 'features' to reach that goal.
 
Attachments
HHTextEditFull_136.png
HHTextEditFull_136.png (16.04 KiB) Viewed 24190 times
Last edited by [-hh] on Wed Dec 11, 2019 11:35 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: Browser Widget usage examples

Post by [-hh] » Sun Feb 11, 2018 12:10 pm

Widget usage example #11: Color tone curve.
(Updated to version 102: Improved layering of the curves)

This is a fast variant of stack #104 from the Raspi stacks collection (which is "pure" LC Script and slow with LC 8/9). Here we use JavaScript in a hidden browser widget for the part that applies the tone curve to the image data. The tone curves are still computed in LC Script.
For a detailed description see viewtopic.php?p=163787#p163787.

Download the stack: (sorry, currently not available)

The stack is tested to run using LC 8/9 on Mac/ Win 7+10/ Ubuntu (use latest LC 8/9 on linux).
 
Attachments
ColorToneCurve3.png
8 controlpoints and three of the resulting tone curves
ColorToneCurve3.png (68.06 KiB) Viewed 23918 times
Last edited by [-hh] on Wed Dec 11, 2019 11:35 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: Browser Widget usage examples

Post by [-hh] » Mon Feb 26, 2018 3:24 am

Widget usage example #12: hhMockUp

["hhMockup" is an enhanced version of the stack I used to produce the demos for my LCGlobal talk "Perspective and affine transformations of images" in Nov 2017.
Get the slides of the talk here: https://hyperhh.de/LCG2017/hhTransforms ... lpaged.pdf ]

The stack contains a *very fast* version of the perspective image-transformation given in Raspberry Pi stacks collection #85 (pure LC Script):
JavaScript is used for the lengthy transforms of the imageData and applying a few image filters. Everything else, especially the computation of the "perspective matrix" and all the display is still LC Script.

You can scale, skew, translate and rotate in single or combined actions and perspective transform images up to screen size.

The perspective transform is also used to show images in a given MOCKUP frame. There is also a demo of running a gif (EM's jockey) in such mockup frames.

There are still more details to explore, e.g. expanding the transform of the control polygon (and by that the image) horizontally, vertically or both.

You can import your images and export your transformed artwork.
Have fun!

Download "hhMockup" : (sorry, currently not available)

The stack is tested to run using LC 8/9 on Mac/ Win 7+10/ Ubuntu (a few issues on linux, use latest LC 8/9 there).
 
Attachments
hhmockup162.jpg
The mockup is the laptop, the mockup frame its screen.
Your (imported) images are transformed to the mockup frame.
Last edited by [-hh] on Wed Dec 11, 2019 11:34 pm, edited 2 times in total.
shiftLock happens

Post Reply

Return to “LiveCode Builder”