how to make buttons work while animation in tkinter?

Question

i was able to create a canvas and use turtle to fill up the shape that i want inside of it. I was also successful in animating it, but now am not able to use the button which i created in the parent function. I also tried using "button-1" click function inside the infinite loop, none of the functions are callable. Here is the code:

import time
from tkinter import *
import tkinter as tk
import turtle
import random

class Application(Frame):
    def __init__(self, master):
        super(Application, self).__init__(master)
        self.switcher = True
        self.speedx = 5
        self.speedy = 5
        self.position_x = 0
        self.position_y = 0
        self.red_clicks_dva = 0
        self.green_clicks_dva = 0
        self.acuity_list_dva = [60,36,24,18,12,9,6,5,4,3,2.5,2,1.5,1]
        self.acuity_list_4m_dva = [40,24,16,12,8,6,4,3.33,2.67,2,1.67,1.33,1,0.67] 
        self.characters_dva = ['draw_c','draw_z','draw_o','draw_t','draw_p','draw_f','draw_e','draw_h','draw_v','draw_d','draw_s','draw_n','draw_r']
        self.width_value = my_window.winfo_screenwidth()
        self.height_value = my_window.winfo_screenheight()
        self.launch_dva()

    def launch_dva(self):
        for item in my_window.winfo_children():
          item.destroy()
        position = self.green_clicks_dva
        selected_characters_dva = random.sample(self.characters_dva,1)
        print(selected_characters_dva)
        width = self.acuity_list_4m_dva[position]*0.00145*100
        self.width_pixel_dva  = (width*96)/2.54
        
        self.canvas1 = tk.Canvas(my_window,height=self.width_pixel_dva+10,width=self.width_pixel_dva+10,bg='white',highlightthickness=0)
        self.canvas1.pack_propagate(False)
        self.canvas1.pack()

        self.canvas1.place(x=self.position_x,y=self.position_y)
        
        self.canvas2 = tk.Canvas(my_window,height=self.width_pixel_dva+10,width=self.width_pixel_dva+10,bg='white',highlightthickness=0)
        self.canvas2.pack_propagate(False)
        self.canvas2.pack()
        self.canvas2.place(x=self.position_x,y=self.position_y)
        
        turtle_name = turtle.RawTurtle(self.canvas1)
        turtle_name.speed('fastest')
        turtle_name.color("black", "white")
        self.draw_c(turtle_name,self.width_pixel_dva,0)
        
        
        turtle_name2 = turtle.RawTurtle(self.canvas2)
        turtle_name2.speed('fastest')
        turtle_name2.color("black", "white")
        self.draw_c(turtle_name2,self.width_pixel_dva,0)

        
        self.greenbutton_dva = PhotoImage(file = '/home/vevek/Applications/RoundGreen.png')
        self.yellowbutton_dva = PhotoImage(file = '/home/vevek/Applications/RoundYellow.png')
        self.redbutton_dva = PhotoImage(file = '/home/vevek/Applications/Resized red.png')

        self.yellow_dva = Button(my_window, image = self.yellowbutton_dva,borderwidth = 0,bg="white",highlightthickness=0)
        self.yellow_dva.pack(pady = 10)
        self.yellow_dva.place(x=width_value/2,y=height_value-height_value/4,anchor = "center")

        self.green_dva = Button(my_window,image = self.greenbutton_dva,bg = "white",command = self.greenbutton_dva,highlightthickness=0,borderwidth = 0)
        self.green_dva.pack(padx = 10)
        self.green_dva.place(x=(width_value/2)-100,y=height_value-height_value/4,anchor = "center")

        self.red_dva = Button(my_window,image = self.redbutton_dva,bg = "white",command = self.redbutton_dva,highlightthickness=0,borderwidth = 0)
        self.red_dva.pack(padx = 10)
        self.red_dva.place(x=(width_value/2)+100,y=height_value-height_value/4,anchor = "center")
        
        self.move_canvas()
        
        my_window.after(0,self.switch_canvas)
    
    def move_canvas(self):
        self.position_x += self.speedx
        self.position_y += self.speedy
        if(self.switcher):
            self.canvas1.place(x=self.position_x,y=self.position_y)
        else:
            self.canvas2.place(x=self.position_x,y=self.position_y)
        my_window.update()
        if self.position_x+self.width_pixel_dva >= self.width_value or self.position_x <= 0:
            self.speedx *= -1
        if self.position_y+self.width_pixel_dva >= (3*self.height_value/4)-100 or self.position_y <= 0:
            self.speedy *= -1
    def switch_canvas(self):
        if(self.switcher):
           self.canvas2.pack_forget()
           self.move_canvas()
        else:
            self.canvas1.pack_forget()
            self.move_canvas()
        self.switcher = not self.switcher
        
        my_window.after(10,self.switch_canvas)
    
    def greenbutton_dva(self):
        self.green_clicks_dva += 1
        self.launch_dva()
        
    def redbutton_dva(self):
        print("Your dynamic visual acuity is "+str(self.acuity_list_dva[green_clicks_dva]))
        self.dva_done_flag = 1
        my_window.destroy()
        
    def draw_c(turtle,width,shade):
        turtle.penup()
        turtle.setposition(((width/2)-(width/5)),-((width/4)))
        turtle.pendown()
        turtle.shape("blank")
        
        turtle.pensize(width/5)
        turtle.pencolor(shade,shade,shade)
        
        turtle.left(50)
        turtle.circle((width/2-width/10),-280)
        turtle.penup()
        return turtle.turtlesize()



