Skip main navigation

How to Create 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:
2.5
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’.
45.2
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.
77.4
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.
120.1
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.
152.8
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?
198
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.

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()

Good Coding habits

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.

 

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.

 

GUIs and 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.

 

GUIs – A 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

 

 

GUI 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.

This article is from the free online

Programming with GUIs

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education