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.

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

The revBrowser version LC-ITB-67 v102.

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.

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

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.

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

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

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.

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.

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.

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.

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").

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

Last edited by [-hh] on Wed Dec 11, 2019 11:36 pm, edited 1 time in total.

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

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 (16.04 KiB) Viewed 11871 times

Last edited by [-hh] on Wed Dec 11, 2019 11:35 pm, edited 1 time in total.

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

8 controlpoints and three of the resulting tone curves

ColorToneCurve3.png (68.06 KiB) Viewed 11599 times

Last edited by [-hh] on Wed Dec 11, 2019 11:35 pm, edited 1 time in total.

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

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.