Demo Project Meeting 11: Mini Image Editor with PySimpleGUI – Part 2

In this tutorial, we will continue our work on the Mini Image Editor project using PySimpleGUI. This is the second part of our project, so make sure you have completed Part 1 before proceeding with this tutorial.

Step 1: Setting up the project structure
First, create a new Python file and save it as mini_image_editor_part_2.py. We will continue building on the code we wrote in Part 1 of the tutorial. Make sure you have PySimpleGUI installed on your system. If not, you can install it using pip install PySimpleGUI.

Step 2: Importing necessary libraries
Next, let’s import the necessary libraries for our project. In addition to PySimpleGUI, we will also import PIL (Python Imaging Library) for image processing operations. Add the following import statements to your Python file:

import PySimpleGUI as sg
from PIL import Image, ImageOps

Step 3: Defining the layout of the GUI
Next, let’s define the layout of our GUI. In Part 1, we created a simple GUI with buttons for opening and saving images. Now, let’s add more functionality by including buttons for performing image processing operations like flipping, rotating, and resizing the image. Here’s the updated layout for our GUI:

layout = [
    [sg.Image(filename='', key='-IMAGE-')],
    [sg.Button('Open Image'), sg.Button('Save Image'), sg.Button('Flip Horizontal'), sg.Button('Rotate 90'), sg.Button('Resize')],
    [sg.Text('Resize to width:'), sg.InputText('', key='-WIDTH-'), sg.Text('height:'), sg.InputText('', key='-HEIGHT-', size=(5, 1)), sg.Button('Apply')]
]

Step 4: Adding event handlers
Now, let’s add event handlers for the new buttons we added to the layout. We will define functions for flipping the image horizontally, rotating it 90 degrees, and resizing it based on user input. Here’s the code for the event handlers:

def flip_horizontal(image_path):
    img = Image.open(image_path)
    img = ImageOps.mirror(img)
    img.save(image_path)

def rotate_90(image_path):
    img = Image.open(image_path)
    img = img.rotate(90)
    img.save(image_path)

def resize_image(image_path, width, height):
    img = Image.open(image_path)
    img = img.resize((int(width), int(height)))
    img.save(image_path)

Step 5: Creating the main loop
Finally, let’s create the main loop for our GUI application. We will handle events and update the image displayed on the window based on user actions. Here’s the code for the main loop:

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

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

    if event == sg.WIN_CLOSED:
        break

    if event == 'Open Image':
        image_path = sg.popup_get_file('Select an image file')
        window['-IMAGE-'].update(filename=image_path)

    if event == 'Save Image':
        image_path = sg.popup_get_file('Save image as', save_as=True)

    if event == 'Flip Horizontal':
        flip_horizontal(image_path)
        window['-IMAGE-'].update(filename=image_path)

    if event == 'Rotate 90':
        rotate_90(image_path)
        window['-IMAGE-'].update(filename=image_path)

    if event == 'Resize':
        window['-WIDTH-'].update(value='')
        window['-HEIGHT-'].update(value='')
        window['-WIDTH-'].update(disabled=False)
        window['-HEIGHT-'].update(disabled=False)

    if event == 'Apply':
        width = values['-WIDTH-']
        height = values['-HEIGHT-']
        resize_image(image_path, width, height)
        window['-WIDTH-'].update(disabled=True)
        window['-HEIGHT-'].update(disabled=True)
        window['-IMAGE-'].update(filename=image_path)

window.close()

That’s it! You have now completed Part 2 of the Mini Image Editor project using PySimpleGUI. Run the Python file and test out the various image processing operations added in this tutorial. You can further enhance the project by adding more features like cropping, adjusting brightness/contrast, adding filters, etc. Have fun experimenting with PySimpleGUI and image processing with PIL!