Child Python 109: Image Processing 1 with PySimpleGUI

In this tutorial, we will be using PySimpleGUI, a simple and easy-to-use Python GUI library, to perform image processing tasks. PySimpleGUI provides a simple interface for creating desktop applications with Python, and it allows you to build powerful GUIs with minimal code.

Before we begin, make sure you have PySimpleGUI installed. You can install PySimpleGUI using pip by running the following command in your terminal:

pip install PySimpleGUI

For this tutorial, we will be working with OpenCV, a popular open-source computer vision library, to perform image processing tasks. If you don’t have OpenCV installed, you can install it using pip as well:

pip install opencv-python

Now that we have our dependencies installed, let’s start by importing the necessary libraries:

import cv2
import PySimpleGUI as sg

Next, we will create a simple GUI window using PySimpleGUI. We will add a button to load an image and display it on the window:

layout = [
    [sg.Text('Select an image to process:')],
    [sg.InputText(), sg.FileBrowse()],
    [sg.Button('Load Image')],
    [sg.Image(key='-IMAGE-')]
]

window = sg.Window('Image Processing', layout)

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

    if event == sg.WIN_CLOSED:
        break

    if event == 'Load Image':
        image_path = values[0]
        image = cv2.imread(image_path)
        image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
        window['-IMAGE-'].update(data=cv2.imencode('.png', image_rgb)[1].tobytes())

In the code above, we created a simple GUI window with an input field to select an image file, a button to load the image, and an image element to display the loaded image. When the ‘Load Image’ button is clicked, the selected image is read using OpenCV, converted to RGB format, and displayed on the window.

Now that we have loaded the image, let’s add some image processing functionality to our application. We will add a button to apply a grayscale filter to the image:

layout = [
    [sg.Text('Select an image to process:')],
    [sg.InputText(), sg.FileBrowse()],
    [sg.Button('Load Image')],
    [sg.Image(key='-IMAGE-')],
    [sg.Button('Grayscale')]
]

window = sg.Window('Image Processing', layout)

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

    if event == sg.WIN_CLOSED:
        break

    if event == 'Load Image':
        image_path = values[0]
        image = cv2.imread(image_path)
        image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
        window['-IMAGE-'].update(data=cv2.imencode('.png', image_rgb)[1].tobytes())

    if event == 'Grayscale':
        gray_image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
        window['-IMAGE-'].update(data=cv2.imencode('.png', gray_image)[1].tobytes())

In the code above, we added a ‘Grayscale’ button to our GUI window. When the button is clicked, the loaded image is converted to grayscale using OpenCV and displayed on the window.

You can add more image processing functionalities to your application, such as applying filters, resizing, rotating, or performing edge detection. By combining PySimpleGUI with OpenCV, you can create powerful image processing applications with a simple and user-friendly interface.

I hope this tutorial helped you get started with image processing using PySimpleGUI and OpenCV. Feel free to experiment and explore the capabilities of these libraries to create your own image processing applications.