Rough idea of what a GUI could look like.

You look at windows everyday on your computer or phone, click on links or type in boxes. But have you ever wanted to try and make your own? Today, let’s take a look at how to get started making our own window, or GUI, using Tkinter and Python.


What is a GUI?

Every time you interact with the screen on your computer or your phone you are more than liking using a graphical user interface, or GUI (pronounced gooey). Those dazzling rectangular windows with buttons, icons, and menus were created for us to have a much easier way to interact with our electronic devices. Older methods, such as MS-DOS, used the command line and text.

Python also has a nice way to make our own GUIs. The next few tutorials will focus on making our own GUIs using Python and the Tkinter module. Here, we will go over some of the basics and work towards thinking of ideas of how you can make your own.

I found a number of tutorials online and many of these websites teach the basics of creating buttons or menus. However, I have found that many are the same: they don’t really let you follow along to really build anything. Here, we will works towards building a project together. I personally am learning these ideas to make my own Photo Editor. While I won’t go over all the details here, I will share with you what I learn. You can also follow along on GitHub if you want to see the progress of the editor.

Today, we are going to learn how to create a GUI window, and display images or text.


What is Tkinter?

Tkinter is Python’s standard GUI package. It is an object-oriented layer on top of the open-source Tcl/Tk widget toolkit. While there are other packages available for creating a GUI, such as Kivy or PyQT, Tkinter tends to be more simple and has a ton of references to get you started. For this reason, we are going to stick with using Tkinter for now.

Creating a Window

Let’s start with the most basic idea: creating a window. It’s really quite simple using Tkinter. Let’s create a new file called basic_window.py.

And that’s it. Not very interesting… yet.

A small, blank empty window.

Line 1 imports all of the functions for the module Tkinter. While it is usually bad practice to use import *, for right now let’s just use it to simplify things. root in line 2 tends to be the standard name for initializing the Tk root widget (that, or master). The root widget, which is the main window and our parent window, has to be created before any other windows. Also, there can be only one root. Finally, line 3 runs the main event loop. Now, let’s take a look at how to make some adjustments to our root window.

Let’s take a look at what’s new. In lines 5-9, we are able to call on functions related to the root window. In line 5, we can change the title of the window. Or change the background color of the window in line 6. Sometimes, we need to adjust the size of our windows to view other windows not visible on the screen. We can set the minimum size (line 7) and maximum size (line 8) for the window. Finally, let’s talk about geometry. Simply put, geometry allows us to consider how the window will look when we first run the program. We can set the starting size of the window, as well as where it will first appear on the screen by setting the x and y coordinates. If the x and y coordinates aren’t set, then the window will show up in the top-left of the screen.


Creating a Label

In Tkinter, we will use widgets to give our GUIs various properties and functionalities. Labels are the most basic widget and can display either text or images. Open a new file called create_label.py.

Let’s take a look at the above code. First, we import the Tkinter module and then set up the main window and it’s parameters. In line 10, we create a Label widget for displaying text. The first parameter is our root window, followed by the text that we want to display. The pack method that is called on text in the next line is used to fit the size of the window to the text (it “packs” a widget in the parent window). Also, if we adjust the window size the label will stay in the top-center part of the window. There are other ways to position the Label in different areas which I will explain in a future tutorial.

There are a few ways to load images in Tkinter, but we’ll show how to do it with the Label widget.

In line 11, we make a call to the PhotoImage class to load the image file we want to use. The Label widget is called, but the text parameter is changed to the image we want to display. The PhotoImage class can only load GIF and PGM/PPG image formats. There are other ways around this using Pillow.

Window complete with a text and an image.

What is important to notice here is the way that the pack method displays the text and images. Each Label is placed in the parent window in an optimized way. We can also specify the relative positions of the widgets using the pack method. Experiment by adding your own images or text and see how it changes the window.

Summary

In this tutorial, we cover how to create the parent window and add text or images using the Label widget using Tkinter. Next time, we will consider the layout of our GUI and learn about the three methods we can use.

I find that it is very important to apply that things that you learn. By being able to teach others or build my own projects I can apply and even test what I have learned. Over the next few weeks, we will be going over Tkinter and many of its functions and widgets.

References

  1. Python Course – Tkinter Tutorial
  2. Object-Oriented Programming in Python – Intro to GUI with Tkinter
  3. Python Programming – Python Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *