Advertisement

Thursday, 4 May 2017

Just Enough Python 6 - A Simple GUI

If you have been following the tutorials up to now then you are beginning to be able to do useful things in Python. 
This time you are going to make your programs look better, too, by making a graphical user interface, a GUI. And along with that we are going to learn how to make our own functions.
The GUI library that comes with Python is called tkinter but this is a bit messy to play around with. Luckily, someone has come up with something simpler that is aimed at beginning programmers. This package uses tkinter but is easier to use. It’s called guizero and we need to install it first.

The first thing to do is open a terminal window and use pip to install guizero like thi...

pip3 install guizero

In case you are not aware, pip is a utility for downloading and installing extra Python packages. Not every package can be installed with pip but an awful lot can.
You need to be connected to the Internet, of course, and it may take a minute or two to complete. When it has finished you can close the terminal window.




Now we are ready to write a program. We will make it very simple, just to make sure we can use guizero - it will get a bit more complicated later.

Open a new file in Geany and call it something suitable, gui0.py might be a good choice!  Type this in (or cut and paste it).

# First gui program using guizero
 
# Import the required components from guizero
from guizero import App, Text
 
# We always need to create something from App
# this will give us a window
# We give it the title "Hello World" and this will appear
# in the title bar

app = App(title="Hello world")
 
# Now we will create a text widget
# We have to tell it what the widget belongs to, i.e. the
# window where it will be displayed
# We also specify the text

message = Text(app, text="Welcome to the Hello world app!")
 
#Next we display the app
app.display()

This is a simple program that produces a window and a message. I've put lots of comments, so that you can see what each part of the program is doing. Make sure that you understand it and the layout because this is a basic pattern for creating any gui program.

The first thing we do is import stuff from the guizero package.
from guizero import App, Text
This means that we want to use the components App and Text in our program and we are importing them from the guizero package.

Next we create an App object (we deal with objects later, just accept the term for now) and assign it to a variable called app.
app = App(title="Hello world")
App basically gives us the fundamental gui component, the window, into which we can place widgets such as buttons and text. We are giving out new App the title "Hello World".

Next we create a text widget. We specifiy the text that is to be displayed and the window where it will be displayed, i.e. app, this must be the first parameter. (technically the component to which the text widget will belong).
message = Text(app, text="Welcome to the Hello world app!") 
 Finally, we display the whole thing, thus...
app.display()
 We are calling the display function that belongs to the object app. If we don't do this then nothing will happen!

Now, when you run the program you get the result that appears at the top of this tutorial.

You may not realise it but something odd is happening here. With our previous programs, the run, do something and then stop. With a gui program they don't stop until you tell them to. this is because, hidden inside the app object, there is a program loop that continually looks for events like mouse clicks or key presses. When it detects one, it decides what to do (if anything) with it. In this case the only event that does anything is clicking on X in the top right corner of the window which. or course closes the window.

You can find out more about guizero here https://lawsie.github.io/guizero/ and
I would encourage you to take a look at the documentation. It is quite clear, I think.

We are going to call it a day here but next time we will re-visit our guessing game and produce a gui version that will look something like this:




No comments:

Post a Comment