Here are resources and additional documentation about PySimpleGUI elements and example programs:
Creating Simple Applications
00:13 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 PySimpleGUI, 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 PySimpleGUI.
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 PySimpleGUI’s built-in
Image() element for viewing images.
00:59 Unfortunately, in the regular version of PySimpleGUI this can only display PNG and GIF formats. If you’d like to be able to open other image file types, then you can download Pillow, which supports TIFF, JPG, and bitmap formats.
01:14 Check out the PySimpleGUI demo folder on GitHub for an example that shows how to do this. On the other hand, if you install the PySimpleGUIQt port, you’ll find that it supports more image formats out of the box than the regular version.
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
img_viewer.py and then add the following code as seen onscreen.
An important parameter of PySimpleGUI 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
This is how the folder location is sent to the Image Folder input text control, as you will see when the program runs. The
Listbox() element will display a list of paths to the images that you can then choose from to display. You can prefill the
Listbox() with values by passing in a list of strings.
When you first load up your user interface, you want the
Listbox() to be empty, so it’s passed an empty list. Events are turned on for this element, its
size is set, and it’s given a unique identifier.
03:55 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 to 36 contains the code that controls how the elements are laid out on the screen. This code contains two
Column() elements with a
VSeperator() between them, and note the spelling of
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.
05:27 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.
This time, you check the event against the
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.listdir() to get a file listing.
Then you filter that list down to only the files with the extension
".gif". As mentioned earlier, you can avoid having to narrow down your image types by using Pillow or PySimpleGUIQt instead.
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
"-FILE LIST-", then you know that the user has chosen a file in the
Listbox(), and you want to update the
Image() element as well as the
Text() element that shows the selected
filename on the right.
Become a Member to join the conversation.