1

I am creating a GUI with a ".grid" of buttons. And I want to make each of those buttons display a different image on press. So when I click button 1, it will bring up "image1", on the bottom of the buttons. When I click button 2, it will bring up "image2" and etc.

Through some research, I was able to make the buttons run a function that takes in a parameter through the method below. However, I can't seem to make the button display the image. rather, it just makes an empty white space underneath the buttons, when I press any buttons.

Disclaimer: - I do not want there to be loads of images, there will only be 1 image, and it will change depending on what button i press.

Here's the code:

from tkinter import *

def funct(numimg):
    image = PhotoImage(file="image"+str(numimg)+".png")   
    label = Label(image=image)
    label.grid(row = row_no+1, column = 0, columnspan = num_of_cols)

def make_funct(number):
    return (lambda: funct(number))

root= Tk()
row_no = -1
buttons = []
num_of_cols = 3
root.resizable(0, 0)
numfiles = 6

for x in range(0, numfiles):
    if(x % num_of_cols is 0):
        row_no+=1

    buttons.append(Button(root, text = "Button "+str(x), bg = '#4098D3', width = 30,height = 13,command = make_funct(x)))
    buttons[x].grid(row = row_no, column = x % num_of_cols)

root.mainloop()

So my question is, how do you make each individual button, display a different image when it is pressed? this program right here just leaves an empty white space in replace of the image, and the image is not shown.

OpaxZity
  • 13
  • 4
  • You have to explicitly keep a reference to Tkinter images, or they will be garbage collected - merely having a widget displaying the image does not count as a reference. Making `image` a global variable would be the simplest solution in your code. Also, you say you only want one image at a time, but you're actually creating an unlimited number of Labels to hold them, all piled up in the same grid cell. Create a single Label during startup, and just reconfigure its image property as needed. – jasonharper Jul 10 '18 at 14:25
  • wow. That actually worked right away. I set image as a global variable, and now it seems to work as i expected. I understand how the labels would be stacking up in that same grid cell, but how exactly would i "reconfigure" them when its inside the function(funct)? Sorry if this is an obvious question-im new to gui in tkinter. Thanks! – OpaxZity Jul 10 '18 at 14:46

1 Answers1

1

There are two major problems with the code you posted.

The first is basically the same as in this question: Why does Tkinter image not show up if created in a function?. You should keep a reference to the PhotoImage object, else it will be garbage collected and it will not show.

The second is that you create a new Label on every button click. You should only make one Label and change the image with the label.config() method.

I would (without wrapping your GUI in a class, which might be a nicer solution) load all images on initialization, save them in a list as attribute of the label and only change the image upon a button click.

I also removed your make_funct function and replaced it with a lambda, which is the most used way to pass variables to a function on callback.

from tkinter import *

def funct(numimg):
    label.config(image=label.images[numimg])

root= Tk()
row_no = -1
buttons = []
num_of_cols = 3
root.resizable(0, 0)
numfiles = 3

for x in range(0, numfiles):
    if(x % num_of_cols is 0):
        row_no+=1

    buttons.append(Button(root, text = "Button "+str(x), bg = '#4098D3', width = 30,height = 13, command = lambda n=x: funct(n)))
    buttons[x].grid(row = row_no, column = x % num_of_cols)

label = Label(root)
label.grid(row = row_no+1, column = 0, columnspan = num_of_cols)

label.images=[]

for x in range(0, numfiles):
    label.images.append(PhotoImage(file="image"+str(x)+".png"))

root.mainloop()
fhdrsdg
  • 10,297
  • 2
  • 41
  • 62
  • 1
    Thank you for your answer. I have marked it as correct, since it works as expected. However, I have one question: I tried the lambda function with and without the "n=x" part. However, it doesn't seem to work. How is it that the n=x is necessary when using lambda? (Your answer worked, I just want to know why) Thank you again – OpaxZity Jul 10 '18 at 15:11
  • When you do `lambda x: funct(x)`, you bind the *variable* `x` as argument, not the *value* of `x` at that time. Because the variable `x` changes throughout the loop, at the time the lambda function is evaluated `x` always has the last value. You can circumvent this by giving your argument a default value, which does bind the current value. You could do `lambda x=x: funct(x)`, but for clarity I prefer to give the argument a different name, so I use `lambda n=x: funct(n)`. Searching for `python lambda for loop` on google gives you a lot more questions about this with great answers. – fhdrsdg Jul 10 '18 at 15:36