Tkinter GUI

CREATE A GUI WITH TKINTER

WHAT IS TKINTER

Tkinter is a Python library designed to help you build a GUI (Graphical User Interface). By adding to your program Windows, Menu's, Icon and use of Pointers your program becomes much more user friendly, interesting and more fun than a simple text based program.

GETTING STARTED - IMPORTING TKINTER

Before you start creating a GUI with Tkinter you need to check if that platform you use to program in Python will run Python GUIs and the tkinter module. The standard Python Idle runs Tkinter with no additional changes needed. Through other Python editors such as Sublime Text you may have to run your code via the 'Command Prompt' (PC) or Terminal (MAC). To test if Tkinter works, type ' import tkinter' and run the program, you should not get any error messages.

NOTE: Some styling methods in tkinter do not work as good on a MAC as they do on a Windows or Linux machine. If you are working on a MAC and you think you code is correct but the style is not appearing then it could be because of the MAC OS.

VIDEOS IN THIS SECTION

CREATING WINDOWS

BASIC WINDOW
MULTIPLE WINDOWS
POP UP WINDOW
USING CANVAS
USING FRAMES

Creating a new window with Tkinter is easy, you can specify a fixed size, minimum size or maximum size of the window and you can create multiple windows. The code below creates an empty window and gives it the title of 'MY GUI'. The word 'screen' is just a variable so you can call it anything you like. Please feel free to copy and try the code.

By adding the following line of code you can also give the background colour:
screen.configure(background="#710071")
Note you can use hexadecimal colour codes or simply write the name of the colour. For example.
screen.configure(background="Blue")

It is easy to create more than one widow. In the 'Basic Window' example we create one window called 'screen', you can simply repeat the same code but give new windows you create a different name, for example 'screen2'. See the example in the code below.

Using the same principle as creating multiple windows you can create a pop-up window. The below code give an example of this being used.

You can use the canvas method to divide your screen into sections. This mades it easy to organise your page and if need be remove the content of an entire section, for example you might want the header of a page to stage the same on all pages but the body section to change between pages, using the canvas method would allow you to destroy all items in the body section but keep the header section.

The code below show creating 4 canvas and placing an item of text in one canvas, the variable zone1, zone2, zone3 and zone 4 have been used to distinguish between each canvas

This section demonstrates how to split your screen up into various Frames, very much like the canvas method it is very useful to separate sections of your GUI.

Want a hexadecimal colour chart? CLICK HERE

PLACING OBJECTS

PLACE METHOD
GRID METHOD
PACK METHOD

This is probably the most popular method to use when placing items on the screen. It allows you to choose the coordinates where you want to place your item.

The code above uses 2 different ways to place the text, to place 'Hello World', relx and rely have been used to place the text in relation to the screen or frame it is placed in, you will notice if the window size is changed then the text will move relative to the anchor point given. the text 'Keep calm and code' is in a fixed position on the screen by using the X and Y coordinates, this will not move if the screen/window size is adjusted. Copy the code and try it.

The grid method is more versatile than the pack method however you may still prefer to use the 'place' method shown in the next section. If you are willing to spend some time to plan out your project and then use a loop to create a complete grid template of your screen then the grid method can be a good method to use when placing items on the screen.

In this example code it demonstrates that even if you place on item a few columns away from another, unless you have created the empty grids in-between the items then they will be placed right next to each other on the screen.

This issue can be fixed with a little cheat method by creating an empty grid first and then placing the items in the grid in the desired position as demonstrated in the code below.

You can see from the code above that empty columns and rows are created to create a complete grid of the screen. It is now easier to put items anywhere on the screen. You create and place in just 1 line of code for example:
myText = Label(screen, text = "Hello World").grid(row = 1, column = 1)

The pack method is an easy method to use however it does have its limitations compared to the 'place' method. Although you should learn the pack method you will probably find yourself using the palace method more often.

The pack method will simply place the item in the next space on the screen.

myText = Label(screen, text = "Hello World")
myText.pack()

Notice with the code that you fist need to create the item, for example the variable myText and its content. After you have created the item you then need to tell Python what to do with the item, in this case pack it on the screen.
Note: you do not need to use 2 lines you could create and pack on the same line of code for example.
myText = Label(screen, text = "Hello World") .pack()

Other methods to yous with pack()
SIDE - Where to pack the item within the window: TOP, BOTTOM, LEFT, RIGHT
FILL - If you want the item to fill the allocated space: X (Vertical), Y(Horizontal), BOTH, NONE
EXPAND - The item will expand to fill extra space not used: TRUE, FALSE

Example: myText = Label(screen, text = "Hello World") .pack(side = RIGHT)

LABELS

ADD A LABEL
LABEL STYLING
TEXT STYLING
UPDATE LABEL VALUE
GET LABEL TEXT

A label, commonly referred to as a text box is easy to place on the screen. First you create the label and then you place it on the screen, although this can be done in one line of code the example below shows the creation of a label using the Label method (Note: Label is case sensitive). The nameLabel is just a variable so you can call this anything. On the next line the label is placed on the screen.

FONT STYLES

CHANGE THE FONT
MORE FONT STYLES

You can change the font and size of the text you use without any additional library imports by using the method in the example below:
myText.config(font=("Courier", 44))
See an example used in the code below and feel free to copy and try it out.

ADDING IMAGES

SIMPLE IMAGES
IMAGES WITH PILLOW
RESIZE IMAGES
IMAGES IN FUNCTIONS

NOTE: Firstly make sure you save your images in the same file location that your Python file is saved, this will mean you will not have to tell Python where the images can be located. Secondly make sure you image is a suitable file type such as png or gif.

The code below shows an easy way of inserting an image without needing to use any additional library.

If you want to do more than just open your image, for example resize, rotate or change the quality then using Pillow is a good option. First you may need to install PILLOW to do this:
Go to the 'Command Prompt' or 'Terminal'
Type: pip3 install pillow
You should see the library being installed. To use Pillow to import an image in python follow the code below.

Although you could to re-size the image in another program such as photoshop before using it in Python. The next method shows how to re-size the image using the PILLOW library.

If you have tried to put your image inside a function you may have noticed that it does not work as expected, this is because the photo method used the widget is a local variable. The code below shows 3 possible solutions to this problem.

BUTTONS

ADD A BUTTON
BUTTON STYLES
PASS VALUES
IMAGE BUTTONS
BUTTON STATE

Adding buttons is quite easy as can be seen from the code below.

To add an action to your button the easy way is to create a function or procedure that you want to happen when the button is pressed. As you can see in the code below the 'command' method is used to call the function. The strange thing about calling functions from this command method is that you do not need to put the brackets () after the function name.

The example code below shows adding RAISED effect to a button, changing the text colour with fg and changing the text colour when the button is click with activeforeground. More button styling methods methods can be seen in the list below the example code. Remember some methods do not work as good on a MAC as they do on a Windows or Linux machine.

PASS ARGUMENTS/PARAMETERS ON BUTTON CLICK
You will notice that when you use a Button you will use the 'command =' to call your function, not only do you not use the brackets when calling the function but you cannot pass parameters into your function. To solve this problem you can use the lambda method. Simply add 'lambda:' before you call your function and you can then pass in your values. See an example used in the code below.

You can use the same method to pass multiple values, in the example below two strings are passed, you can pass variables the same way. Remember you must also receive the passed values in the function brackets.

BUTTONS - ADVANCED

CHANGE BUTTON TEXT
CHANGE BUTTON STATE
AUTO CREATE BUTTON
PASS MULTIPLE VALUES

CREATE A BUTTON FROM USER INPUT

BIND MULTIPLE COMMANDS TO A BUTTON PRESS

ADDING USER INPUT AND SELECTION

ENTRY BOX
OPTION BOX
DROPDOWN MENU
LISTBOX

Using the 'Entry' method you can add a box that the user can type in, you can then use the '.get' method to retrieve the content of the entry box.

The following code shows how to create dropdown option boxes, in this example one for Coffee and one for Tea. The choice the user makes is set to a function and saved int he variable 'drink'.

Note that a parameter is received in the option function even though it is not apparent that a value is sent in, this can be confusing.

The following code demonstrates creating drop down menus for your screen. Functions have been set up to demonstrate each item clicked works. On a Windows machine the menu should appear on the Python tkinter Window, on a MAC the menu will appear on the computer menu bar.

Adding a list box is quite easy and the listbox will automatically scroll even without adding a scrollbar. The code below creates a list of 30 items and puts them into the listbox.

REMOVING ITEMS FROM THE SCREEN

REMOVE EVERYTHING
REMOVE SELECTION
CLEAR A CANVAS

REMOVE SELECTED ITEMS FROM THE SCREEN

The next section of code changes this method to destroy items specified in a list. As you can see if you run the code, only the two items in the list (welcome and confirmRemove) are removed.

REMOVE EVERYTHING FROM A SELECTED CANVAS
The final section of code below destroys all items in a specified location, in this case the canvas named zone1.

MORE TKINTER

TIME DELAY POP UP
TIME

This shows how using the .after method you can set a delay on an action. In this example the 'Welcome' message shows for 2 seconds then disappears.

SOUND
PLAYLIST

This section shows how to play music, it uses the pygame module to play the music. First you will need to install pygame, to do this go to your 'Command Prompt' or 'Terminal' and type:
pip3 install pygame

For a complete tutorial on creating a GUI MUSIC PLAYER CLICK HERE to visit the page that shows how to build a music player with Python and Tkinter.

SCROLLBAR
SCROLL

Adding a scrollbar can be confusing and may take a little tweaking of your code to get it working how you expect. It is also worth noting that many objects such as listboxes will scroll even without a scroll bar.

GRAPH
PIE CHART

The code below gives you an example of how to place a chart into a Tkinter window. Copy the code and try to change the size of the chart and background, you will notice the two lines that control the size are a little confusing, spend a bit of timing playing around with the values to get a clear understanding.

QUIT / EXIT
QUIT CONFIRM
CLOSE WINDOW

The code below create a pop-up window when the EXIT button is pressed, the window asks the user to confirm if they want to quit or cancel. This is done in 3 function as follows:

exitProgram() function simply exits the program
cancelExit() destroys the confirm exit window
confirmExit() creates the confirm exit window and content and using the lambda method sends the variable screen2 to the cancelExit function, this was done because screen2 was created inside the confirmExit function therefore cannot be seen inside the cancelExit function.

You might want to close the window and keep the program running or close a chosen window, you can do this using the destroy() method. In the example below the window named 'screen' is closed when the 'CLOSE WINDOW' button is pressed.

KEY PRESS
MORE EVENTS

You can detect if the user presses a key by binding a keypress to a screen, object, frame or canvas. For example:

screen.bind('<Return>', kingbob)

Binds a press of the Return key to the screen and when the key is pressed it runs the function called kingbob.

NOTE: You are now passing an event so you need to remember to receive this in the function. In the example below you can see the event is received when calling the functions, for example: def jellyfish(event). This can be slightly confusing because you receive the event but do not need to explicitly send the event.

The code below expands on the above by making a new window open if the user presses the spacebar.