The Window Designer

The traditional definition for a "GUI Designer" is a program that enables you to create a GUI by dragging and dropping widgets much like using diagramming program such as Visio or Photoshop. These GUI Designer programs then generate code for you to add to your project.

The point of this section is to help you understand that you are the designer.

Great looking and functioning user interfaces don't magically happen. They are designed, often by a Graphic Designer.

Before writing any code for your GUI project take some time away from the keyboard, away from the computer. Pick up a pencil and paper and sketch your GUI. You don't even need to use a ruler. We're talking really rough "outlines" of how you want your user interface to function.

Follow these steps:

1. Sketch your GUI on paper
2. Divide your GUI up into rows
3. Label each Element with the Element name
4. Write your Python code using the labels as pseudo-code

Let's take a couple of examples.

Example 1 - Enter a Number

Popular beginner programs are often based on a game or logic puzzle that requires the user to enter something, like a number. The "high-low" answer game comes to mind where you try to guess the number based on high or low tips.

Step 1- Sketch the GUI

Step 2 - Divide into rows

Step 3 - Label elements

Label each element on your sketch (shown in blue above)

Step 4 - Write the code The code we're writing is the layout of the GUI itself. This tutorial only focuses on getting the window code written, not the stuff to display it, get results.

We have only 1 element on the first row, some text. Rows are written as a "list of elements", so we'll need [ ] to make a list. Here's the code for row 1

[ sg.Text('Enter a number') ]

Row 2 has 1 element, an input field.

[ sg.Input() ]

Row 3 has an OK button

[ sg.OK() ]

Now that we've got the 3 rows defined, they are put into a list that represents the entire window.

layout = [ [sg.Text('Enter a Number')],
           [sg.Input()],
           [sg.OK()] ]

Finally we can put it all together into a program that will display our window.

import PySimpleGUI as sg

layout = [[sg.Text('Enter a Number')],
          [sg.Input()],
          [sg.OK()] ]

window = sg.Window('Enter a number example', layout)

event, values = window.read()

window.close()

Example 2 - Get a filename

Let's say you've got a utility you've written that operates on some input file and you're ready to use a GUI to enter than filename rather than the command line. Follow the same steps as the previous example - draw your window on paper, break it up into rows, label the elements.

Split your sketch into rows and add labels for the elements.

Writing the code for this one is just as straightforward. There is one tricky thing, that browse for a file button. Thankfully PySimpleGUI takes care of associating it with the input field next to it. As a result, the code looks almost exactly like the window on the paper.

import PySimpleGUI as sg

sg.theme('Dark Blue 3')  # please make your windows colorful

layout = [[sg.Text('Filename')],
            [sg.Input(), sg.FileBrowse()],
            [sg.OK(), sg.Cancel()] ]

window = sg.Window('Get filename example', layout)

event, values = window.read()

window.close()