How to Update TKinter Label Image Using Classes (Dynamic Update Using Config() Method)

Question

I want to update the image stored in the red_smiley_1 label. I want to define my method 'change_row_one' so that I can use the Label.configure() method to update the image stored in this the Label widget. How should i define my method? I've included my current method which is giving me issues. Thank you.

class Cube(tk.Tk):
  def __init__(self):
  super().__init__()
  self.title("John's GUI Cube Application")
  self.geometry("300x180")
  self.resizable(True,True)

  container = ttk.Frame(self)
  container.grid(padx=10,pady=10,sticky='EW')

  cube_frame = CubeFrame(container).grid(row=0,column=0,sticky='NSEW')

class CubeFrame(ttk.Frame):
  def __init__(self,container):
  super().__init__(container)
  self.red_smiley = ImageTk.PhotoImage(Image.open('./images/red_smile.png'))
  self.white_smiley = ImageTk.PhotoImage(Image.open('./images/white_smile.png'))
  self.yellow_smiley = ImageTk.PhotoImage(Image.open('./images/yellow_smile.png'))

  # Red Smiley Image Labels
  self.red_smiley_1 = ttk.Label(self,image=self.red_smiley).grid(row=0,column=0)
  self.red_smiley_2 = ttk.Label(self,image=self.red_smiley).grid(row=0,column=1)
  self.red_smiley_3 = ttk.Label(self,image=self.red_smiley).grid(row=0,column=2)

  # Image Label Buttons
  self.row_one_button = ttk.Button(self,text='Change Row 1',command=self.change_row_one).grid(row=0,column=3,sticky='WE')
  self.row_two_button = ttk.Button(self,text='Change Row 2',command=self.change_row_two).grid(row=1,column=3,sticky='WE')
  self.row_three_button = ttk.Button(self,text='Change Row 3',command=self.change_row_three).grid(row=2,column=3,sticky='WE')

  # Change Row One Image Labels
  def change_row_one(self):
    new_image = ImageTk.PhotoImage(Image.open('./images/white_smile.png'))
    self.red_smile_1.configure(image=new_image)
    self.red_smile_1.image = new_image

On button click you are doing nothing, then how can it changes image? — imxitiz, Jul 23 '21 at 00:28
I should clarify that I'm trying to use the button click to update the image stored in label 'red_smiley_1'. My initial approach to defining the 'change_row_one' method is as follows: def change_row_one(self): new_image = ImageTk.PhotoImage(Image.open('./images/white_smile.png')) self.red_smile_1.configure(image=new_image) self.red_smile_1.image = new_image — YohanCho, Jul 23 '21 at 00:40
You don't have to make new variable `(new_image)`, if you are using that same image of white_smiley. Take a look at [my answer](https://stackoverflow.com/a/68492839) — imxitiz, Jul 23 '21 at 01:12

score 0 · Answer 1 · answered Jul 23 '21 at 00:52

0

I figured out my problem. When creating the label I used the grid() method all in the same line. This was returning None. Solution URL: Tkinter: AttributeError: NoneType object has no attribute <attribute name>

answered Jul 23 '21 at 00:52

YohanCho

3
2

imxitiz · Answer 2 · 2021-07-23T01:02:41.783

You can try this:

class CubeFrame(ttk.Frame):
    def __init__(self,container):
    super().__init__(container)
        self.red_smiley = ImageTk.PhotoImage(Image.open('./images/red_smile.png'))
        self.white_smiley = ImageTk.PhotoImage(Image.open('./images/white_smile.png'))
        self.yellow_smiley = ImageTk.PhotoImage(Image.open('./images/yellow_smile.png'))
        
          # Red Smiley Image Labels
        self.red_smiley_1 = ttk.Label(self,image=self.red_smiley)
        self.red_smiley_1.grid(row=0,column=0)
        self.red_smiley_2 = ttk.Label(self,image=self.red_smiley)
        self.red_smiley_2.grid(row=0,column=1)
        self.red_smiley_3 = ttk.Label(self,image=self.red_smiley)
        self.red_smiley_3.grid(row=0,column=2)
        
          # Image Label Buttons
        self.row_one_button = ttk.Button(self,text='Change Row 1',command=change_row_one)
        self.row_one_button.grid(row=0,column=3,sticky='WE')
        self.row_two_button = ttk.Button(self,text='Change Row 2',command=change_row_two)
        self.row_two_button.grid(row=1,column=3,sticky='WE')
        self.row_three_button = ttk.Button(self,text='Change Row 3',command=change_row_three)
        self.row_three_button.grid(row=2,column=3,sticky='WE')

  # Change Row One Image Labels
    def change_row_one(self):
        self.red_smiley_1.config(img=<other image/self.white_smiley>)

First thing first, you are doing wrong while making new labels. You are making new label and setting the position of that label inline which will return None and that means you can't use those response variable. And you don't have to do self.<function> in command, function doesn't need self you can only write <function> only.

When I use your method after clicking the button, the label doesn't graphically show the new image i reference using the configure() method you mentioned in your solution. Thoughts? — YohanCho, Jul 23 '21 at 00:50

How to Update TKinter Label Image Using Classes (Dynamic Update Using Config() Method)

2 Answers2