tkinter canvas size and navigation toolbar issues

Question

In my Tkinter GUI widget, I want to place my plots in the plot area (plot frame). However, I have a few issues.

1. The plot frame doesn't cover the whole screen no matter how many columns I add to the widget. I want graphs as big as possible.

2. The graphs don't start from the top of the frame. But the text, which is a subplot with the axis('off'), starts from the top.

3. I can't set the navigation toolbar working to save the whole content of the plotframe.

I appreciate it if you make suggestions.

from tkinter import *
import matplotlib.pyplot as plt
from matplotlib.gridspec import GridSpec
from matplotlib.backends._backend_tk import NavigationToolbar2Tk
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg


def main ():
    root = Tk()
    w , h = root.winfo_screenwidth() , root.winfo_screenheight()
    root.geometry("%dx%d+0+0" % (w , h))
    root.resizable(width=True , height=True)
    root.title("Form")
    root.configure(bg='Dodgerblue4')
    root.state('zoomed')

    top_frame = Frame(root , bg='Dodgerblue4' ,borderwidth=2, bd=1, relief= SUNKEN, pady=10)
    frameX = Frame(root , bg='Dodgerblue4' ,borderwidth=2, bd=1 , relief=SUNKEN, padx = 15, pady = 10)
    frameY = Frame(root , bg='Dodgerblue4' ,borderwidth=2, bd=1 , relief=SUNKEN, padx = 15, pady = 10)
    submitframe = Frame(root , bg='Dodgerblue4' ,borderwidth=2, bd=1 , relief=SUNKEN)
    plotframe = Frame(root , bg='Dodgerblue4' ,borderwidth=2, bd=1 , relief=SUNKEN)
    # plotframe = Canvas(root , bg='Dodgerblue4' ,borderwidth=2, bd=1 , relief=SUNKEN)


    top_frame.grid(column=0, row=0, sticky="nsew", columnspan= 20)
    top_frame.grid_columnconfigure(0 , weight=1)
    frameX.grid(column=0, row=1, sticky="nsew", columnspan = 2, rowspan = 6)
    frameY.grid(column=0, row=7, sticky="nsew", columnspan = 2, rowspan = 16)
    submitframe.grid(column=2, row=1, sticky="nsew", rowspan = 22)
    submitframe.grid_rowconfigure(0 , weight=1)

    plotframe.grid(column=3, row=1, sticky="nsew", rowspan = 22, columnspan = 17 )
    plotframe.grid_rowconfigure(0 , weight=1)
    plotframe.grid_columnconfigure(0 , weight=1)

    label_top = Label(top_frame , text="Design Page" , font=('' , '15' , ''), bg='Dodgerblue4' ,  fg='white', justify=CENTER).grid(row=0, column=0,columnspan= 20)

   # ------------------------------------------Xs-------------------------------------------------------------------------
    X1 = Label(frameX, text='X1', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row=1, column=0, sticky = W)
    X2 = Label(frameX, text='X2', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row=2, column=0, sticky = W)
    X3 = Label(frameX, text='X3', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row=3, column=0, sticky = W)
    X4 = Label(frameX, text='X4', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row=4, column=0, sticky = W)
    X5 = Label(frameX, text='X5', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row=5, column=0, sticky = W)
    X6 = Label(frameX, text='X6', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row=6, column=0, sticky = W)
    # -------------------------------------------Ys--------------------------------------------------------------------
    label_spec = Label(frameY, text='the parameters', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row=0, column=0, columnspan = 2)
    Y1 = Label(frameY, text='Y1', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 1, column= 0, sticky = W)
    Y2 = Label(frameY, text='Y2', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 2, column= 0, sticky = W)
    Y3 = Label(frameY, text='Y3', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 3, column= 0, sticky = W)
    Y4 = Label(frameY, text='Y4', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 4, column= 0, sticky = W)
    Y5 = Label(frameY, text='Y5', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 5, column= 0, sticky = W)
    Y6 = Label(frameY, text='Y6', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 6, column= 0, sticky = W)
    Y7 = Label(frameY, text='Y7', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 7, column= 0, sticky = W)
    Y8 = Label(frameY, text='Y8', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 8, column= 0, sticky = W)
    Y9 = Label(frameY, text='Y9', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 9, column= 0, sticky = W)
    Y10 = Label(frameY, text='Y10', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 10, column= 0, sticky = W)
    Y11 = Label(frameY, text='Y11', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 11, column= 0, sticky = W)
    Y12 = Label(frameY, text='Y12', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 12, column= 0, sticky = W)
    Y13 = Label(frameY, text='Y13', fg='white', bg='Dodgerblue4', font=('' , '12' , ''), justify=CENTER).grid(row= 13, column= 0, sticky = W)
    submit_button = Button(submitframe, text='Submit', font=('' , '12' , ''), padx=10, relief=RIDGE, activebackground='green' , bg='orange' , bd=5).grid(row=0 , column=0 , rowspan=10 , ipady=10)


    x = [-100 , 100]
    y = [0 , 4]
    fig = plt.figure( facecolor='#104e8b' , edgecolor='k')
    gs = GridSpec(13 , 7)
    ax1 = fig.add_subplot(gs[0:8 , 0:5])
    ax1.plot(x , y , 'b-' , label=' Profile 1')
    plt.xlabel(' x1 (mm) ' , color='w')
    plt.ylabel(' y1 (mm)' , color='w')
    plt.legend(loc='lower left')

    ax2 = fig.add_subplot(gs[8:13 , 5:6])
    ax2.text(0.5 , 0.5 ,
             "The  Specifications: \n Y1 \n\n Y2, \n\n Y3, \n\n Y4, \n\n Y5,\n\n Y6, \n\n Y7, \n\n Y8, "
             "\n\n Y9,\n\n Y10, \n\n Y11, \n\n Y12, \n\n Y13",
             style='normal' , color='w' , fontsize=10 ,
             bbox={'facecolor': 'blue' , 'alpha': 0. , 'pad': 10}
             )
    ax2.axis('off')

    ax3 = fig.add_subplot(gs[10:13 , 0:5])
    ax3.plot(x , y , 'b-' , label=' Profile 2')
    plt.xlabel(' x2 (mm) ' , fontsize=10 , color='w')
    plt.ylabel(' y2 (mm)' , fontsize=10 , color='w')

    canvas = FigureCanvasTkAgg(fig , master=plotframe)  # A tk.DrawingArea.
    canvas.draw()
    canvas.get_tk_widget().grid(row=0 , column=0 ,  sticky='nsew')
    # toolbar = NavigationToolbar2Tk(canvas , plotframe)
    # toolbar.update()
    # canvas.get_tk_widget().grid(row=1 , column=0)
    # fig.tight_layout()

    root.mainloop()


