Rescaling a Browser Image

[townsend]

I need some advice? What's the best way to resize a browser image?

Nothing I've tried works. So now I'm thinking that a "snapshot" must be done first,
then that graphic image can be resized. Is there a better way?

[Klaus]

Hi Townsend,

this is pretty straightforward, no idea what you have tried!?

...
## Resize reference, see below
set the rect of image "browserimage" to tNewRect

## You could even omit the previous line and just supply a valid rect, see below.
revBrowserSet tBrowserID, "rect", tNewRect
...
That's all

Hint, it does NOT matter what you take as a reference for the dimensions of your browser.
You could even only supply a RECT.

But since the LiveCode examples use an image as the reference, people think that this is really a "Browser image"
resp. this does belong to the Browser object somehow


Best

Klaus

[townsend]

Thanks Klaus-- Here's what I've discovered.

The initial:

Code: Select all

revBrowserSet sBrowserId, "rect", rect of img "browserimage"

displays the graphic.

Code: Select all

revBrowserSet sBrowserId, "rect", "25,55,360,280"

changes the graphic to the designated coordinates and size.
Which at this point seems to be seperate from the "rec" of the image "browserimage"

Code: Select all

set the rect of image "browserimage" to "25,55,360,280"

adjusts the image "browserimage" to the same coordinates and size of the displayed image.

Furthermore, I noticed that a web page or a remote.GIF does NOT be resized, and will always show up with vertical and horizontal scroll bars. BUT an remote .PNG loaded IS always resized just fine.

Then when I do this:

Code: Select all

     revBrowserSnapshot sBrowserId, mySnapshot
     revBrowserClose sBrowserId
     set the imageData of image "browserimage" to mySnapshot

The snapshot ends up being of only of the visible area, and not the areas accessible via the scrollbars.

[Klaus]

Hi Townsend,

Ah, looks like I completely misunderstood you!

Thanks Klaus-- Here's what I've discovered.
The initial:

Code: Select all

revBrowserSet sBrowserId, "rect", rect of img "browserimage"

displays the graphic.

Yes, but as I wrote this is only needed as a reference for the resulting rect of the browser area!
You could also use a button as reference:

Code: Select all

revBrowserSet sBrowserId, "rect", rect of button "NOTBrowserButton"

Code: Select all

revBrowserSet sBrowserId, "rect", "25,55,360,280"

changes the graphic to the designated coordinates and size.
Which at this point seems to be seperate from the "rec" of the image "browserimage".

Forget "browserimage"!!!
You can also use the browser with NO (image) reference at all by just supplying any valid rect!

Code: Select all

set the rect of image "browserimage" to "25,55,360,280"

adjusts the image "browserimage" to the same coordinates and size of the displayed image.

See above!

Furthermore, I noticed that a web page or a remote.GIF does NOT be resized, and will always show up with vertical and horizontal scroll bars. BUT an remote .PNG loaded IS always resized just fine.
Then when I do this:

Code: Select all

     revBrowserSnapshot sBrowserId, mySnapshot
     revBrowserClose sBrowserId
     set the imageData of image "browserimage" to mySnapshot

The snapshot ends up being of only of the visible area, and not the areas accessible via the scrollbars.

"Resizing" a browser in LiveCode is just a resizing of the browser area, but NO rscaling!
Just like resizing any window of Safari/Firefox/Internet Explorer, NO scaling taking place!

But yes, taking a "snapshot" obviously only work with the visible part of the page.


But maybe I still misunderstand you?!

Best

Klaus

[SparkOut]

Yes, to be clear, the only (? - apart from learning by the script examples) reason people are generally using an object reference to use to set the rect of the browser is because that way you can set the object to rescale with the geometry manager and have the browser area resize to match in the resizeStack handler.
There is no browser "image". There is a browser object which has a rect of whatever you set it to. It's harder to calculate the size it should be than to set it to the same rect as another object that contains nothing.

Now... IF you happen to choose an image as the object to rescale and match the browser area to that image's rect, then you can use revBrowserSnapshot and put the imageData into that image, without having to worry about setting the image dimensions first (setting the imageData relies on the image being the correct size to fit the data beforehand). So you can take a snapshot of the browser content and put into an image so that you have a "fake" default view of the browser area, for instance, but there is nothing to link the image with the browser beyond your own arbitrary choices.

