Browser Widget usage examples

Moderators: LCMark, LCfraser

bogs
Posts: 2063
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: 1724
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 "Sample stacks" or http://livecodeshare.runrev.com/stack/824/ ;-)
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1724
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" from "Sample Stacks" (or http://livecodeshare.runrev.com/stack/868).

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 1662 times
shiftLock happens

LiveCode_Panos
Livecode Staff Member
Livecode Staff Member
Posts: 452
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: 1724
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: 1724
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" from "Sample Stacks"
(or http://livecodeshare.runrev.com/stack/869).

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 1603 times
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1724
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 from "Sample Stacks" or (slower) using http://livecodeshare.runrev.com/stack/826/
 
Attachments
lc-imagetoolbox_v170.jpg
5x5 Laplace-filter applied
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1724
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 from "Sample Stacks" or using http://livecodeshare.runrev.com/stack/826/
Download LC-ImageToolBox6789Mac_v175 from "Sample Stacks" or using http://livecodeshare.runrev.com/stack/827/
 
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
shiftLock happens

bogs
Posts: 2063
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: 1724
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 from "Sample Stacks" or using http://livecodeshare.runrev.com/stack/826/
Download LC-ImageToolBox6789Mac_v180 from "Sample Stacks" or using http://livecodeshare.runrev.com/stack/827/
 
Attachments
tree_orig.jpg
Original image, click to zoom in.
tree_kuwahara.jpg
Kuwahara filter 7x7 (=four 4x4 subsquares), click to zoom in.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1724
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 from "Sample Stacks" or using http://livecodeshare.runrev.com/stack/826/
Download LC-ImageToolBox6789Mac_v185b from "Sample Stacks" or using http://livecodeshare.runrev.com/stack/827/
 
Attachments
SunFlower_orig.png
Original (photo W.S.), click to enlarge
SunFlower_dither.png
Color-Dithered with Atkinson's method, click to enlarge
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1724
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

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 from "Sample Stacks" or using http://livecodeshare.runrev.com/stack/882/

______
** 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
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1724
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 460 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] http://livecodeshare.runrev.com/stack/893
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] http://livecodeshare.runrev.com/stack/894
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 Tue Sep 04, 2018 12:12 am, edited 1 time in total.
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1724
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 384 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 from "Sample Stacks" or
http://livecodeshare.runrev.com/stack/896
 
## 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
shiftLock happens

Post Reply

Return to “LiveCode Builder”