Tkinter — executing functions over time

Question

I'm trying to figure out how the tkinter control flow works.

I want to display a rectangle and to make it blink three times. I wrote this code, but it doesn't work. I guess it's because blink is executed before mainloop, and it doesn't actually draw anything. If so, how can I swap the control flow between blink and mainloop to make it work?

My code:

from tkinter import *
from time import *

def blink(rectangle, canvas):
    for i in range(3):
        canvas.itemconfigure(rectangle, fill = "red")
        sleep(1)
        canvas.itemconfigure(rectangle, fill = "white")
        sleep(1)

root = Tk()
fr = Frame(root)
fr.pack()
canv = Canvas(fr, height = 100, width = 100)
canv.pack()
rect = canv.create_rectangle(25, 25, 75, 75, fill = "white")
blink(rect, canv)
root.mainloop()

Answer 1

Event-driven programming requires a different mindset from procedural code. Your application is running in an infinite loop, pulling events off of a queue and processing them. To do animation, all you need to do is place items on that queue at an appropriate time.

Tkinter widgets have a method named after which lets you schedule functions to run after a certain period of time. The first step is to write a function that does one "frame" of your animation. In your case, you're defining animation as switching between two colors. A function that checks the current color, then switches to the other color is all you need:

def blink(rect, canvas):
    current_color = canvas.itemcget(rect, "fill")
    new_color = "red" if current_color == "white" else "white"
    canvas.itemconfigure(rect, fill=new_color)

Now, we just need to have that function run three times at one second intervals:

root.after(1000, blink, rect, canv)
root.after(2000, blink, rect, canv)
root.after(3000, blink, rect, canv)

When you start your main loop, after one second the color will change, after another second it will change again, and after a third second it will change again.

That works for your very specific need, but that's not a very good general solution. A more general solution is to call blink once, and then have blink call itself again after some time period. blink then must be responsible to know when to stop blinking. You can set a flag or counter of some sort to keep track of how many times you've blinked. For example:

def blink(rect, canvas):
    ...
    # call this function again in a second to
    # blink forever. If you don't want to blink
    # forever, use some sort of flag or computation
    # to decide whether to call blink again
    canvas.after(1000, blink, rect, canvas)

As a final bit of advice, I recommend that you define your program as a class, then create an instance of that class. This makes it so that you don't need global functions, and you don't need to pass around so many arguments. It doesn't really matter for a 20 line program, but it starts to matter when you want to write something substantial.

For example:

from tkinter import *

class MyApp(Tk):
    def __init__(self):
        Tk.__init__(self)
        fr = Frame(self)
        fr.pack()
        self.canvas  = Canvas(fr, height = 100, width = 100)
        self.canvas.pack()
        self.rect = self.canvas.create_rectangle(25, 25, 75, 75, fill = "white")
        self.do_blink = False
        start_button = Button(self, text="start blinking", 
                              command=self.start_blinking)
        stop_button = Button(self, text="stop blinking", 
                              command=self.stop_blinking)
        start_button.pack()
        stop_button.pack()

    def start_blinking(self):
        self.do_blink = True
        self.blink()

    def stop_blinking(self):
        self.do_blink = False

    def blink(self):
        if self.do_blink:
            current_color = self.canvas.itemcget(self.rect, "fill")
            new_color = "red" if current_color == "white" else "white"
            self.canvas.itemconfigure(self.rect, fill=new_color)
            self.after(1000, self.blink)


if __name__ == "__main__":
    root = MyApp()
    root.mainloop()

Answer 2

Each widget has an 'after' function - that is to say it can call a another function after a specified time period - So, what you would want to do is call:

root.after( 1000, blink )

If you want it to be a repeating call, just call 'after' again inside your blink function. The only problem you will have is passing arguments to blink - maybe look at using lamda inside of 'after' for that.