I'm trying to understand how bind and events work in python. For example I've created 3 tiles and would like to be able to change the color of one of the tiles but cannot understand or figure out where I'm going wrong. I keep getting:
AttributeError: 'int' object has no attribute 'bind'.
Below is the code and thanks in advance:
import tkinter
def main():
root = tkinter.Tk()
title = tkinter.Label(root, text="Test Window")
title.pack()
canvas= tkinter.Canvas(root, background='green', width = 300, height = 300)
tile1=canvas.create_rectangle(0, 0, 100, 100, fill = 'magenta')
tile2=canvas.create_rectangle(100,0, 200,100, fill = 'blue')
tile3=canvas.create_rectangle(200,0, 300,100, fill = 'blue')
canvas.pack()
def change_square(event):
event.configure(background = 'blue')
tile1.bind("<Button-1>", change_square(tile1))
root.mainloop()
if __name__ == '__main__':
main()
itemconfigure will change the colour:
def main():
root = tkinter.Tk()
title = tkinter.Label(root, text="Test Window")
title.pack()
canvas = tkinter.Canvas(root, background='green', width=300, height=300)
s1 = canvas.create_rectangle(0, 0, 100, 100, fill='magenta')
s2 = canvas.create_rectangle(100, 0, 200, 100, fill='blue')
s3 = canvas.create_rectangle(200, 0, 300, 100, fill='blue')
canvas.pack()
def change_square(event):
canvas.itemconfigure(s1, fill="blue")
canvas.bind("<Button-1>", change_square)
root.mainloop()
If you want to change the middle to black you would use:
canvas.itemconfigure(s2, fill="black")`
And so on.
If you want to change colour based on which you click this should work:
def change_square(event):
x = canvas.canvasx(event.x)
y = canvas.canvasy(event.y)
sq = canvas.find_closest(x,y)[0]
canvas.itemconfigure(sq, fill="black")
canvas.bind("<Button-1>", change_square)
root.mainloop()
Related
This question already has answers here:
Why does Tkinter image not show up if created in a function?
(5 answers)
Closed 6 months ago.
I'm trying to display a frame with a canvas inside in order I'll be able to change of frame with a button, but when the code is executed it does not even display the button, I don't know if it happens because of all is on a function, if doing what I think is even possible or if I'm missing something
from tkinter import *
window = Tk()
window.geometry("1200x700")
window.configure(bg = "#ffffff")
def btn_clicked():
print("Button Clicked")
frame1 =Frame(window, width=1200, height=700)
frame1.grid(row=0, column=0)
def load_page():
frame1.tkraise()
frame1.pack_propagate(False)
canvas = Canvas(
frame1,
bg = "#263ff8",
height = 700,
width = 1200,
bd = 0,
highlightthickness = 0,
relief = "ridge")
canvas.place(x = 0, y = 0)
background_img = PhotoImage(file = f"background.png")
background = canvas.create_image(
601.0, 341.0,
image=background_img)
img0 = PhotoImage(file = f"img0.png")
boton = Button(
image = img0,
borderwidth = 0,
highlightthickness = 0,
command = btn_clicked,
relief = "flat")
boton.place(
x = 85, y = 71,
width = 430,
height = 99)
load_page()
window.resizable(False, False)
window.mainloop()
Rephrased the entire code and including image:
To see button display. I had to reduced height and width in Canvas. Also The button had to reduced. In line 21, I changed bd = 10. You can comment in , because I don't used PhotoImage. you can debug see in image.
from tkinter import *
window = Tk()
window.geometry("1200x700")
window.configure(bg = "#ffffff")
def btn_clicked():
print("Button Clicked")
frame1 =Frame(window, width=1200, height=700)
frame1.grid(row=0, column=0)
def load_page():
frame1.tkraise()
frame1.pack_propagate(False)
canvas = Canvas(
frame1,
bg = "#263ff8",
height = 100,
width = 200,
bd = 10,
highlightthickness = 0,
relief = "ridge")
canvas.place(x = 0, y = 0)
#background_img = PhotoImage(file = f"background.png")
#background = canvas.create_image(
#601.0, 341.0,
#image=background_img)
#img0 = PhotoImage(file = f"img0.png")
boton = Button(frame1,
#image = img0,
borderwidth = 0,
highlightthickness = 0,
command = btn_clicked,
relief = "flat")
boton.place(
x = 85, y = 71,
width = 30,
height =29)
load_page()
window.resizable(False, False)
window.mainloop()
Output result. you can see debug.
I want my Tkinter window to have four buttons, each with its own background image, disposed as a 2x2 grid. I tried using frames but you can't set an image as frame background so I had to switch to Canvas. This is the code for one of the four blocks.
from tkinter import *
from PIL import ImageTk, Image
root = Tk()
root.geometry("500x200")
root.wm_title("KnowYourArt")
styles_bg = ImageTk.PhotoImage(Image.open("images/styles_bg.png"))
canvas_styles = Canvas(root)
bg = canvas_styles.create_image(100, 100, image=styles_bg)
width = 4
height = 2
Button(canvas_styles, text="Styles", width=width, height=height).pack(side=TOP)
Label(canvas_styles, text="Gain info about styles").pack(side=BOTTOM)
canvas_styles.grid(row=0, column=0)
This is the output I get:
In my intentions, the background image dimensions should cover both the button and the label, and the image's dimensions should be independent from the dimensions of the widgets. Instead, I obtain a canvas where the height of the BG image is the same as the height of the button, and the width is the same as the label's width. I tried many alternative possibilities, including setting a width and height for the canvas, and none of them properly worked. What am I doing wrong?
I managed to find a solution. Here is the code:
from tkinter import *
from PIL import ImageTk, Image
width = 4
height = 1
def add_canvas(frame, img, x, y, text):
c = Canvas(frame, width=300, height=300)
c.focus()
c.pack(fill=BOTH, expand=True)
bg = c.create_image(x, y, image=img)
btn = Button(frame, text="Go!", width=width, height=height)
c.create_text(150, 190, text=text, font=('Helvetica', 15), fill='white')
c.create_window(100, 200, anchor="nw", window=btn)
return c
root = Tk()
root.geometry("600x600")
root.wm_title("Title")
f_1 = Frame(root)
f_2 = Frame(root)
f_3 = Frame(root)
f_4 = Frame(root)
bg1 = ImageTk.PhotoImage(Image.open("images/im1.png"))
bg2 = ImageTk.PhotoImage(Image.open("images/im2.png"))
bg3 = ImageTk.PhotoImage(Image.open("images/im3.png"))
bg4 = ImageTk.PhotoImage(Image.open("images/im4.jpg"))
canvas_1 = add_canvas(f_1, bg1, 0, 0, "foo")
canvas_2 = add_canvas(f_2, bg2, 240, 240, "foo")
canvas_3 = add_canvas(f_3, bg3, 120, 120, "foo")
canvas_4 = add_canvas(f_4, bg4, 100, 100, "foo")
f_1.grid(row=0, column=0)
f_2.grid(row=0, column=1)
f_3.grid(row=1, column=0)
f_4.grid(row=1, column=1)
And here's the output
I have the following GUI as shown in the Figure below. Instead of the black box, I wanted to draw a transparent rectangle on top of all the scales covering values 1, 0, and -1 of the scale.
Is there a way to make the Tkinter canvas transparent? If it is not the correct way to do it, what are the alternatives that I could try? I shared the sample code I use. That can be used to reproduce this GUI.
from tkinter import *
import itertools
root = Tk()
root.geometry('840x420')
root.title('Test Window')
variables = {"var1", "var2", "var3", "var4"}
pair_list = list(itertools.combinations(list(variables), 2))
pair_result_dictionary = dict.fromkeys(pair_list)
my_canvas = Canvas()
my_canvas.pack(side=LEFT, fill=BOTH, expand=1)
my_scrollbar = Scrollbar(root, orient=tk.VERTICAL, command=my_canvas.yview)
my_scrollbar.pack(side=RIGHT, fill=Y)
my_canvas.configure(yscrollcommand=my_scrollbar.set)
my_canvas.bind('<Configure>', lambda e: my_canvas.configure(scrollregion=my_canvas.bbox("all")))
second_frame = Frame(my_canvas)
my_canvas.create_window((0, 0), window=second_frame, anchor="nw")
i = 0
heading_label = Label(second_frame, text="Test Window", font=('Arial',16))
heading_label.grid(column=0, row=0, sticky=tk.NW, columnspan=2, padx=(52, 0), pady=(20, 10))
for pair in pair_list:
sample_scale = tk.Scale(second_frame, from_=9, to=-9, length=600, orient=tk.HORIZONTAL, font=('Arial', 15),
tickinterval=1,resolution=1)
label_left = tk.Label(second_frame, text=pair[0], font=('Arial', 15))
label_left.grid(column=0, row=2 + i, sticky=tk.W, padx=(52, 0), pady=5)
sample_scale.set(((sample_scale['from'] - sample_scale['to']) / 2) + sample_scale['to'])
sample_scale.grid(column=1, row=2 + i, sticky=tk.W, padx=(5, 0), pady=5)
label_right = tk.Label(second_frame, text=pair[1], font=('Arial', 15))
label_right.grid(column=2, row=2 + i, sticky=tk.W, padx=(5, 5), pady=5)
i = i + 100
rectangle_holder_canvas = tk.Canvas(second_frame, width=100, height=70, bd=0, background='#000000')
rectangle_holder_canvas.grid(column=1, row=2, sticky=tk.S, padx=(0, 0), pady=0)
rec = rectangle_holder_canvas.create_rectangle(3, 3, 100, 70, outline='blue', fill='')
rectangle_holder_canvas.tag_raise(rec, 'all')
root.mainloop()
If I use the following code lines, it makes the entire square transparent and will see what's underneath the main window which is not what I want sadly.
root.wm_attributes("-transparentcolor", 'grey')
rectangle_holder_canvas = tk.Canvas(second_frame, width=100, height=70, bd=0, bg="grey")
Appreciate your thoughts and time on how to achieve this.
I read that, "tag_raise" method does not affect canvas window items. To change a window item's stacking order, use a lower or lift method on the window.. So I tried to draw a rectangle on my_canvas by setting second_frame.lower() as shown below code. Then I only see the rectangle but not the scales or labels on the second frame.
my_canvas.create_window((0, 0), window=second_frame.lower(), anchor=CENTER)
rec = my_canvas.create_rectangle(50, 50, 200, 200, outline='blue', fill='blue')
Your question has no easy answer.
The organisation of canvas objects is divided in two groups.
Ordinary graphical objects like rectangle, polygon etc are stacked in the order
of their creation, with the first object in the background and the last object
in the foreground. The stacking order of such objects can be changed via
canvas.lift, canvas.lower, canvas.tag_raise and canvas.tag_lower.
The second group are the canvas window objects, these are created using a
fixed stacking order that ALLWAYS sit above graphical objects.
Therefore it is not possible to place ordinary graphical objects above window
objects.
This would seem to make your objective impossible, however there is (at least)
one solution.
The following code achieves your objective by using a Toplevel window that is
positioned above the canvas. This window uses wm_attributes("-transparentcolor", color)
and overrideredirect(1), it also sets wm_attributes("-topmost", True).
The main window and top window are then bound together via the "Configure"
binding so that moving main window will automatically move top window.
This creates the effect you are looking for, although it may not suit your needs.
I've used one of your Scale objects placed in a canvas window object to simulate
a fragment of your code.
import tkinter as tk
color = "red"
class transParent(tk.Tk):
def __init__(self):
super().__init__()
self.withdraw()
self.columnconfigure(0, weight = 1)
wide, high = 606, 106
self.geometry(f"{wide}x{high}+20+20")
self.canvas = tk.Canvas(
self, background = color, highlightthickness = 0, borderwidth = 0)
self.canvas.grid(sticky = tk.NSEW)
self.s_scale = tk.Scale(
self.canvas, from_ = 9, to = -9, length = 600,
orient = tk.HORIZONTAL, font = "Arial 15",
takefocus = 1, tickinterval = 1, resolution = 1)
self.s_scale.set(0)
self.s_scale.grid(
column = 0, row = 0, sticky = tk.W, padx = 5, pady = 5)
self.sample_window = self.canvas.create_window(
0, 0, window = self.s_scale, anchor = tk.NW)
self.deiconify()
self.wait_visibility()
# build transparency toplevel : width, height, borderwidth
w, h, bw = 100, 100, 4
self.top = tk.Toplevel(
self, padx = 0, pady = 0, background = color,
highlightthickness = 0, relief = "solid", borderwidth = bw)
self.X, self.Y = self.winfo_x, self.winfo_y
self.top.geometry(f"{w}x{h}+{self.X()}+{self.Y()}")
self.top.wm_attributes("-transparentcolor", color)
self.top.overrideredirect(1)
self.top.wm_attributes("-topmost", True)
# estimate top position > trial & error?
self.xx, self.yy = int(wide / 2 - w / 2.4), int(high / 3.4)
# primary bindings
self.bind("<Configure>", self.moveit)
self.top.event_add(
"<<HOOD>>", "<Button-1>", "<Button-2>", "<Button-3>")
self.top.bind("<<HOOD>>", self.focal)
self.focus_force()
def moveit(self, ev):
self.top.geometry(f"+{self.X()+self.xx}+{self.Y()+self.yy}")
self.top.lift()
def focal(self, ev):
self.s_scale.focus_set()
if __name__ == "__main__":
app = transParent()
app.mainloop()
window = tkinter.Tk()
window.geometry('700x700')
text_eingabe = Entry(window)
text_eingabe.place(x = 250, y = 550)
def coords():
xy = int(text_eingabe.get())
C.create_line(10,10,{xy},200, fill= 'blue')
eingabe_bestätigung = Button(window, text= 'bitte bestätigen', command= coords)
eingabe_bestätigung.place(x = 250, y= 500)
C = Canvas(window, bg = 'white',width= 300, height= 300)
C.place(x= 170, y= 100)
window.mainloop()
The Problem is that i am getting a error called 'bad screen distance'
when im trying to put numbers into the entry box to 'convert' these to the variables of the line
{xy} creates a set. You just want to use the variable so the correct code is:
window = tkinter.Tk()
window.geometry('700x700')
text_eingabe = Entry(window)
text_eingabe.place(x = 250, y = 550)
def coords():
xy = int(text_eingabe.get())
C.create_line(10,10,xy,200, fill= 'blue')
eingabe_bestaetigung = Button(window, text= 'bitte bestätigen', command= coords)
eingabe_bestaetigung.place(x = 250, y= 500)
C = Canvas(window, bg = 'white',width= 300, height= 300)
C.place(x= 170, y= 100)
window.mainloop()
This is my code so far and I want to resize all of these widgets including the image to window size.
from tkinter import *
win = Tk()
win.title("xxx")
win.geometry("600x600")
win.resizable()
w = 700
h = 700
x = 600 // 2
y = 600 // 2
canvas = Canvas(win, width=w, height=h, bg="grey")
canvas.grid(row=0, column=0, padx=50, pady=50)
img = PhotoImage(file="c.png")
canvas.create_rectangle(0, 0, 75, 500, fill="green")
canvas.create_rectangle(425, 0, 500, 500, fill="green")
canvas.create_rectangle(75, 0, 80, 500, fill="brown")
image = canvas.create_image(x, 440, image=img)
win.mainloop()
You can resize all the items in the canvas using the Canvas.coords(tagorId, x0, y0...). This can be used for any item in the canvas other than the image. For image use Image.resize((x, y), resample).
Bind the <Configure> event to an event handler. So whenever the canvas is resized the event handler is called.
Here is a demo.(Note the other items on the canvas might be hidden by the image). The below code will automatically resize items to the canvas.
from tkinter import *
from PIL import ImageTk, Image
def resize_widgets(event):
global resized
for items in canvas.find_all():
if items != image:
canvas.coords(items, 0, 0, event.width, event.height)
resized = ImageTk.PhotoImage(im.resize((event.width, event.height), resample = Image.NEAREST))
canvas.itemconfig(image, image=resized)
canvas.moveto(image, 0, 0)
win = Tk()
win.title("Dodge Car Challenger")
win.geometry("600x600")
win.resizable()
w = 700
h = 700
x = 600 // 2
y = 600 // 2
resized = None
canvas = Canvas(win, width=w, height=h, bg="grey")
#canvas.grid(row=0, column=0, padx=50, pady=50)
canvas.pack(expand=True, fill='both')
canvas.bind('<Configure>', resize_widgets)
im = Image.open(r"your imagepath")
img = ImageTk.PhotoImage(im)
canvas.create_rectangle(0, 0, 75, 500, fill="green")
item = canvas.create_rectangle(425, 0, 500, 500, fill="green")
canvas.create_rectangle(75, 0, 80, 500, fill="brown")
image = canvas.create_image(x, 440, image=img)
win.mainloop()