Learn to Code via Tutorials on Repl.it

← Back to all posts
GUIs in Python
LeonDoesCode (275)

Games!

Not quite. We will be focusing on software interfaces for this one. I know, I know, you all want to make games, but it's best to start small and then learn big. Trust me, it helps to know the basics before you jump into the more advanced stuff.

Tkinter

If you've never heard of the tkinter module, then it allows us to create software interfaces in Python. The reason i say software is that tkinter was never made to run complex game stuff, neither does it have the facilities. I'm not saying that a simple "Guess The Number Game" is impossible, but trying to make Mario 64 is for the most part.

tkinter is part of the standard library, so all we have to do is:

import tkinter as tk
from tkinter import ttk

This will get you your tkinter and tkinter.ttk modules. Why do we have two? So, you have tkinter which is the base package. It can create all sorts of stuff, from labels to buttons. But they aren't that pretty. So we use ttk to help make it look that bit better. It also add functionality for Styles, but we won't be covering that this tutorial.

Let's Do This!

So, we are first going to start by creating a class called App like so:

# Create the app class
class App:
  def __init__(self, master):
    # Set the master (the root window) to width and height
    master.geometry("600x400")

This App class will take in a master (root) window. We then set that master's width to 600 and height to 400 using the geometry() function (width first, then height).

Now we can start adding some user interface elements to the master window. We'll start off with a label:

    # Create a label using ttk, give it master and text
    self.label = ttk.Label(master, text="Hello, World!")
    # Place it in the window a row, column
    self.label.grid(row=0, column=0)

You'll notice that we make a new variable for the label, this is so that we can edit it later on if we have to. We call ttk.Label() which will return a label for us. We also pass it the parameters master and text, setting the text to Hello, World!. This makes it so that the window to place it on is the master window, and the text on the label is equal to Hello, World!.

After that, we call grid() on the new label. This will place it at a certain position on the grid, if the window was a grid. The row and column parameters will state where to place it, these can be any number.

There is one thing to note about the grid() function, that being that if there are two elements set to be say 10 grid places away from each other, this will only happen if there are 10 things in those spaces. Otherwise, they will appear next to each other.

You also have two other functions pack() and place(). pack() will put your element where ever is available, normally right underneath another element. The place() function will put the element at a x and y of your choice.

Let's define another element:

    # Create a label using ttk, give it master and text and set the command callback to pressed
    self.button = ttk.Button(master, text="Press Me!", command=self.pressed)
    # Place it in the window a row, column
    self.button.grid(row=1, column=1)

This time, we make a button. The only difference here is that we pass another parameter called command. This will take in a function to callback on when the button is pressed. We will make that function in a second. but first, let's make on more element:

    # Create a label, give it master but no text
    self.press = ttk.Label(master)
    # Place it in the window a row, column
    self.press.grid(row=1, column=0)

This is just another label element, so nothing new to explain. Just note that we didn't give it a text value. Now to do a key bind:

    # Bind the ctrl+e key command callback to exit
    master.bind("<Control_L> e", exit)

This key bind will make it so that when Ctrl+E is pressed, something will happen. The string is key combination that we want to set. The layout for this is <modifier-type-detail>. You can also, like we did, add a key outside of the <...> to specify a key to be pressed. Once again, there is a callback, this time set to built-in exit() function.

Now for that self.pressed callback function from earlier:

  def pressed(self):
    # If button is pressed, then set press text to Hello there user! 
    self.press.config(text="Hello there user!")

Here we are making a new method in our class which changes the text of the last label we made. We do this by editing the configuration of it by doing config(). We then went to change text to something else.

Now all we have to do is create our master window and make our app:

# Make the master (root window)
root = tk.Tk()
# Make the app and pass it the master (root window)
app = App(root)
# Run the master (root window)
root.mainloop()

So here we make our root which is the root window. Then we make our app from the App class. Lastly we call mainloop() on our root to run our software, and update it.

Conclusion

You should now know how to make and change elements, and add events to you program. Using this, you can make some of your terminal based programs into more complex, graphical programs. I hope you find this useful in creating your applications!

Have a great day!

P.S
This tutorial is another in a series of tutorials suggested by @enigma_dev .
If you have any suggestions for tutorials, leave them in the description and I'll be sure to have a look. If you like one in the description, then give it an up vote to show that you want to see it. It makes my life so much more easier. Thanks in advance!