The steps to design a PNG viewer and selector

[jason990420]

Before design a script for PNG viewer and selector, some steps for window layout considered.

• Left frame
  • Top: directory + browse button, The length of directory maybe to long to fit viewable length of directory.
  • Middle: PNG thumbnail viewer, the number of PNG maybe different as in different directory, so new window for it.
    • The number of selected PNG files maybe different, so use border color for selected or not, and by '<Control-Button-1>'
  • Bottom: file list for selected in listbox
• Right frame
  • Expand frame to be with the same size of left frame
  • Get size for right frame for PNG resize
  • Show image by event '<Button-1>' on thumbnail.

from io import BytesIO
from pathlib import Path
from PIL import Image
import PySimpleGUI as sg

def move_center(window):
    screen_width, screen_height = window.get_screen_dimensions()
    win_width, win_height = window.size
    x, y = (screen_width - win_width)//2, (screen_height - win_height)//2
    window.move(x, y)

def resize(file, new_size):
    try:
        im = Image.open(file)
        w, h = im.size
        if w >= h:
            size = (new_size, int(new_size/w*h))
        else:
            size = (int(new_size/h*w), new_size)
        new_im = im.resize(size)                    # , Image.ANTIALIAS
        with BytesIO() as buffer:
            new_im.save(buffer, format="PNG")
            data = buffer.getvalue()
    except:
        data = None
    return data

def new_window(directory=''):

    path = Path(directory)
    if directory and path.is_dir():
        files = list(map(lambda file:str(file), path.glob(pattern)))
    else:
        files = []

    if files:
        layout_thumbnail = []
        row = []
        length = len(files)
        size = (thumbnail_width, thumbnail_width)
        for i, file in enumerate(files):
            data = resize(file, thumbnail_width)
            if (i % columns) == 0:
                pad = ((0, gap), gap)
            elif (i % columns) == columns - 1:
                pad = ((gap, gap*2), gap)
            else:
                pad = (gap, gap)
            frame = sg.Frame("",
                [[sg.Image(data=data, size=size, pad=(gap, gap),
                    key=("Thumbnail", i), metadata=False)]],
                pad=pad, background_color=sg.theme_background_color(),
                key=("Thumbnail_Frame", i))
            row.append(frame)
            if (i % columns) == columns-1 or i == length - 1:
                layout_thumbnail.append(row)
                row = []
    else:
        layout_thumbnail = [[]]

    width  = (thumbnail_width + 4*gap + 4) * columns + 2*gap + 16
    height = (thumbnail_width + 4*gap + 4) * columns
    layout_thumbnail_frame = [
        [sg.Column(layout_thumbnail, expand_x=True, expand_y=True,
            scrollable=True, vertical_scroll_only=True, pad=(0, 0))],
    ]
    layout_left_frame = [
        [sg.Input(directory, size=10, disabled=True, expand_x=True, key='Directory'),
         sg.Button('Browse')],
        [sg.Frame("", layout_thumbnail_frame, size=(width, height), border_width=0)],
        [sg.Listbox(selected_files, size=(10, 5), expand_x=True, key='Select_Files')],
    ]
    layout_right_frame = [
        [sg.Image(expand_x=True, expand_y=True, key='View')],
    ]
    layout = [
        [sg.Frame('', layout_left_frame),
         sg.Frame('', layout_right_frame, size=(10, 10), expand_y=True, key='Right Frame')],
    ]
    window = sg.Window('PNG Thumbnail Viewer', layout, alpha_channel=0, finalize=True)
    w, h = window['Right Frame'].get_size()
    window['Right Frame'].set_size((h, h))
    window.refresh()
    move_center(window)
    window.set_alpha(1)
    for key, element in window.key_dict.items():
        if isinstance(key, tuple) and key[0]=='Thumbnail':
            element.bind("<Control-Button-1>", "Control")
            element.bind("<Button-1>", "B1")
    return window, h, files, []

font = ("Courier New", 11)
sg.theme('DarkBlue3')
sg.set_options(font=font, dpi_awareness=True)

gap = 3
columns = 6
directory = ''
thumbnail_width = 90
selected_files = []
default_root = 'D:/'
pattern = '*.png'
bg = {True:'yellow', False:sg.theme_background_color()}

window, view_width, files, selected_files = new_window(default_root)

while True:

    event, values = window.read()

    if event == sg.WINDOW_CLOSED:
        break
    elif event == 'Browse':
        directory = sg.popup_get_folder('', no_window=True)
        if directory:
            new_win = new_window(directory)
            window.close()
            window, view_width, files, selected_files = new_win
            window['Select_Files'].update(values=[])
    elif isinstance(event, tuple) and len(event)==2:
        (element, index), bind = event
        if bind == 'B1':
            data = resize(files[index], view_width)
            window['View'].update(data=data)
        elif bind == 'Control':
            elem = window[event[0]]
            border = elem.metadata = not elem.metadata
            window[("Thumbnail_Frame", index)].Widget.configure(bg=bg[border])
            if border:
                selected_files.append(files[index])
            else:
                selected_files.remove(files[index])
            window['Select_Files'].update(values=selected_files)

window.close()

[jason990420]

Two ways to make image load faster,

1. In thumbnail preview, use option Image.NEAREST for resizing, it make image load faster about 1.5 times.

• Redefine function resize