my_window = tk.Tk()
width_value = my_window.winfo_screenwidth()
height_value = my_window.winfo_screenheight()
my_window.geometry("%dx%d+0+0" % (width_value,height_value))
my_window.configure(bg = 'white')
my_window.title('EYIRIS')


app = Application(my_window)

my_window.mainloop()

How can i make the "greenbutton" and "redbutton" work when the animation is on?

sorry that is just a reset button to the previous page which is not included in the code! I have edited it to destroy the window now — vevek seetharaman, Jul 26 '23 at 06:02
i tried to adding self to the draw statement, didnt work either! — vevek seetharaman, Jul 26 '23 at 06:27
You say it didn't work, was there some error message? I'm on window10 and I can see a big letter C in black and it's bouncing around the full screen. — Derek, Jul 26 '23 at 10:26

kimhyunju · Accepted Answer · 2023-07-26T06:45:34.873

answer for windows: I understood that the action defined by the button could not be performed due to the infinitely running animation. (Lack of English)

In this case, you can think of a way to do the animation in a separate thread. And setting the same variable name and function name makes debugging difficult.

Here is your code with some random edits. I'd like to give a detailed explanation and wonder why there is a yellow button in the original code, but I'm not good at English, so I'll just focus on the problem.

import time
from tkinter import *
import tkinter as tk
import turtle
import random
from threading import Thread


