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.
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.
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?
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.
'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
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.
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.
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.
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.
),