And the scrollbars of a browser area are configurable by setting the property: revBrowserSet <browserId>, "scrollbars", true
(or false)

[BarrySumpter]

Nice gents!

Any chance of posting your solution here?

[townsend]

Oh-- my mistake-- Seems I meant Rescaling, not resizing.
Now I see the difference. I updated the subject of this thread.

Thanks Klaus-- SparkOut-- I'm trying here.
It's almost embarrassing-- how long I've been working on this.

Here's where I'm at. A browser image is very different than a graphic image.
A browser image cannot be rescaled unless it is converted into a graphic via the revBrowserSnapshot command. Opening up a URL is basically a two step process with the revBrowserOpen & revBrowserSet, setting the rec parameters. If the rec parameters are smaller than the webpage, it will be clipped with the revWebBrowserSnaphot command.

This code kinda works. But the webpage get clipped, because the object image "browserImage" is too small.

Code: Select all

on mouseUp
     put the windowid of this stack into tWinID
     put revBrowserOpen(tWinID,"http://www.runrev.com") into sBrowserId
     revBrowserSet sBrowserId, "scrollbars", "false"
     revBrowserSet sBrowserId, "rect", rect of img "browserimage"
     ------- wait here for the page to appear here -------
     revBrowserSnapshot sBrowserId, mySnapshot
     revBrowserClose sBrowserId
     set the imageData of image "browserimage" to mySnapshot
end mouseUp

And I don't know how to that wait, while the page is downloaded. The snapshot won't take, until it does.

Also, I tried to increasing the rec of img "browserimage" to "0,0,1024,768" to get the whole page in, before the snapshot, then change it back to it's original smaller size, but the image ends up garbled.

Code: Select all

on mouseUp
     put the windowid of this stack into tWinID
     put revBrowserOpen(tWinID,"http://www.runrev.com") into sBrowserId
     revBrowserSet sBrowserId, "scrollbars", "false"
     put rect of img "browserimage" into original
     revBrowserSet sBrowserId, "rect", "0,0,1024,768"
     -- wait here for the page to appear here
     revBrowserSnapshot sBrowserId, mySnapshot
     revBrowserClose sBrowserId
     set the rect of image "browserimage" to original
     set the imageData of image "browserimage" to mySnapshot
     --  "browserImage" end up being garbled.
end mouseUp

Nice gents! Any chance of posting your solution here?

Sure-- if I get to a solution, I will certainly share it, as I always do. But I'm starting to wonder whether or not this is even possible. Maybe now that I've expressed the problem correctly, Klaus or SparkOut can set me straight.

Oh-- here's my test stack in case anyone wants to look at it.

[SparkOut]

Well I wouldn't call it a "solution" but here is a test sampler that I hope explains it.

I'm still not actually (ahem, sorry) clear what you are trying to achieve. I gathered you were trying to resize/rescale (whatever definition you choose) the area that your browser instance covered. In order to view the whole content within the browser area you don't need to take a snapshot.

[SparkOut]

