Widget usage examples

Moderators: LCMark, LCfraser

Widget usage examples

Postby [-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 25 times
KB-BR.jpg
Fading from a well known LiveCoder to the LCC logo (click to enlarge)
Plagiarism is basic to all culture.
(Pete Seeger in a concert, he didn't name an author ...)
[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Livecode Membership
 
Posts: 1353
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Widget usage examples

Postby [-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 (as soon as the widget works there too) for linux. Should work after a few adjustments only in mobile too.
    Available (Mar 26, 2017): LC-ITB-89 v102
  • 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.

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

 
Attachments
LCImageToolbox67_102.png
The revBrowser version LC-ITB-67 v102.
LCImageToolbox89_102.png
The browser widget version LC-ITB-89 v102.
Plagiarism is basic to all culture.
(Pete Seeger in a concert, he didn't name an author ...)
[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Livecode Membership
 
Posts: 1353
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE


Return to LiveCode Builder

Who is online

Users browsing this forum: No registered users and 2 guests