Python, tkinter: How do I display an image before I ask for user input?

Question

I am working on a project that needs to show an image, then proceed to ask the user for an input to define the distance of a specific point noted in the image. With the code I have now, it will only display the image after the user input is complete. How do I make the image appear before I ask the user for input?

Image: image to display before asking for user input

Current Code:

# File: farmer_john_field
# Author: Elijah Cherry
# Course: CS-1010
# Original Problem: Draw specified image and calculate area of darkened region

from tkinter import *
from tkinter import ttk
import math

root = Tk()
win = Canvas(root, width = 500, height = 500)
win.grid()

def main():
    def display_image():
        # point a = 200,200
        # point b = 300,200
        # point c = 300,300
        # point d = 200,300

        # points move clockwise from top left (north west) quadrant

        # rectangle to fill rear area
        rectangle_back = win.create_rectangle (200,200,  300,300, fill="gray")

        # circles will be placed by top left corner and bottom right corner
        circle_a = win.create_oval (200-50, 200-50,   200+50, 200+50, fill="white")
        #                           a  xtl, a  ytl    a  xbr  a  ybr
        circle_b = win.create_oval (300-50, 200-50,   300+50, 200+50, fill="white")
        #                           b  xtl, b  ytl    b  xbr  b  ybr
        circle_c = win.create_oval (300-50, 300-50,   300+50, 300+50, fill="white")
        #                           c  xtl, c  ytl    c  xbr  c  ybr
        circle_d = win.create_oval (200-50, 300-50,   200+50, 300+50, fill="white")
        #                           d  xtl, d  ytl    d  xbr  d  ybr

        # rectangle outline
        rectangle_outline = win.create_rectangle (200,200,  300,300, outline="gray")

        # texts (labels for points a b c d)
        text_a = win.create_text (200,200, anchor="se", text="A", fill="black")
        text_b = win.create_text (300,200, anchor="sw", text="B", fill="black")
        text_c = win.create_text (300,300, anchor="nw", text="C", fill="black")
        text_d = win.create_text (200,300, anchor="ne", text="D", fill="black")

    display_image()

    def calcn():
        # collect length information
        length = float(input("Enter length of one side of the square ABCD: "))
        radius = (length/2)
        dark_area_result = math.pi * radius**(2)
        print ("Area of shaded region =","{:0.2f}".format(dark_area_result))

    calcn()

main()

Answer 1

Don't use input as it blocks the thread(main thread which the GUI uses) while it waits for the input. Instead, use Entry as the input , and Label as the print as this is a GUI anyway:

# File: farmer_john_field
# Author: Elijah Cherry
# Course: CS-1010
# Original Problem: Draw specified image and calculate area of darkened region

from tkinter import *
from tkinter import ttk
import math

root = Tk()
win = Canvas(root, width = 500, height = 500)
win.grid()

def main():
    def display_image():
        # point a = 200,200
        # point b = 300,200
        # point c = 300,300
        # point d = 200,300

        # points move clockwise from top left (north west) quadrant

        # rectangle to fill rear area
        rectangle_back = win.create_rectangle (200,200,  300,300, fill="gray")

        # circles will be placed by top left corner and bottom right corner
        circle_a = win.create_oval (200-50, 200-50,   200+50, 200+50, fill="white")
        #                           a  xtl, a  ytl    a  xbr  a  ybr
        circle_b = win.create_oval (300-50, 200-50,   300+50, 200+50, fill="white")
        #                           b  xtl, b  ytl    b  xbr  b  ybr
        circle_c = win.create_oval (300-50, 300-50,   300+50, 300+50, fill="white")
        #                           c  xtl, c  ytl    c  xbr  c  ybr
        circle_d = win.create_oval (200-50, 300-50,   200+50, 300+50, fill="white")
        #                           d  xtl, d  ytl    d  xbr  d  ybr

        # rectangle outline
        rectangle_outline = win.create_rectangle (200,200,  300,300, outline="gray")

        # texts (labels for points a b c d)
        text_a = win.create_text (200,200, anchor="se", text="A", fill="black")
        text_b = win.create_text (300,200, anchor="sw", text="B", fill="black")
        text_c = win.create_text (300,300, anchor="nw", text="C", fill="black")
        text_d = win.create_text (200,300, anchor="ne", text="D", fill="black")


    def display_the_query():
        query_label = Label(root,
                        text="Enter length of one side of the square ABCD: ")
        query_entry = Entry(root)
        # to be able to track the entry text
        # . notation to attach it as an attribute
        query_entry.var = StringVar()
        # to attaching the attribute as the displayed text
        query_entry['textvariable'] = query_entry.var
        result_label = Label(root)
        # to actually track the input each time there's a difference
        # which essentially allows dynamically calculating the result
        query_entry.var.trace_add('write',
            lambda *_, var=query_entry.var, lbl=result_label: calcn(var, lbl))
        query_label.grid()
        query_entry.grid()
        result_label.grid()

    def calcn(var, result_label):
        user_input = var.get()
        if user_input:
            length = float(user_input)
            radius = length / 2
            dark_area_result = math.pi * radius**(2)
            result_label['text'] = "Area of shaded region = {:0.2f}".format(
                                                            dark_area_result)


    display_image()
    display_the_query()

main()
mainloop()

Answer 2

Your indentation was screwed up. I don't know if that was the problem or it happened when you posted the code, but this works for me

from tkinter import *
from tkinter import ttk
import math

root = Tk()
win = Canvas(root, width = 500, height = 500)
win.grid()

def display_image():

        # point a = 200,200
        # point b = 300,200
        # point c = 300,300
        # point d = 200,300

        # points move clockwise from top left (north west) quadrant

        # rectangle to fill rear area
    rectangle_back = win.create_rectangle (200,200,  300,300, fill="gray")

        # circles will be placed by top left corner and bottom right corner
    circle_a = win.create_oval (200-50, 200-50,   200+50, 200+50, fill="white")
        #                           a  xtl, a  ytl    a  xbr  a  ybr
    circle_b = win.create_oval (300-50, 200-50,   300+50, 200+50, fill="white")
        #                           b  xtl, b  ytl    b  xbr  b  ybr
    circle_c = win.create_oval (300-50, 300-50,   300+50, 300+50, fill="white")
        #                           c  xtl, c  ytl    c  xbr  c  ybr
    circle_d = win.create_oval (200-50, 300-50,   200+50, 300+50, fill="white")
        #                           d  xtl, d  ytl    d  xbr  d  ybr

        # rectangle outline
    rectangle_outline = win.create_rectangle (200,200,  300,300, outline="gray")

        # texts (labels for points a b c d)
    text_a = win.create_text (200,200, anchor="se", text="A", fill="black")
    text_b = win.create_text (300,200, anchor="sw", text="B", fill="black")
    text_c = win.create_text (300,300, anchor="nw", text="C", fill="black")
    text_d = win.create_text (200,300, anchor="ne", text="D", fill="black")


def calcn():

        # collect length information
        length = float(input("Enter length of one side of the square ABCD: "))
        radius = (length/2)
        dark_area_result = math.pi * radius**(2)
        print ("Area of shaded region =","{:0.2f}".format(dark_area_result))

display_image()
calcn()

Answer 3

Give your Tk() the command to display something:

after running your display_image() function, refresh your Tk() by doing this:

display_image()
root.update()