Python 11 - GUI
Graphical User Interface
In Python, you don’t have just to use a text display; you can create a GUI (Graphical User Interface) to make programs that look professional.
​
This page demonstrates the basic features of Python’s built-in GUI named tkinter.
​
You can add images, labels, buttons and data entry boxes to develop interactive programs.
​
Sections covered in this post:
​
Creating the Window
Firstly, import the tkinter command.
​
Then you must create a variable that stores this tkinter command.
In this example, I have named the variable window but it can be given any alternative name.
Running the code opposite will create a blank window like this:
Practice Task 1
Import tkinter and create a new window.
Example solution above
Window Background, Title and Size
Three essential things that you will want to set straight away are the size of the window, the title that appears at the top and background colour.
Using the variable that you set up earlier, you can easily configure these features:
The .geometry(“400x400”) command sets the size of the window in pixels. The first number is the width, and the second number is the height.
​
The .configure(background = “lightblue") command sets the window background. For a full list of the different colours you can use with tkinter, check here.
Here is another code example of a blank window:
Practice Task 2
Make the title of your window "Multiplication Program".
​
Set the window size to 450 by 250.
​
Change the background colour to your choice - use the list to see all options.
Example solution:
Labels
The code above seems long, but I have broken it down into what each component does.
The label must be saved into a variable, I have called mine label1.
Make sure that you choose appropriate label names, especially if you will be having lots of labels in your program.
​
Any object that you create will need to be packed into the program:
The final line of your program going forward must be window.mainloop()​
The default label background will be a grey colour, so if you have changed your window’s background earlier then you might want to set your label’s background as the same colour (or not, up to you).
All colours available in tkinter can be found here.
Practice Task 3
Create a label that reads "Enter two numbers to multiply together:".
​
Change the background colour of the label to match your window background colour.
Example solution:
Data Entry Labels
The code above creates a data entry box (to type data in) and saves it into a variable that I have named textbox1.
Remember that to pack each object in the order you want it displayed (and keep window.mainloop() last):
If you want to use data that has been entered in the entry box then you use .get():
In this example, I have used int() to turn the entry into an integer value because I want to perform a calculation on it later.
The entered data should be saved into a variable.
​
HOWEVER, If you put this code into your program as it is, then it would only get the data from the text box at the start of the program (when it is empty). Check the next section to see how to use this code when a button is clicked.
Practice Task 4
Create two data entry boxes.
​
Pack them on top of each other (we will move them later).
Example solution:
Buttons
The above code creates a button and saves it into a variable named button1.
​
The command part is very important as it creates a subroutine name for the action of when the button is clicked.
​
You must create the subroutine separately for what you want to happen when the button is clicked. I have named mine 'WhenPressed'.
​
This subroutine must be created above the button code in the program.
In this example, when the button is clicked, I take the contents of textbox1 using the .get() command and save it into a variable called usernum.
I then display a message box (check the next section for that) that has the title ‘Squared Numbers’ and show a message of the square number of the number the user entered.
​
Here it is in action:
Practice Task 5
Create a button with the text "Multiply".
​
Create a subroutine called When Pressed for when the button is clicked.
​
Inside the subroutine, get the value for the first text box and then get the value for the second text box. Remember to use the int command when you are getting the values.
​
Create a variable called total and add the two values together.
Example solution:
Message Boxes
To use a message box you must add a new import line at the start of your program.
​
The three main types of message box can be seen below:
The first string in the brackets is the title of the message box and, after the comma, the second string is the message itself.
Use an if statement directly after a multiple choice text box to determine what happens:
Practice Task 6
Import messagebox at the start of the program.
​
In the WhenPressed subroutine from the previous task display a message with the total variable. Use the image from the Buttons section to help you.
​
Use the showinfo message box to display the message.
Example solution:
Placing Objects
Use the .place() command to choose the exact co-ordinates where an object should be. For example:
In my example I have packed the first three labels then placed the two buttons:
Practice Task 7
Instead of .pack(), use the .place() command to choose exactly where to place your two text boxes and button so that the program looks better.
​
This will take trial and error to get perfect.
Example solution:
Adding Images
To use an image in Python, it must be saved as a .gif file and displayed within a label.
An easy way to save a picture as a .gif file is to convert it using Microsoft Paint (click File then Save as GIF Picture).
​
The image must also be saved in the same folder as the Python file you are using.
The full name you have saved the file as must be the string in the first line, such as “apple.gif”.
You must include .gif in the file name.
You can call the label and photo whatever you like, I have named them ImageLabel and photo1 for ease.
Practice Task 8
Add an image of a calculator to your program. It must be a .gif
​
Use the .place() command instead of .pack()
​
It should be a copyright free image.
​
You might need to resize the image using Paint first.
Example solution:
