PySimpleGUI Demo UIs – quick tour – Part 5

In this tutorial, we will continue exploring the PySimpleGUI library by creating a DemoUI using the Quick Tour Part 5 tutorial. This tutorial will cover more advanced topics such as using themes, customizing the layout, and handling events.

To get started, you will need to have PySimpleGUI installed on your computer. If you haven’t installed it yet, you can do so by running the following command:

pip install PySimpleGUI

Once you have PySimpleGUI installed, you can start by creating a new Python script and importing the necessary modules:

import PySimpleGUI as sg

Next, let’s define the layout for our DemoUI. In this tutorial, we will create a simple calculator that can perform basic arithmetic operations. Here’s a sample layout for our calculator:

layout = [
    [sg.Input(size=(15,1), key='-DISPLAY-')],
    [sg.Button('1'), sg.Button('2'), sg.Button('3'), sg.Button('+')],
    [sg.Button('4'), sg.Button('5'), sg.Button('6'), sg.Button('-')],
    [sg.Button('7'), sg.Button('8'), sg.Button('9'), sg.Button('*')],
    [sg.Button('0'), sg.Button('C'), sg.Button('='), sg.Button('/')]
]

In this layout, we have an input field to display the numbers entered by the user, and a grid of buttons representing the numbers 0-9 and the basic arithmetic operators.

Next, let’s create the window object for our DemoUI and apply a theme to it. PySimpleGUI provides various built-in themes that you can use to customize the appearance of your GUI. To apply a theme, simply set the theme argument when creating the window object:

sg.theme('DarkAmber')  # Apply a theme to the window

window = sg.Window('Calculator', layout)

In this example, we have applied the DarkAmber theme to our window. You can explore other built-in themes provided by PySimpleGUI and choose the one that best suits your application.

Now that we have created the window, let’s implement the event loop to handle user interactions. PySimpleGUI provides a simple event-driven programming model, where you can define event handlers to respond to user input. Here’s a simple event loop for our calculator:

while True:
    event, values = window.read()

    if event == sg.WIN_CLOSED:
        break

    if event in ['1234567890']:
        window['-DISPLAY-'].update(value=values['-DISPLAY-']+event)

    if event in ['+-*/']:
        window['-DISPLAY-'].update(value=values['-DISPLAY-']+f' {event} ')

    if event == '=':
        try:
            result = eval(values['-DISPLAY-'])
            window['-DISPLAY-'].update(value=str(result))
        except:
            window['-DISPLAY-'].update(value='Error')

    if event == 'C':
        window['-DISPLAY-'].update(value='')

In this event loop, we handle different types of events such as button clicks and window close events. When a button is clicked, we update the input field based on the user’s input. For the ‘=’ button, we evaluate the arithmetic expression entered by the user and display the result. Finally, the ‘C’ button clears the input field.

Lastly, don’t forget to close the window at the end of the event loop:

window.close()

Congratulations! You have successfully created a simple calculator DemoUI using PySimpleGUI. Feel free to customize the layout, add more functionality, and explore different themes to create your own unique GUI applications. Happy coding!