Monday, May 12, 2014

tkinter callback update GUI

Tkinter is a python standard GUI package, it is easy to use if you want to do some simple GUI tasks. To control the widget action, we need to add callback method. while the GUI won't update until the callback method finished. For example, if I want to display a image in a window, and click a button to change to photo to another one.
class ClientGUI(Frame):
    def __init__(self, parent):
        Frame.__init__(self, parent)
        self.parent = parent
        self.initUI()
    def initUI(self):
        self.parent.title("demo")
        self.pack(fill=BOTH, expand=1)
        self.changeButton = Button(self, text="changePic", width = 10, height = 1, command=self.onClick)
        self.changeButton.place(x=10,y=100)
        self.initialImage = Image.open('pic1.jpg')
        tkimage = ImageTk.PhotoImage(self.initialImage)
        self.imgLabel = Label(self,image=tkimage)
        self.imgLabel.image = tkimage
        self.imgLabel.place(x=10,y=150)
       
    def onClick(self):
        imagedata = Image.open("pic2.jpg")
        img = ImageTk.PhotoImage(imagedata)
        print img,"\n"
        self.imgLabel.configure(image = img)
        self.imgLabel.image = img
This code works fine to display the picture and change the picture when button clicked. But if we add some code in the onClick method, like this:
for i in range(0,10):
    time.sleep(1)
Then after clicking the button, it will take 10 seconds before the image change. Same thing happens when there is a loop in the callback method, unless the loop is finished, this method won't callback. So what if we want to update the picture immediately we click the button, it means update the GUI, actually we only need to add one single line to solve this problem, add
self.update()