I am trying to make a control panel GUI using customtkinter which essentially consits of different pages with different buttons, however when I go to a different page, the buttons aren't centered.
As you can see, the first page is centered:
However when I navigate to the Music Player, the buttons are aligned to the left for some reason:
When the Music Controls button is pressed, I delete all home screen widgets using
for widget in self.winfo_children():
widget.destroy()
And then I configure the columns using
self.grid_columnconfigure((0, 2), weight=1)
However, the buttons on the Music Player screen seem to be aligned to the left despite grid_columnconfigure
being set.
Here is the code:
import customtkinter
from PIL import Image
from time import strftime
customtkinter.set_default_color_theme("dark-theme.json")
playerOpen = False
class App(customtkinter.CTk):
def __init__(self):
super().__init__()
self.title("Cai's Bar Controls")
self.geometry("1024x600")
self.home_screen()
def home_screen(self):
for widget in self.winfo_children():
widget.destroy()
self.grid_columnconfigure((0, 3), weight=1)
global playerOpen
playerOpen = False
self.bullseye = customtkinter.CTkImage(light_image=Image.open("images/bullseye.png"),size=(100, 100))
self.lightbulb = customtkinter.CTkImage(light_image=Image.open("images/lightbulb.png"),size=(100, 100))
self.microphone = customtkinter.CTkImage(light_image=Image.open("images/cog.png"),size=(100, 100))
self.play = customtkinter.CTkImage(light_image=Image.open("images/play.png"),size=(100, 100))
self.nexttrack = customtkinter.CTkImage(light_image=Image.open("images/next.png"),size=(100, 100))
self.previoustrack = customtkinter.CTkImage(light_image=Image.open("images/previous.png"),size=(100, 100))
self.house = customtkinter.CTkImage(light_image=Image.open("images/home.png"),size=(100, 100))
self.power = customtkinter.CTkImage(light_image=Image.open("images/power.png"),size=(100, 100))
self.quit = customtkinter.CTkImage(light_image=Image.open("images/quit.png"),size=(100, 100))
self.playlist = customtkinter.CTkImage(light_image=Image.open("images/playlist.png"),size=(100, 100))
self.singalongindiehits = customtkinter.CTkImage(light_image=Image.open("images/singalongindiehits.jpg"),size=(200, 200))
self.the80shits = customtkinter.CTkImage(light_image=Image.open("images/80shits.jpg"),size=(200, 200))
self.massivedancehits = customtkinter.CTkImage(light_image=Image.open("images/massivedancehits.jpg"),size=(200, 200))
self.label = customtkinter.CTkLabel(self, text="Cai's Bar Controls", fg_color="transparent", font=("Roboto", 75, 'bold'))
self.label.grid(row=0, column=0, padx=20, pady=20, columnspan=4)
self.clock = customtkinter.CTkLabel(self, text="Time", fg_color="transparent", font=("Roboto", 150))
self.clock.grid(row=1, column=0, padx=20, pady=20, columnspan=4)
self.music_controls = customtkinter.CTkButton(self, text="Music Controls", command=self.open_music_controls, image=self.play, width=200, height=200, compound='top')
self.music_controls.grid(row=2, column=0, padx=20, pady=20)
self.dart_counter = customtkinter.CTkButton(self, text="Dart Counter", command=self.open_dart_counter, image=self.bullseye, width=200, height=200, compound='top')
self.dart_counter.grid(row=2, column=1, padx=20, pady=20)
self.karaoke = customtkinter.CTkButton(self, text="Settings", command=self.open_karaoke, image=self.microphone, width=200, height=200, compound='top')
self.karaoke.grid(row=2, column=2, padx=20, pady=20)
self.light_controls = customtkinter.CTkButton(self, text="Light Controls", command=self.open_light_controls, image=self.lightbulb, width=200, height=200, compound='top')
self.light_controls.grid(row=2, column=3, padx=20, pady=20)
self.time()
def time(self):
string = strftime('%#I:%M %p')
self.clock.configure(text=string)
self.clock.after(1000, self.time)
def open_music_controls(self):
for widget in self.winfo_children():
widget.destroy()
self.grid_columnconfigure((0, 2), weight=1)
self.label = customtkinter.CTkLabel(self, text="Music Controls", fg_color="transparent", font=("Arial", 75))
self.label.grid(row=0, column=0, padx=20, pady=20, columnspan=3)
self.previous = customtkinter.CTkButton(self, text="", command=self.previous_track, image=self.previoustrack, width=200, height=200, compound='top', font=("Arial", 25))
self.previous.grid(row=1, column=0, padx=20, pady=20)
self.pause = customtkinter.CTkButton(self, text="", command=self.play_pause, image=self.play, width=200, height=200, compound='top', font=("Arial", 25))
self.pause.grid(row=1, column=1, padx=20, pady=20)
self.skip = customtkinter.CTkButton(self, text="", command=self.next_track, image=self.nexttrack, width=200, height=200, compound='top', font=("Arial", 25))
self.skip.grid(row=1, column=2, padx=20, pady=20)
self.home = customtkinter.CTkButton(self, text="", command=self.home_screen, image=self.house, width=50, height=50, compound='top', font=("Arial", 25))
self.home.grid(row=3, column=1, padx=20, pady=20)
self.library = customtkinter.CTkButton(self, text="", command=self.open_library, image=self.playlist, width=50, height=50, compound='top', font=("Arial", 25))
self.library.grid(row=3, column=2, padx=20, pady=20)
self.nowplaying = customtkinter.CTkLabel(self, text="Loading track...", fg_color="transparent", font=("Arial", 40))
self.nowplaying.grid(row=2, column=0, padx=20, pady=20, columnspan=3)
global playerOpen
playerOpen = True
The fourth column still has a weight of 1 so still takes up space, causing the widgets to appear aligned to the left. Set its weight to 0 when showing the music player:
def open_music_controls(self):
for widget in self.winfo_children():
widget.destroy()
self.grid_columnconfigure((0, 2), weight=1)
self.grid_columnconfigure(3, weight=0) # add this