Don't understand grid() in Tkinter

I know this is a bit of a broad question. I'm just starting out with Python and Tkinter and I'm building my first app. I have a few widgets done and a few more on the way but I can't seem to place them the way I want at all. Here's my code:

import tkinter
from tkinter import font
import tkinter as tk
import time
from threading import Thread
from PIL import Image, ImageTk

class Window(tk.Frame):
    def __init__(self, master=None):
        tk.Frame.__init__(self, master)               
        self.master = master

def update_timeText():
    current = time.strftime("%H:%M")
    seconds = time.strftime(":%S")
    currentDate=time.strftime("%a %e %B, %Y")
    timeText1.configure(text=current, fg='white', background='black')
    timeText1.grid(row=0,column=0, sticky='NW', padx=15, pady=15)
    timeText2.configure(text=seconds, fg='white', background='black')
    timeText2.grid(row=0, column=1, pady=17, sticky='NW')
    Date.configure(text=currentDate, fg='white', background='black')
    Date.grid(row=0, column=0, columnspan=3, sticky='NW', padx=20, pady=124, rowspan=2)  
    root.after(1000, update_timeText)

def update_Weather():
    picture = ImageTk.PhotoImage(picturePNG)
    weatherIcon.configure(image=picture, background='black')
    weatherIcon.grid(column=5, sticky='ne')
    weatherTemperature.configure(text=temperature, fg='white', background='black')
    weatherTemperature.grid(column=6, sticky='ne')
    root.after(100000, update_Weather)

root = tk.Tk()
root.title('Smart Mirror')
timeText1 = tk.Label(root, text="", font=("Opinio", 90, "bold"))
timeText2 = tk.Label(root, text="", font=("Opinio", 45, "bold"))
weatherTemperature=tk.Label(root, text="", font=("Roboto Condensed", 80))
weatherIcon=tk.Label(root, image="")
app = Window(root)

What I managed to get after hours of messing with the grid and Googling: Screenshot

What I'm trying to get: Screenshot2

I just can't seem to make any space horizontally inbetween the widgets. I know I'm asking for a lot but if someone could explain grid a bit instead of just posting an answer I'd be really grateful, since I've read a lot of information about it online and can't seem to get the gist of it at all.

1 answer

  • answered 2019-03-14 03:52 figbeam

    You create widgets as slaves to root instead of as slaves to the class Window(). This is confusing and makes the class dependant on that the main program creates some of the widgets that the Window() object will later configure.

    Assign row when you grid widgets, as @Henry Yik comments.

    Here is an example of how I would place the widgets:

    import tkinter as tk
    class Window(tk.Frame):
        def __init__(self, master=None):
            tk.Frame.__init__(self, master)               
            self.master = master
            self.configure(bg='thistle')    # To see where self is
            self.pack(expand=True, fill='both', padx=10, pady=10)
            self.columnconfigure(0, weight=1)   # Which column should change
                                                # when window size changes
            Date = tk.Label(self, text='19:38:25', fg='white', bg='black',
                                          font='-size 70')
            Date.grid(row=0, column=0, columnspan=3, sticky='NW', padx=20, pady=70, rowspan=2)  
            picture = tk.PhotoImage(file='sun.png')
            weatherIcon = tk.Label(self, image=picture, bg='black')
            weatherIcon.grid(row=0, column=5, sticky='NE')
            weatherIcon.image = picture     # Save a reference to the picture
            weatherTemperature = tk.Label(self, text='4°C', fg='white', bg='black',
                                          font='-size 70')
            weatherTemperature.grid(row=0, column=6, sticky='NE')
    root = tk.Tk()
    root.configure(background='tan')    # To see where root is
    app = Window(root)

    Does this explain any better?