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 49 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: 1391
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 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 Fri Apr 14, 2017 3:03 pm, edited 1 time in total.
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: 1391
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Widget usage examples

Postby [-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 58 times
demoBackVideo.png
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: 1391
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Widget usage examples

Postby [-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 21 times
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: 1391
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Widget usage examples

Postby [-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 114 times
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: 1391
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