Build an Image Viewer and Simple Computer Vision App with PySimpleGUI

Image Viewer System Construction

We first present the final UI and the complete source code for an image viewer built with PySimpleGUI. The program lets the user select a folder, lists PNG and GIF files, and displays the chosen image.

import PySimpleGUI as sg
import os.path

file_list_column = [
    [sg.Text("Image Folder"),
     sg.In(size=(25, 1), enable_events=True, key="-FOLDER-"),
     sg.FolderBrowse('Browse')],
    [sg.Listbox(values=[], enable_events=True, size=(40, 20), key="-FILE LIST-")]
]

image_viewer_column = [
    [sg.Text("Select an image from the list on the left:")],
    [sg.Text(size=(40, 1), key="-TOUT-")],
    [sg.Image(key="-IMAGE-")]
]

layout = [
    [sg.Column(file_list_column), sg.VSeperator(), sg.Column(image_viewer_column)]
]

window = sg.Window("Image Viewer", layout)

while True:
    event, values = window.read()
    if event == "Exit" or event == sg.WIN_CLOSED:
        break
    if event == "-FOLDER-":
        folder = values["-FOLDER-"]
        try:
            file_list = os.listdir(folder)
        except:
            file_list = []
        fnames = [f for f in file_list
                  if os.path.isfile(os.path.join(folder, f))
                  and f.lower().endswith((".png", ".gif"))]
        window["-FILE LIST-"].update(fnames)
    elif event == "-FILE LIST-":
        try:
            filename = os.path.join(values["-FOLDER-"], values["-FILE LIST-"][0])
            window["-TOUT-"].update(filename)
            window["-IMAGE-"].update(filename=filename)
        except:
            pass

window.close()

The layout consists of two columns separated by a vertical line. The left column contains a label, an input field for the folder path, a browse button, and a listbox that shows image filenames. The right column shows a prompt, a text element that displays the selected file path, and an Image element that renders the picture. Keys such as -FOLDER-, -FILE LIST-, -TOUT-, and -IMAGE- are used to access elements inside the event loop.

Simple Computer Vision System

Next we extend the GUI to capture frames from the built‑in webcam using OpenCV and display them live in a PySimpleGUI window.

import tkinter
import cv2, PySimpleGUI as sg

USE_CAMERA = 0
window, cap = sg.Window('Simple Computer Vision System',
                        [[sg.Image(filename='', key='image')]],
                        location=(0, 0), grab_anywhere=True), cv2.VideoCapture(USE_CAMERA)

while window(timeout=20)[0] != sg.WIN_CLOSED:
    img_bytes = cv2.imencode('.png', cap.read()[1])[1].tobytes()
    window['image'](data=img_bytes)

window.close()

The code creates a single Image element, opens the default camera with cv2.VideoCapture(0), encodes each frame to PNG bytes, and updates the GUI element in a non‑blocking loop. The grab_anywhere=True flag allows the window to be moved without a title bar.

Both examples illustrate how PySimpleGUI can be used for rapid prototyping of desktop tools, from simple file browsers to real‑time vision applications.