Zooming image

Morning all (well it is here in Oz anyway :blush:),

I want to be able to locate a “file” and display it. Once displayed I want to be able to zoom in and out on it. Now, many times the “file” will be a pdf document (more on that shortly), at others it will be a graphic such as jpg, tiff etc.

So far this works to display:

var docFile As New FolderItem

docFile = FolderItem.ShowOpenFileDialog("")

if docFile <> Nil Then
  imgDocument.Image = Picture.Open(docFile)
end if

Note that imgDocument is an image control.

So, so far no probs but, how can I zoom in and out of the image? Can it be done on an image control?

Secondly, if it is a PDF, then it only displays the “front”, the first page. I can understand that as it is treating it as a single image. Is there a way to separate the pages? I know there was much cheering at the inclusion of PDF creation recently, but I can’t find any instructions on how this works and a very exhaustive search through the Youtube videos (gee I wish there was some organisation there!) only revealed snippets of how to do things. Is this the way to go?

Also, is image the best way to handle this job? Would a canvas work better? Any suggestions are welcome.

Thanks,
Barry

You could have an HTMLViewer and show the PDF/image in that. It should then be able to show the files and zoom them etc.

If you are on a Mac then Finder can do all of these things by simply clicking on the file and pressing space bar.

Here’s a Canvas subclass I created - you set its Pic property to a Picture object, then you can zoom with the scroll wheel and pan by clicking and dragging.

https://www.pragmaticdesigns.com/ZoomScrollCanvasJT.xojo_binary_code.zip

It’s API 1 so will need some conversion to work with API 2.

For PDF, you need to convert the PDF to a Picture by opening it from disk with Picture.Open(Folderitem).

5 Likes

Hi Julia,
Thanks for that. Unfortunately your solution goes way beyond my abilities (ATM). I’m just a hobbiest trying to work through any new things as I come across them. For eg., when you say set the Pic property to Picture, I can see where you’ve done that but when I search help on Canvas controls there is no Pic property so I don’t know then what to do with that or how it all works.

As it turns out Ian’s suggestion has fixed it in 1 shot. Using the HTML Viewer displays graphics as well as the individual pages of a PDF and has built-in Zoom, Scroll etc (as I’m sure you know).

Thankyou so much though.

If I could ask 1 more question though for you and anyone else. What throws me here is, with the canvas control. I can see DrawInto but it has to have a graphic. What I have is a FolderItem. The only way I can display that is with the BackDrop property

Canvas.Backdrop = Picture.Open(FolderItem)

How do you place a file in the FolderItem format onto a canvas?

Thanks (as always to you guys)

1 Like

My ZoomScrollCanvasJT is a subclass of Canvas. When you subclass something it inherits all the methods and properties of the original (Super) class, but you can also then add whatever properties, methods, etc you want to it. So “Pic” is a computed property that I added to my subclass of Canvas. When you write

ZoomCanvas1.Pic = MyPicture

it calls the Set method of the computed property Pic, which assigns the picture itself to a private property mPic and initializes some stuff.

To use the class, you would open it in Xojo and drag or copy-paste it into the Navigator of your project, then it would be available in the Library for dragging into your windows just like a regular Canvas.

BackDrop is not a great way to do it. The better way is to put drawing code into the Paint event of the control. The Paint event automatically has a Graphics object g into which you can draw stuff, e.g.

g.drawpicture MyPic, 0,0

will draw MyPic into the control starting at the upper left-hand corner. There are additional optional parameters to DrawPicture that can be used for scaling and cropping, see the documentation.

Assuming p is a property of of your window, of type Picture

p = Picture = Picture.Open(f)

In the Paint event of the canvas:

g.ClearRectangle 0,0, me.Width,me.Height // This ensures no background color
g.DrawPicture(p, 0, 0 ,g.Width, g.Height, 0, 0, p.Width, p.Height) // This draws the picture, resizing it to fit into the canvas.

Thanks Ian,
That’s worked perfectly :slight_smile:

Also, thanks again Julia, I’ll have a play with all that as a learning thing :slight_smile:

Barry

hello Barry
my scaling and zoom example:

https://www.dropbox.com/scl/fi/9ai2pzh44pnwt907vfxqy/scroll-zoom-picture.xojo_binary_project?rlkey=sxlgmal4hhmmv7sgr8c0hienc&dl=1

1 Like

Using the HTMLViewer:

Can you explain how you’ve done that ?

Yes I use the same method and it works very well, even on th every large images I use.

Hi Emile,

This is the code. Very simple.

'search for documents
var docFile As New FolderItem

docFile = FolderItem.ShowOpenFileDialog("")

if docFile <> Nil Then
  HTML1.LoadPage(docFile)
end if

This displays the “file” then, if it’s a graphic (Jpg etc), the mouse cursor becomes a + or - for zooming in or out. If it’s a PDF, hovering over the lower 3rd of the control causes

Screenshot 2023-11-19 at 20.31.40

to appear. As you can see it has Zoom In & Zoom Out. The 2nd from the right opens the file in an external PDF viewer. Don’t know what the right most does.

Barry

Thanks Barry. New feature not available in my two years old Xojo.

I tried drag and drop, but I had to drop in the window, not in the HTMLViewer (by a lack of a DropObject Event).

The ability to zoom is down to the library HTMLViewer uses. If safari allows it HTMLViewer should too.

I do not saw the images (with Safari) you shared earlier.
… and no, in Xojo 2021r2.1, HTMLViewer does not know how to enlarge or shrink an image as I just do with Safari.

m1/Sonoma 14.1.1

the pdf display and zoom in an htmlviewer worked in xojo 2019 for me

Safari can certainly zoom images on Sonoma. Check your trackpad / mouse settings. Perhaps you disabled the option. Double tap and pinch zoom is available by default. Just like on iPhone.

Perhaps the mouse is different, I’ve not used one for a long time.

Thank you Jean-Yves for talking about pdf.

The OP (Barry), talked about pdf and images. I tested images only.

Ian:
I disabled nothing / I do not have an iPhone.

Double Tap: I do not know what this can be on a MacBook Pro.

But, I used Cmd-- and Cmd-) for zoom in/out with Safari and that worked on the dropped png.

I’m talking about these settings in System Preferences:

Emile,
I’m not doing drag and drop. That code I showed allows the user to search for a file then it places it on the Viewer. If it’s a graphic such as a PDF, it has zoom In/Out. If it is a PDF it displays the box I showed in the previous post. The added advantage of this method for a PDF is it splits the pages up and shows all of them by scrolling, not just the first page.

Barry

can be used to different purpose. I was just curious.

Thank you.