Want to keep learning?

This content is taken from the Raspberry Pi Foundation & National Centre for Computing Education's online course, Programming with GUIs. Join the course to learn more.

Skip to 0 minutes and 3 seconds Now it’s time to make our first GUI. So open up the IDE and save the file as firstgui.py. Now the first name we’re going to type is from guizero, import app and text. Now this line tells Python to import the app and the text widgets from the guizero library. Now we are going to create our app. I’m going to call my app with a little a. And then I’m also going to set a property of the app, this case being the title. And I’ll put ‘This is my first GUI’.

Skip to 0 minutes and 45 seconds Now once you’ve created the app, you can add other widgets to it. So let’s add a text widget to put a message onto our screen. I’ll call it message, and I’m going to say text. Now I need to tell it what app that this widget should be attached to. It belongs to the app, and again, I can set a property– in this case, I’m going to set the text property to say, guis are cool.

Skip to 1 minute and 17 seconds Now the final thing I need to do is I need to tell my app to display, and I do that by saying app.display and calling its display function. , Now this will tell the computer to display on the screen, and that’s important– without that step, our app’s not going to work. Right. So let’s run our program and see what happens. So I run my program, and my first GUI appears. We can see the title has been set to This is my first GUI, and we can also see that our message has been displayed– guis are cool. Now GUIs use object oriented-programming. Objects, like the text label, have properties that can be set.

Skip to 2 minutes and 0 seconds Now these properties can change things like the colour or the text size or maybe it’s alignment, and you can use these to customise your GUI. So let’s try changing the properties of our text and adding some more code. So what I want to do is add a second message. So I think the first thing I’ll do is just rename message to be first message. I’ll add a second message in the same way. Again, it belongs to the app. I will set the text to be maybe this is green.

Skip to 2 minutes and 33 seconds I’ve now got two text widgets in my app. What I think I’ll do is I’ll change the first one so that the text is much bigger. Let’s say it’s text size to be 40, and as I’ve said, the second message is going to be green. Maybe I’ll set it’s background colour RBG to be green. Now, when we run our program, let’s see what the result is. Again, so our GUI has appeared. Again, it’s got the same title. The guis are cool message is much bigger– in fact, the text size 40, and we can see that in a second message is indeed in green. Time for a challenge. Can you modify your program to add another message?

Skip to 3 minutes and 18 seconds Try changing the colour of the text to red or perhaps use a different font. When you’re finished, copy your code to pastebin and share the link in the comments section, and remember to ask if you need help.

Creating your first GUI

Load up your chosen code editor (usually part of your IDE) and save the empty file as ‘firstgui.py’ straight away. Once done, put this code into the coding window:

from guizero import App, Text
app = App(title="This is my first GUI")

message = Text(app, text="GUIs are cool.")
app.display()

Before you run the code, take a moment to predict what you think you’ll see. This is a useful habit to get into as you develop your coding abilities; with time you should find that you are increasingly able to anticipate how a program will run. This is particularly useful for spotting logical errors in students’ code in lessons. It’s also a good habit to get your students into!

Run your program, and you should see something like this:

An image of a graphical user interface window. The title bar says "This is my first GUI". Just under the title bar, in the centre horizontally, is the text "GUIs are cool."

Let’s look at the code line by line, and see what you’ve achieved.

  • from guizero import App, Text

    This line tells Python to import the App and Text objects from the guizero library.

  • app = App(title="This is my first GUI")

    Here, you’re creating a guizero App object and you’re setting its title property. This app is where you’ll put all your other widgets as you build your UI. Note: At this point, you’ve not asked for anything to be drawn to the screen.

  • message = Text(app, text="GUIs are cool.")

    You’re creating a Text label widget called message, and:

    • telling Python that this text label is to appear in the app window you created previously
    • setting the text property to "GUIs are cool."
  • app.display()

    Now that you’ve described your UI, this command tells the computer to display the app on the screen.

This app doesn’t ‘do’ anything at the moment. For this to happen, you’ll need to provide some additional code, which we’ll look at shortly.

Properties

If you’ve done any work with object-oriented programming before, you’ll be aware of the concept of objects having different properties. If you haven’t, don’t panic — GUIs are one of the nicest ways to get to grips with them.

A property is something that helps describe an object like your Text label. The label has colour, text size, an alignment (e.g. left, right, centre) and lots of other things that can be customised to create the type of GUI that you want.

Once you have created a widget and given it a name (yours is called message), you can use widgetname.property = new_value to change the way it looks, e.g. message.text_size = 40 to change the text size to 40.

Replace all of your code with this:

from guizero import App, Text
app = App(title="Hi there")

firstmessage = Text(app, text="This is big text")
secondmessage = Text(app, text="This is green")

firstmessage.text_size = 40
secondmessage.bg = "green"

app.display()

When you run the code, you’ll now see that you have two text labels and that the first is bigger but less colourful than the second.

An image of a GUI window. The title bar reads "Hi there". Underneath the title bar is some big text reading "This is big text". Below this is some smaller text which is highlighted green, reading "This is green". Both pieces of text are centred horizontally in the window.

When creating GUI elements in guizero remember that the widgets appear in the same order as you create them.

Challenges

Try modifying your program:

  • So that another Text widget called message3 appears underneath the other two
  • So that the text colour of the first message is red rather than black
  • To use a different font

One aspect of improving your confidence with coding is to get used to reading the documentation for the different libraries that you want to use. The documentation for guizero describes how to install it and create GUIs using it, as well as providing a reference for all the widgets. The Text widget reference will help you in solving these challenges.

Share your code on Pastebin and copy the link in the comments section; remember to ask if you need help!

Summary

  • All guizero programs need you to create an App object to add widgets to
  • Widgets are the individual elements that can be used to build a GUI, such as buttons and text labels
  • Widgets need a ‘master’ app to connect to and will appear on the page in the order they are created
  • Calling app.display() will show the GUI

Share this video:

This video is from the free online course:

Programming with GUIs

Raspberry Pi Foundation