We Keep Coding

can't switch between frames in Tkinter

I've used Tkinter-Designer to convert a Figma frame into a python code, I then added that code to the StartPage class, and used the code mentioned here to switch between the frames.
For some reason, I can't get button_5 to work. When I click button_5 I expect it to switch to PageOne, but nothing happens. I'm not good with OOP, can you tell me what I'm doing wrong here?
Here is the full code:
import tkinter as tk # python 3
from tkinter import font as tkfont # python 3
from pathlib import Path
OUTPUT_PATH = Path(__file__).parent
ASSETS_PATH = OUTPUT_PATH / Path(r"Z:\python\projects\v\code\gui\tmp\TkinterDesigner\build\assets\frame0")
def relative_to_assets(path: str) -> Path:
return ASSETS_PATH / Path(path)
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.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
canvas = tk.Canvas(
bg="#FFFFFF",
height=724,
width=1056,
bd=0,
highlightthickness=0,
relief="ridge"
)
canvas.place(x=0, y=0)
canvas.create_rectangle(
56.0,
68.0,
954.0,
673.0,
fill="#F2F2F2",
outline="")
canvas.create_rectangle(
56.0,
68.0,
285.0,
673.0,
fill="#D4D3D3",
outline="")
self.button_image_1 = tk.PhotoImage(
file=relative_to_assets("button_1.png"))
button_1 = tk.Button(
image=self.button_image_1,
borderwidth=0,
highlightthickness=0,
command=lambda: print("button_1 clicked"),
relief="flat"
)
button_1.place(
x=56.0,
y=348.0,
width=229.0,
height=37.0
)
self.button_image_2 = tk.PhotoImage(
file=relative_to_assets("button_2.png"))
button_2 = tk.Button(
image=self.button_image_2,
borderwidth=0,
highlightthickness=0,
command=lambda: print("button_2 clicked"),
relief="flat"
)
button_2.place(
x=56.0,
y=312.0,
width=229.0,
height=37.0
)
self.button_image_3 = tk.PhotoImage(
file=relative_to_assets("button_3.png"))
button_3 = tk.Button(
image=self.button_image_3,
borderwidth=0,
highlightthickness=0,
command=lambda: print("button_3 clicked"),
relief="flat"
)
button_3.place(
x=56.0,
y=274.0,
width=229.0,
height=36.0
)
self.button_image_4 = tk.PhotoImage(
file=relative_to_assets("button_4.png"))
button_4 = tk.Button(
image=self.button_image_4,
borderwidth=0,
highlightthickness=0,
command=lambda: print("button_4 clicked"),
relief="flat"
)
button_4.place(
x=56.0,
y=239.0,
width=229.0,
height=36.0
)
self.button_image_5 = tk.PhotoImage(
file=relative_to_assets("button_5.png"))
button_5 = tk.Button(
image=self.button_image_5,
borderwidth=0,
highlightthickness=0,
command=lambda: controller.show_frame("PageOne"),
relief="flat"
)
button_5.place(
x=56.0,
y=201.0,
width=229.0,
height=37.0
)
self.image_image_1 = tk.PhotoImage(
file=relative_to_assets("image_1.png"))
image_1 = canvas.create_image(
617.0,
300.0,
image=self.image_image_1
)
canvas.create_text(
706.0,
574.0,
anchor="nw",
text=" -Jim Rohn",
fill="#000000",
font=("RobotoMono Regular", 14 * -1)
)
canvas.create_text(
433.0,
500.0,
anchor="nw",
text="“Reading is essential for those who seek to rise above the ordinary.” ",
fill="#000000",
font=("RobotoMono Regular", 14 * -1)
)
canvas.create_text(
84.0,
100.0,
anchor="nw",
text="Hello ZZZ!",
fill="#000000",
font=("RobotoMono Bold", 18 * -1)
)
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
label = tk.Label(self, text="This is page 2", 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()
if __name__ == "__main__":
app = SampleApp()
app.geometry("1056x724")
app.configure(bg="#FFFFFF")
app.mainloop()

You did not specify the parent when creating those widgets inside StartPage, so they will be children of the root window. The canvas is large enough to cover those pages so you cannot see them.
Specify the parent (self) when creating those widgets:
class StartPage(tk.Frame):
def __init__(self, parent, controller):
...
canvas = tk.Canvas(
self, # specify parent
bg="#FFFFFF",
...
)
...
button_1 = tk.Button(
self,
image=...
...
)
...
button_2 = tk.Button(
self,
image=...
...
)
...
button_3 = tk.Button(
self,
image=...
...
)
...
button_4 = tk.Button(
self,
image=...
...
)
...
button_5 = tk.Button(
self,
image=...
...
)
...

how to move my label's text position above the label's image Tkinter

I'm building a GUI for academic use. However, I have a main window with several changing frames. All frames have the same background image, but only the first one has the text above it - Start Page. The two others have their text up to the image. How can I solve it so the other two will be the same?
import tkinter as tk
# from tkinter import *
from tkinter import ttk, font, filedialog
from PIL import ImageTk, Image
import os
GUI_WIDTH, GUI_HEIGHT = 600, 900
# FONT_STYLE = font.Font(family="Segoe Script", size=10, weight=font.BOLD)
# FONT_STYLE = ("Segoe Script", 10)
BUTTONS_FONT_STYLE = ('Vardine', 11, 'bold')
TITLES_FONT_STYLE = ('Vardine', 21, 'bold')
class App(tk.Tk):
def __init__(self, *args, **kwargs):
tk.Tk.__init__(self, *args, **kwargs)
tk.Tk.iconbitmap(self, default='afeka logo 3.ico')
tk.Tk.wm_title(self, 'Detection of colon tumors through ultrasound images')
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, OverviewPage, LaunchPage):
frame = F(container, self)
self.frames[F] = frame
frame.grid(row=0, column=0, sticky='nsew')
self.show_frame(StartPage)
def show_frame(self, cont):
frame = self.frames[cont]
frame.tkraise()
def openDocxFile():
os.startfile("Final_Project.docx")
def uploadImage(event=None):
filename = filedialog.askopenfilename()
if filename:
print('Selected:', filename)
def adjustImage(event):
label = event.widget
width = event.width
height = event.height
image = Image.open('background1.png')
resizedImage = image.resize((width, height))
newImage = ImageTk.PhotoImage(resizedImage)
label.config(image=newImage)
label.image = newImage
class StartPage(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
self.image = tk.PhotoImage(file='background1.png')
label = ttk.Label(self, text='Start Page', image=self.image, font=TITLES_FONT_STYLE, relief='raised', compound='bottom')
label.bind('<Configure>', adjustImage)
label.pack(expand=True)
button_overview_page = tk.Button(self, text='overview', font=BUTTONS_FONT_STYLE,
command=lambda: controller.show_frame(OverviewPage))
button_overview_page.place(relx=0.35, rely=0.2, relwidth=0.3, relheight=0.1)
button_doc_file = tk.Button(self, text='docx file', font=BUTTONS_FONT_STYLE, command=openDocxFile)
button_doc_file.place(relx=0.35, rely=0.4, relwidth=0.3, relheight=0.1)
button_launch_page = tk.Button(self, text='launch page', font=BUTTONS_FONT_STYLE,
command=lambda: controller.show_frame(LaunchPage))
button_launch_page.place(relx=0.35, rely=0.6, relwidth=0.3, relheight=0.1)
button_exit = tk.Button(self, text='exit', font=BUTTONS_FONT_STYLE, command=quit)
button_exit.place(relx=0.35, rely=0.8, relwidth=0.3, relheight=0.1)
class OverviewPage(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
self.image = tk.PhotoImage(file='background1.png')
label = tk.Label(self, text="Overview Page", image=self.image, font=TITLES_FONT_STYLE, relief='raised',
compound='bottom')
label.bind('<Configure>', adjustImage)
label.pack(expand=True)
button_start_page = tk.Button(self, text='start page', font=BUTTONS_FONT_STYLE,
command=lambda: controller.show_frame(StartPage))
button_start_page.place(relx=0.35, rely=0.6, relwidth=0.3, relheight=0.1)
# button_launch_page = tk.Button(self, text='launch page', font=BUTTONS_FONT_STYLE,
# command=lambda: controller.show_frame(LaunchPage))
# button_launch_page.place(relx=0.35, rely=0.4, relwidth=0.3, relheight=0.1)
button_exit = tk.Button(self, text='exit', font=BUTTONS_FONT_STYLE, command=quit)
button_exit.place(relx=0.35, rely=0.8, relwidth=0.3, relheight=0.1)
class LaunchPage(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
self.image = tk.PhotoImage(file='background1.png')
label = tk.Label(self, text="Launch Page", image=self.image, font=TITLES_FONT_STYLE, relief='raised', compound='bottom')
label.bind('<Configure>', adjustImage)
label.pack(expand=True)
button_start_page = tk.Button(self, text='start page', font=BUTTONS_FONT_STYLE,
command=lambda: controller.show_frame(StartPage))
button_start_page.place(relx=0.35, rely=0.6, relwidth=0.3, relheight=0.1)
# button_overview_page = tk.Button(self, text='overview', font=BUTTONS_FONT_STYLE,
# command=lambda: controller.show_frame(OverviewPage))
# button_overview_page.place(relx=0.35, rely=0.3, relwidth=0.3, relheight=0.1)
button_upload_image = tk.Button(self, text='upload image', font=BUTTONS_FONT_STYLE,
command=lambda: [uploadImage(), button_launch_detection.config(text='launch detection', state='normal')])
button_upload_image.place(relx=0.35, rely=0.2, relwidth=0.3, relheight=0.1)
button_launch_detection = tk.Button(self, text='upload an image\nto enable launching', font=BUTTONS_FONT_STYLE)
button_launch_detection.place(relx=0.35, rely=0.4, relwidth=0.3, relheight=0.1)
button_launch_detection.config(state='disabled')
button_exit = tk.Button(self, text='exit', font=BUTTONS_FONT_STYLE, command=quit)
button_exit.place(relx=0.35, rely=0.8, relwidth=0.3, relheight=0.1)
app = App()
# Define geometry - size and position
# Center app window on the screen
screen_width = app.winfo_screenwidth()
screen_height = app.winfo_screenheight()
center_x = int(screen_width / 2 - GUI_WIDTH / 2)
center_y = int(screen_height / 2 - GUI_HEIGHT / 2)
app.geometry(f'{GUI_WIDTH}x{GUI_HEIGHT}+{center_x}+{center_y}')
# # Decrease factor to change window's transparency
# app.attributes('-alpha', 1)
# Create sizegrip
app.mainloop()
enter image description here2
enter image description here

AttributeError: 'LoginPage' object has no attribute 'menubar'

I am trying to create a web app with different pages. Till now I have created a log in page and home page. I have created each page as a frame. When I log in it directs me to home page. Until this the db and UI works well.
Now I would like to have different menubar for each frame.
My HomePage should have menubar with options 'Home' and 'Careers'.
To implement this I created a function for menbar in HomePage. I took the reference from Tkinter add menu bar in Frames
The code I executed is as given below
import tkinter as tk
from tkinter import ttk
import mysql.connector
#from tkinter import messagebox
class App(tk.Tk):
bg_img_path = "images\\bg9.png"
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.geometry("1500x750")
main_frame = tk.Frame(self, width=200, height=50, highlightbackground="black", highlightthickness=1,
background="#e6ffe6")
main_frame.pack(side='top', fill='both', expand='True')
main_frame.grid_rowconfigure(0, weight=1)
main_frame.grid_columnconfigure(0, weight=1)
self.bkgr_image = tk.PhotoImage(file=self.bg_img_path)
self.frames = {}
for F in (LoginPage,HomePage):
page_name = F.__name__
frame = F(main_frame, self)
self.frames[page_name] = frame
frame.grid(row=0, column=0, sticky='nsew')
self.show_frame("LoginPage")
def show_frame(self, container):
frame = self.frames[container]
frame.tkraise()
menubar = frame.menubar(self)
self.configure(menu=menubar)
class BasePage(tk.Frame):
def __init__(self, parent, controller):
super().__init__(parent)
self.controller = controller
self.root = parent
label_bkgr = tk.Label(self, image=controller.bkgr_image)
label_bkgr.place(x=0, y=0)
class LoginPage(BasePage):
def __init__(self, parent, controller):
super().__init__(parent, controller)
login_frame = tk.Frame(self, width=200, height=50,background="white")
login_frame.grid(row=400, column=20, padx=500, pady=250)
self.label_title = tk.Label(login_frame, text="Log In", font=("Helvetica", 40), bg="white")
self.label_title.grid(row=0, column=20, padx=10, pady=10)
self.label_username = tk.Label(login_frame, text="Username", font=("Helvetica", 20), bg="white")
self.label_username.grid(row=50, column=20, padx=10, pady=10)
self.entry_username = tk.Entry(login_frame, width=15, font=("Helvetica", 20),bd = 3)
self.entry_username.grid(row=50, column=30, padx=10, pady=10)
self.label_password = tk.Label(login_frame, text="Password", font=("Helvetica", 20), bg="white")
self.label_password.grid(row=60, column=20, padx=10, pady=10)
self.entry_password = tk.Entry(login_frame, width=15, font=("Helvetica", 20),bd = 3)
self.entry_password.grid(row=60, column=30, padx=10, pady=10)
self.login_button = tk.Button(login_frame, text="Log In", command=lambda: [self.submit(),self.controller.show_frame("HomePage")], font=("Helvetica", 20),
bg="white")
self.login_button.grid(row=70, column=25, padx=10, pady=10)
def submit(self):
self.u_name = self.entry_username.get()
self.p_word = self.entry_password.get()
employee = mysql.connector.connect(host="localhost", user="root", password="", database="edatabase")
cursor_variable = employee.cursor()
cursor_variable.execute("INSERT INTO login VALUES ('" + self.u_name + "','" + self.p_word + "')")
employee.commit()
employee.close()
#messagebox.showinfo("Log In", "Succesfull")
class HomePage(BasePage):
def __init__(self, parent, controller):
super().__init__(parent, controller)
label1 = ttk.Label(self, text='Home', font=("Helvetica", 20))
label1.pack(padx=10, pady=10)
def menubar(self):
menubar = tk.Menu(self.master)
pageMenu = tk.Menu(menubar)
pageMenu.add_command(label="Home")
pageMenu.add_command(label= "Careers")
return menubar
app = App()
app.mainloop()
The error I am getting is as follows:
C:\Users\write\AppData\Local\Programs\Python\Python39\python.exe "C:/Users/write/PycharmProjects/OOP trials/login_bg_img_trial2.py"
Traceback (most recent call last):
File "C:\Users\write\PycharmProjects\OOP trials\login_bg_img_trial2.py", line 107, in <module>
app = App()
File "C:\Users\write\PycharmProjects\OOP trials\login_bg_img_trial2.py", line 30, in __init__
self.show_frame("LoginPage")
File "C:\Users\write\PycharmProjects\OOP trials\login_bg_img_trial2.py", line 35, in show_frame
menubar = frame.menubar(self)
AttributeError: 'LoginPage' object has no attribute 'menubar'
Can anyone tell why does it shows attribute error? I am not able to understand the concept.

How do I enable .grid?

I wanted to position in the username and password such that it is next to each other. In order to achieve that I used the grid method but I keep getting an error that says:
_tkinter.TclError: cannot use geometry manager grid inside .!frame.!adminlogin.!frame which already has slaves managed by pack.
Is there a way I can let it use even grid?
import tkinter as tk
from tkinter import font as tkfont
import PIL.Image
from PIL import ImageTk
from tkinter import *
import tkinter.font as font
import sqlite3, hashlib
from datetime import date
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
self.geometry ("1024x768")
container = tk.Frame(self)
container.pack(fill="both", side= 'top',expand=True)
container.grid_rowconfigure(0, weight=1)
container.grid_columnconfigure(0, weight=1)
self.frames = {}
for F in (StartPage, StudentLogin, AdminLogin):
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.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
frame = tk.Frame(self, width = 1024, height = 768, bg="teal")
frame.pack(fill="both", expand=True, side="top")
label = tk.Label(frame, text="WELCOME", font=controller.title_font)
label.pack(side="top", fill="x", pady=50)
button1 = tk.Button(frame, text="Admin Login",
command=lambda: controller.show_frame("AdminLogin"), width = 50, height=10, font=30, bg='powder blue')
button2 = tk.Button(frame, text="Student Login",
command=lambda: controller.show_frame("StudentLogin"), width=50, height=10, font=30, bg='powder blue')
button1.pack(pady=10)
button2.pack(pady=10)
class AdminLogin(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
self.controller = controller
frame = tk.Frame(self, width = 1024, height = 768, bg='teal')
frame.pack(fill="both", side ="top", expand=True)
label = tk.Label(frame, text="Enter username and password to login", font=controller.title_font)
label.pack(side="top", fill="x", pady=30, padx =10)
userLabel = tk.Label(frame, text = "Enter Username: ", font=50)
userLabel.pack(padx=10, pady=10)
userEntry = tk.Entry(frame)
userEntry.pack(padx=10, pady=10)
passwordL = tk.Label(frame, text = "Enter Password: ", font=50)
passwordL.pack(padx=10, pady=10)
passEntry = tk.Entry(frame, show="*")
passEntry.pack(padx=10, pady=10)
button = tk.Button(frame, text="Back",
command=lambda: controller.show_frame("StartPage"), bg='powder blue')
button.pack()
class StudentLogin(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
self.controller = controller
frame = tk.Frame(self, width = 1024, height = 768, bg='teal')
frame.pack(fill="both", side ="top", expand=True)
label = tk.Label(frame, text="Enter username and password to login", font=controller.title_font)
label.pack(side="top", fill="x", pady=30, padx =10)
button = tk.Button(frame, text="Back",
command=lambda: controller.show_frame("StartPage"), bg='powder blue')
button.pack()
if __name__ == "__main__":
app = SampleApp()
app.mainloop()

Unfortunately you cannot mix both the pack and grid methods. You have to only pick one, which you will use throughout that master. Pack is easier to use, but with grid you have more control over where your widgets are going to be displayed in the window. (I would have done this as a comment to your post, not an answer, but i do not have enough reputation to do so) I hope this helps :)

Tkinter: Create an homepage look like

I'd like to create for my GUI an homepage like look, I've manege to arrive at this point, but now I'm little stuck. What I'd like to achieve is change the bottom_box when clicking the button that link to Page One or Page Two.
Thanks for your help!
EDIT I've worked on it a little bit and I've arrived at this point. When running my code now I get this error :
"Exception in Tkinter callback
Traceback (most recent call last):
File "C:\Program Files (x86)\Python38-32\lib\tkinter_init_.py", line 1883, in call
return self.func(*args)
File "C:/folder/01.py", line 17, in
button1 = tk.Button(container, text="Go to Page One", command=lambda: controller.show_frame("PageOne"))
NameError: name 'controller' is not defined!
This is my edited code
import tkinter as tk
from PageOne import PageOne
from PageTwo import PageTwo
class MainApp(tk.Frame):
def __init__(self, parent, *args, **kwargs):
tk.Frame.__init__(self, parent, *args, **kwargs)
self.parent = parent
###MENU FRAME
left_frame = tk.Frame(root, borderwidth=1, bg= "white", relief="solid", highlightthickness=2)
left_frame.pack(side="left", expand=False, fill="y")
right_frame = tk.Frame(root, borderwidth=1, bg= "white", relief="solid", highlightthickness=2)
right_frame.pack(side="right", expand=True, fill="both")
container = tk.Frame(left_frame, borderwidth=1, bg= "white", relief="solid")
container.pack(expand=True, fill="both", padx=5, pady=5)
button1 = tk.Button(container, text="Go to Page One", command=lambda: controller.show_frame("PageOne"))
button1.pack(padx=20, pady=20)
button2 = tk.Button(container, text="Go to Page Two", command=lambda: controller.show_frame("PageTwo"))
button2.pack(padx=20, pady=20)
###TOP
top_box = tk.Frame(right_frame, borderwidth=1, bg= "white", relief="solid")
top_box.pack(expand=True, fill="both", padx=10, pady=10)
label_top = tk.Label(top_box, text="Title Logo", bg= "white")
label_top.pack()
###BOTTOM
bottom_box = tk.Frame(right_frame, borderwidth=1, bg= "green", relief="solid")
bottom_box.pack(expand=True, fill="both", padx=10, pady=10)
label_bott = tk.Label(bottom_box, text=" Logo", bg= "white")
self.frames = {}
for F in (PageOne, PageTwo):
page_name = F.__name__
frame = F(parent=bottom_box, controller=self)
self.frames[page_name] = frame
frame.grid(row=0, column=0, sticky="nsew")
self.show_frame("StartPage")
def show_frame(self, page_name):
frame = self.frames[page_name]
frame.tkraise()
if __name__ == "__main__":
root = tk.Tk()
root.geometry("1200x650")
MainApp(root).pack(side="top", fill="both", expand=True)
root.mainloop()
Page 1
import tkinter as tk
from tkinter import font as tkfont
class PageOne(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
self.controller = controller
label_pg1 = tk.Label(self, text="page 1", bg= "white")
if __name__ == "__main__":
app = SampleApp()
app.mainloop()
Page 2
import tkinter as tk
from tkinter import font as tkfont
class PageTwo(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
self.controller = controller
label_pg2 = tk.Label(self, text="page 2", bg= "white")
if __name__ == "__main__":
app = SampleApp()
app.mainloop()