2

I'm new to tkinter and need help to try make a layout for my tkinter program, but I just can't seem to figure out how to make it work. I want to have the layout to be somewhat like this.

What I ended up with instead was something like this. The canvas doesn't seem to be a rectangle and doesn't display the entire grid, and I can't seem to get the vertical spacing correct. My tkinter code is somewhat as follows:

GRID_HEIGHT = 60
GRID_WIDTH = 140
TILE_SIZE = 7
TILE_DISTANCE = 1


grid = []
Window = tk.Tk()
Window.geometry(f'{int(GRID_WIDTH*TILE_SIZE*1.2+300)}x{int(GRID_HEIGHT*TILE_SIZE*1.2)}')

canvas = tk.Canvas(Window, width=GRID_WIDTH*TILE_SIZE, height=GRID_HEIGHT*TILE_SIZE)
canvas.place(x = 5, y = 5, width=GRID_WIDTH*TILE_SIZE, height=GRID_HEIGHT*TILE_SIZE)

for i in range(GRID_HEIGHT):
    grid.append([])
    for j in range(GRID_WIDTH):
        grid[i].append(Node(i,j,VACANT,canvas.create_rectangle(i*TILE_SIZE,j*TILE_SIZE,(i+1)*TILE_SIZE,(j+1)*TILE_SIZE,fill="WHITE",outline="Black",width=2)))
        canvas.tag_bind(grid[i][j].obj,'<Button-1>', pogclick)

canvas.itemconfigure(grid[posx//TILE_DISTANCE][posy//TILE_DISTANCE].obj,fill="RED")

sliderframe = tk.Frame(Window)
sliderframe.pack()

slider = ttk.Scale(sliderframe, from_=-90,to_=90,command=slider_change)
sliderval = slider.get()
slider.pack(side=tk.TOP)
slider_label = ttk.Label(sliderframe,text=f'{int(slider.get())}')
slider_label.pack(side=tk.BOTTOM)
slider_time = time.time()

infobox = tk.Text(Window, height=3)
infobox.pack(expand=True)

buttonframe = tk.Frame(Window)
buttonframe.pack()

measure_button = ttk.Button(buttonframe, text="Measure", command= lambda: change_mode(MEASURING), state= DISABLED)
measure_button.pack(expand=True)

move_button = ttk.Button(buttonframe, text="Move", command= lambda: change_mode(MOVING))
move_button.pack(expand=True)

reset_button = ttk.Button(buttonframe, text="Reset", command= reset_board)
reset_button.pack(expand=True)

If anyone has any suggestions, please let me know. Thank you :)

peanutt
  • 21
  • 1
  • I'd suggest using the grid layout manager for this project. Your indended GUI has two main sections (left/right). Then the right hand side has 3/4 widgets (3/4 rows), use the tk.Frames widget to display these widgets. Grid can also take account of resizing the display. – scotty3785 Nov 14 '22 at 16:00
  • For the grid issue, the for loop should be `for i in range(GRID_WIDTH)` and `for j in range(GRID_HEIGHT)` instead. – acw1668 Nov 14 '22 at 16:13

0 Answers0