0

I'm implementing a GUI with Tkinter following this topic: Switch between two frames in tkinter

Trying to adapting it to my problem:

This is the controller:

class App(tk.Tk):

    def __init__(self, *args, **kwargs):
        tk.Tk.__init__(self, *args, **kwargs)
        self.title('VOICED/UNVOICED SPEECH DETECTION')
        self.resizable(RESIZABLE, RESIZABLE)
        self.geometry(str(WIDTH_WINDOW) + 'x' + str(HEIGHT_WINDOW))
        self.configure(bg=BACK_GROUND_COLOR)
        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 (HomePage, MenuPage, GraphicPage):
            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("HomePage")

    def show_frame(self, page_name):
        '''Show a frame for the given page name'''
        frame = self.frames[page_name]
        frame.tkraise()

This is the home page that shows the lateral bar:

enter image description here

And the corresponding code:

class HomePage(tk.Frame):
def __init__(self, parent, controller):
    tk.Frame.__init__(self, parent)
    self.controller = controller
    self.bg = BACK_GROUND_COLOR

    label = tk.Label(self, text="This is the start page", font=controller.title_font)
    label.pack(side="top", fill="x", pady=10)

    # -----------ROOT WINDOWS-------------

    self.configure(bg=BACK_GROUND_COLOR)
    self.position = 0

    # ----------Menu Bar-------------------------

    self.menu_frame = tk.Frame(master=self, height=HEIGHT_WINDOW, width=50,
                               borderwidth=5, relief='groove', highlightbackground="black",
                               highlightcolor="black", highlightthickness=1, bg=BACK_GROUND_COLOR).place(x=0, y=0)
    # Menu Button
    self.menu_img = tk.PhotoImage(file='frontend/Widget/icons/menu.png')
    self.menu_button = tk.Button(master=self.menu_frame, image=self.menu_img,
                                 height=25, width=25,
                                 command=lambda: controller.show_frame("MenuPage"),
                                 bg=BACK_GROUND_COLOR).place(x=10, y=10)

    # Back Button
    self.back_img = tk.PhotoImage(file='frontend/Widget/icons/back.png')
    self.back_button = tk.Button(master=self.menu_frame, image=self.back_img, height=25, width=25,
                                 bg=BACK_GROUND_COLOR).place(x=10, y=46)

    # Home Button
    self.home_img = tk.PhotoImage(file='frontend/Widget/icons/home.png')
    self.home_button = tk.Button(master=self.menu_frame, image=self.home_img, height=25, width=25,
                                 bg=BACK_GROUND_COLOR).place(x=10, y=82)

When I click the menu button (the first in the lateral bar), I obtain the menu option (That I called MenuPage):

enter image description here

And the corresponding code:

    class MenuPage(tk.Frame):
        def __init__(self, parent, controller):
            tk.Frame.__init__(self, parent)

            self.controller = controller
            self.bg = BACK_GROUND_COLOR

            # --------------------------------------------------toolbar--------------------------------------

            self.toolbar_frame = tk.Frame(master=self, height=70, width=WIDTH_WINDOW - 54,
                                          borderwidth=5, relief='groove', highlightbackground="black",
                                          highlightcolor="black",
                                          highlightthickness=1, bg=BACK_GROUND_COLOR).place(x=51, y=0)

            self.button_graphics_img = tk.PhotoImage(file='frontend/Widget/icons/graphic.png')
            self.button_graphic = tk.Button(master=self, text='Test/Train',
                                            image=self.button_graphics_img, height=25, width=25, bg=BACK_GROUND_COLOR,
                                            command=lambda: controller.show_frame("GraphicPage")).place(x=75, y=5)

            self.label_graphic = tk.Label(master=self, text='Plot Parameters',
                                          height=0, width=12, bg=BACK_GROUND_COLOR).place(x=55, y=40)

As you can notice, when I click on the menu button the lateral frame disappears. This is because in the MenuPage there aren't the methods of the lateral bar, but trying to put it also in the MenuPage, the buttons (back arrow, home) don't work. So I don't get how to hold fixed the lateral bar for all my pages and make sure that the buttons do their job.

Any suggestions will be appreciated.

Thanks in advance

UPDATE:

By placing the sidebar in the Main Windows, I solved the fact that the sidebar disappeared when I opened the menu.

The other problem is:

How can I do with the back arrow to come back to the previous Frame? For Instance, if I open another page with a button in the MenuPage, and then I'd want to come back to from that page to the MenuPage, how should I do? I've already tried to re-place the buttons in the page opened from menu changing the command to open the previous page (putting lambda: controller.show_frame("MenuPage") ) but doesn't works.

  • You need to put the Menu Page on your Main Window, it would be the app. then place your pages beside them. – Thingamabobs May 29 '20 at 15:01
  • Thank you, in this way I solved a part of my problem. Another problem is: How can I do with the back arrow to come back to the previous Frame? For Instance, if I open another page with a button in the MenuPage, and then I'd want to come back to from that page to the MenuPage, how should I do? I've already tried to re-place the buttons in the page opened from menu but doesn't works. – simone campisi May 30 '20 at 07:58
  • Not sure what happens in your program. You added the Buttons and the Frame of MenuPage to app ? Not the Class just the widgets right? – Thingamabobs May 30 '20 at 08:17
  • Your buttons stays now how intended while switching frames, right? – Thingamabobs May 30 '20 at 08:19
  • Maybe you need to configure the Buttons on HomePage and global the Buttons, so everything is known when you define the Buttons. But becareful, after you global a var you cant take the var for other widgets anymore or it will be messed up. – Thingamabobs May 30 '20 at 08:24
  • Yes I added the frame of the sidebar and the buttons (back, home, menu) also in the class that represent the page opened, changing the command to come back to previous frame. – simone campisi May 30 '20 at 08:30
  • Now, I re-tried and it seems works, but I hoped to find a better way to do it, because, in this way I have much duplicated code. In fact in each class I have to re-put the widget of the side-bar – simone campisi May 30 '20 at 08:32
  • Yes the buttons stays now how intended while switching frames – simone campisi May 30 '20 at 08:36
  • the app is your main window it should stay there all the time, normally you dont have to put the widgets again and again, except you place your pages over the menu. But I guess you need to config the buttons in your first page, cause all args are known there, so you need to global the buttons for configure them. – Thingamabobs May 30 '20 at 08:39
  • What do you mean global the buttons to configure them? – simone campisi May 30 '20 at 15:30
  • you can global your buttons, so they will be known everywhere in your code. You need to write a single line above global Name_of_Button to do it. – Thingamabobs May 30 '20 at 15:58

0 Answers0