Browser Widget usage examples

LiveCode Builder is a language for extending LiveCode's capabilities, creating new object types as Widgets, and libraries that access lower-level APIs in OSes, applications, and DLLs.

Moderators: LCMark, LCfraser

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Browser Widget usage examples

Post by bogs » Mon Feb 26, 2018 6:41 am

Neat, and I guess it answers the other question about skewing/shearing. Very nice -hh
Image

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Browser Widget usage examples

Post by [-hh] » Sun Mar 04, 2018 9:08 am

bogs wrote:I guess it answers the other question about skewing/shearing
Yes. And the next question, about "unskewing", is answered in "DePerspective/Undistort Images", see also: (sorry, currently not available) ;-)
Last edited by [-hh] on Wed Dec 11, 2019 11:34 pm, edited 1 time in total.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Browser Widget usage examples

Post by [-hh] » Sun Mar 04, 2018 9:12 am

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.
 
Attachments
Hyphenator.png
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 15297 times
Last edited by [-hh] on Wed Dec 11, 2019 11:33 pm, edited 1 time in total.
shiftLock happens

LiveCode_Panos
Livecode Staff Member
Livecode Staff Member
Posts: 818
Joined: Fri Feb 06, 2015 4:03 pm

Re: Browser Widget usage examples

Post by LiveCode_Panos » Sun Mar 04, 2018 10:59 pm

Great stack Hermann.

Thank you :)

Best,
Panos
--

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Browser Widget usage examples

Post by [-hh] » Mon Mar 05, 2018 9:38 pm

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

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Browser Widget usage examples

Post by [-hh] » Mon Mar 05, 2018 9:44 pm

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.
Attachments
Trace_to_SVG.png
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 15261 times
Last edited by [-hh] on Wed Dec 11, 2019 11:33 pm, edited 1 time in total.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Browser Widget usage examples

Post by [-hh] » Mon May 21, 2018 7:41 pm

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)
 
Attachments
lc-imagetoolbox_v170.jpg
5x5 Laplace-filter applied
Last edited by [-hh] on Wed Dec 11, 2019 11:33 pm, edited 1 time in total.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Browser Widget usage examples

Post by [-hh] » Fri Aug 24, 2018 1:05 pm

Widget usage example #2d: LC-ImageToolBox_v175

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)
Version 1.7.5 adds a new feature to LC-ImageToolBox:

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
tree_q50.jpg
ImageFilter: 50%-quantile=Median (9x9 square), click to zoom in
tree_q10.jpg
Image Filter: 10%-quantile (9x9 square), click to zoom in
tree_orig.jpg
Original image, click to zoom in
Last edited by [-hh] on Wed Dec 11, 2019 11:32 pm, edited 1 time in total.
shiftLock happens

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Browser Widget usage examples

Post by bogs » Fri Aug 24, 2018 3:12 pm

Very slick -hh !
Image

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Browser Widget usage examples

Post by [-hh] » Sat Aug 25, 2018 4:35 pm

Widget usage example #2e: LC-ImageToolBox_v180

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)
Version 1.8.0 adds a new feature to LC-ImageToolBox:

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
tree_orig.jpg
Original image, click to zoom in.
tree_kuwahara.jpg
Kuwahara filter 7x7 (=four 4x4 subsquares), click to zoom in.
Last edited by [-hh] on Wed Dec 11, 2019 11:32 pm, edited 1 time in total.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Browser Widget usage examples

Post by [-hh] » Sun Aug 26, 2018 10:53 am

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
  • 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)
Version 1.8.5b adds a new feature to LC-ImageToolBox:

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
SunFlower_orig.png
Original (photo W.S.), click to enlarge
SunFlower_dither.png
Color-Dithered with Atkinson's method, click to enlarge
Last edited by [-hh] on Wed Dec 11, 2019 11:32 pm, edited 1 time in total.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Browser Widget usage examples

Post by [-hh] » Tue Aug 28, 2018 2:52 pm

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).
 
Attachments
imagestatistics_100.jpg
Last edited by [-hh] on Wed Dec 11, 2019 11:31 pm, edited 2 times in total.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Browser Widget usage examples

Post by [-hh] » Sat Sep 01, 2018 5:48 pm

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:
 
help.png
Handles base positioning.
help.png (3.03 KiB) Viewed 14144 times
 
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.
 
Attachments
imageHandles.png
ProportionalResizing by handle 3 (topRight). Centroid is shown.
Last edited by [-hh] on Wed Dec 11, 2019 11:31 pm, edited 2 times in total.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Browser Widget usage examples

Post by [-hh] » Mon Sep 03, 2018 12:01 am

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:
 
help.png
Base position of the handles
help.png (3.03 KiB) Viewed 14077 times
 
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)
 
Attachments
svgHandles2.png
A rotated and skewed SVG display
Last edited by [-hh] on Wed Dec 11, 2019 11:30 pm, edited 1 time in total.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Browser Widget usage examples

Post by [-hh] » Wed Oct 31, 2018 9:28 pm

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
  • 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.
Outside the action bar you reach the widget underneath as usual.
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 443 times
widgetOverWidget.png
shiftLock happens

Post Reply

Return to “LiveCode Builder”