PySimpleGUI – simple graphical editor

PySimpleGUI is a simple yet powerful Python library that allows you to create graphical user interfaces (GUI) in a very easy and intuitive way. In this tutorial, I will show you how to create a basic graphical editor using PySimpleGUI.

Step 1: Installing PySimpleGUI
First, you need to install PySimpleGUI. You can do this using pip, the Python package manager. Open a terminal and run the following command:

pip install PySimpleGUI

Step 2: Importing the necessary libraries
Now, let’s import the necessary libraries. We will need PySimpleGUI, numpy for handling images, and PIL (Python Imaging Library) for image manipulation.

import PySimpleGUI as sg
import numpy as np
from PIL import Image

Step 3: Creating the GUI layout
Next, let’s define the layout for our graphical editor. We will create a simple editor with a menu bar, a canvas for drawing, and some buttons for basic operations.

layout = [
    [sg.Menu(menu_def)],
    [sg.Canvas(size=(400, 400), key='canvas')],
    [sg.Button('Clear'), sg.Button('Save')]
]
window = sg.Window('Simple Image Editor', layout, resizable=True).Finalize()
canvas = window['canvas']

Step 4: Defining the menu
Now, let’s define the menu for our editor. We will have options for opening and saving images.

menu_def = [
    ['File', ['Open', 'Save', 'Exit']]
]

Step 5: Handling menu events
Next, let’s define the event handler for the menu options. We will load and save images using the Image.open and Image.save functions from PIL.

def load_image(filename):
    img = Image.open(filename)
    img.thumbnail((400, 400))
    img = np.array(img)
    return img

def save_image(filename, img):
    img = Image.fromarray(img)
    img.save(filename)

Step 6: Handling canvas events
Now, let’s define the event handler for the canvas. We will handle drawing on the canvas using the draw_image and draw_point functions.

def draw_image(img):
    img = Image.fromarray(img)
    img.thumbnail((400, 400))
    img = img.resize((400, 400))
    img = img.tobytes()
    canvas.TKCanvas.create_image((200, 200), image=PhotoImage(data=img))

def draw_point(img, x, y, color):
    img[y, x] = color
    draw_image(img)

Step 7: Main event loop
Finally, let’s define the main event loop for our graphical editor. We will handle menu and canvas events using the event loop.

img = np.zeros((400, 400, 3), dtype=np.uint8)
while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED or event == 'Exit':
        break
    elif event == 'Open':
        filename = sg.popup_get_file('Select an image file')
        img = load_image(filename)
        draw_image(img)
    elif event == 'Save':
        filename = sg.popup_get_file('Select a location to save the image')
        save_image(filename, img)
    elif event == 'Clear':
        img = np.zeros((400, 400, 3), dtype=np.uint8)
        draw_image(img)
    elif event == 'canvas':
        x, y = values['canvas']
        if x != None and y != None:
            draw_point(img, x, y, (255, 0, 0))

window.close()

And that’s it! You have successfully created a simple graphical editor using PySimpleGUI. You can expand on this by adding more features like drawing shapes, changing colors, and adding filters. Have fun experimenting with PySimpleGUI!