Browser Widget usage examples
Re: Browser Widget usage examples
Neat, and I guess it answers the other question about skewing/shearing. Very nice -hh
![Image](https://s7.postimg.cc/v87si6xuj/Forum_Signature.png)
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Browser Widget usage examples
Yes. And the next question, about "unskewing", is answered in "DePerspective/Undistort Images", see also: (sorry, currently not available)bogs wrote:I guess it answers the other question about skewing/shearing
![Wink ;-)](./images/smilies/icon_wink.gif)
Last edited by [-hh] on Wed Dec 11, 2019 11:34 pm, edited 1 time in total.
shiftLock happens
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Browser Widget usage examples
Widget usage example #13: Hyphenator
The stack uses Hyphenator.js (by M. Nater, MIT license) in a browser widget with your input.
You get
1. The hyphenated text (using the selected language patterns) displayed in a browser widget, the hyphenation based on the famous Liang algorithm.
2. The input with the softhyphens indicated(these are editable/changeable).
3. A LC field hyphenated according to the patterns (own algorithm*)
So you can use the plain text in a browser widget OR get hyphenated text for your LC field (or both). The algorithms are very fast.
As there is generally no way to get the generated 'hard' hyphen breaks of a browser content, we loose all styling and have to do our own hyphenation based on the soft-hyphenated words of the browser content.
So the primary output is plain text only.
[You can try to add carefully some styling after that but this is not supported by the stack.]
The stack is made for offline use and supports currently 18 languages:
cs/ Czech, da/ Danish, de/ German, el/ Greek, en-gb/ British English, en-us/ American English, es/ Spanish, fi/ Finnish, fr/French, hu/ Hungarian, it/ Italian, la/ Latin, nl/ Dutch, no/ Norwegian, pl/ Polish, pt/ Portuguese, sv/ Swedish and tr/ Turkish.
Download "Hyphenator": (sorry, currently not available)
The stack is tested to run using LC 8/9 on Mac/ Win 7+10/ Ubuntu.
____
* This algorithm uses measureText. On Windows 10 you see with respect to that big differences between LC 8 and the improved LC 9 results.
The stack uses Hyphenator.js (by M. Nater, MIT license) in a browser widget with your input.
You get
1. The hyphenated text (using the selected language patterns) displayed in a browser widget, the hyphenation based on the famous Liang algorithm.
2. The input with the softhyphens indicated(these are editable/changeable).
3. A LC field hyphenated according to the patterns (own algorithm*)
So you can use the plain text in a browser widget OR get hyphenated text for your LC field (or both). The algorithms are very fast.
As there is generally no way to get the generated 'hard' hyphen breaks of a browser content, we loose all styling and have to do our own hyphenation based on the soft-hyphenated words of the browser content.
So the primary output is plain text only.
[You can try to add carefully some styling after that but this is not supported by the stack.]
The stack is made for offline use and supports currently 18 languages:
cs/ Czech, da/ Danish, de/ German, el/ Greek, en-gb/ British English, en-us/ American English, es/ Spanish, fi/ Finnish, fr/French, hu/ Hungarian, it/ Italian, la/ Latin, nl/ Dutch, no/ Norwegian, pl/ Polish, pt/ Portuguese, sv/ Swedish and tr/ Turkish.
Download "Hyphenator": (sorry, currently not available)
The stack is tested to run using LC 8/9 on Mac/ Win 7+10/ Ubuntu.
____
* This algorithm uses measureText. On Windows 10 you see with respect to that big differences between LC 8 and the improved LC 9 results.
- Attachments
-
- A hyphenated text (here justified in a browser view).
In a LC field it will be aligned left or right or center . - Hyphenator.png (21.37 KiB) Viewed 15682 times
Last edited by [-hh] on Wed Dec 11, 2019 11:33 pm, edited 1 time in total.
shiftLock happens
-
- Livecode Staff Member
- Posts: 818
- Joined: Fri Feb 06, 2015 4:03 pm
Re: Browser Widget usage examples
Great stack Hermann.
Thank you![Smile :)](./images/smilies/icon_smile.gif)
Best,
Panos
--
Thank you
![Smile :)](./images/smilies/icon_smile.gif)
Best,
Panos
--
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Browser Widget usage examples
Hi Panos, thanks for such 'competent flowers'. Glad (one kind of) the greek hyphenation works, assuming you checked that for me with the demo text.
Sadly Hyphenator.js doesn't work with content-editable HTML (widget hhTextEdit).
Sadly Hyphenator.js doesn't work with content-editable HTML (widget hhTextEdit).
shiftLock happens
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Browser Widget usage examples
Widget usage example #14: Trace_to_SVG
The stack uses Potrace (by P. Seliger, especially his "lite" JavaScript version) in a browser widget with your input. It runs using LC 8/9 on Mac/ Win 7+10/ Ubuntu.
You input an image, especially your own painting, or an image from a group or an image from a text field. This is traced to an SVG path using curves with a selectable level of smoothing.
The image is translated to "black and white" for tracing, you can set weights for building the preparing grayLevel and set the threshold value. Transparency is supported.
The generated SVG is displayed in a grouped "SVG Icon" widget and (if installed) in a grouped "SVG_Text" widget, ready for being copied.
The size of the generated SVG is in between 10% and 110% of the input image!
Download "Trace_to_SVG": (sorry, currently not available)
The stack is tested to run using LC 8/9 on Mac/ Win 7+10/ Ubuntu.
The stack uses Potrace (by P. Seliger, especially his "lite" JavaScript version) in a browser widget with your input. It runs using LC 8/9 on Mac/ Win 7+10/ Ubuntu.
You input an image, especially your own painting, or an image from a group or an image from a text field. This is traced to an SVG path using curves with a selectable level of smoothing.
The image is translated to "black and white" for tracing, you can set weights for building the preparing grayLevel and set the threshold value. Transparency is supported.
The generated SVG is displayed in a grouped "SVG Icon" widget and (if installed) in a grouped "SVG_Text" widget, ready for being copied.
The size of the generated SVG is in between 10% and 110% of the input image!
Download "Trace_to_SVG": (sorry, currently not available)
The stack is tested to run using LC 8/9 on Mac/ Win 7+10/ Ubuntu.
- Attachments
-
- The LCC logo traced to SVG, displayed in a SVG_Text widget (LC 8 only).
SVG size 2.2 Kbyte, original image size 21.1 KByte. - Trace_to_SVG.png (38.73 KiB) Viewed 15646 times
Last edited by [-hh] on Wed Dec 11, 2019 11:33 pm, edited 1 time in total.
shiftLock happens
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Browser Widget usage examples
Widget usage example #2c: LC-ImageToolBox89_v170
This adds two new features to LC-ImageToolBox89
Matrix (Convolve up to 7x7) and ColorMatrix.
You can change the matrix values "live".
You have help to use a template to add your own filters (current values) in prepared menu buttons.
The algorithms are very fast and will usually do a 5x5 convolve job in 1 second using LC 8. LC 9 is even 15% faster!
Download LC-ImageToolBox89_v170: (sorry, currently not available)
This adds two new features to LC-ImageToolBox89
Matrix (Convolve up to 7x7) and ColorMatrix.
You can change the matrix values "live".
You have help to use a template to add your own filters (current values) in prepared menu buttons.
The algorithms are very fast and will usually do a 5x5 convolve job in 1 second using LC 8. LC 9 is even 15% faster!
Download LC-ImageToolBox89_v170: (sorry, currently not available)
Last edited by [-hh] on Wed Dec 11, 2019 11:33 pm, edited 1 time in total.
shiftLock happens
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Browser Widget usage examples
Widget usage example #2d: LC-ImageToolBox_v175
Comes in two variants
Quantile filtering (using a square around each pixel of up to 15x15).
An x-Quantile is a generalized parameter of location of distributions with a percentage x.
We have for example
-- the minimum of the sample values with x=0,
-- the quartiles at 25% or 50% or 75% with x=25 or 50 or 75,
-- the median of the sample values with x=50,
-- the maximum of the sample values with x=100.
You can select a 'collecting' square of 3x3, 5x5, 7x7, ..., 15x15 pixels.
For each image pixel the distribution of the color values of the r,g,b-channels of all pixels of that square around it is computed.
Then the r,g,b-values of the pixel are replaced by the r,g,b-quantiles of that distribution.
So there is a lot to compute, for example for x=50, a 9x9 square and an image of size 1000x700 we need 3x1000x700 = 2,100,000 times the median of 81 collected color values.
On a medium fast machine (Mac mini 2.5 GHz/IntelHD Graphics4000), my algorithm does this in
-- 1200 ms with LC 9.0, using the LC-ImageToolBox_89
-- 2200 ms with LC 6.7, using the LC-ImageToolBox_6789Mac
Download LC-ImageToolBox89_v175: (sorry, currently not available)
Download LC-ImageToolBox6789Mac_v175: (sorry, currently not available)
Comes in two variants
- LCImageToolBox89_v175.livecode
(uses Canvas2D in a browser widget which works on Mac/Win/linux with LC 8/9) - LCImageToolBox6789Mac_v175.livecode
(uses Canvas2D in revBrowser which works on Mac only with LC 6/7/8/9)
Quantile filtering (using a square around each pixel of up to 15x15).
An x-Quantile is a generalized parameter of location of distributions with a percentage x.
We have for example
-- the minimum of the sample values with x=0,
-- the quartiles at 25% or 50% or 75% with x=25 or 50 or 75,
-- the median of the sample values with x=50,
-- the maximum of the sample values with x=100.
You can select a 'collecting' square of 3x3, 5x5, 7x7, ..., 15x15 pixels.
For each image pixel the distribution of the color values of the r,g,b-channels of all pixels of that square around it is computed.
Then the r,g,b-values of the pixel are replaced by the r,g,b-quantiles of that distribution.
So there is a lot to compute, for example for x=50, a 9x9 square and an image of size 1000x700 we need 3x1000x700 = 2,100,000 times the median of 81 collected color values.
On a medium fast machine (Mac mini 2.5 GHz/IntelHD Graphics4000), my algorithm does this in
-- 1200 ms with LC 9.0, using the LC-ImageToolBox_89
-- 2200 ms with LC 6.7, using the LC-ImageToolBox_6789Mac
Download LC-ImageToolBox89_v175: (sorry, currently not available)
Download LC-ImageToolBox6789Mac_v175: (sorry, currently not available)
- Attachments
Last edited by [-hh] on Wed Dec 11, 2019 11:32 pm, edited 1 time in total.
shiftLock happens
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Browser Widget usage examples
Widget usage example #2e: LC-ImageToolBox_v180
Comes in two variants
Kuwahara filtering (using a total square around each pixel of up to 11x11).
The filter replaces each pixel with the mean value of the one of four subsquares that has minimal values variance, see https://en.wikipedia.org/wiki/Kuwahara_filter
Download LC-ImageToolBox89_v180 : (sorry, currently not available)
Download LC-ImageToolBox6789Mac_v180 : (sorry, currently not available)
Comes in two variants
- LCImageToolBox89_v180.livecode
(uses Canvas2D in a browser widget which works on Mac/Win/linux with LC 8/9) - LCImageToolBox6789Mac_v180.livecode
(uses Canvas2D in revBrowser which works on Mac only with LC 6/7/8/9)
Kuwahara filtering (using a total square around each pixel of up to 11x11).
The filter replaces each pixel with the mean value of the one of four subsquares that has minimal values variance, see https://en.wikipedia.org/wiki/Kuwahara_filter
Download LC-ImageToolBox89_v180 : (sorry, currently not available)
Download LC-ImageToolBox6789Mac_v180 : (sorry, currently not available)
- Attachments
Last edited by [-hh] on Wed Dec 11, 2019 11:32 pm, edited 1 time in total.
shiftLock happens
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Browser Widget usage examples
Widget usage example #2f: LC-ImageToolBox_v185b
[Edit: Version 1.8.5b removes from version 1.8.5 a bug with grayscale dithering]
Comes in two variants
Color-Dithering which does a separate 1-Bit dithering for each of the R-G-B-channels.
1-Bit-Dithering is done with 6 Methods: Atkinson, Burkes, Floyd-Steinberg, Jarvis-Judice-Ninke, Sierra-twoRow, Stucki. See for these (and some more) methods
http://www.tannerhelland.com/4660/dithe ... urce-code/
In the stack, the checkbox right of the method selector switches to/from 1-Bit dithering (you may select the color of the black and white pixels for the "1-Bit" display).
Download LC-ImageToolBox89_v185b: (sorry, currently not available)
Download LC-ImageToolBox6789Mac_v185b: (sorry, currently not available)
[Edit: Version 1.8.5b removes from version 1.8.5 a bug with grayscale dithering]
Comes in two variants
- LCImageToolBox89_v185b.livecode
(uses Canvas2D in a browser widget which works on Mac/Win/linux with LC 8/9) - LCImageToolBox6789Mac_v185b.livecode
(uses Canvas2D in revBrowser which works on Mac only with LC 6/7/8/9)
Color-Dithering which does a separate 1-Bit dithering for each of the R-G-B-channels.
1-Bit-Dithering is done with 6 Methods: Atkinson, Burkes, Floyd-Steinberg, Jarvis-Judice-Ninke, Sierra-twoRow, Stucki. See for these (and some more) methods
http://www.tannerhelland.com/4660/dithe ... urce-code/
In the stack, the checkbox right of the method selector switches to/from 1-Bit dithering (you may select the color of the black and white pixels for the "1-Bit" display).
Download LC-ImageToolBox89_v185b: (sorry, currently not available)
Download LC-ImageToolBox6789Mac_v185b: (sorry, currently not available)
- Attachments
Last edited by [-hh] on Wed Dec 11, 2019 11:32 pm, edited 1 time in total.
shiftLock happens
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Browser Widget usage examples
Widget usage example #15: ImageStatistics_v100 (updated to v150)
This is a very fast computation of the color-values distribution of an image.
You get the raw data**, that is the frequencies of the color values 0-255 for each of the R/G/B-channels and the grayscaled image.
For the histogram of the values and a table you can select to put the data in 2^2 or 2^3 or ... or 2^8 'bins' (value categories).
Moreover you get the modal, mean, stdDev, min, median and max of the values 0-255 for each of the R/G/B-channels and the grayscaled image.
Needs on a medium fast machine (Mac mini 2.5 GHz/IntelHD 4000) less than 300 ms for an image of size 1920x1080.
Download ImageStatistics_v100 : (sorry, currently not available)
______
** You can use the raw data for image processing by histogram equalization of one or more of the R/G/B-channels or of the grayscaled image values (easy to implement).
This is a very fast computation of the color-values distribution of an image.
You get the raw data**, that is the frequencies of the color values 0-255 for each of the R/G/B-channels and the grayscaled image.
For the histogram of the values and a table you can select to put the data in 2^2 or 2^3 or ... or 2^8 'bins' (value categories).
Moreover you get the modal, mean, stdDev, min, median and max of the values 0-255 for each of the R/G/B-channels and the grayscaled image.
Needs on a medium fast machine (Mac mini 2.5 GHz/IntelHD 4000) less than 300 ms for an image of size 1920x1080.
Download ImageStatistics_v100 : (sorry, currently not available)
______
** You can use the raw data for image processing by histogram equalization of one or more of the R/G/B-channels or of the grayscaled image values (easy to implement).
Last edited by [-hh] on Wed Dec 11, 2019 11:31 pm, edited 2 times in total.
shiftLock happens
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Browser Widget usage examples
Widget usage example #16: ImageHandles89_v110 and imageHandles6_LCS_v108
Just uploaded stack ImageHandles to "Sample Stacks".
[New in v110 of ImageHandles89_v100: Enable/disable perspective distortion (needed for images with transparency)]
This is a group of handles that is attachable to any image.
All you have to do (after copying the group to your stack) is
send "setTarget <imageName>" to group "hhPoly"
Base position of the 9 handles:
Actions are affine transforms and (optionally perspective distortion):
a=Click and drag, b=Shift-Click or RightClick and drag
1: (a) Rotate, (b) Reset shape
1 Cmd-Click: Toggle the enabled of perspective distortion (89 version only)
2,6: (a) Height, (b) SkewX
4,8: (a) Width, (b) SkewY
3,5,7,9: (a) Resize or 4-Point-Distortion
3,5,7,9: (b) ProportionalResize
• Rotation is around the shapes's centroid (which can also be shown).
• Changing height, width or proportional resizing preserves the current shape!
• In the 89 version only: Perspective distortion can be disabled, still allowing affine transforms (rotate, scale, skew). This is only needed for images with transparency to be antialiased what is not possible with perspective distortion.
ImageHandles works on Mac/Win/Linux and comes in two variants.
[1] (sorry, currently not available)
ImageHandles6_LCS (pure LCScript) is for LC 6/7/8/9,
fast enough (only) on LC 6.
## v1.0.8 Sep 03, 2018 ... removed small resizing bug and added flipH/flipV
## v1.0.5 Sep 01, 2018 ... first public version
[2] (sorry, currently not available)
ImageHandles89 has the option to use JavaScript (of a browser
widget) and is with that at about 15-20 faster as LCScript.
## v1.1.0 Sep 03, 2018 ... added 'allow perspective transforms' and flipH/flipV
## v1.0.5 Sep 01, 2018 ... first public version
The stacks have an option group for setting size, shape, color and special positions of the handles.
Just uploaded stack ImageHandles to "Sample Stacks".
[New in v110 of ImageHandles89_v100: Enable/disable perspective distortion (needed for images with transparency)]
This is a group of handles that is attachable to any image.
All you have to do (after copying the group to your stack) is
send "setTarget <imageName>" to group "hhPoly"
Base position of the 9 handles:
Actions are affine transforms and (optionally perspective distortion):
a=Click and drag, b=Shift-Click or RightClick and drag
1: (a) Rotate, (b) Reset shape
1 Cmd-Click: Toggle the enabled of perspective distortion (89 version only)
2,6: (a) Height, (b) SkewX
4,8: (a) Width, (b) SkewY
3,5,7,9: (a) Resize or 4-Point-Distortion
3,5,7,9: (b) ProportionalResize
• Rotation is around the shapes's centroid (which can also be shown).
• Changing height, width or proportional resizing preserves the current shape!
• In the 89 version only: Perspective distortion can be disabled, still allowing affine transforms (rotate, scale, skew). This is only needed for images with transparency to be antialiased what is not possible with perspective distortion.
ImageHandles works on Mac/Win/Linux and comes in two variants.
[1] (sorry, currently not available)
ImageHandles6_LCS (pure LCScript) is for LC 6/7/8/9,
fast enough (only) on LC 6.
## v1.0.8 Sep 03, 2018 ... removed small resizing bug and added flipH/flipV
## v1.0.5 Sep 01, 2018 ... first public version
[2] (sorry, currently not available)
ImageHandles89 has the option to use JavaScript (of a browser
widget) and is with that at about 15-20 faster as LCScript.
## v1.1.0 Sep 03, 2018 ... added 'allow perspective transforms' and flipH/flipV
## v1.0.5 Sep 01, 2018 ... first public version
The stacks have an option group for setting size, shape, color and special positions of the handles.
Last edited by [-hh] on Wed Dec 11, 2019 11:31 pm, edited 2 times in total.
shiftLock happens
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Browser Widget usage examples
Widget usage example #17: SVGHandles_v105
Just uploaded SVGHandles to "Sample Stacks".
This is a group of handles that is attachable to a SVG display.
All you have to do (after copying the group to your stack):
send "setTarget <fieldName>" to group "hhSVGPoly"
The field's name will usually end with ".svg" and contain any valid SVG source. The stack contains several examples.
Base position of the 9 handles:
Actions yield Affine Transformations:
a=Click and drag, b=Shift-Click or RightClick and drag
1: (a) Rotate, (b) Reset shape
2,6: (a) SkewX, (b) Height
4,8: (a) SkewY, (b) Width
3,5,7,9: (a) Resize
3,5,7,9: (a) ProportionalResize
4-point-distortion isn't (directly) available in SVG and some
work arounds yield jagged raster displays for curved shapes.
That's why we made 'only' affine transformations available.
Rotation is around the shapes's loc (which can also be shown).
Changing height, width or proportional resizing preserves the
current shape!
SVGHandles works on Mac/Win/Linux with LC 8/9 and uses JavaScript
(of a browser widget) for converting and antialiasing the SVG to
the raster display and is by that very fast.
Download: (sorry, currently not available)
## v1.0.5 Sep 06, 2018 ... adjusted handle actions (handles 2,4,6,8)
## v1.0.2 Sep 03, 2018 ... added cropForExport to options
## v1.0.0 Sep 03, 2018 ... First version on LiveCodeShare (Sample stacks)
Just uploaded SVGHandles to "Sample Stacks".
This is a group of handles that is attachable to a SVG display.
All you have to do (after copying the group to your stack):
send "setTarget <fieldName>" to group "hhSVGPoly"
The field's name will usually end with ".svg" and contain any valid SVG source. The stack contains several examples.
Base position of the 9 handles:
Actions yield Affine Transformations:
a=Click and drag, b=Shift-Click or RightClick and drag
1: (a) Rotate, (b) Reset shape
2,6: (a) SkewX, (b) Height
4,8: (a) SkewY, (b) Width
3,5,7,9: (a) Resize
3,5,7,9: (a) ProportionalResize
4-point-distortion isn't (directly) available in SVG and some
work arounds yield jagged raster displays for curved shapes.
That's why we made 'only' affine transformations available.
Rotation is around the shapes's loc (which can also be shown).
Changing height, width or proportional resizing preserves the
current shape!
SVGHandles works on Mac/Win/Linux with LC 8/9 and uses JavaScript
(of a browser widget) for converting and antialiasing the SVG to
the raster display and is by that very fast.
Download: (sorry, currently not available)
## v1.0.5 Sep 06, 2018 ... adjusted handle actions (handles 2,4,6,8)
## v1.0.2 Sep 03, 2018 ... added cropForExport to options
## v1.0.0 Sep 03, 2018 ... First version on LiveCodeShare (Sample stacks)
Last edited by [-hh] on Wed Dec 11, 2019 11:30 pm, edited 1 time in total.
shiftLock happens
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Browser Widget usage examples
Widget usage example #18: Overlay a browser widget with an "action bar" (new: v1.0.3)
(The "action bar" is the only content of a second browser widget)
There are, in regular intervals, discussions about overlaying a browser widget.
We know that this is possible if you bundle your controls in a floating ("system"-layered) stack.
But it is not possible with ordinary LC controls of a card because the browser widget uses a native layer. However, there is another way to get a "Bar" containing buttons etc.:
We overlay the browser with another browser widget that contains only that bar, CSS styled and using javaScriptHandlers. This sounds more complicated as it is, simply look at the attached example that shows a demo with rounded buttons, a timer, an url input, grouped radio buttons, a check button, an option button and a slider.
Most of them have example actions connected (see the card's script),
especially can you
If that widget is animated and loads slowly (more than 1 second) then the action bar may be hidden.
Then activate it with the escape key, shift-escape retains the current location of the action bar.
This new version stays also over a movie or an animations webpage (as for example the overloaded livecode homepage).
The snapshot below shows livecode.com scaled to 50% underneath our "action bar".
The version is now updated to 1.0.3 (which also avoids demo-links to a server that has (currently) problems).
(The "action bar" is the only content of a second browser widget)
There are, in regular intervals, discussions about overlaying a browser widget.
We know that this is possible if you bundle your controls in a floating ("system"-layered) stack.
But it is not possible with ordinary LC controls of a card because the browser widget uses a native layer. However, there is another way to get a "Bar" containing buttons etc.:
We overlay the browser with another browser widget that contains only that bar, CSS styled and using javaScriptHandlers. This sounds more complicated as it is, simply look at the attached example that shows a demo with rounded buttons, a timer, an url input, grouped radio buttons, a check button, an option button and a slider.
Most of them have example actions connected (see the card's script),
especially can you
- grab the widget (and optionally also the browser widget underneath)
- scale the content (whatever it is) of the browser widget underneath using the slider.
Clicking the label "Scale" resets to scale 1.
If that widget is animated and loads slowly (more than 1 second) then the action bar may be hidden.
Then activate it with the escape key, shift-escape retains the current location of the action bar.
This new version stays also over a movie or an animations webpage (as for example the overloaded livecode homepage).
The snapshot below shows livecode.com scaled to 50% underneath our "action bar".
The version is now updated to 1.0.3 (which also avoids demo-links to a server that has (currently) problems).
- Attachments
-
- widgetOverWidget103-sample.livecode.zip
- (10.75 KiB) Downloaded 455 times
shiftLock happens