How do I resize tkinter widgets as window is resized?

Question

I'm new to python and I'm creating a countdown timer for an event with Python and I noticed that the image within the canvas doesn't fill up the entire screen on larger display's and the widgets don't resize when the window is shrunk. How do I fix this? Any help is appreciated. Thanks!

import datetime
import tkinter as tk
import winsound

def round_time(dt, round_to):
    seconds = (dt - dt.min).seconds
    rounding = (seconds + round_to / 2) // round_to * round_to
    return dt + datetime.timedelta(0, rounding - seconds, -dt.microsecond)


def ct():
    def count():
        now = round_time(datetime.datetime.now(), round_to=1)
        eh = datetime.datetime(2019, 3, 30, 20, 30)
        tte = eh - now
        canvas.itemconfig(label_cd, text=str(tte))
        root.after(50, count)

    count()


root = tk.Tk()

winsound.PlaySound('Sound1.wav', winsound.SND_ASYNC + winsound.SND_LOOP)
root.bind('<space>', lambda a: winsound.PlaySound(None, winsound.SND_PURGE))
root.bind('<s>', lambda a: winsound.PlaySound('Sound1.wav', winsound.SND_ASYNC + winsound.SND_LOOP))

root.geometry('1920x1080')
root.attributes('-fullscreen', True)
root.bind('<Escape>', lambda e: root.attributes("-fullscreen", False))
root.bind('<F11>', lambda z: root.attributes("-fullscreen", True))
root.title("Earth Hour Countdown!")
now = round_time(datetime.datetime.now(), round_to=1)
eh = datetime.datetime(2019, 3, 30, 20, 30)
tte = eh - now

canvas = tk.Canvas(root, height=1000, width=600, highlightthickness=0)
canvas.place(relheight=1, relwidth=1)

bg_img = tk.PhotoImage(file="new.gif")
bg_label = canvas.create_image((682.5, 384), image=bg_img)

cte_logo = tk.PhotoImage(file="cte1.gif")
cte_label = canvas.create_image((690, 120), image=cte_logo)

logo = tk.PhotoImage(file="eh60.gif")
logo_canvas = canvas.create_image((715, 590), image=logo)

label_msg = canvas.create_text((410, 300), text="Earth Hour Countdown:", font="Calibri 60 bold", fill="#CDCEDF")

label_cd = canvas.create_text((1080, 300), text=str(tte), font="Calibri 60 bold", fill="#CDCEDF")

ehtime_label = canvas.create_text((700, 400), text=("Earth Hour: " + eh.strftime("%d-%m-%Y %H:%M:%S")), font="Calibri 60 bold", fill="#CDCEDF")

ct()

root.mainloop()

Expected results: https://imgur.com/LkrbJa0
Result on larger display: https://imgur.com/MtAYSIs
Result when window is shrunk: https://imgur.com/bAjst6L

score 1 · Answer 1 · answered Mar 27 '19 at 18:33

For image re-sizing in Python, check out the Python Image Library (PIL). There are several existing posts on the use of PIL, which helped me to write the code below. With the screen dimensions acquired from the running platform and reference dimensions for "correctly" sized images, it is easy to calculate a re-sizing factor. Then the dimensions needed for the expanded/shrunk display can be obtained by applying this factor to the dimensions of the image at the reference screen size (in this case 270x185). The remainder of the code just scans a folder of the reference images (Assets_dir), opens them and resizes with PIL.Image and then saves the resized image to a new folder.

import PIL.Image

screen_width = root.winfo_screenwidth()
screen_height = root.winfo_screenheight()
width = 1920.0                                #  default screen width/height stored images are based on.
height = 1200.0
width_resize = screen_width/width             #  calculate resize factor needed to correctly display on current screen.
height_resize = screen_height/height

new_width = int(width_resize*270)
new_height = int(height_resize*185)

Assets_dir = os.getcwd() + '\\Assets\\'
files = list(os.scandir(Assets_dir))
for file in files:
    file_ext = file.name[-3:]
    file_basename = file.name[:-4]
    if file_ext == 'gif':
        temp_image = PIL.Image.open(Assets_dir + file.name)
        temp_image = temp_image.resize((new_width, new_height), PIL.Image.ANTIALIAS)
        temp_image.save(Assets_dir + r'/resize/' + file.name)

Thanks for the help! I couldn't get my application to work using this method though. Images are added to the "resize" folder I made but the photos don't change as the window changes. — agb2k, Mar 28 '19 at 14:29
Have the images which are added to the "resize" folder been transformed (do their properties reflect the proper change in pixel width/height?). Since images seem to have been processed, if there is no change in size something must be wrong with the acquisition of screen dimensions or calculation of resize factor. If the images have been properly resized, are you sure your application is now accessing the images in the resize folder instead of the original assets? — Mark Kastelic, Mar 28 '19 at 16:24
The images in the resize folder seem to be larger. I'm not really sure if I messed up. I'm kind of new to python. My code: https://docs.google.com/document/d/1CQLgLcuFevWlUs4zYNXD8xK1OsDqFDuiHJeyRJaALrU/edit?usp=sharing — agb2k, Mar 28 '19 at 17:03
It looks like your code is accessing the original image files. For example: bg_img = tk.PhotoImage(file="new.gif"). The transformed images are in the /resize directory, so you need the path to that image file: bg_img = tk.PhotoImage(file="./resize/new.gif") — Mark Kastelic, Apr 04 '19 at 21:22

How do I resize tkinter widgets as window is resized?

1 Answers1

Linked