if __name__ == '__main__':
    main()

Answer 1

1. the .grid() method is not doing what you think it does. Adding columns and rows does not necessarily expand the size of the widget since Tkinter always tries to pack your widgets in as small of a space as possible. To increase your figure size, simply add the parameter figsize=(x,y) when defining the fig variable. Adjust x and y to your liking.

2. You can bump the plot to the top of the frame by including the argument top=1 in the line gs = fig.add_gridspec(13, 7). I believe that the grid spec is trying to center the 13x7 grid, so the "top" of it isn't really at the top of the grid until you override it.

3. I'm not so sure about this answer, but This link seems to have the same issue and solves it by creating an empty frame, then embedding the widget and packing into that frame. However, it will be separate from your root() frame.

Your only issue now is that the text is a bit misaligned with the top of the plots. I would recommend adding verticalalignment='top' , and only placing it in row 0 to always place it at the top of the grid area.

To summarize, here are the two lines you need to replace to fix 1 and 2:

fig = plt.figure(facecolor='#104e8b', edgecolor='k', figsize=(16,16))

gs = fig.add_gridspec(13, 7,top=1)

to fix the text justification:

ax2 = fig.add_subplot(gs[0, 5:6])
ax2.text(0.5, 0.5,
             "The  Specifications: \n\n Y1 \n\n Y2, \n\n Y3, \n\n Y4, \n\n 
             Y5,\n\n Y6, \n\n Y7, \n\n Y8, "
             "\n\n Y9,\n\n Y10, \n\n Y11, \n\n Y12, \n\n Y13",
             style='normal', color='w', fontsize=10,
             bbox={'facecolor': 'blue', 'alpha': 0., 'pad': 10},
             verticalalignment='top')