Python GUI Development With PySimpleGUI

pi simple gui the simple way to create graphical user interfaces with python creating a simple graphical user interface or gui that works across multiple platforms can be complicated but it doesn't have to be that way you can use python and the pi simple gui package to create nice looking user interfaces that you and your users will enjoy pi simple gui is a new python gui library that's been gaining a lot of interest recently in this tutorial you'll learn how to install the pi simple gui package create basic user interface elements with pi simple gui create applications such as a pi simple gui image viewer integrate pi simple gui with matplotlib use computer vision in pi simple gui and package your pi simple gui application for windows now you know what you're going to learn let's get started getting started with pi simple gui pi simple gui was launched in 2018 so it's a relatively new package compared to the likes of wx python or pi qt pi simple gui has four ports tk inter pi qt wx python and remy pi simple gui wraps portions of each of these other packages and makes them easier to use however each of the ports has to be installed separately pi simple gui wraps the entirety of tk inter which comes with python it's wrapped most of pi side 2 but only a small portion of wx python when you install pi simple gui you get the tk intervariant by default and that's what will be covered in this course for more information about tk inter check out python gui programming with tk inter depending on which variant of pi simple gui you use applications that you create with pi simple gui may not look native to their platform but don't let this stop you from giving pi simple gui a try pi simple gui is still quite powerful and can get most things done with a little work installing pi simple gui installing the library is easy if you use pip for the purposes of this tutorial you'll learn how to install the regular pi simple gui port which is a tkinter variant here you can see it being installed on screen this command will install pi simple gui to the python environment you're currently running in my case i've created a virtual environment which allows more scope for experimentation with new packages without making permanent changes to your system python installation if you're unfamiliar with python virtual environments then you should read python virtual environments a primer if you prefer to try the pi qt variant then you can use pip install pi simple gui qt instead now that you have pi simple gui installed it's time to find out how to use it creating basic ui elements in pi simple gui if you've ever used a gui toolkit before then you may have heard the term widgets a widget is a generic term used to describe the elements that make up the user interface such as buttons labels windows and so on in pi simple gui widgets are referred to as elements which you may sometimes see capitalized one of the basic building blocks of pi simple gui is the window to create one you can use the following code window takes lots of different arguments too many for me to cover here however for this example you can give the window a title a layout and set the margins which is how big the ui window will be in pixels read returns any events that are triggered in the window as a string as well as a values dictionary you'll learn more about these in later sections of this video course when you run this code you should see something like you're seeing on screen this example doesn't really do much other than possibly displaying a message to the user but if you've ever tried gui programming before you realize that this is an achievement in itself normally you would have other elements besides a window in the application so let's add some text and a button into the mix create a new file called hello underscore psg.py and add the code as seen on screen most gui toolkits allow you to lay out the elements using absolute positioning or by allowing the gui to lay them out dynamically pi simple guru uses nested python lists to layout its elements in this case you add a text element and a button element then you create a window and pass in your custom layout the last block of code here is the event loop a graphical user interface needs to run inside a loop and wait for the user to do something for example the user might need to press a button in your ui or type something with a keyboard when they do that those events are processed by the event loop when you use pi simple gui you make an event loop by creating an infinite while loop that reads events from the window object if the user presses the ok button or the exit button then you want the program to end to accomplish that you break out the loop and close the window as you can see running the code generates the window with the elements that we've created and note that the ok button functions to close the window with the basics of pi simple gooey out the way in the next section you'll see how to create a functioning application creating simple applications you can create a large variety of different cross-platform guise using pi simple gui the demos that are included with the package are extensive you can create anything from simple desktop widgets to full-blown user interfaces in the next few sections you'll see a few different ways to use pi simple gui but there's much more to it than is covered in this course and if you want more detail be sure to check out the other demos that are included with pi simple gui creating a pi simple gui image viewer one of the demos on pi simple gui's github page is an image viewer being able to write your own custom image viewer with python is fun you can use this code to view your own photos or incorporate it to view photos that you download or read from a database to keep things simple you'll use pi simple gui's built-in image element for viewing images unfortunately in the regular version of pi simple gui this can only display ping and gif formats if you'd like to be able to open other image file types then you can download pillow which supports tiff jpeg and bitmap formats check out the pi simple gui demo folder on github for an example that shows how to do this on the other hand if you install the pi simple gui qt port you'll find that it supports more image formats out of the box than the regular version here is a mock-up of what the image viewer should look like at the end this application will use much more code than the previous example but don't be deterred by this you'll see the creation of each part of the application in turn and also run the app without functionality to better understand how the code works create a file named image underscore viewer.py and then add the following code as seen on screen here on lines three and four you import pi simple gui and python's os module then on lines 8 through 20 you create a nested list of elements that represent a vertical column of the user interface an important parameter of pi simple gui elements is key this allows identification of specific elements of the interface allowing code to reference these elements query their state and change their contents for the in input text control you give it an identity of folder you'll use this later to access the contents of the element you can turn events on or off for each element via the enable events parameter the folder browse element opens the os file selector and while you can set a target to refer to another element's key by default it will target the element that is before it in the list this is how the folder location is sent to the image folder input text control as you will see when the program runs the list box element will display a list of paths to the images that you can then choose from to display you can pre-fill the list box with values by passing in a list of strings when you first load up your user interface you want the list box to be empty so it's past an empty list events are turned on for this element its size is set and it's given a unique identifier the list of lists on lines 22 through 27 creates three elements the first element tells the user that they should choose an image to display the second element displays the name of the selected file and the third displays the image note that the image element has a key set so it can be referred to and altered later on for more information on the image element check out the documentation the last list on lines 29-36 contains the code that controls how the elements are laid out in the screen this code contains two column elements with a v separator between them and note the spelling of v separator this is an alias for vertical separator you can learn more how column and v separator work by reading their respective documentation pages the window is created with a title and the layout using a line you've already seen before while the final program will have more complexity in the event loop let's just create the basics and run the program to see if the interface looks as we planned this will also let you test out the folder selection as this is part of pi simple gui let's now run the program and check firstly that it works secondly that it looks the way that it should and thirdly that we can select a folder and have the path appear in the image folder text input control with that working now let's add more code to the loop to start making the program functional this time you check the event against the folder key which refers to the in element you created earlier if the event exists then you know that the user has chosen a folder and you can use os.listdeer to get a file listing then you filter that list down to only the files of the extension png or gif as mentioned earlier you can avoid having to narrow down your image types by using pillow or pi simple gui qt instead finally the file list is updated in the window let's see that part of the code in action you can see the file names now appear in the file list now you can take a look at the next part of the conditional statement if the event equals file list then you know that the user has chosen a file in the list box and you want to update the image element as well as the text element that shows the selected file name on the right now we'll run the code and take the program through its paces you can use the browse button to find a folder on your computer with images in it so you can try this code out or you can copy and paste a path to a file in the text element once you're done viewing your images you're ready to learn how to use matplotlib with pi simple gui and that's what's covered in the next section

Channel: Real Python

Views: 281,321

Rating: 4.9385982 out of 5

Keywords: python, GUI, PySimpleGUI, TKinter, project, image viewer, UI

Id: -_z2RPAH0Qk

Length: 15min 15sec (915 seconds)

Published: Thu May 06 2021