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:

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:

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.

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.