1

I am trying to make a GUI that I can manage various sensors for my fish tanks, terrariums, vivariums, etc.

On my main page I have 2 buttons, "sensors" and "options". My issue is lying within the sensors tab. I am trying to create something that has two buttons on the bottom, and the top part being a scrollable list of my sensors. I have tried looking up my question different ways and have found multiple examples but none that quite solve what I am trying to do.

My goal is to have something like this:

Example:

Example

I have tried following examples using the Canvas and Frame feature but I can't get it to look like I want (scaling to window, having a row dedicated to sensor).

from tkinter import scrolledtext

class GUI(object):
    
    def __init__(self, root):
        
        self.root = root
        self.root.title('Sensors')
        
        windowWidth = 700
        windowHeight = 500
        
        # get the screen dimension
        screenWidth = root.winfo_screenwidth()   # Current monitor is 1920
        screenHeight = root.winfo_screenheight() # x 1080

        # find the center point
        centerX = int(screenWidth/2 - windowWidth / 2)
        centerY = int(screenHeight/2 - windowHeight / 2)

        # set the position of the window to the center of the screen
        root.geometry(f'{windowWidth}x{windowHeight}+{centerX}+{centerY}')
        root.resizable(False,False)
        
        ### On main menu
        self.sensors = tk.Button(root, text='Sensors',height=3, width=10, font=('Helvetica',15), borderwidth=5, command=self.Sensors)
        self.options = tk.Button(root, text='Options',height=3, width=10, font=('Helvetica',15), borderwidth=5, command=self.Options)
        
        
        ### In sensor menu
        self.addSensorBtn = tk.Button(root, text='Add Sensor')
        self.ReturnMenu = tk.Button(root, text="Return to Main Menu", font=('Helvetica'), command=self.MainMenu)
       
        self.frame = tk.Frame(root).grid(row=0,column=0)
        self.canvas = tk.Canvas(self.frame,bg='gray75')
        self.vsb = tk.Scrollbar(self.frame, orient='vertical', command=self.canvas.yview)
        
        self.MainMenu()
        
    def GridConfig(self):
        root.rowconfigure(0,weight=3)
        root.rowconfigure(1,weight=1)
        root.columnconfigure((0,2), weight=1)
        
    def MainMenu(self):
         self.GridConfig()
         self.RemoveAll()
         self.sensors.grid(column=0, row=1, sticky='NE')
         self.options.grid(column=2, row=1, sticky='NW')
         
    def Sensors(self) :
        self.RemoveAll()
        
        self.canvas.grid(column=0,row=0,columnspan=3,sticky='NEWS')
        self.vsb.grid(row=0, column=3, sticky='NSE')
        self.canvas.configure(yscrollcommand=self.vsb.set, scrollregion=self.canvas.bbox('all'))
        
        self.addSensorBtn.grid(column=2,row=1, sticky='NEWS')        
        self.ReturnMenu.grid(column=0, row=1,sticky='NEWS')
    
    def Options(self):
        self.RemoveAll()
        self.GridConfig()
        self.ReturnMenu.grid(column=1, row=1)
    
    def RemoveAll(self):
        self.vsb.grid_remove()
        self.canvas.grid_remove()
        self.addSensorBtn.grid_remove()
        self.sensors.grid_remove()
        self.options.grid_remove()
        self.ReturnMenu.grid_remove()
        
if __name__ == '__main__':
    root = tk.Tk()
    myGUI = GUI(root)
    root.mainloop()

The buttons I think I can figure out, it is just the formatting and adding and removing items. I am new to python so I am not sure if there is a better way to achieve my goal.

Clich3
  • 11
  • 4
  • What exactly is your question? The code you provided is extremely far away from what you want to achieve. Maybe you start with a much simpler project first? – Claudio Jun 14 '22 at 22:08
  • My question is within my code, in `def Sensors(self)`, I am struggling to figure out a way to implement a "row" with a label and 3 buttons, which, hypothetically, I can add/delete another "row" of which has a label and 3 buttons corresponding to it, which I can then scroll through. I think I am struggling most with finding a way to do this, while keeping the 2 buttons on the bottom fixed. I have tried going through examples and forum posts online but none that I could find helped get me closer to example I have above. – Clich3 Jun 15 '22 at 03:01
  • Check out: https://stackoverflow.com/questions/39573035/how-to-delete-entire-row-in-tkinter-grid-layout#39573663 and https://stackoverflow.com/questions/48693733/tkinter-deleting-rows-from-a-grid-dynamically . It is what you are looking for, isn't it? – Claudio Jun 15 '22 at 18:04

0 Answers0