11. Graphical User Interface

In Python you don’t have to just use a text display and with a little bit of more complex coding you can create a GUI (Graphical User Interface) to make programs that look professional. You can add images, labels, buttons and all sorts to develop fancier-looking programs. This post will demonstrate the basic features of Python’s built-in GUI named tkinter (as a football fan I remember it in my head by calling it ‘Tkinter Milan’… but that’s just me!)

Sections covered in this post:

  • Creating the GUI window
  • Window background, size and title
  • Adding labels, data entry boxes and buttons
  • Message Boxes
  • Clicking Buttons
  • Placing components
  • Adding images

Creating the GUI window

First thing in creating a GUI is to 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 you could call it ‘box’ or whatever you like:

gui1

If you ran this code it will create a blank window like this:

gui2.PNG

 

Window background, title and size

Three important things that you will want to set straight away are the size of the window, the title that appears at the top and a background colour. Using the variable that you set up above you can easily configure these features:

gui3

The .geometry(“numberxnumber”) 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 = “colour”) command sets the window background. For a full list of the different colours you can use with tkinter look here.

The three lines above would display the following window:

gui4

Here is another code example of a blank window:

gui5

And the widow itself:

gui

 

Adding labels, data entry boxes and buttons

Now let’s add some content to our empty windows!

Labels

gui7

The code above seems long but I have broken it down into what each component does. I have saved my label into a variable called ‘label1’. Make sure that you choose appropriate label names, especially if you will be having lots of labels in your program.

Once you have created any ‘widget’ (GUI feature) in tkinter on Python then you need to ‘pack’ it into the program, just like you would pack an item into a lunchbox or suitcase.

gui8

You also need to use the following code to keep the different labels and buttons that you use displayed within the window:

gui1.PNG

The code above would create the following label:

gui9

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). Check out all of the colours available in tkinter here.

Entry Boxes

gui10

The code above creates an entry box (to write data in) and saves it into a variable named textbox1. Remember that you need to ‘pack’ each widget that you create in the order that you want it to be displayed (and add window.mainloop() last):

gui11

The code above would look like this once packed with my label too:

gui12

If you want to use any data that has been written in the entry box then you use .get() command, such as:

gui15

This code would get the data written into textbox1 – turn it into an integer value (because in this example I want to perform a calculation on it later) – and then save the data into a variable called usernum.

If you put this code into your program as it is then it would only get the data from the text box at the beginning when there is nothing there! Check the ‘Clicking Buttons’ section below for how to grab data when a button is clicked.

Buttons

gui13

The above code creates a button and saves it into a variable named ‘button1’.

The command part is very important as it creates a name for the action of when the button is clicked. I have saved the command as ‘WhenPressed’ so that I can later create a subroutine for when the button is pressed (see below in the Clicking Buttons section).

Remember to ‘pack’ your widgets in the order you want them displayed:

gui16

So far this would show:

gui17

Message Boxes

Below are three examples of message box commands in tkinter. The first string in the brackets denotes the title of the message box and the second part displays the message itself.

gui19

And below is how they would appear in-program:

gui20

With message boxes that have more than one option you will want to program different things to occur depending on the response, such as:

gui21

Clicking Buttons

So there’s no point creating buttons and then not having them do anything when they are clicked! You need to give a name to the actual action of the button being clicked. I have done this in the code earlier when I wrote command = WhenPressed, here is my button code again:

gui13

I have assigned the name WhenPressed to the action of the button being clicked. This allows me to then create a subroutine for what should happen when the button is clicked (the name of the subroutine must be the same as the command on the button):

gui14

So to clarify, I gave the name ‘WhenPressed’ to the action of button1 being pressed (the command).  I then created a subroutine called WhenPressed. Everything that happens within that subroutine will only occur when my button1 is pressed.

In this example, when my button is clicked I take the contents of textbox1 using the .get() command and save it into a variable called ‘usernum’ – I also use the int command to turn the contents into an integer value because I am performing a calculation on it. I then display a message box that has the title ‘Squared Numbers’ and shows a message of the square number of the number the user entered. Here it is in action:

gui18

The Place command

Rather than pack each component on top of each other in turn, you can use the .place() command to choose the exact co-ordinates where the label / button should be. For example:

gui2

In my example I have ‘packed’ the first three labels then ‘placed’ the two buttons:

gui3

Using Images

To display an image it must first be saved as a .gif file. 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 writing.

gui4

The full name you have saved the file as must be the string in the first line. Such as “apple.gif” or “Don_Draper.gif”. You must include the .gif in the file name. You can call the label and photo whatever you like, I have named them ImageLabel and photo1 for ease.

 

GUI not working? Tick off these common errors:

Practice Tasks for Graphical User Interfaces