CODEWITHSUNDEEP
pythonpython-2.7tkinter
user6829070
user6829070

Reputation: 53

Changing image on button click

this is my first python programming code. I am trying to change the image on click of a button. I have 2 buttons, Start Conversation & Stop Conversation.

When the form loads there is no image. when Start button is clicked, ABC image will be displayed. When the Stop button is clicked, xyz image should be displayed.

The problem I am facing is, when I click Start, the corresponding image appears, but when I click Stop, the new image appears but the previous image doesn't disappear. Both the images are displayed one after other

My code is below

root = Tk()
prompt = StringVar()
root.title("AVATAR")
label = Label(root, fg="dark green")
label.pack()

frame = Frame(root,background='red')
frame.pack()

Function definition

def Image1():
  image = Image.open("C:\Python27\Agent.gif")
  photo = ImageTk.PhotoImage(image)
  canvas = Canvas(height=200,width=200)
  canvas.image = photo  # <--- keep reference of your image
  canvas.create_image(0,0,anchor='nw',image=photo)
  canvas.pack()

def Image2():
  image = Image.open("C:\Python27\Hydrangeas.gif")
  photo = ImageTk.PhotoImage(image)
  canvas = Canvas(height=200,width=200)
  canvas.image = photo  # <--- keep reference of your image
  canvas.create_image(0,0,anchor='nw',image=photo)
  canvas.pack()

#Invoking through button
TextWindow = Label(frame,anchor = tk.NW, justify = tk.LEFT, bg= 'white', fg   = 'blue', textvariable = prompt, width = 75, height=20)
TextWindow.pack(side = TOP)

conversationbutton = Button(frame, text='Start    Conversation',width=25,fg="green",command = Image1)
conversationbutton.pack(side = RIGHT)

stopbutton = Button(frame, text='Stop',width=25,fg="red",command = Image2)
stopbutton.pack(side = RIGHT)

root.mainloop()

Upvotes: 5

Views: 6632

Answers (1)

Jacob Vlijm
Jacob Vlijm

Reputation: 3159

The most important issue is that you do not clear your canvas before the new image is created. Start your (button) functions with:

canvas.delete("all")

However, the same goes for your canvas; you keep creating it. Better split the creation of the canvas and setting the image:

from Tkinter import *

root = Tk()
prompt = StringVar()
root.title("AVATAR")
label = Label(root, fg="dark green")
label.pack()

frame = Frame(root,background='red')
frame.pack()

# Function definition

# first create the canvas
canvas = Canvas(height=200,width=200)
canvas.pack()

def Image1():
    canvas.delete("all")
    image1 = PhotoImage(file = "C:\Python27\Agent.gif")
    canvas.create_image(0,0,anchor='nw',image=image1)
    canvas.image = image1

def Image2():
    canvas.delete("all")
    image1 = PhotoImage(file = "C:\Python27\Hydrangeas.gif")
    canvas.create_image(0,0,anchor='nw',image=image1)
    canvas.image = image1

#Invoking through button
TextWindow = Label(frame,anchor = NW, justify = LEFT, bg= 'white', fg   = 'blue', textvariable = prompt, width = 75, height=20)
TextWindow.pack(side = TOP)

conversationbutton = Button(frame, text='Start    Conversation',width=25,fg="green",command = Image1)
conversationbutton.pack(side = RIGHT)

stopbutton = Button(frame, text='Stop',width=25,fg="red",command = Image2)
stopbutton.pack(side = RIGHT)

root.mainloop()

This also prevents the somewhat strange extension of the window on button push. To make the code fit for python3, replace from Tkinter import* by from tkinter import*

Upvotes: 3

Related Questions