And now that I've seen your stack and checked your results, the reason you are getting a garbled result in your "browserimage" image snapshot is that you have to set the rect of that image before you set the imageData, and the rect has to match exactly the rect of the source data area.
Immediately after you close the browser your line "set the rect of image "browserimage" to original" should be setting the rect to 0,0,1024,768 in order to match the browser area at the time the snapshot was taken. Then you can reset the rect of the image to original and make a "thumbnail" image (although a screen resolution of 1024 x 768 won't necessarily fit the entire content of any web page anyway).

[townsend]

Thanks-- I appreciate you taking the time to look at this.
That's a good example of how geometry can be used to size an image object.

But.. I'm more interested in the size of the image than the size of object. In that example the size of the image stays the same. It's the size of the object around the image that changes.

Let me rephrase the problem. How difficult would it be to create a thumbnail image of a web page? That's pretty much the solution I'm looking for. Though-- it wouldn't really be a thumbnail-- it would be more like a midsize view.

Creating a thumbnail of a graphic image is as simple as adjusting the width and height of the image object. A browser image is a different animal, because it not just a bitmap. There's layers, formatting, backgrounds, and LINKS! That's why I thought converting it to a graphic would be the way to go.

[SparkOut]

We probably cross-posted but I mentioned that just above yours. I see more where you are coming from now, and you were not very far from the result I think you wanted.

Code: Select all

on mouseUp
     put the windowid of this stack into tWinID
     put revBrowserOpen(tWinID,"http://www.runrev.com") into sBrowserId
     revBrowserSet sBrowserId, "scrollbars", "false"
     put rect of img "browserimage" into original
     revBrowserSet sBrowserId, "rect", the working screenrect
          -- wait here for the page to appear here
     put empty into tHtml
     repeat until tHtml contains "</html>" or tHtml contains "</HTML>"
        -- for some reason livecode always returns html tags in upper case
        -- (there are a couple of other anomalies too)
        put revBrowserGet (sBrowserId, "htmltext") into tHtml
        wait 0 milliseconds with messages
     end repeat

     revBrowserSnapshot sBrowserId, mySnapshot
     revBrowserClose sBrowserId
     set the rect of image "browserimage" to the working screenrect
     set the imageData of image "browserimage" to mySnapshot
     set the rect of image "browserimage" to original
     
end mouseUp

This works for me - although there is no guarantee that the height of the working screenrect (in particular) will accommodate the web page - but you can make a reasonable thumbnail this way.

[townsend]

Wow! Nice. Excellent! LiveCode can do anything!

SparkOut-- You're the man! Thanks for your help on this.

Barry-- There's our solution.

PS: New concepts for further research: the working screenrect & wait 0 milliseconds with messages.

[doobox]

The latest code posted just above still does not work for me...
I found a couple of little bugs in there, but still cant get the snapshot to render correctly. (always garbled as if the data was being placed in a rect of a different size).

The original code from above:

Code: Select all

on mouseUp
         put the windowid of this stack into tWinID
         put revBrowserOpen(tWinID,"http://www.runrev.com") into sBrowserId
         revBrowserSet sBrowserId, "scrollbars", "false"
         put rect of img "browserimage" into original
         revBrowserSet sBrowserId, "rect", the working screenrect
              -- wait here for the page to appear here
         put empty into tHtml
         repeat until tHtml contains "</html>" or tHtml contains "</HTML>"
            -- for some reason livecode always returns html tags in upper case
            -- (there are a couple of other anomalies too)
            put revBrowserGet (sBrowserId, "htmltext") into tHtml
            wait 0 milliseconds with messages
         end repeat

         revBrowserSnapshot sBrowserId, mySnapshot
         revBrowserClose sBrowserId
         set the rect of image "browserimage" to the working screenrect
         set the imageData of image "browserimage" to mySnapshot
         set the rect of image "browserimage" to original
         
    end mouseUp

Just amended a couple of things including declaring the snapshot variable first and placing it in quotes in the function call.
As well as slowing down the repeat loop, as it was crashing every time as it was.
New code as it stands:

Code: Select all

local mySnapshot

on mouseUp
         put the windowid of this stack into tWinID
         put revBrowserOpen(tWinID,"http://www.runrev.com") into sBrowserId
         revBrowserSet sBrowserId, "scrollbars", "false"
         put rect of img "browserimage" into original
         revBrowserSet sBrowserId, "rect", the working screenrect
              -- wait here for the page to appear here
         put empty into tHtml
         repeat until tHtml contains "</html>" or tHtml contains "</HTML>"
            wait 1 second with messages
            -- for some reason livecode always returns html tags in upper case
            -- (there are a couple of other anomalies too)
            put revBrowserGet (sBrowserId, "htmltext") into tHtml
         end repeat

         revBrowserSnapshot sBrowserId, "mySnapshot"
         revBrowserClose sBrowserId
         set the rect of image "browserimage" to the working screenrect
         set the imageData of image "browserimage" to mySnapshot
         set the rect of image "browserimage" to original
    end mouseUp

Still though... the image snapshot looks corrupt in after it is rendered.???

[doobox]

Looking at the message watcher, it seems that all references to the browser object and it's functions are duplicated.

I can test that only one instance of the browser is open by :

Code: Select all

 put revBrowserInstances() into field "test"
   put cr & sBrowserId after field "test"

This shows that only one instance is indeed open, and the browserid variable does contain that instance of the browser.
But that does not explain the duplicate entries in the message watcher of each function of the browser, when there called...

It does look like it just plain has a bug to me.
But if anyone has successfully created a snapshot with revBrowserSnapshot
I would love to hear how.. cheers.