Introduction to GUIs with guizero
- 1. Introduction to Graphical User Interfaces 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 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.
- 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 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)
- 6. 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”)
- 7. 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.
- 8. 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()
- 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 is an event loop? 2. What are the 3 minimum lines of codes to create a GUI App? 3. What are widgets?