class Application(Frame):
    def __init__(self, master):
        super(Application, self).__init__(master)
        self.switcher = True
        self.speedx = 5
        self.speedy = 5
        self.position_x = 0
        self.position_y = 0
        self.red_clicks_dva = 0
        self.green_clicks_dva = 0
        self.acuity_list_dva = [60, 36, 24, 18, 12, 9, 6, 5, 4, 3, 2.5, 2, 1.5, 1]
        self.acuity_list_4m_dva = [40, 24, 16, 12, 8, 6, 4, 3.33, 2.67, 2, 1.67, 1.33, 1, 0.67]
        self.characters_dva = ['draw_c', 'draw_z', 'draw_o', 'draw_t', 'draw_p', 'draw_f', 'draw_e', 'draw_h', 'draw_v',
                               'draw_d', 'draw_s', 'draw_n', 'draw_r']
        self.width_value = my_window.winfo_screenwidth()
        self.height_value = my_window.winfo_screenheight()
        self.launch_dva()

    def launch_dva(self):
        for item in my_window.winfo_children():
            item.destroy()
        position = self.green_clicks_dva
        selected_characters_dva = random.sample(self.characters_dva, 1)
        print(selected_characters_dva)
        width = self.acuity_list_4m_dva[position] * 0.00145 * 100
        self.width_pixel_dva = (width * 96) / 2.54

        self.canvas1 = tk.Canvas(my_window, height=self.width_pixel_dva + 10, width=self.width_pixel_dva + 10,
                                 bg='white', highlightthickness=0)
        self.canvas1.pack_propagate(False)
        self.canvas1.pack()

        self.canvas1.place(x=self.position_x, y=self.position_y)

        self.canvas2 = tk.Canvas(my_window, height=self.width_pixel_dva + 10, width=self.width_pixel_dva + 10,
                                 bg='white', highlightthickness=0)
        self.canvas2.pack_propagate(False)
        self.canvas2.pack()
        self.canvas2.place(x=self.position_x, y=self.position_y)

        turtle_name = turtle.RawTurtle(self.canvas1)
        turtle_name.speed('fastest')
        turtle_name.color("black", "white")
        self.draw_c(turtle_name, self.width_pixel_dva, 0)

        turtle_name2 = turtle.RawTurtle(self.canvas2)
        turtle_name2.speed('fastest')
        turtle_name2.color("black", "white")
        self.draw_c(turtle_name2, self.width_pixel_dva, 0)

        self.greenbutton_dva = PhotoImage(file='/home/vevek/Applications/RoundGreen.png')
        self.yellowbutton_dva = PhotoImage(file='/home/vevek/Applications/RoundYellow.png')
        self.redbutton_dva = PhotoImage(file='/home/vevek/Applications/Resized red.png')

        self.yellow_dva = Button(my_window, image=self.yellowbutton_dva, borderwidth=0, bg="white",
                                 highlightthickness=0)
        self.yellow_dva.pack(pady=10)
        self.yellow_dva.place(x=width_value / 2, y=height_value - height_value / 4, anchor="center")

        self.green_dva = Button(my_window, image=self.greenbutton_dva, bg="white", command=self.greenbutton_dva_clicked,
                                highlightthickness=0, borderwidth=0)
        self.green_dva.pack(padx=10)
        self.green_dva.place(x=(width_value / 2) - 100, y=height_value - height_value / 4, anchor="center")

        self.red_dva = Button(my_window, image=self.redbutton_dva, bg="white", command=self.redbutton_dva_clicked,
                              highlightthickness=0, borderwidth=0)
        self.red_dva.pack(padx=10)
        self.red_dva.place(x=(width_value / 2) + 100, y=height_value - height_value / 4, anchor="center")

        self.move_canvas()
        self.t1 = Thread(target=self.switch_canvas)
        self.t1.start()
        # my_window.after(0, self.switch_canvas)

    def move_canvas(self):
        self.position_x += self.speedx
        self.position_y += self.speedy
        if (self.switcher):
            self.canvas1.place(x=self.position_x, y=self.position_y)
        else:
            self.canvas2.place(x=self.position_x, y=self.position_y)
        my_window.update()
        if self.position_x + self.width_pixel_dva >= self.width_value or self.position_x <= 0:
            self.speedx *= -1
        if self.position_y + self.width_pixel_dva >= (3 * self.height_value / 4) - 100 or self.position_y <= 0:
            self.speedy *= -1

    def switch_canvas(self):
        if (self.switcher):
            self.canvas2.pack_forget()
            self.move_canvas()
        else:
            self.canvas1.pack_forget()
            self.move_canvas()
        self.switcher = not self.switcher

        my_window.after(10, self.switch_canvas)

    def greenbutton_dva_clicked(self):
        self.green_clicks_dva += 1
        print("green button clicked")
        # self.launch_dva()

    def redbutton_dva_clicked(self):
        print("Your dynamic visual acuity is " + str(self.acuity_list_dva[self.green_clicks_dva]))
        self.dva_done_flag = 1
        # self.test_page()

    def draw_c(self, turtle, width, shade):
        turtle.penup()
        turtle.setposition(((width / 2) - (width / 5)), -((width / 4)))
        turtle.pendown()
        turtle.shape("blank")

        turtle.pensize(width / 5)
        turtle.pencolor(shade, shade, shade)

        turtle.left(50)
        turtle.circle((width / 2 - width / 10), -280)
        turtle.penup()
        return turtle.turtlesize()


my_window = tk.Tk()
width_value = my_window.winfo_screenwidth()
height_value = my_window.winfo_screenheight()
my_window.geometry("%dx%d+0+0" % (width_value, height_value))
my_window.configure(bg='white')
my_window.title('EYIRIS')

app = Application(my_window)

my_window.mainloop()

Hope this helps.

I tried threading like you suggested, when i press the green button "green button clicked" doesnt get printed — vevek seetharaman, Jul 26 '23 at 06:21
There are some parts that I arbitrarily edited in the original code. Can't I just do the entire code I suggested? — kimhyunju, Jul 26 '23 at 06:25
sure, i understood what you were suggesting and made changes accordingly but i wasnt able to make it work — vevek seetharaman, Jul 26 '23 at 06:27
If there is an error, can you show the error message? It may be a file path or environment problem. I am in a Windows 10 environment. — kimhyunju, Jul 26 '23 at 06:39
am working on rapsberry pi, there is no error in the code, animation just doesnt quit — vevek seetharaman, Jul 26 '23 at 06:42
I don't know about Raspberry Pi. sorry. I'll edit the answer to be windows only. — kimhyunju, Jul 26 '23 at 06:44
no worries. i tried your code on my windows too. its still the same. it worked for you? — vevek seetharaman, Jul 26 '23 at 06:48
i made a silly mistake on the edit, your threading solution actually works! — vevek seetharaman, Jul 26 '23 at 06:51
If i had to make the next run smoothly, which is the same letter with lesser size(which is why i run "launch_dva()" in my code) what modification do i have to make to threading code? — vevek seetharaman, Jul 26 '23 at 07:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/254678/discussion-between-vevek-seetharaman-and-kimhyunju). — vevek seetharaman, Jul 26 '23 at 15:40

how to make buttons work while animation in tkinter?

1 Answers1