OriBaron
Reputation: 1
Tkinter canvas in frame
I'm creating a software that includes login page, start page, etc. My login page class has a canvas with pictures ( I used tkinter designer for the design ), but it shows the canvas images in a frame, How can I solve it?
class PageTwo(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
self.controller = controller
self.canvas = Canvas(
self,
bg="#FFFFFF",
height=595,
width=975,
bd=0,
highlightthickness=0,
relief="ridge",
)
self.canvas.place(x=0, y=0)
image_image_1 = PhotoImage(file=relative_to_assets("image_1.png"))
image_1 = self.canvas.create_image(110, 481.0, image=image_image_1)
self.canvas.create_rectangle(
487.0, 100.0, 488.0, 393.0, fill="#0093FF", outline=""
)
self.canvas.create_text(
471.0,
411.0,
anchor="nw",
text="Or:",
fill="#000000",
font=("LexendDeca Regular", 24 * -1),
)
self.canvas.pack()
I tried google it, didn't get any help related to my situation....
EDIT:
the picture from the canvas appear at the other frames
OUTPUT_PATH = Path(__file__).parent
ASSETS_PATH = OUTPUT_PATH / Path(r"assets\frame0")
class SampleApp(tk.Tk):
def __init__(self, *args, **kwargs):
tk.Tk.__init__(self, *args, **kwargs)
self.title_font = tkfont.Font(family='Helvetica', size=18, weight="bold", slant="italic")
# the container is where we'll stack a bunch of frames
# on top of each other, then the one we want visible
# will be raised above the others
container = tk.Frame(self)
container.pack(side="top", fill="both", expand=True)
container.grid_rowconfigure(0, weight=1)
container.grid_columnconfigure(0, weight=1)
self.frames = {}
for F in (StartPage, PageOne, PageTwo):
page_name = F.__name__
frame = F(parent=container, controller=self)
self.frames[page_name] = frame
# put all of the pages in the same location;
# the one on the top of the stacking order
# will be the one that is visible.
frame.grid(row=0, column=0, sticky="nsew")
# self.frames["StartPage"] = StartPage(parent=container, controller=self)
# self.frames["PageOne"] = PageOne(parent=container, controller=self)
# self.frames["PageTwo"] = PageTwo(parent=container, controller=self)
# self.frames["StartPage"].grid(row=0, column=0, sticky="nsew")
# self.frames["PageOne"].grid(row=0, column=0, sticky="nsew")
# self.frames["PageTwo"].grid(row=0, column=0, sticky="nsew")
self.show_frame("StartPage")
def show_frame(self, page_name):
'''Show a frame for the given page name'''
frame = self.frames[page_name]
frame.tkraise()
class StartPage(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
self.controller = controller
label = tk.Label(self, text="This is the start page", font=controller.title_font)
label.pack(side="top", fill="x", pady=10)
button1 = tk.Button(self, text="Go to Page One",
command=lambda: controller.show_frame("PageOne"))
button2 = tk.Button(self, text="Go to Page Two",
command=lambda: controller.show_frame("PageTwo"))
button1.pack()
button2.pack()
class PageOne(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
self.controller = controller
label = tk.Label(self, text="This is page 1", font=controller.title_font)
label.pack(side="top", fill="x", pady=10)
button = tk.Button(self, text="Go to the start page",
command=lambda: controller.show_frame("StartPage"))
button.pack()
class PageTwo(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
self.controller = controller
self.canvas = Canvas(
self,
bg = "#FFFFFF",
height = 595,
width = 975,
bd = 0,
highlightthickness = 0,
relief = "ridge"
)
self.canvas.place(x = 0, y=0)
image_image_1 = PhotoImage(
file=relative_to_assets("image_1.png"))
image_1 = self.canvas.create_image(
110,
481.0,
image=image_image_1
)
self.canvas.create_rectangle(
487.0,
100.0,
488.0,
393.0,
fill="#0093FF",
outline="")
self.canvas.create_text(
471.0,
411.0,
anchor="nw",
text="Or:",
fill="#000000",
font=("LexendDeca Regular", 24 * -1)
)
self.canvas.pack()
self.canvas.create_text(
406.0,
24.0,
anchor="nw",
text="Chat AES",
fill="#000000",
font=("LexendDeca Regular", 36 * -1)
)
self.googlepicture = PhotoImage(
file=relative_to_assets("button_1.png"))
button_1 = Button(
image=self.googlepicture,
borderwidth=0,
highlightthickness=0,
relief="flat"
)
button_1.place(
x=359.0,
y=473.0,
width=246.0,
height=63.0
)
self.canvas.create_text(
213.0,
103.0,
anchor="nw",
text="Login:",
fill="#000000",
font=("LexendDeca Regular", 24 * -1)
)
self.canvas.create_text(
696.0,
103.0,
anchor="nw",
text="Sign Up:",
fill="#000000",
font=("LexendDeca Regular", 24 * -1)
)
self.canvas.create_text(
571.0,
155.0,
anchor="nw",
text="Email:",
fill="#000000",
font=("LexendDeca Regular", 16 * -1)
)
self.canvas.create_text(
118.0,
155.0,
anchor="nw",
text="Email:",
fill="#000000",
font=("LexendDeca Regular", 16 * -1)
)
self.canvas.create_text(
571.0,
216.0,
anchor="nw",
text="Username:",
fill="#000000",
font=("LexendDeca Regular", 16 * -1)
)
self.canvas.create_text(
118.0,
216.0,
anchor="nw",
text="Password:",
fill="#000000",
font=("LexendDeca Regular", 16 * -1)
)
self.canvas.create_text(
569.0,
272.0,
anchor="nw",
text="Password:",
fill="#000000",
font=("LexendDeca Regular", 16 * -1)
)
self.entry_image_1 = PhotoImage(
file=relative_to_assets("entry_1.png"))
self.entry_bg_1 = self.canvas.create_image(
733.5,
193.0,
image=self.entry_image_1
)
entry_1 = Entry(
bd=0,
bg="#D9D9D9",
fg="#000716",
highlightthickness=0
)
entry_1.place(
x=571.0,
y=181.0,
width=325.0,
height=22.0
)
entry_image_2 = PhotoImage(
file=relative_to_assets("entry_2.png"))
entry_bg_2 = self.canvas.create_image(
280.5,
193.0,
image=entry_image_2
)
entry_2 = Entry(
bd=0,
bg="#D9D9D9",
fg="#000716",
highlightthickness=0
)
entry_2.place(
x=118.0,
y=181.0,
width=325.0,
height=22.0
)
entry_image_3 = PhotoImage(
file=relative_to_assets("entry_3.png"))
entry_bg_3 = self.canvas.create_image(
731.5,
254.0,
image=entry_image_3
)
entry_3 = Entry(
bd=0,
bg="#D9D9D9",
fg="#000716",
highlightthickness=0
)
entry_3.place(
x=569.0,
y=242.0,
width=325.0,
height=22.0
)
entry_image_4 = PhotoImage(
file=relative_to_assets("entry_4.png"))
entry_bg_4 = self.canvas.create_image(
280.5,
254.0,
image=entry_image_4
)
entry_4 = Entry(
bd=0,
bg="#D9D9D9",
fg="#000716",
highlightthickness=0
)
entry_4.place(
x=118.0,
y=242.0,
width=325.0,
height=22.0
)
entry_image_5 = PhotoImage(
file=relative_to_assets("entry_5.png"))
entry_bg_5 = self.canvas.create_image(
731.5,
309.0,
image=entry_image_5
)
entry_5 = Entry(
bd=0,
bg="#D9D9D9",
fg="#000716",
highlightthickness=0
)
entry_5.place(
x=569.0,
y=297.0,
width=325.0,
height=22.0
)
self.signuppic = PhotoImage(
file=relative_to_assets("button_2.png"))
button_2 = Button(
image=self.signuppic,
borderwidth=0,
highlightthickness=0,
command=lambda: print("button_2 clicked"),
relief="flat"
)
button_2.place(
x=661.0,
y=350.5,
width=167.0,
height=37.0
)
self.loginpic = PhotoImage(
file=relative_to_assets("button_3.png"))
button_3 = Button(
image=self.loginpic,
borderwidth=0,
highlightthickness=0,
command=lambda: print("button_3 clicked"),
relief="flat"
)
button_3.place(
x=165.0,
y=309.0,
width=167.0,
height=37.0
)
self.canvas.pack()
def relative_to_assets(path: str) -> Path:
return ASSETS_PATH / Path(path)
if __name__ == "__main__":
app = SampleApp()
app.mainloop()
Upvotes: 0
Views: 177
Answers (1)
OriBaron
Reputation: 1
Thanks for the help, I had to add master for every widget.
for the Button, self
for the Entry, self.canvas
Upvotes: 0