Save snapshot (or exporting image) from Browser Widget

[Lorena]

Hello all,
I am trying to do a simple thing: save a snapshot (or exporing image) from the Browser Widget.
(I have edited the post and its title for better understanding)....

I'm a beginner and I don't understand how to do it, although I've read a lot of forum pages including this "Printing a Browser Widget".
And I also read the beautiful thread by -hh about the widget... only the part I'm interested in no longer has the stack!

- Re: browser widget usage examples
Widget usage example #21b: BrowserSnapshot v0.1.5 (Updated)

Anyway...
Now, I can extract only a part of the image, the one under the scroll however not. Is there any way to do this? Or some kind of pdf export of the page.... Or is it perfectly fine in image format... I have been experimenting for days but I can only take a picture of half the page, so I humbly ask for your help. Thank you for your time...

Lorena

[wouldn't it be nice if there was a simple command like, "print widget content", "export widget image"?... in short in the unmistakable livecode style!]

[Lorena]

I am still looking for solutions, but I think if not even an expert has suggested a way, it is impossible to do so....

I have in fact found this:

Is a load of old cack:
-
PrintBrowser.jpg
-
yielding a blank page.

Aaaaaaaah: viewtopic.php?t=32387

"Print/PrintToPDF is not supported by the browser widget.
It is on the long list of LC promises for LC 9."

That was March 2019: 2 years ago!

And also this:

I see some new functionality for browser widget announced for LC10. But what I would really like to see is some movement on the long standing bugs logged against browser widget. Does anyone know if ANY of these are going to be addressed in the next release?

Examples:

Browser widget: 'print' action - https://quality.livecode.com/show_bug.cgi?id=16903
Browser widget should implement zoom - https://quality.livecode.com/show_bug.cgi?id=23249
Browser widget unable to set browser security privileges - https://quality.livecode.com/show_bug.cgi?id=21652
Browser widget unable to cancel navigation - https://quality.livecode.com/show_bug.cgi?id=21651
Browser widget should support drag and drop - https://quality.livecode.com/show_bug.cgi?id=23879

There are plenty of others. Please add your favourites to this thread if there's something that particularly bugs you...

Rodney

Can someone please confirm that it is not possible to export a full image from the browser widget, so I'll leave it alone and play with something else!
Thank you all in advance, I don't want to bother anyone, but I can't find a solution by myself!

Lorena

[SWEdeAndy]

I very much need this feature as well, but I’m not aware of any possibility to do so, unfortunately. It’s still stuck as an enhancement request.

[richmond62]

Well . . . just me thinking aloud . . .

Code: Select all

create image "temp"
   export snapshot from rect globalRect(the rect of widget "browser") to img "temp" as PNG

Isn't that ONLY going to export what is visible in the browser onscreen rather than the whole lot?

At the risk of looking very stupid indeed I am going to make another button with this code:

Code: Select all

global pRect

on mouseUp
   export snapshot from rect globalRect(the rect of widget "browser") to file "cheese.png" as PNG
   end mouseUp

function globalRect pRect
   return the globalLoc of (item 1 to 2 of pRect), \
         the globalLoc of (item 3 to 4 of pRect)
end globalRect

Wow! The result is certainly 'entertaining':
-

-
Although, of course it has NO utility whatsoever.

This:

Code: Select all

on mouseUp
   export snapshot from widget "Browser" to file "cheese.png" as PNG
   end mouseUp

Exported an image that was the size of the onscreen widget, but consisted of solid black.

And this:

Code: Select all

on mouseUp
   import snapshot from widget "Browser"
   end mouseUp

produced a 100% transparent image . . .

So, obviously, the Browser widget is "invisible" to the rest of LiveCode.

As if there were any doubt:

Code: Select all

on mouseUp
   import snapshot from card id 1002
   end mouseUp

Produces an image that features ALL the controls of the card EXCEPT for the widget.

[richmond62]

https://lessons.livecode.com/m/2592/l/2 ... n-your-app

Oh, "Sugar":

- The CEF browser is available in versions 6.7+ of LiveCode

- On Mac, the CEF browser is not available on versions 8.0+ of LiveCode. You can use the browser widget instead, which is cross-platform.

Certainly, it might be possible to use this IFF you can use an LC 8+ version on Linux or Windows, or LC 7.1.4 on an older version of Macintosh.

I am going to go and crank up Father's old 32-bit laptop running Debian 12 that CAN run things that fekking Mac and Apple's determination to be the MOST EXPENSIVE and NON_BACKWARDS COMPATIBLE system in the universe either CANNOT or WILL NOT.

[richmond62]

Well, here's something funny . . .

So, I am "over here" with the Debian laptop running LC 7.1.4 and I get this:
-

-
Which makes me ask funny questions about LiveCode's own examples.

I just installed LC 8.1.10 on the Debian laptop and it reacted in exactly the same way: BAD script.

As the nature of the script is obscure [fancy way of saying I don't understand it], I am stuck at this stage.

Sorry.

[jsburnett]

Hi,
So I am not an expert.
I am trying to solve a similar problem.
I am using LiveCode 10 (10.0 (dp5))
I am able to get an image from the widget browser and 'import' it into a stack.

I use the set URL (set the URL to widget "Browser" to "webpage_of_interest.com") to navigate to the webpage of interest.
I 'look' at the htmlText of the page of interest and look for the image (.jpg)
I then set the filename of the image in my stack to the founded URL of the image.jpg on the webpage.
by adjusting the rect of the image on the stack I can control the size of the image from the Webpage.

What I am trying to do now is 'copy' that image from 1 card to another card and not use the URL/Filename am not sure what command to use
If I try the export or export snapshot I get errors.

Images are not as easy as working with text.

Havent tried Import Snapshot - not sure if that would work.
Thought I'd throw that out here.

John

[richmond62]

Boy, Oh Boy, was I in a filthy mood?

Anyway, I went away and 'thunk', and, as you can see, I came back.

This does NOT produce an image of the whole webpage, BUT it does produce an image of the browser widget's contents:

Code: Select all

on mouseUp
   put the rect of this stack into DIMZ
   put the width of widget "Browser" into WIDD
   put the height of widget "Browser" into HITE
   set the width of widget "Browser" to the width of this stack
   set the height of widget "Browser" to the height of this stack
   set the left of widget "Browser" to 0
   set the top of widget "Browser" to 0
   export snapshot from rectangle DIMZ to file "snap.png"as PNG
   set the width of widget "Browser" to WIDD
   set the height of widget "Browser" to HITE
   set the left of widget "Browser" to 10
   set the top of widget "Browser" to 10
end mouseUp

On Macintosh the 'snap.png' file ends up INSIDE the LC app package (slightly bonkers) . . .

However it is relatively easy to tell it to dump the thing elsewhere.
-

[richmond62]

I suppose the next 'clever question' has to be how to expand the browser widget (and the stack with it,) to accommodate the whole height of the webpage.

[SWEdeAndy]

This does NOT produce an image of the whole webpage,

Indeed. Welcome to square 1, where this thread started:

Now, I can extract only a part of the image, the one under the scroll however not. Is there any way to do this?

So, what we can do is a screenshot (in LC terms a 'snapshot' defined by global coordinates), which is limited by the size of the screen. Set the height of the stack and the browser widget to the height of the screen, and that's the max you get.

What we need is a way to print/export the full height of the browser widget content, no matter how much of it is visible on screen.

This has been an enhancement request since 2016, but unfortunately the person who made it has apparently been ignored. Considering that the person is LC chief engineer Mark W, this does not bode well... We should all shout "Hey Mark, seriously, listen to yourself!"

[richmond62]

Amongst other people I have been pointing out several things to LC Central for more than 20 years: I have been shouted at, denigrated, and on the few occasions I have been 'lucky', I have been simply ignored.

Despite all the 'community' stuff and so on: they do not listen, and I don't think they ever have.

[richmond62]

While one can do this sort of thing with a textField:

Code: Select all

on mouseUp
   put the vScroll of fld "ff" into scB
   set the vScroll of fld "ff" to (scB + 100)
end mouseUp

you will get 'NUFFINK' with this sort of stuff:

Code: Select all

on mouseUp
   put the vScroll of widget "Browser" into scB
   set the vScroll of widget "Browser" to (scB + 100)
end mouseUp

One of the very many reasons I dislike LC widgets.

Although, I keep on hoping:
-

-

But with no obvious result:

-

-
No scrolling takes place.

So WHAT is that customProperty for?

[richmond62]

Mind you, this is effective, at least in terms of scrolling:

Code: Select all

on mouseUp
   do "window.scrollBy(0,200);" in widget "browser"
end mouseUp

So, if, say, your browser widget is 600 pixels high, you can use this script to export snapshots that can then be 'knitted together'.

Certainly this works:

Code: Select all

on mouseUp
   put the rect of this stack into DIMZ
   put the width of widget "Browser" into WIDD
   put the height of widget "Browser" into HITE
   set the width of widget "Browser" to the width of this stack
   set the height of widget "Browser" to the height of this stack
   set the left of widget "Browser" to 0
   set the top of widget "Browser" to 0
   put 1 into BICYCLE
   export snapshot from rectangle DIMZ to file "snap1.png"as PNG
   repeat until BICYCLE > 10
      add 1 to BICYCLE
      do "window.scrollBy(0,800);" in widget "Browser"
      export snapshot from rectangle DIMZ to file ("snap" & BICYCLE & ".png")as PNG
   end repeat
   export snapshot from rectangle DIMZ to file "snap.png"as PNG
   set the width of widget "Browser" to WIDD
   set the height of widget "Browser" to HITE
   set the left of widget "Browser" to 10
   set the top of widget "Browser" to 10
end mouseUp

Except, of course, the last 3 or 4 images are identical as the URL does not 'stretch' the browser widget that far.
-

-

[richmond62]

Of course one could IMPORT snapshots, name them sequentially, align then, group them, snapshot the group,

(will 'import snapshot' import a snapshot of something larger than a stack window / computer monitor ?)

Print / Export the image that results from a snapshot of the group . . .

--------

Tired, going to bed.

[SWEdeAndy]

You're definitely on to something here, Richmond. A script that loops some "scroll down - take snapshot" code and then knits them together seamlessly would be very useful.

I'll give you another cog in that machine, if you wish to explore this further:

1) Set the javascriptHandlers of the browser widget to "jsGetVal"

2) Put this in the stack script:

Code: Select all

on getScroll
   put "var p1 = window.pageYOffset; var p2 = document.body.offsetHeight; liveCode.jsGetVal(p1,p2);" into tJS
   do tJS in widget "Browser"
end getScroll

on jsGetVal p1,p2
   put "pageYOffset:" & tab  & p1 & cr & "offsetHeight:" & tab & p2 & cr & "widget height:" & tab & \
         the height of widget "Browser" & cr & "Diff:" & tab & tab & tab & p2-p1
end jsGetVal

Then have a button trigger getScroll.

This causes the browser widget to report back the values, which are caught by the stack script and put into msg (just to see how it works and what you can get).

The trick should then be to divide the height of the browser with the height of the web page (i.e. document.body.offsetHeight), and do that many scroll downs and snapshots, and then solve how to manage the last one, which will need some trimming (unless the division happens to yield an integer).

NB! Take care to save your stacks often if you experiment with changing any javascript code. If it causes a javascript error when run in the browser, it can make LiveCode hard crash, and you'll lose all unsaved changes in all open stacks.