Browser Widget usage examples

Moderators: LCMark, LCfraser

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1880
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 58 times
DecimalJS.png
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1880
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: hhPDFViewer v0.8.0
(A basic GUI to 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 (for example rotation). 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 widget displays (and loads) one single page of any multipage pdf.
It needs 2.3 MByte of space in the temporary folder + 1.3*the size of the displayed pdf.

You can
  • Switch to prev/next/any page of the PDF.
  • Zoom in, zoom out or fit the PDF to width or height of the browser widget's width or height.
  • Fit the browser widget's rect to the page container's rect
    (hold down the shiftkey when using the controls for that).
  • Rotate the PDF to 0, 90, 180, 270 degrees.
  • Grab the PDF to scroll the PDF left/up/right/down.
The library is included in the stack, so that also an offline usage (with local PDFs) is possible.

I didn't already test it but 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 hhPDFViewer 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.
shiftLock happens

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

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

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

Post Reply

Return to “LiveCode Builder”