Simple GUI App - Miles to Kilometers

This guide is how to build a basic Python app with a graphical user interface.

Start a new Python project called Miles to Kilometers.

Begin by importing everything from the Tkinter library:

from tkinter import *

Note:

Tkinter is Python's standard library for creating graphical user interfaces. It is included with most Python installations so does not require any additional installations.

Create a new variable called window and assign it to the Tk() class:

window = Tk()

This class is the main entry point for creating a GUI in Tkinter. When you call Tk(), it initializes a new Tkinter main application window

To keep the application running and to listen for events etc. we must call mainloop on our window object:

window.mainloop()

This should be the last call in our application as any additional code after this will not run, so the rest of our code will need to be placed before this line.

Give the window object a title, this will be displayed on the GUI window:

window.mainloop()

Set the size of the window:

window.minsize(width=300, height=200)

And add some padding:

window.config(padx=50, pady=50)

App so far:

from tkinter import *

window = Tk()
window.title("Miles to Kilometers Converter")
window.minsize(width=300, height=200)
window.config(padx=50, pady=50)

window.mainloop()

For our app, we want one input field where the user can enter a number of Miles and a label to go with it. A result display with a label before and after it, and a button to perform the calculation.

As you can see from the screenshot, the apps' contents are in three rows and three columns. We can use the grid() method from Tkinter to easily lay out our content.

First let's create the input field:

# Input
input_miles = Entry(width=7)
input_miles.grid(column=1, row=0)

Here we are using the Entry method from Tkinter which creates an input field, we are passing in a parameter of width=7 which will set the width of the input to seven characters wide. We are then assigning this input field to a variable called input_miles. We then call the grid method on this and pass in the position we want to place it. Column 1 will place it in the middle of our 3 columns as it uses 0 based indexing, row 0 will place it at the top in the first row.

Create a label to go with the input field:

#Input Label
label_miles = Label(text="Miles")
label_miles.grid(column=2, row=0)

The label method from Tkinter is used to create the label, and we pass in the required text. Again, use grid to set the position. We want it in the top row next to the input field, so this also needs to be in row 0. We want this to the right of our input field, so the last column in our three-column layout, so this will be column=2.

In the next row we want another label:

#Is equal to label
label_is_equal_to = Label(text="is equal to")
label_is_equal_to.grid(column=0, row=1)

Add the result field, this will also be a label:

#Result
result_kilometers = Label(text="0")
result_kilometers.grid(column=1, row=1)

Add another label to show Km:

#Km label
label_km = Label(text="Km")
label_km.grid(column=2, row=1)

Finally, add the button in the vcenter column of the last row:

#Calculate Button
calculate_button = Button(text="Calculate", command=button_clicked)
calculate_button.grid(column=1, row=2)

Here we use the button method from the Tkinter class. Pass in the text we want to be displayed on the button, and a command parameter with the name of the function we would like to be called when the button is pressed.

next, create the button_clicked function:

def button_clicked():
    miles = float(input_miles.get())
    kilometers = miles * 1.60934
    result_kilometers.config(text=f"{kilometers:.2f}")

Here we use the variables we assigned our components to, to access them. We call get() on input_miles (out input field) to get the number the user entered. Then pass in the result to the config method, which we call on result_kilometers (our results label), to display the result.

Here is the completed application:

from tkinter import *

def button_clicked():
    miles = float(input_miles.get())
    kilometers = miles * 1.60934
    result_kilometers.config(text=f"{kilometers:.2f}")

window = Tk()
window.title("Miles to Kilometers Converter")
window.minsize(width=300, height=200)
window.config(padx=50, pady=50)

# Input
input_miles = Entry(width=7)
input_miles.grid(column=1, row=0)

#Input Label
label_miles = Label(text="Miles")
label_miles.grid(column=2, row=0)

#Is equal to label
label_is_equal_to = Label(text="is equal to")
label_is_equal_to.grid(column=0, row=1)

#Result
result_kilometers = Label(text="0")
result_kilometers.grid(column=1, row=1)

#Km label
label_km = Label(text="Km")
label_km.grid(column=2, row=1)

#Calculate Button
calculate_button = Button(text="Calculate", command=button_clicked)
calculate_button.grid(column=1, row=2)

window.mainloop()