Title: Scroll a scaled image in Python

[A scrolled image displayed at 50% scale in Python]

My post Display an image at different scales in Python shows how you can load an image and display it at different scales. If the image is too big, though, you can only see the pieces closest to the image's upper left corner. This example lets you scroll the image so you can see all of its pieces.

Making the ScrolledFrame

This is actually a pretty simple example because it's based on two previous examples. First, the post mentioned above, explains how you can load and scale an image. Second, my post Make a scrolled frame that responds to the mouse wheel in tkinter and Python explains how you can build a scrolled frame in tkinter.

The example includes the ScrolledFrame class described in the second post. Here's the code that creates the ScrolledFrame and puts the program's Canvas widget inside it.

# Make a ScrolledFrame. Don't pack it so it's initially invisible. self.scrolled_frame = ScrolledFrame(self.window) # self.scrolled_frame.pack(side=tk.TOP, fill=tk.BOTH, expand=True) # Create the Canvas. self.canvas = tk.Canvas(self.scrolled_frame.frame, width=10, height=10, borderwidth=0, highlightthickness=0) self.canvas.pack(side=tk.TOP, fill=tk.NONE, expand=False, anchor=tk.NW, padx=10, pady=10)

The code first creates the ScrolledFrame object and makes it expand to fill the entire window. The code does not pack the ScrolledFrame so is initially invisible.

It then creates a Canvas widget inside the ScrolledFrame object's frame component, which is where the ScrolledFrame holds its content.

Normally you need to configure the ScrolledFrame when its content changes, but this one is hidden anyway so that's not necessary yet.

Loading Images

When you use the File menu's Open command to load an image, the program loads the image and scales is as described in the post Display an image at different scales in Python. After that, the show_image method only needs to the following two additional statements to display the scrolled image.

# Reconfigure the frame. Do this after adding contained widgets. self.scrolled_frame.configure_frame() # Display the ScrolledFrame. self.scrolled_frame.pack(side=tk.TOP, fill=tk.BOTH, expand=True)

First, the call to configure_frame makes the ScrolledFrame adjust its scrollbars to accommodate the new image's size.

Second, the code packs the ScrolledFrame so it becomes visible.

There's actually one more new statement in the show_image method. If you invoke the File menu's Open command and then cancel the dialog without selecting a file, the following statement hides the ScrolledFrame.

self.scrolled_frame.pack_forget()

Conclusion

It's as simple as that! The ScrolledFrame class makes this really easy.

In my next post, I'll show how you can do things with the scaled image like draw on it.

Download the example to experiment with it and to see additional details.