Unexpected behavior of Tkinter's grid embedded in a canvas with more than 280 elements

Question

I want to display a lot of thumbnails and be able to do different operations on them, depending on the content of the thumbnail. For this I took the example from Adding a scrollbar to a group of widgets in Tkinter and put labels in the first column and images in the second column of the embedded grid. As a sample thumbnail you can download this image and rename it to 160x120.jpg.

import Tkinter as tk
from PIL import Image, ImageTk

class Example(tk.Frame):
    def __init__(self, root):

        tk.Frame.__init__(self, root)
        self.canvas = tk.Canvas(root, borderwidth=0, background="#ffffff")
        self.frame = tk.Frame(self.canvas, background="#ffffff")
        self.vsb = tk.Scrollbar(root, orient="vertical", command=self.canvas.yview)
        self.canvas.configure(yscrollcommand=self.vsb.set)

        self.vsb.pack(side="right", fill="y")
        self.canvas.pack(side="left", fill="both", expand=True)
        self.canvas.create_window((4,4), window=self.frame, anchor="nw", 
                                  tags="self.frame")

        self.frame.bind("<Configure>", self.OnFrameConfigure)

        self.photos = []
        self.imgs = []
        self.images = []
        self.lbls = []

        self.populate()

    def populate(self):
        '''Put in some fake data'''

        # n_thumbs = 100 : As expected, one label and one image per row.
        # n_thumbs = 300 : Images are only displayed up to the 278th.
        # n_thumbs = 600 : Just 63 images are displayed. Two labels per row.

        n_thumbs = 100

        for i in range(n_thumbs):
            lbl = tk.Label(self.frame, text="img " + str(i), width=10)
            lbl.grid(row=i, column=0)
            photo = Image.open("160x120.jpg")
            img = ImageTk.PhotoImage(photo)
            image = tk.Label(self.frame, image=img)
            image.grid(row=i, column=1)
            self.lbls.append(lbl)
            self.photos.append(photo)
            self.images.append(image)
            self.imgs.append(img)

    def OnFrameConfigure(self, event):
        '''Reset the scroll region to encompass the inner frame'''
        self.canvas.configure(scrollregion=self.canvas.bbox("all"))

if __name__ == "__main__":
    root=tk.Tk()
    Example(root).pack(side="top", fill="both", expand=True)
    root.mainloop()

Now, if you set n_thumbs = 100, everything works as expected, i.e. there is one label and one image per row.

If you set n_thumbs = 300, the list abruptly ends with the 278th image.

If you set n_thumbs = 600, only 63 images are shown, but you can still scroll down beyond the last image. Furthermore, suddenly there are two labels in each row.

How can these effects be explained? How can I display more than 300 images in a grid using Tkinter?

Bryan Oakley · Accepted Answer · 2013-11-14T22:00:43.813

I don't know for a fact, but my guess is that you're exceeding the limits of the tk canvas. With an image 120 pixels tall, you can display 272 images vertically before the containing frame exceeds 32k (32767) pixels tall. Perhaps there is a hard limit that the canvas can't be bigger than 32767x32767. Or maybe coordinates are constrained to be from -32767 to +32767. If some of your thumbnails weren't exactly 120 pixels tall, that might explain the limit you're seeing of 278. I was seeing a slightly different limit on my OSX system.

Again, I don't know that for a fact, but it seems likely.

If this is a hard limit, with a little work you can only show a screenful at a time, and load new images only when they are scrolled into view (and you can destroy images that have scrolled out of view). And, instead of using an embedded frame, draw the images directly on the canvas.

Looking at the sources of tk I think you're right. The type for coordinates and dimensions is int, which means that's a hard limit. To solve the problem, some kind of pager seems appropiate. Thanks for pointing me in the right direction! — Marc P., Nov 15 '13 at 08:14

Unexpected behavior of Tkinter's grid embedded in a canvas with more than 280 elements

1 Answers1

Linked