Browser Widget usage examples

Moderators: LCMark, LCfraser

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

Re: Browser Widget usage examples

Post by [-hh] » Tue Nov 20, 2018 11:35 am

Widget usage example #19: DecimalJS (arbitrary precision decimal numbers)
(a GUI to the JavaScript library "Decimal.js")

https://github.com/MikeMcl/decimal.js/

The library and the api-doc is included in the stack, so that an offline usage is possible.

I added a javaScriptHandler that yields a notebook-like interface for close to no javaScript knowledge.

I added also functions "factorial" and "factors", so you can compute for example the prime factors of factorial(77) = 77*76*...*3*2*1 = 145183092028285869634070784086308284983740379224208358846781574688061991349156420080065207861248000000000000000000 = (2^73)*(3^35)*(5^18)*(7^12)*(11^7)*(13^5)*(17^4)*(19^4)*(23^3)*(29^2)*(31^2)*(37^2)*41*43*47*53*59*61*67*71*73
which is, for example, the number of different orders of 77 queued objects.
 
Attachments
decimalJS.livecode.zip
(104.48 KiB) Downloaded 95 times
DecimalJS.png
shiftLock happens

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

Re: Browser Widget usage examples

Post by [-hh] » Mon Nov 26, 2018 8:58 pm

Widget usage example #20: PDFViewer v1.0.0
(A basic GUI to parts of the JavaScript pdf library "pdf.js"
https://mozilla.github.io/pdf.js/ )

Sometimes one wishes to have a unique PDF display, independent of the user's current internet-plugin. Or one wishes to have a feature that these plugins don't have. Then pdf.js comes in.

There are already several threads about that in the forum.
Here is a solutions that displays both local and remote pdfs. And it does NOT need a local server.

The stack displays (and loads) one single page of any multipage pdf in a browser widget.
The library is included in the stack. Stack size < 500 KBytes.

Current features.
  • Switch to prev/next/any page of the PDF.
  • Zoom in/out or fit the PDF to width/height of the widget.
  • Rotate the PDF to 0, 90, 180, 270 degrees.
  • GRAB mode: Grab the PDF to scroll it left/up/right/down.
  • GRAB mode: Grab the PDF to scroll it left/up/right/down.
  • TEXT mode: Select and copy text from the PDF.
  • Switch pages also with arrowkeys in both modes.
  • History of used files.
You can display both local and remote pdfs. And we do NOT need
a local server or a temporary file system. The full viewerJS of
the library can NOT do this without a server.

The library is included in the stack. Stack size < 500 KBytes.

Tested to work with LC 902 on 64bit of
MacOs 10.14, Win7+10, ubuntu1604
Works also with LC 8.1.10 on Mac/Win, but NOT on linux.

The stack should run on any platform where the browser widget works.
For mobile you still have do some work for resizing the browser widget and the controls group (and changing some triggers).

Download PDFViewer_v100 from "Sample Stacks" or
http://livecodeshare.runrev.com/stack/916/
 
Attachments
hhPDFViewer.png
A rotated-to-90-degrees view. You can grab the PDF with the mouse.
Last edited by [-hh] on Wed Feb 27, 2019 10:47 pm, edited 4 times in total.
shiftLock happens

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

Re: Browser Widget usage examples

Post by [-hh] » Mon Dec 17, 2018 5:48 pm

Widget usage example #21a: HTMLtoIMAGE v1.0.0

HTMLtoIMAGE makes an image of the *whole* HTML content of a browser widget (while waiting for printToPdf from the browser widget in 9.x). The image may become a height of several thousands pixels.

The stack is based on the library from https://html2canvas.hertzen.com (MIT licensed).
This javaScript library takes "screenshots" of webpages based on the DOM, and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
Then it saves the data to a canvas. ["Overlayed" (with movies) pages as livecode.com are only partially saved, just try.]

We don't display this HTML5-canvas in a browser but catch the imagedata from it and save it to a local image in the folder where the stack resides.
You can set options:
  • the image format: JPEG with quality level or PNG,
  • an image scale (percentage)
The javaScript library is included in the stack (please watch the license).
For the use in your own stacks see the help of the stack.

Download HTMtoIMAGE from "Sample Stacks" or
http://livecodeshare.runrev.com/stack/919/

The attached image is made with the stack from http://hyperhh.de/html5/index-large.html
 
Attachments
index-large.html.jpg
The image is scaled down to 437 × 2352
to go below the upload limit of 250K,
click to enlarge.
shiftLock happens

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

Re: Browser Widget usage examples

Post by [-hh] » Tue Dec 18, 2018 12:55 am

Widget usage example #21b: BrowserSnapshot v0.1.5 (Updated)

BrowserSnapshot makes an image of the *whole* HTML content of a browser widget (while waiting for printToPdf from the browser widget in 9.x). The image may get a height of several thousands pixels.

It works now for both: pages that are clipped horizontally and/or vertically by the viewport.

This is a pure LC Script solution: The widget is scrolled down appropriate portions of the whole HTML page and a snapshot is made.
Then the snapshots are merged (optionally scaled) into ONE image of format PNG or JPEG.

For installation in your stacks please read the help in the stack.

Download BrowserSnapshot from "Sample Stacks" or
http://livecodeshare.runrev.com/stack/920/

The attached image is made with the stack from http://hyperhh.de/html5/index-large.html
(merged from 15 snapshots).
 
Attachments
snap_0.jpg
The image is scaled down to 245x2842
to go below the upload limit of 250K.
Click to enlarge.
shiftLock happens

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

Re: Browser Widget usage examples

Post by [-hh] » Sun Dec 30, 2018 12:02 am

Widget usage example #22: JIGSAW PUZZLE 2d-video v1.1.0

This is a faster IDE-version (using a hidden browser widget) of a HTML5 standalone (for the HTML5 see viewtopic.php?p=174769#p174769 ).

You will find this faster IDE-version "jigsawPuzzle2d-videoBW"
on "Sample Stacks" or http://livecodeshare.runrev.com/stack/924/

• This is from the image-puzzle part the same as the pure LC-Script version "JigsawPuzzle2d" here on "Sample Stacks" (which runs on LC 6/7/8/9 an desktop (and even Raspi), see viewtopic.php?p=149831#p149831

• For the video-puzzle part you can choose the server (with videos from the server) and get an installation instruction for use with your local server (and local videos). The page (URL) can use videos from the same server only.

[Edit May 16, 2019. This memory leak of the browser widget has been removed with LC 9.0.5:
WARNING. This runs with a memory leaking of up to 5 MByte per second while a video is playing. You have to quit LiveCode after a while for releasing the memory (closing the stack and removing it from memory is not enough).]

The increase in speed and the more smooth display is due to the difference between LC-Emscripten (HTML5 standalone) and the LC-IDE for drawing the backpattern of the puzzle graphics.
The speed from the hard work javaScript (your browser vs. the browser widget) is at about the same and depends on your graphic card (GPU).
Attachments
jigsaw2d-video.png
The video runs in the pieces that are (for each new chosen pieceSize)
generated on the fly using linear and cubic bezier curves.
jigsaw2d-video.png (60.98 KiB) Viewed 2402 times
Last edited by [-hh] on Thu May 16, 2019 4:51 pm, edited 2 times in total.
shiftLock happens

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

Re: Browser Widget usage examples

Post by [-hh] » Wed Jan 02, 2019 9:08 pm

Widget usage example #5b: Getting MouseEvents (part2)
This continues part 1 ( viewtopic.php?p=154496#p154496 ).

It is different from the methods there in that it adds an eventHandler not when setting the htmltext of the widget but by script to ANY webpage displayed in the widget.

The handler sends the selected text of the widget to the stack, whenever the user selects text in the webpage, by triggering the mouseup-event (not caught by a LC-loop).

Moreover the stack shows one way how to implement "history" for the widget in a few lines.

The scripts are very short and easy to implement in your own stacks.
Also there is help in the stack.

Have fun!
Attachments
getSelectedText.livecode.zip
(3.51 KiB) Downloaded 139 times
getSelectedText.png
The selection at left in the widget is on mouseUp sent by a callback to LiveCode
and then, for example, displayed in a field. (Click to enlarge the image.)
shiftLock happens

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

Re: Browser Widget usage examples

Post by [-hh] » Tue Jan 15, 2019 7:31 pm

(Widget usage example #2. Update to v192)
LC-ImageToolBox89 and LC-ImageToolBox6789Mac
New effects.
Get them via "Sample Stacks" of the LC-Toolbar or
http://livecodeshare.runrev.com/stack/826/ [LC 8/9]
http://livecodeshare.runrev.com/stack/827/ [LC 6/7/8/9 Mac]
shiftLock happens

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

Re: Browser Widget usage examples

Post by [-hh] » Sun Jan 27, 2019 3:58 am

Widget usage example #23: IndyCam2 v_102
(v102 removes a display bug on windows where I could not make two cams visible at the same time. So, if you have two cameras attached then you see on MacOS the display of both and on Windows10 only the selected one.) Tested to work on MacOS 10.14 and Windows 10.

*** The stack does NOT run with LC Community ***
(Because it uses the cameraControl that is available in the Indy or Business versions of LC only.)

Download IndyCam2 from "Sample stacks" or
http://livecodeshare.runrev.com/stack/927/

You can take snapshots with up to two (intern oder extern) cameras, may be also simple webcams. Each snapshot is at about 240 KByte.

The snapshots can be filtered (directly in the stack) with one of the image effects from LCImageToolBox_89. This uses canvas2D in a browser widget.

There is also a timer for using this as timelapseCamera, shooting in intervals of 1 to 36600 seconds. While such a timelapse is running you can change the camera, the image filter and the interval.

There is more help in the stack.
 
Attachments
indycam2.png
A snapshot of my full winter beard, filtered with Atkinson BW-dither.
indycam2.png (16.98 KiB) Viewed 2046 times
shiftLock happens

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

Re: Browser Widget usage examples

Post by [-hh] » Wed Feb 27, 2019 10:46 pm

Updated.
Widget usage example #20: PDFViewer_v100. See the description:
viewtopic.php?p=173724#p173724

Download PDFViewer_v100 from "Sample Stacks" or
http://livecodeshare.runrev.com/stack/916/
shiftLock happens

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

Re: Browser Widget usage examples

Post by [-hh] » Tue Mar 12, 2019 3:08 pm

Widget usage example #24: Statistics-Distributions_v105

Stack "Statistics-Distributions" tabulates and displays 20 distributions:

binomial, hypergeometric, negativebinomial, poisson, arcsine, beta, cauchy, centralF, chisquare, exponential, gamma, invgamma, kumaraswamy, lognormal, normal, pareto, studentt, triangular, uniform and weibull.

Uses jStat ( https://github.com/jstat/jstat ) and
Chartist ( https://github.com/gionkunz/chartist-js ).
License MIT ( https://en.wikipedia.org/wiki/MIT_License ).

Download Statistics-Distributions from "Sample Stacks" or
http://livecodeshare.runrev.com/stack/932

The stack is tested to run with LC 9.0.2 on MacOS 10.14, Win 7+10 and linux(ubuntu1604).
[Works also with LC 8.1.10 on MacOS and, except for the chisquare distribution, on Win/linux].
 
Attachments
Statistics-Distributions.png
shiftLock happens

MaxV
Posts: 1574
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: Browser Widget usage examples

Post by MaxV » Mon Apr 01, 2019 5:55 am

[-hh] wrote:
Fri Dec 29, 2017 1:47 am
Widget usage example #9: hhTextEditBasic
(Close to a basic TextEdit widget)

Uses a browser widget as "text field" extending by that LC's htmltext of fields to a larger set of text styling (e.g. justified textAlign), transforms/3D-rotations and filters (blur, sepia etc.).
Of course you can edit the transformed/rotated/filtered text _while_ it is transformed/rotated/filtered -- a funny training for your imagination ...
Dear hh,
how can I use hhTextEditBasic in my programs? I don't understand how set the text using code.
I didn't find any setprop handler, and htmltext property don't seem to affect it.
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

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

Re: Browser Widget usage examples

Post by [-hh] » Mon Apr 01, 2019 8:27 am

(a) Card TextEdit-Mini:
The styles (font,font-size etc.) are handled in "mouseUp" of group "buttons" (the options group).
Shortcut to edit the script: RightClick the frame of this options group.

The text insertion is handled by button "innerHtml". Similarly you could write

Code: Select all

on mouseUp
  do "document.body.innerHTML=" &quote& text() &quote & ";" in widget "hhview"
end mouseUp

function text
  return fld "MyInput"
end text
where text() contains no literal quote, that is you have to write, for example,

Code: Select all

return "I am a" &quote& " text " &quote& "containing quotes."
or use the base64-method of (b).

(b) Card TextEdit-Basic:
The styles (font,font-size etc.) are handled in "mouseUp" of group "hhView" (the options group).
Shortcut to edit this script: RightClick the frame of this options group.

The text insertion is handled by button "Insert". Similarly you could write

Code: Select all

on mouseUp
  put base64Encode(text()) into str
  replace linefeed with empty in str
  do "document.body.innerHTML= window.atob('" & str & "');" in widget "hhview"
end mouseUp

function text
  return fld "MyInput"
end text
Currently this b64-method doesn't support UTF-8.
I know how to do it and it is on my to-do-list. Meanwhile you could use the method from (a).
shiftLock happens

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

Re: Browser Widget usage examples

Post by [-hh] » Fri Jun 21, 2019 10:54 am

Widget usage example #15b: ImageStatistics_v165
[Updated! Version 160 had an error in the javascript for listing the (R,G,B)-triplets]

Added optional computation of the frequencies of the used (R,G,B)-triplets.
You can also put the (R,G,B)-triplets into the x^3 bins (ranges combinations) that are given by dividing the 0-255 range into x=4,8,16,32,64,128 bins for each channel.

****If you wish to have low/high ranges (0-127 and 128-255) simply add 2 to the "bins" menus.****

Download ImageStatistics_v165 from "Sample Stacks" or using http://livecodeshare.runrev.com/stack/882/

For the description of the marginal distributions (channels R/G/B/Gray) and other statistics see
viewtopic.php?p=170716#p170716
shiftLock happens

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

Re: Browser Widget usage examples

Post by [-hh] » Mon Jun 24, 2019 1:52 pm

Widget usage example #25: ImagePalette_v100
>>> The stack needs LC 9. It also runs in LC 8 but up to 10 times slower. <<<

The stack creates a color palette from any image. You set the number of colors (2-256) of the palette.

Such palettes are often used to create "harmonic" designs of drawings/posters or for creating web pages.

If you have a decent GPU then, with LC 9, around 1-2 seconds are needed for images of medium screen size (1920x1080).

You can see the "quantized" image with that palette ( see
https://en.wikipedia.org/wiki/Color_quantization ).

The quantized image is computed built-in or by using LC's "export image with palette" with the computed palette.

The stack uses the excellent javaScript library rgbQuant https://github.com/leeoniya/RgbQuant.js/ via a browser widget. The library is included in the stack.

Download "ImagePalette" from "Sample Stacks" or from http://livecodeshare.runrev.com/stack/938/

License MIT ( see https://en.wikipedia.org/wiki/MIT_License )
Attachments
imagepalette100.png
Click image to enlarge.
shiftLock happens

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

Re: Browser Widget usage examples

Post by [-hh] » Tue Aug 13, 2019 5:28 pm

Widget usage example #26: QR-Reader_v101
Edit (Aug 14, 2019): Version 101 improved dragging and works with snapshots now also on linux.

This is a QR code *reader* which reads from static images that may be slightly rotated and/or skewed and/or distorted.

You can make it to a QR code *scanner* by providing webCam/mobileCam camera snapshots to read from. Usually images from cameras that can't autofocus or focus manually are not good enough for that.

We use the excellent JS library jsQR ( https://github.com/cozmo/jsQR ) and are by that Apache2-licensed.

QR-Reader runs with any edition of LC 8/9 (tested with 9.5/9.0.4/8.1.10) on every platform that supports the browser widget.

Download QR-Reader from "Sample Stacks" of the LC toolbar or http://livecodeshare.runrev.com/stack/943/
 
Attachments
QR-Reader.jpg
rotated input
QR-Reader.jpg (28.03 KiB) Viewed 124 times
QR-Reader2.jpg
overlayed input
QR-Reader2.jpg (72.11 KiB) Viewed 124 times
shiftLock happens

Post Reply

Return to “LiveCode Builder”