Browser Widget usage examples

Moderators: LCMark, LCfraser

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

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1958
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: 1958
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: 1958
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: 1958
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 1163 times
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1958
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 117 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: 1958
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: 1958
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 807 times
shiftLock happens

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1958
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: 1958
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: 1567
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: http://livecodeitalia.blogspot.it
To post code use this: http://tinyurl.com/ogp6d5w

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

Post Reply

Return to “LiveCode Builder”