def resize(file, new_size, resample=Image.ANTIALIAS):
    try:
        im = Image.open(file)
        w, h = im.size
        if w >= h:
            size = (new_size, int(new_size/w*h))
        else:
            size = (int(new_size/h*w), new_size)
        new_im = im.resize(size, resample)
        with BytesIO() as buffer:
            im.save(buffer, format="PNG")
            data = buffer.getvalue()
    except:
        data = None
    return data

• Use option Image.NEAREST in function new_wndow

    ...
        for i, file in enumerate(files):
            data = resize(file, thumbnail_width, resample=Image.NEAREST)
    ...

2. Split thumbnail pre-viewer into pages, and load images when required. For example, there're maximum 6x6 thumbnails in one page and only first page loaded in the beginning, other pages will be loaded only when they needed to be shown in your window,

• Split image files into pages and flags for thumbnail created or not.
• Built thumbnails only for the page to view.
• scrollbar for pre-veiwer is required.
• It may only take 0.5 second to switch between pages.

Anyway, more elements/widgets still get GUI speed lower and it is reasonable.

[jason990420]

Load image only when required

from io import BytesIO
from pathlib import Path
from PIL import Image
import PySimpleGUI as sg

class View():

    def __init__(self, window, cols, rows):
        self.window = window
        self.path = None
        self.cols = 6
        self.rows = 6
        self.thumbnails = cols * rows
        self.pathes = []
        self.pages = 0
        self.page = 0

    def load_files(self, folder, pattern='*.png'):
        path = Path(folder)
        if folder and path.is_dir():
            files = list(map(lambda file:str(file), path.glob(pattern)))
        else:
            files = []
        self.paths, temp = [], []
        self.images = len(files)
        for i, filename in enumerate(files):
            temp.append((filename, False))
            if (i % self.thumbnails == self.thumbnails-1) or (i == self.images - 1):
                    self.paths.append(temp)
                    temp = []
        self.folder = folder
        self.pages = len(self.paths)
        self.page = 0

    def resize(self, file, size):
        #try:
        im = Image.open(file)
        w, h = im.size
        if w >= h:
            new_size = (size, int(size/w*h))
        else:
            new_size = (int(size/h*w), size)
        new_im = im.resize(new_size)
        with BytesIO() as buffer:
            new_im.save(buffer, format="PNG")
            data = buffer.getvalue()
        #except:
        #    data = None
        return data

    def load_thumbnails(self):
        files = self.paths[self.page] if self.pages !=0 else []
        for i in range(self.thumbnails):
            if i < len(files):
                data, color = self.resize(files[i][0], thumbnail_width), bg[files[i][1]]
            else:
                data, color = '', bg[False]
            self.window[("Thumbnail", i)].update(data=data, size=size)
            self.window[("border", i)].Widget.configure(bg=color)

font = ("Courier New", 11)
sg.theme("DarkBlue3")
sg.set_options(font=font, dpi_awareness=True)

gap = 3
cols, rows = 4, 4
thumbnail_width = 90
width = height  = (thumbnail_width + 4*gap + 4) * cols - 4*gap
size = (thumbnail_width, thumbnail_width)
bg = {True:'yellow', False:sg.theme_background_color()}
default_folder = 'D:/'

layout_thumbnail = []
for j in range(rows):
    temp = []
    for i in range(cols):
        pad = ((0, gap), gap) if i == 0 else ((gap, 0), gap) if i == cols-1 else (gap, gap)
        frame_layout = [[sg.Image(size=size, pad=(gap, gap), key=("Thumbnail", j*cols+i))]]
        frame = sg.Frame("", frame_layout, pad=pad, key=("border", j*cols+i), background_color=sg.theme_background_color())
        temp.append(frame)
    layout_thumbnail.append(temp)

layout_thumbnail_frame = [
    [sg.Column(layout_thumbnail, expand_x=True, expand_y=True, pad=(0, 0))],
]

layout = [
    [sg.Input(default_folder, size=10, disabled=True, expand_x=True, key='Directory'),
     sg.Button('Browse')],
    [sg.Frame("", layout_thumbnail_frame, size=(width, height), border_width=0)],
    [sg.Text("Page 0", size=0, key='PAGE'), sg.Push(),
     sg.Button('PgUp'), sg.Button('PgDn'), sg.Button('Home'), sg.Button('End'),],
]

window = sg.Window('PNG Thumbnail Viewer', layout, finalize=True)

view = View(window, cols, rows)
view.load_files(default_folder)
view.load_thumbnails()

while True:

    event, values = window.read()

    if event == sg.WINDOW_CLOSED:
        break
    elif event == 'PgDn':
        if view.page < view.pages - 1:
            view.page += 1
            view.load_thumbnails()
    elif event == 'PgUp':
        if view.page > 0:
            view.page -= 1
            view.load_thumbnails()
    elif event == 'Home':
        if view.page != 0:
            view.page = 0
            view.load_thumbnails()
    elif event == 'End':
        if view.page != view.pages - 1:
            view.page = view.pages - 1
            view.load_thumbnails()
    elif event == 'Browse':
        folder = sg.popup_get_folder('', no_window=True, modal=True)
        if folder:
            view.load_files(folder)
            view.load_thumbnails()
    window['PAGE'].update(f'Page {view.page}')

window.close()