15.3 PySimpleGUI Elements
As we discussed in the introduction, a GUI program allows a user to interact with a computer program using a pointing device that manipulates small pictures called icons or widgets. The first task of a GUI program is to create the widgets needed for a program's interface. Each widget is designed for specific purposes and your program will be more user-friendly if you use each widget according to its intended purpose.
In PySimpleGUI, these widgets are called Elements.
Elements are basically images on a computer screen and they have a “look-and-feel” depending on the details of how the image is drawn. The “look-and-feel” of an element is typically controlled by the operating system. For example, GUI programs on a Macintosh computer typically look different from programs on a Microsoft Windows computer.
This image shows all the elements available in PySimpleGUI:
The following elements are used for user input.
| Element | Purpose |
|---|---|
| Button | Defines all possible buttons. The shortcuts such as Submit, FileBrowse, ... each create a Button |
| Menu | the Element that provides a Menu Bar that goes across the top of the window, just below titlebar. |
| ButtonMenu | Creates a button that when clicked will show a menu similar to right click menu |
| OptionMenu | An element that looks much like a ComboBox |
| Input | Display a single text input field |
| Multiline | Display and/or read multiple lines of text |
| Checkbox | Displays a checkbox and text next to it |
| Radio | Used in a group of other Radio Elements to provide user with ability to select only 1 choice in a list of choices |
| Listbox | Provide a list of values for the user to choose one or more of. Returns a list of selected rows when a window.read() is executed. |
| Combo | A combination of a single-line input and a drop-down menu. User can type in their own value or choose from list. |
| Slider | A slider, horizontal or vertical |
| Spin | A spinner with up/down buttons and a single line of text. Choose 1 values from list |
The following elements display information to a user, but have no user interaction.
| Element | Purpose |
|---|---|
| Graph | Creates an area for you to draw on. |
| HorizontalSeparator | draws a Horizontal line at the given location. |
| Image | show an image in the window. Should be a GIF or a PNG only |
| Output | a multi-lined text area to where stdout, stderr, cprint are rerouted. |
| ProgressBar | Displays a colored bar that is shaded as progress of some operation is made |
| StatusBar | A StatusBar Element creates the sunken text-filled strip at the bottom. Many Windows programs have this line |
| Table | displays list data in a table format |
| Text | Display some text in the window. Usually this means a single line of text. However, the text can also be multiple lines. If multi-lined there are no scroll bars. |
| Tree | Presents data in a tree-like manner, much like a file/folder browser. |
| VerticalSeparator | Vertical Separator Element draws a vertical line at the given location. It will span 1 "row". Usually paired with Column Element if extra height is needed |
You do not need to memorize the above lists, but you should probably re-read the lists again so that you are familiar with what is possible in a PySimpleGUI interface.