Browser Widget usage examples

Moderators: LCMark, LCfraser

bogs
Posts: 1755
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: 1682
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: 1682
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 632 times
shiftLock happens

LiveCode_Panos
Livecode Staff Member
Livecode Staff Member
Posts: 384
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: 1682
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: 1682
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 573 times
shiftLock happens

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

Post Reply

Return to “LiveCode Builder”