Is there a way to update Tkinter canvas live with text? - python

I am trying to visualise the backtracking algorithm to solve sudoku puzzles using Tkinter (Example video: https://www.geeksforgeeks.org/building-and-visualizing-sudoku-game-using-pygame/)
def play_puzzle(self):
self.play_frame.pack_forget()
self.home_frame.pack_forget()
self.play_frame.pack(fill=BOTH, expand=1)
self.canvas = Canvas(self.play_frame, width=WIDTH, height=HEIGHT)
self.canvas.grid(row=0, column=0, columnspan=9, rowspan=9)
self.canvas.bind("<Button-1>", self.cell_clicked)
self.canvas.bind("<Key>", self.key_pressed)
solution_btn = ttk.Button(self.play_frame, text='Solution', command=self.solve_puzzle)
home_btn = ttk.Button(self.play_frame, text='Home', command=lambda: self.return_home('play'))
clear = ttk.Button(self.play_frame, text='clear', command = lambda: self.canvas.delete('numbers'))
view_solution_btn = ttk.Button(self.play_frame, text='View Solution', command=self.view_solution)
solution_btn.grid(row= 1, column = 11)
home_btn.grid(row = 3, column = 11)
clear.grid(row=5, column = 11)
view_solution_btn.grid(row=7, column = 11)
self.draw_grid()
self.draw_puzzle()
def view_solution(self):
find = self.game.find_empty()
if not find:
print('Solution found')
return True
else:
e_row, e_col = find
for i in range(1,10):
if self.game.is_valid(i, e_row, e_col):
self.game.puzzle[e_row][e_col] = i
self.play_puzzle()
time.sleep(1)
if self.view_solution():
return True
self.game.puzzle[e_row][e_col] = 0
return False
def draw_puzzle(self):
self.canvas.delete("numbers")
for i in range(9):
for j in range(9):
answer = self.game.puzzle[i][j]
if answer != 0:
x = MARGIN + j * SIDE + SIDE / 2
y = MARGIN + i * SIDE + SIDE / 2
original = self.game.start_puzzle[i][j]
color = "black" if answer == original else "sea green"
self.canvas.create_text(x, y, text=answer, tags="numbers", fill=color)
def draw_grid(self):
for i in range(10):
color = 'blue' if i%3==0 else 'gray'
x0 = MARGIN + i*SIDE
y0 = MARGIN
x1 = MARGIN + i*SIDE
y1 = HEIGHT - MARGIN
self.canvas.create_line(x0,y0,x1,y1, fill=color)
x0 = MARGIN
y0 = MARGIN + i*SIDE
x1 = WIDTH-MARGIN
y1 = MARGIN + i*SIDE
self.canvas.create_line(x0,y0,x1,y1, fill=color)
When I call the view_solution function in the above snippet(by clicking the view solution button), it doesn't update the canvas every time it runs but outputs the answer/fills the puzzle with solution after it completes the entire loop. Is there a way that I could make this work like the one in the video shown?
I have tried using .after() function in Tkinter but I am not sure how to implement it perfectly.
Entire code here - https://github.com/ssram4298/sudoku_gui_tkinter

There are a few ways to update the canvas while processing it.
root.update() #self.parent.update() in your code
root.update_idletasks() #self.parent.update_idletasks() in your code
You can also update individual widgets by calling update() on them (myButton.update()).
If you need to process a change on a widget it needs to be updated before it will be rendered.

Related

Error object has no attribute in Paint app

This is the code, I got it from here https://www.youtube.com/watch?v=uW-NLL9dlBs
After many attempts, I solved some issues, but I still couldnt get it to work.
Its supposed to be an app for painting. I wanted it to have very large pixels with invisible grid too, so painting in it would create low resolution pixel art, similar to this. I dont know how to do that, as I couldnt find it anywhere. pixel image
from tkinter import *
from tkinter.ttk import Scale
from tkinter import colorchooser,filedialog,messagebox
import PIL.ImageGrab as ImageGrab
class Paint():
def __init__(self,root):
self.root = root
self.root.title("Paint")
self.root.geometry("800x520")
self.root.configure(background='white')
self.root.resizable(0,0)
self.pen_color = "black"
self.eraser_color = "white"
self.color_frame = LabelFrame(self.root,text='Color',font = ('arial',15),bd=5,relief=RIDGE,bg='white')
self.color_frame.place(x=0,y=0,width=70,height=185)
colors = ['#ff0000','#ff4dd2','#ffff33','#000000','#0066ff','#660033','#4dff4d','#b300b3','#00ffff','#808080','#99ffcc','#336600','#ff9966','#ff99ff','#00cc99']
i=j=0
for color in colors:
Button(self.color_frame,bg=color,bd=2,relief=RIDGE,width=3,command=lambda col =color:self.select_color(col)).grid(row=i,column=j)
i+=1
if i==6:
i=0
j=1
self.eraser_button = Button(self.root,text="ERASER",bd=4,bg='white',command=self.eraser,width=8,relief=RIDGE)
self.eraser_button.place(x=0,y=187)
self.clear_button = Button(self.root, text="Clear",bd=4,bg='white',command=lambda : self.canvas.delete("all"),width=8,relief=RIDGE)
self.clear_button.place(x=0,y=217)
self.save_button = Button(self.root,text="Save",bd=4,bg='white',command=self.save_paint,width=8,relief=RIDGE)
self.save_button.place(x=0,y=247)
self.canvas_color_button = Button(self.root,text="Canvas", bd=4 , bg='white', command=self.canvas_color(),width=8,relief=RIDGE)
self.canvas_color_button.place(x=0, y=277)
self.pen_size_scale_frame = LabelFrame(self.root,text="size",bd=5,bg='white',font=('arial',15,'bold'),relief=RIDGE)
self.pen_size_scale_frame.place(x=0,y=310,height=200,width=70)
self.pen_size = Scale(self.pen_size_scale_frame,orient=VERTICAL,from_ = 50, to = 0,length=170)
self.pen_size.set(1)
self.pen_size.grid(row=0,column=1,padx=15)
self.canvas = Canvas(self.root,bg='white',bd=5,relief=GROOVE,height=500,width=700)
self.canvas.place(x=80,y=0)
self.canvas.bind("<B1-Motion>",self.paint)
def paint(self,event):
x1,y1 = (event.x-2),(event.y-2)
x2,y2 = (event.x + 2),(event.y + 2)
self.canvas.create_oval(x1,y1,x2,y2,fill=self.pen_color,outline=self.pen_color,width=self.pen_size.get())
def select_color(self,col):
self.pen_color = self.eraser_color
def eraser(self):
self.pen_color = "white"
def canvas_color(self):
color = colorchooser.askcolor()
self.canvas.configure(background=color[1])
self.eraser_color = color[1]
def save_paint(self):
try:
filename = asksaveasfilename(defaultextension='.jpg')
x = self.root.winfo_rooty() + self.canvas.winfo_x()
y = self.root.winfo_rooty() + self.canvas.winfo_y()
x1 = x + self.canvas.winfo_width()
y1 = y + self.canvas.winfo_height()
ImageGrab.grab().crop((x,y,x1,y1)).save(filename)
messagebox.showinfo('paint says','image is saved as ' + str(filename))
except:
messagebox.showerror("paint says","unable to save image ,\n something went wrong")
if __name__ == "__main__":
root = Tk()
p = Paint(root)
root.mainloop()
In order to get your paint program working, the following bugs need to be addressed.
The self.canvas_color_button command has a bug. Just remove the parens to make it work.
There's a problem with color selection methods.
Here is the solution.
def select_color(self,col):
self.pen_color = col
def eraser(self):
self.pen_color = self.eraser_color
When saving a drawing, the image is not cropped correctly due to other widgets.
self.color_frame has a width of 70.
Your canvas is defined with a borderwidth(5) and a highlightthickness(2).
These values must be taken into account.
Here is one solution to crop your saved images correctly.
xoffset = self.color_frame.winfo_width()
yoffset = int(self.canvas["borderwidth"]) + int(self.canvas["highlightthickness"])
x = self.root.winfo_rooty() + self.canvas.winfo_x()
y = self.root.winfo_rooty() + self.canvas.winfo_y() + yoffset
x1 = x + self.canvas.winfo_width() - xoffset
y1 = y + self.canvas.winfo_height() - (yoffset * 2)

Stop text from overlapping in Tkinter canvas

I am creating a game in the tkinter canvas which involves generating text (1 or 2 digit numbers) and I've gotten that to work, but I can't work out how to display them so they don't overlap. At the moment I have this:
import tkinter as tk
from tkinter import font
import random
BOX_SIZE = 300
class Game(tk.Tk):
def __init__(self, *args, **kwargs):
tk.Tk.__init__(self, *args, **kwargs)
self.config(bg = "white")
self.numBox = tk.Canvas(self, height = BOX_SIZE, width = BOX_SIZE , bg = "white", highlightthickness = 0)
self.numBox.pack(expand = True)
self.score = 0
self.numberSpawn()
def placeNumber(self, value):
validSpawn = False
attempts = 0
maxAttempt = False
while not validSpawn and not maxAttempt:
attempts += 1
if attempts > 20:
maxAttempt = True
attempts = 0
size = random.choice([24,36,48,72])
coord = [random.randint(40,BOX_SIZE - 40) for x in range(2)]
self.numBox.update()
pxSize = tk.font.Font(size = size, family = "Times New Roman").measure(value)
if len(str(value)) == 1:
secondCoords = [coord[0] + pxSize *2.5 , coord[1] + pxSize]
else:
secondCoords = [x + pxSize for x in coord]
if not self.numBox.find_overlapping(*coord, *secondCoords):
validSpawn = True
if not maxAttempt:
newTxt = self.numBox.create_text(*coord, font = ("Times New Roman",size), text = value)
def numberSpawn(self):
self.maxNum = random.randint(3,19)
self.placeNumber(self.maxNum)
for i in range(random.randint(4, 16)):
num = random.randint(0, self.maxNum-1)
self.placeNumber(num)
app = Game()
app.mainloop()
value is the number to be displayed, BOX_SIZE is the dimensions of the canvas. I tried using this to stop the text overlapping and this to find the pixel size of the text before creating it. Despite this, the text still overlaps like this:
I'm not sure how to fix this, or why it doesn't work as it is. Any help is appreciated.
Here is a solution for you:
import tkinter as tk
from tkinter import font
import random
def checkOverlap(R1, R2):
if (R1[0]>=R2[2]) or (R1[2]<=R2[0]) or (R1[3]<=R2[1]) or (R1[1]>=R2[3]):
return False
else:
return True
def go():
validSpawn = False
while not validSpawn:
value = random.randint(1,99)
size = random.choice([24,36,48,72])
coord = [random.randint(40,500 - 40) for x in range(2)]
new_number = canvas.create_text(*coord, font = ("Times New Roman",size),text=value)
new_box = canvas.bbox(new_number)
canvas.itemconfigure(new_number, state='hidden')
validSpawn = True
for i in canvas.items:
this_box = canvas.bbox(i)
if checkOverlap(this_box, new_box):
validSpawn = False
break
canvas.itemconfigure(new_number, state='normal')
canvas.items.append(new_number)
root = tk.Tk()
canvas = tk.Canvas(root, width = 500, height = 500, bg='white')
canvas.items = []
canvas.pack()
btn = tk.Button(root, text="Go", command=go)
btn.pack()
root.mainloop()
Instead of having it try to figure out how big the item was going to be, I just had it draw it, take its measurements, hide it and then look for overlaps and either delete it or show it based on the results. You will need to add in your maximum tries in there or it does start to get slower the more numbers there are on the screen. It should not draw a frame in the middle of a function so the user will never see it there while it is taking the measurement.
I also had it keep an array of all the number that are saved to the screen so I can loop through them and run my own overlapping function. That's just how I like to do it, you can go back to using find_overlapping and it should still work.
I think the problem is that:
you are giving up too soon, and
when you hit your limit of attempts, you add the text whether it overlaps or not
You should bump the number of attempts up considerably (maybe a few hundred), and then if the number exceeds the maximum then you shouldn't draw the text.
I think a better strategy might be to first draw the text item, then use the bbox of the method to compute the actual amount of space taken up by the item. Then, use that to find overlapping items. The just-created item will always overlap, but if the number of overlapping is greater than 1, pick new random coordinates.
For example, something like this perhaps:
def placeNumber(self, value):
size = random.choice([24,36,48,72])
coord = [random.randint(40,BOX_SIZE - 40) for x in range(2)]
newTxt = self.numBox.create_text(*coord, font = ("Times New Roman",size), text = value)
for i in range(1000): # 1000 is the maximum number of tries to make
bbox = self.numBox.bbox(newTxt)
overlapping = self.numBox.find_overlapping(*bbox)
if len(overlapping) == 1:
return
# compute new coordinate
coord = [random.randint(40,BOX_SIZE - 40) for x in range(2)]
self.numBox.coords(newTxt, *coord)
# delete the text since we couldn't find a space for it.
self.numBox.delete(newTxt)
Either algorithm will be slow when there isn't much free space. When I created a 1000x1000 canvas with 100 numbers, it laid them out with zero overlaps in under a second.

Efficiently create a grid in tkinter

I am currently using the following code to create a grid the size of the window within python using the tkinter module
import tkinter as tk
class Frame():
def __init__(self, *args, **kwargs):
# Setup Canvas
self.c = tk.Canvas(root, height=500, width=500, bg='white')
self.c.pack(fill=tk.BOTH, expand=True)
self.c.bind('<Configure>', self.createGrid)
self.pixel_width = 20
self.pixel_height = 20
# Setup binds
self.c.bind("<ButtonPress-1>", self.leftClick)
def leftClick(self, event):
items = self.c.find_closest(event.x, event.y)
if items:
rect_id = items[0]
self.c.itemconfigure(rect_id, fill="red")
def createGrid(self, event=None):
for x in range(0, self.c.winfo_width()):
for y in range(0, self.c.winfo_height()):
x1 = (x * self.pixel_width)
x2 = (x1 + self.pixel_width)
y1 = (y * self.pixel_height)
y2 = (y1 + self.pixel_height)
self.c.create_rectangle(x1,y1,x2,y2)
self.c.update()
root = tk.Tk()
gui = Frame(root)
root.mainloop()
If I set the canvas height and width to something like 50 this loads quite quickly, although when the size is increased to 500 x 500 like is set here it takes about 5 seconds to create the grid. I have tried creating the grid with lines but the problem with that is I need squares as I am then planning to change the colour of a square that is selected. Is there any way I can make this more efficient?
I think you created way more rectangles than you need. The below two lines:
for x in range(0, self.c.winfo_width()):
for y in range(0, self.c.winfo_height()):
Will create 504x504 rectangles = 254016. It will work fine if you reduce it to just fill your current screen:
def createGrid(self, event=None):
for x in range(0, int(self.c.winfo_width()/20+1)):
for y in range(0, int(self.c.winfo_height()/20+1)):
x1 = (x * self.pixel_width)
x2 = (x1 + self.pixel_width)
y1 = (y * self.pixel_height)
y2 = (y1 + self.pixel_height)
self.c.create_rectangle(x1,y1,x2,y2)
self.c.update()

How to add image in tkinter gui?

I picked up this code and wanted to mess with it, the main problem i'm having is being unable to add an image to the actual gui at a set location on the 2 dimensional array. I get no actual error but also get no output of the image on the gui. Please help! Thank you.
import tkinter as tk
class GameBoard(tk.Frame):
def __init__(self, parent, rows=9, columns=9, size=60, color1="light grey", color2="light grey"):
'''size is the size of a square, in pixels'''
self.rows = rows
self.columns = columns
self.size = size
self.color1 = color1
self.color2 = color2
self.pieces = {}
canvas_width = columns * size
canvas_height = rows * size
tk.Frame.__init__(self, parent)
self.canvas = tk.Canvas(self, borderwidth=0, highlightthickness=0,
width=canvas_width, height=canvas_height, background="white")
self.canvas.pack(side="top", fill="both", expand=True, padx=2, pady=2)
self.canvas.bind("<Configure>", self.refresh)
def addpiece(self, name, image, row=1, column=1):
bishop = tk.PhotoImage(file='C:\\Users\\Sharjeel Jan\\Desktop\\final shit man\\Pieces\\Bishop.gif')
self.canvas.create_image(1,1, image=bishop, tags=(name, "Bishop"), anchor= "c")
self.placepiece(name, row, column)
def placepiece(self, name, row, column):
'''Place a piece at the given row/column'''
self.pieces[name] = (row, column)
x0 = (column * self.size) + int(self.size/2)
y0 = (row * self.size) + int(self.size/2)
self.canvas.coords(name, x0, y0)
def placepiece(self, name, row, column):
'''Place a piece at the given row/column'''
self.pieces[name] = (row, column)
x0 = (column * self.size) + int(self.size/2)
y0 = (row * self.size) + int(self.size/2)
self.canvas.coords(name, x0, y0)
def refresh(self, event):
'''Redraw the board, possibly in response to window being resized'''
xsize = int((event.width-1) / self.columns)
ysize = int((event.height-1) / self.rows)
self.size = min(xsize, ysize)
self.canvas.delete("square")
color = self.color2
for row in range(self.rows):
color = self.color1 if color == self.color2 else self.color2
for col in range(self.columns):
x1 = (col * self.size)
y1 = (row * self.size)
x2 = x1 + self.size
y2 = y1 + self.size
self.canvas.create_rectangle(x1, y1, x2, y2, outline="black", fill=color, tags="square")
color = self.color1 if color == self.color2 else self.color2
for name in self.pieces:
self.placepiece(name, self.pieces[name][0], self.pieces[name][1])
self.canvas.tag_raise("piece")
self.canvas.tag_lower("square")
if __name__ == "__main__":
root = tk.Tk()
board = GameBoard(root)
board.pack(side="top", fill="both", expand="true", padx=4, pady=4)
# player1 = tk.PhotoImage(data=imagedata)
# board.addpiece("player1", player1, 0,0)
root.mainloop()
You have a single line that tries to put an image to GUI:
self.canvas.create_image(1,1, image=bishop, tags=(name, "Bishop"), anchor= "c")
which is under addpiece.
The line below saves the image in a reference:
bishop = tk.PhotoImage(file='C:\\Users\\Sharjeel Jan\\Desktop\\final shit man\\Pieces\\Bishop.gif')
which is defined exclusively for the scope of addpiece, when the method is finished, the image disappears if at all being displayed.
Which effectively makes this question a duplicate to Why does Tkinter image not show up if created in a function?
In order to prevent that, make the image reference available in the scope where mainloop is called.
Either attach the reference bishop to an object, for example self.canvas, whose reference is available in the scope of mainloop:
self.canvas.bishop = tk.PhotoImage(file='C:\\Users\\Sharjeel Jan\\Desktop\\final shit man\\Pieces\\Bishop.gif')
self.canvas.create_image(1,1, image=self.canvas.bishop, tags=(name, "Bishop"), anchor= "c")
or simply pass the image reference from the mainloop scope is in, and use that object reference:
self.canvas.create_image(1,1, image=image, tags=(name, "Bishop"), anchor= "c")

How to use recursion with square?

I have a question how can you recursively draw a rectangle with the use of fractional coordinates? I have been trying to make the squares/rectangles get smaller by 10% each time until it either takes up the entire canvas(meaning it cannot go beyond the width and height of the board or it just get's to 0 meaning it won't draw anything or it's so small you won't see the final square). Or maybe is there another way that I can go about drawing squares in a recursive way that keeps decreasing by a certain percent?
I have this so far but I can't seem to think of who to get it to continue to recurse until it can no longer do it.
import tkinter
class draw_squares:
def __init__(self, squares: [(float, float, float, float)]):
self.squares = squares
self.root_window = tkinter.Tk()
self.canvas = tkinter.Canvas(master = self.root_window,
width = 500, height = 500,
background = 'blue')
self.canvas.grid(row=0, column = 0, padx=0, pady = 0,
sticky = tkinter.E + tkinter.W + tkinter.S + tkinter.N)
self.canvas.bind('<Configure>', self._resized)
self.root_window.rowconfigure(0, weight = 1)
self.root_window.columnconfigure(0, weight = 1)
def start(self):
self.root_window.mainloop()
def _resized(self, event: tkinter.Event):
self.draw_squares_recursively()
def draw_squares_recursively(self):
self.canvas.delete(tkinter.ALL)
for x, y, x2, y2 in self.squares:
if x != 0.5 and y != 0.5 and x2 != 0.5 and y2 != 0.5:
self._draw_square(self._draw_square(x-.1,y-.1,x2+.1,y2+.1))
def _draw_square(self, x: float, y:float, x2:float, y2:float):
width = self.canvas.winfo_width()
height = self.canvas.winfo_height()
self.canvas.create_rectangle(
x * width, y * height,
x2 * width, y2 *height, outline = 'grey')
if __name__ == '__main__':
squares = [(0.9, 0.9, 0.1, 0.1), (0.8,0.8,0.2,0.2), (0.7,0.7,0.3,0.3),
(0.6,0.6,0.4,0.4), (0.5,0.5,0.5,0.5)]
app = draw_squares(squares)
app.start()
Thank you very much in advance for the help!
First, you are using floating point numbers, so (not) equal is not a good idea http://www.lahey.com/float.htm draw_squares_recursively() can call itself until the limit is reached. You can work out the arithmetic to get the sizes and locations you want.
class DrawSquares:
def __init__(self, square):
## self.squares = squares
self.root_window = tkinter.Tk()
self.canvas = tkinter.Canvas(master = self.root_window,
width = 500, height = 500,
background = 'blue')
self.canvas.grid(row=0, column = 0, padx=0, pady = 0,
sticky = "nsew")
## self.canvas.bind('<Configure>', self._resized)
self.root_window.rowconfigure(0, weight = 1)
self.root_window.columnconfigure(0, weight = 1)
self.draw_squares_recursively(square)
self.root_window.mainloop()
def draw_squares_recursively(self, square):
##self.canvas.delete(tkinter.ALL)
for value in square:
if value < 0.05 or value > 100:
return
self.canvas.create_rectangle(square[0], square[1],
square[2], square[3],
outline = 'grey', width=2)
square[2] += 20
square[3] += 20
self.draw_squares_recursively(square)
if __name__ == '__main__':
squares = [0.9, 0.9, 10.1, 10.1]
app = DrawSquares(squares)

Categories