Introduction to Graphical
User Interfaces
WITH GUIZERO
Introduction to guizero
 Up to this point we have been creating console based
applications that interact with physical devices.
 However when was the last time you had a console based
application…almost never.
 We will be using the module tkinter to develop graphical
interfaces for our users to interact with during program
execution
 The tkinter module is comprised of numerous classes to
create GUI widgets.
 To simplify this process we will use the guizero module which is
a wrapper class, simplifying the implementation of GUI
components.
 From guizero import <INSERT WHAT YOU NEED>
Creating a Graphical User Interface
 There are 2 main components to a GUI.
 1. The window/container
 2. The widgets
 Labels, buttons, text boxes, radio buttons, images, etc.
Creating a Window
 Let’s begin by creating the application window, which is nothing more than a
container for our widgets.
 You will want to import the App class from guizero
 Code: from guizero import App
myApp = App()
myApp.display()
 However, this window will not do much for us unless we modify some of its
properties and add some content.
All the widgets go here
A Windows Starting Parameters/Properties
 When you create an App
windows you can specify any or
all of the below properties upon
creation or program execution.
 Code: myApp = App(title = “First App Window”, bg = “red”, height = 200, width = 250)
Creating a Text/Label Object
 A text is a widget that only displays information.
 Code: from guizero import App, Text
txtlName = Text(appName, optional parameters,…)
 Options include:
 Ex.
txtPrompt = Text(myApp, text =“ Enter a num:”, bg =“red”)
The Event Loop and Processing Events
 GUI’s are event driven, meaning they run when an interaction from the user occurs.
 To determine when an interaction occurs you have to create a listener for every programmable action
there is. These listeners are looking for actions, called events.
 Button Presses, Pressing Enter, Checking a Box, Selecting a Menu Option, …
 Python makes this a bit easier by using an event loop to listen for any interaction on your App window.
Widgets placed between the below two lines will have event listeners constantly checking if their event
has occurred. (More on this when we discuss widgets you can interact with)
 This is because the line of code myApp.display() starts the event loop. The GUI app will constantly check
whether the user has done anything new, and it will automatically update the display if necessary. The
event loop blocks the code, so code written after the event loop will never execute. So this loop acts
rather like a while True: loop.
Example
from guizero import App, Text
#create the window object
wind = App(title = “Our First App”, width = 200, height = 250)
#add a text label
txtName = Text(wind, text = “Jason Rocks!!!!”, fg = “blue”, font =“Helvetica”, size = 16)
#begin event loop
wind.display()
The Widget Classes
 When creating a widget there are
specific parameters for each to specify.
 Where to place it
 Properties
 Variables to set, etc.
 Many of the properties are similar for each
widget
 There are also functions/methods for each
widget to allow interaction.
Checkpoint
1. What is an event loop?
2. What are the 3 minimum lines of codes to create a GUI App?
3. What are widgets?

Introduction to GUIs with guizero

  • 1.
    Introduction to Graphical UserInterfaces WITH GUIZERO
  • 2.
    Introduction to guizero Up to this point we have been creating console based applications that interact with physical devices.  However when was the last time you had a console based application…almost never.  We will be using the module tkinter to develop graphical interfaces for our users to interact with during program execution  The tkinter module is comprised of numerous classes to create GUI widgets.  To simplify this process we will use the guizero module which is a wrapper class, simplifying the implementation of GUI components.  From guizero import <INSERT WHAT YOU NEED>
  • 3.
    Creating a GraphicalUser Interface  There are 2 main components to a GUI.  1. The window/container  2. The widgets  Labels, buttons, text boxes, radio buttons, images, etc.
  • 4.
    Creating a Window Let’s begin by creating the application window, which is nothing more than a container for our widgets.  You will want to import the App class from guizero  Code: from guizero import App myApp = App() myApp.display()  However, this window will not do much for us unless we modify some of its properties and add some content. All the widgets go here
  • 5.
    A Windows StartingParameters/Properties  When you create an App windows you can specify any or all of the below properties upon creation or program execution.  Code: myApp = App(title = “First App Window”, bg = “red”, height = 200, width = 250)
  • 6.
    Creating a Text/LabelObject  A text is a widget that only displays information.  Code: from guizero import App, Text txtlName = Text(appName, optional parameters,…)  Options include:  Ex. txtPrompt = Text(myApp, text =“ Enter a num:”, bg =“red”)
  • 7.
    The Event Loopand Processing Events  GUI’s are event driven, meaning they run when an interaction from the user occurs.  To determine when an interaction occurs you have to create a listener for every programmable action there is. These listeners are looking for actions, called events.  Button Presses, Pressing Enter, Checking a Box, Selecting a Menu Option, …  Python makes this a bit easier by using an event loop to listen for any interaction on your App window. Widgets placed between the below two lines will have event listeners constantly checking if their event has occurred. (More on this when we discuss widgets you can interact with)  This is because the line of code myApp.display() starts the event loop. The GUI app will constantly check whether the user has done anything new, and it will automatically update the display if necessary. The event loop blocks the code, so code written after the event loop will never execute. So this loop acts rather like a while True: loop.
  • 8.
    Example from guizero importApp, Text #create the window object wind = App(title = “Our First App”, width = 200, height = 250) #add a text label txtName = Text(wind, text = “Jason Rocks!!!!”, fg = “blue”, font =“Helvetica”, size = 16) #begin event loop wind.display()
  • 9.
    The Widget Classes When creating a widget there are specific parameters for each to specify.  Where to place it  Properties  Variables to set, etc.  Many of the properties are similar for each widget  There are also functions/methods for each widget to allow interaction.
  • 10.
    Checkpoint 1. What isan event loop? 2. What are the 3 minimum lines of codes to create a GUI App? 3. What are widgets?