Demo Project Meeting 4: Mini Image Editor using PySimpleGUI

In this tutorial, we will create a mini image editor using PySimpleGUI, a simple yet powerful Python library for creating graphical user interfaces. This project will allow users to load an image, apply basic image editing operations such as cropping, rotating, and resizing, and save the edited image.

Step 1: Install PySimpleGUI
First, make sure you have PySimpleGUI installed on your system. You can install it using pip by running the following command in your terminal:

pip install PySimpleGUI

Step 2: Import necessary libraries
In our Python script, we need to import PySimpleGUI and Pillow (PIL), a Python Imaging Library that will help us with image processing operations.

import PySimpleGUI as sg
from PIL import Image

Step 3: Create the GUI layout
Next, we will define the layout of our mini image editor using PySimpleGUI’s layout format. Here, we will have buttons for loading an image, cropping, rotating, resizing, and saving the edited image.

layout = [
    [sg.Text('Select an image file:')],
    [sg.Input(key='-FILE-'), sg.FileBrowse()],
    [sg.Button('Load Image'), sg.Button('Crop'), sg.Button('Rotate'), sg.Button('Resize'), sg.Button('Save Image')],
    [sg.Image(key='-IMAGE-')],
]

window = sg.Window('Mini Image Editor', layout)

Step 4: Implement image editing functions
Now, we will define functions for loading, cropping, rotating, resizing, and saving the image.

def load_image(filename):
    image = Image.open(filename)
    image.thumbnail((400, 400))
    return image

def crop_image(image):
    # Implement cropping logic here
    cropped_image = image
    return cropped_image

def rotate_image(image):
    # Implement rotating logic here
    rotated_image = image
    return rotated_image

def resize_image(image):
    # Implement resizing logic here
    resized_image = image.resize((image.width // 2, image.height // 2))
    return resized_image

def save_image(image, filename):
    image.save(filename)

current_image = None

Step 5: Create the main event loop
In the main event loop, we will handle user interactions with the GUI elements and perform the image editing operations accordingly.

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

    if event == sg.WIN_CLOSED:
        break
    elif event == 'Load Image':
        filename = values['-FILE-']
        current_image = load_image(filename)
        window['-IMAGE-'].update(data=current_image.tobytes())
    elif event == 'Crop':
        if current_image:
            current_image = crop_image(current_image)
            window['-IMAGE-'].update(data=current_image.tobytes())
    elif event == 'Rotate':
        if current_image:
            current_image = rotate_image(current_image)
            window['-IMAGE-'].update(data=current_image.tobytes())
    elif event == 'Resize':
        if current_image:
            current_image = resize_image(current_image)
            window['-IMAGE-'].update(data=current_image.tobytes())
    elif event == 'Save Image':
        filename = sg.popup_get_file('Save Image As', save_as=True, file_types=(("PNG Files", "*.png"), ("JPEG Files", "*.jpg")))
        if filename:
            save_image(current_image, filename)

window.close()

Step 6: Run the mini image editor
Now that we have defined the GUI layout and implemented the image editing functions, we can run our mini image editor script and start editing images.

if __name__ == '__main__':
     window = sg.Window('Mini Image Editor', layout)

In this tutorial, we have created a mini image editor using PySimpleGUI that allows users to perform basic image editing operations. You can further enhance this project by adding more image processing features such as filters, brightness adjustments, and more. Experiment with different functionalities and have fun editing images!