Browser Widget usage examples

Moderators: LCMark, LCfraser

Post Reply
[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1518
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 105 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: 1518
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_Basics
(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 (Apr 14, 2017): LC-ITB-89 v103
  • imageToolBox67
    Needs LC 6/7/8/9, uses a revBrowser instance, so for Mac only (Win revBrowser doesn't support Canvas2d).
    Available (Mar 26, 2017): LC-ITB-67 v102
  • imageToolBoxJIT
    Uses luaJIT (included). For LC 6/7/8/9 on Mac/Win/linux and LC 6/7 on Raspi.
    (Not yet available)
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.
Get them from LC 8/9 via "Sample Stacks" of the LC-Toolbar or from livecodeshare (LC-ITB-89) and livecodeshare (LC-ITB-67).

** 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 Thu Jun 01, 2017 12:06 am, edited 2 times in total.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1518
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 118 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: 1518
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 69 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: 1518
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

Get it from LC 8/9 via "Sample Stacks" of the LC-Toolbar or from livecodeshare.

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

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1518
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 89 times
BrowserEvents.png
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1518
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:
  • 'LCImageToolBox89_Basics_ROI' from LC 8/9 via "Sample Stacks" of the LC-Toolbar or from livecodeshare,
  • 'LCImageToolBox6789_Basics_ROI' from LC 7/8/9-Mac via "Sample Stacks" of the LC-Toolbar or from livecodeshare.
___
** 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)
shiftLock happens

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

Post Reply

Return to “LiveCode Builder”