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:
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
Textobjects from the guizero library.
app = App(title="This is my first GUI")
Here, you’re creating a guizero
Appobject and you’re setting its
appis 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
Textlabel widget called
- telling Python that this text label is to appear in the
appwindow you created previously
- setting the
"GUIs are cool."
- telling Python that this text label is to appear in the
Now that you’ve described your UI, this command tells the computer to display the
appon 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.
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.
When creating GUI elements in guizero remember that the widgets appear in the same order as you create them.
Try modifying your program:
- So that another
message3appears 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!
- All guizero programs need you to create an
Appobject 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
app.display()will show the GUI