pysimplegui image code example

Example 1: add framework to input pysimplegui

# Will only change if you selected the input
window['-In-'].Widget.configure(highlightcolor='color')

# Adds a border to the Input
window['-In-'].Widget.configure(highlightbackground='color')

# The border thickness can be edited with:
highlightthickness=

Example 2: pysimplegui show image

# image_viewer.py
import io
import os
import PySimpleGUI as sg
from PIL import Image
file_types = [("JPEG (*.jpg)", "*.jpg"),
              ("All files (*.*)", "*.*")]
def main():
    layout = [
        [sg.Image(key="-IMAGE-")],
        [
            sg.Text("Image File"),
            sg.Input(size=(25, 1), key="-FILE-"),
            sg.FileBrowse(file_types=file_types),
            sg.Button("Load Image"),
        ],
    ]
    window = sg.Window("Image Viewer", layout)
    while True:
        event, values = window.read()
        if event == "Exit" or event == sg.WIN_CLOSED:
            break
        if event == "Load Image":
            filename = values["-FILE-"]
            if os.path.exists(filename):
                image = Image.open(values["-FILE-"])
                image.thumbnail((400, 400))
                bio = io.BytesIO()
                image.save(bio, format="PNG")
                window["-IMAGE-"].update(data=bio.getvalue())
    window.close()
if __name__ == "__main__":
    main()

Example 3: pysimplegui image viewer

import PySimpleGUI as sg
import os

# Simple Image Browser based on PySimpleGUI

# Get the folder containing the images from the user
rc, folder = sg.GetPathBox('Image Browser', 'Image folder to open', default_path='X:/- EBAY - Gruen/Images - Oct Nov Dec 2017')
if rc is False or folder is '':
    sg.MsgBoxCancel('Cancelling')
    exit(0)

# get list of PNG files in folder
png_files = [folder + '\\' + f for f in os.listdir(folder) if '.png' in f]
filenames_only = [f for f in os.listdir(folder) if '.png' in f]

if len(png_files) == 0:
    sg.MsgBox('No PNG images in folder')
    exit(0)

# create the form that also returns keyboard events
form = sg.FlexForm('Image Browser', return_keyboard_events=True, location=(0,0), use_default_focus=False )

# make these 2 elements outside the layout because want to "update" them later
# initialize to the first PNG file in the list
image_elem = sg.Image(filename=png_files[0])
filename_display_elem = sg.Text(png_files[0], size=(80, 3))
file_num_display_elem = sg.Text('File 1 of {}'.format(len(png_files)), size=(15,1))

# define layout, show and read the form
col = [[filename_display_elem],
          [image_elem],
          [sg.ReadFormButton('Next', size=(8,2)), sg.ReadFormButton('Prev', size=(8,2)), file_num_display_elem]]

col_files = [[sg.Listbox(values=filenames_only, size=(60,30), key='listbox')],
             [sg.ReadFormButton('Read')]]
layout = [[sg.Column(col_files), sg.Column(col)]]
button, values = form.LayoutAndRead(layout)          # Shows form on screen

# loop reading the user input and displaying image, filename
i=0
while True:

    # perform button and keyboard operations
    if button is None:
        break
    elif button in ('Next', 'MouseWheel:Down', 'Down:40', 'Next:34') and i < len(png_files)-1:
        i += 1
    elif button in ('Prev', 'MouseWheel:Up', 'Up:38', 'Prior:33') and i > 0:
        i -= 1

    if button == 'Read':
        filename = folder + '\\' + values['listbox'][0]
        # print(filename)
    else:
        filename = png_files[i]

    # update window with new image
    image_elem.Update(filename=filename)
    # update window with filename
    filename_display_elem.Update(filename)
    # update page display
    file_num_display_elem.Update('File {} of {}'.format(i+1, len(png_files)))

    # read the form
    button, values = form.Read()