1

I am coding a game in Python with tkinter. The basic functionality is that an image is displayed but it's covered with a grid of boxes that can be destroyed. I've written a linear version of the code that is as simplified as I can get it:

from tkinter import *
from PIL import ImageTk, Image


class Box:
    def __init__(self, parent, row, column, width, height):
        self.row = row
        self.column = column
        self.canvas = Canvas(parent, bg='black', width=width, height=height)
        self.canvas.grid(row=row, column=column, sticky=NSEW)
        self.canvas.bind('<Button-1>', self.destroy)

    def destroy(self, event):
        print('Destroyed box at', self.row, self.column)
        self.canvas.destroy()


root = Tk()
root.title('Image Reveal')
root.state('zoomed')
image_raw = None

# Create a frame for the image
image_frame = Frame(root, highlightbackground="blue", highlightthickness=5)
image_frame.pack(expand=True, anchor=CENTER, fill=BOTH, padx=0, pady=0)

# Load image and put it in a label
image_raw = Image.open('image.png')
image = ImageTk.PhotoImage(image_raw)
image_label = Label(image_frame, image=image, borderwidth=5, relief='ridge')
image_label.pack(anchor=CENTER, expand=True)

# Calculate the size of the boxes
image_label.update()
width = image.width()
height = image.height()
column_amount = 10
row_amount = 10
box_width = width / column_amount
box_height = height / row_amount

# Create boxes that fill the grid
for row in range(row_amount):
    for column in range(column_amount):
        Box(image_label, row, column, box_width, box_height)

root.mainloop()

You can click on the box to destroy it and it also logs the coordinates of the box destroyed.

The desired behavior: You can click on the boxes to destroy them, gradually revealing the image. The other boxes should stay in the same place (the same cells of the grid), so the grid shape doesn't change.

The unexpected behavior: Destroying one box makes the rest of the boxes disappear somehow. Yet you can still click them (it still logs the destruction message). Overall this is the closest I've got to my desired behavior but I can't figure out why this is happening or how to approach this functionality better.

WORKING CODE:

Lukas Krahbichler helped achieve most of the desired behavior. Here is the updated code. Destroying the boxes however led to the grid resizing when a full row or a column of boxes gets destroyed. In order to fix that, I instead hide the box by lowering it behind the image. At first that didn't work, but then I found this - Turns out to lower the WHOLE canvas, there is no direct method for that. The final code:

from tkinter import *
from PIL import ImageTk, Image


class Box:
    def __init__(self, root, image_frame, image_label, row, column):
        self.root = root
        self.row = row
        self.column = column
        self.image_label = image_label
        self.image_frame = image_frame
        self.visible = True
        self.canvas = Canvas(image_frame, bg='black')
        self.canvas.grid(row=row, column=column, sticky=NSEW, padx=5, pady=5)
        
        self.canvas.bind('<Button-1>', self.hide)

    def hide(self, event):
        # Lower the box under the image to hide it
        self.canvas.tk.call('lower', self.canvas._w, None)
        self.visible = False
        print('Hid box at', self.row, self.column)



root = Tk()
root.title('Image Reveal')
root.state('zoomed')
image_raw = None
column_amount = 10
row_amount = 10
boxes = []

# Create a frame for the image
image_frame = Frame(root, highlightbackground="blue", highlightthickness=0)
image_frame.pack(anchor=CENTER, fill=None, padx=0, pady=0)

# Load image and put it in a label
image_raw = Image.open('image.png')
image = ImageTk.PhotoImage(image_raw)
width = image.width()
height = image.height()

# Create a label for the image
image_label = Label(image_frame, image=image, borderwidth=0, relief='ridge')

# Configure the image frame so it doesn't resize             <----- UPDATED
image_frame.config(width=width, height=height)
image_frame.grid_propagate(False)
image_label.grid_propagate(False)

# Place the image label in the frame
image_label.grid(rowspan=row_amount, columnspan=column_amount, sticky="NSEW")

# Configure the grid weights                                <----- UPDATED
for row in range(10):
    image_frame.rowconfigure(row, weight=1)
for column in range(10):
    image_frame.columnconfigure(column, weight=1)

# Calculate the size of the boxes
image_label.update()

# Create boxes that fill the grid
for row in range(row_amount):
    for column in range(column_amount):
        box = Box(root, image_frame, image_label, row, column)
        boxes.append(box)

root.mainloop()
2
  • When I run your code, clicking one box only removes that one box. Are you certain this code exhibits the behavior you describe? Feb 7 at 19:22
  • @BryanOakley Now that's interesting. I am sure that exactly this code exhibits this behavior. But I did notice another weird thing - resizing the makes the boxes appear again (with the clicked ones removed). And even just moving the window (while the boxes are still show) makes the boxes appear and disappear somewhat randomly Feb 7 at 21:24

1 Answer 1

1

In tkinter you are not really supposed to place other widgets (for a example a Canvas) in a Label. If you grid everything in the "image_frame" and give the "image_label" a column and a rowspan it should work.

from tkinter import *
from PIL import ImageTk, Image


class Box:
    def __init__(self, parent, row, column, width, height):
        self.row = row
        self.column = column
        self.canvas = Canvas(parent, bg='black', width=width, height=height)
        self.canvas.grid(row=row, column=column, sticky=NSEW)
        self.canvas.bind('<Button-1>', self.destroy)

    def destroy(self, event):
        print('Destroyed box at', self.row, self.column)
        self.canvas.destroy()


root = Tk()
root.title('Image Reveal')
root.state('zoomed')
image_raw = None

# Create a frame for the image
image_frame = Frame(root, highlightbackground="blue", highlightthickness=5)
image_frame.pack(expand=True, anchor=CENTER, fill=BOTH, padx=0, pady=0)

# Define row and column amount
column_amount = 10
row_amount = 10

# Load image and put it in a label
image_raw = Image.open('image.png')
image = ImageTk.PhotoImage(image_raw)
image_label = Label(image_frame, image=image, borderwidth=5, relief='ridge')
image_label.grid(rowspan=row_amount, columnspan=column_amount, sticky="NSEW")

# Calculate the size of the boxes
image_label.update()
width = image.width()
height = image.height()
box_width = width / column_amount
box_height = height / row_amount

# Create boxes that fill the grid
for row in range(row_amount):
    for column in range(column_amount):
        Box(image_frame, row, column, box_width, box_height)

root.mainloop()
3
  • There's really nothing wrong with placing widgets inside a Label. That's not what labels are designed for, but it doesn't behave any differently than placing a widget in a frame. Feb 7 at 19:26
  • Oh, I didn't know about rowspan and columnspan. That seems quite useful, thanks! Your code does work for me in terms of mostly achieving the desired behavior. I have implemented this approach but had to make a few additions to make the image stay in the center and the boxes to perfectly fit the image and unfortunately now it has another unexpected behavior... I will add the updated code to the post Feb 7 at 22:35
  • I seem to have figured this whole thing out. Added the working code in the post. Thanks a lot! Feb 7 at 23:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.