diff --git a/DemoPrograms/Demo_Graph_Elem_Image_Album.py b/DemoPrograms/Demo_Graph_Elem_Image_Album.py index b4d1c5a9..115f72c5 100644 --- a/DemoPrograms/Demo_Graph_Elem_Image_Album.py +++ b/DemoPrograms/Demo_Graph_Elem_Image_Album.py @@ -5,11 +5,14 @@ import PIL import io import base64 import os -from typing import Union, Tuple """ - Demo Image Album.... displays images on Graph Element and transitions - by sliding them across. Click on right side of image to navigate down through filenames, left side for up. + Demo Image Album.... displays images on Graph Element and has a visual "slide transition" + + + Click on right side of image to navigate down through filenames, left side for up. + + PIL is required for this particular demo because it displays PNG, JPG, TIFF, BMP, GIF and ICO files Contains a couple of handy PIL-based image functions that resize an image while maintaining correct proportion. One you pass a filename, the other a BASE64 string. @@ -17,16 +20,18 @@ from typing import Union, Tuple Copyright 2020 PySimpleGUI.org """ -G_SIZE = (800,600) +G_SIZE = (800,600) # Size of the Graph in pixels. Using a 1 to 1 mapping of pixels to pixels + +sg.theme('black') def convert_to_bytes(file_or_bytes, resize=None): ''' Will convert into bytes and optionally resize an image that is a file or a base64 bytes object. :param file_or_bytes: either a string filename or a bytes base64 image object - :type file_or_bytes: (Union[str, bytes]) + :type file_or_bytes: (str | bytes) :param resize: optional new size - :type resize: (Tuple[int, int] or None) + :type resize: ((int, int) | None) :return: (bytes) a byte-string object :rtype: (bytes) ''' @@ -54,32 +59,37 @@ fnames = [f for f in file_list if os.path.isfile( os.path.join(folder, f)) and f.lower().endswith((".png", ".jpg", "jpeg", ".tiff", ".bmp", ".gif", ".ico"))] num_files = len(fnames) -graph = sg.Graph(canvas_size=G_SIZE, graph_bottom_left=(0, 0), graph_top_right=G_SIZE, enable_events=True, key='-GRAPH-') -layout = [[graph]] +graph = sg.Graph(canvas_size=G_SIZE, graph_bottom_left=(0, 0), graph_top_right=G_SIZE, enable_events=True, key='-GRAPH-', pad=(0,0)) -window = sg.Window('Scrolling Image Viewer', layout, margins=(0,0), element_padding=(0,0), use_default_focus=False, finalize=True) +layout = [ [sg.Text('Click on the right side of the window to navigate forward, the left side to go backwards')], + [sg.Text(f'Displaying image: '), sg.Text(k='-FILENAME-')], + [graph]] + +window = sg.Window('Scrolling Image Viewer', layout, margins=(0,0), use_default_focus=False, finalize=True) -window.read() offset, move_amount, direction = 0, 5, 'left' + while True: file_to_display = os.path.join(folder, fnames[offset]) + window['-FILENAME-'].update(file_to_display) img_data = convert_to_bytes(file_to_display, resize=G_SIZE) - id = graph.draw_image(data=img_data, location=(0, G_SIZE[1])) + image_id = graph.draw_image(data=img_data, location=(0, G_SIZE[1])) event, values = window.read() if event == sg.WIN_CLOSED: break - if event in ('<', '>'): - direction = 'left' if event == '<' else 'right' - elif event == '-GRAPH-': + # if image is clicked, then move in the left direction if clicked on left half of the image + if event == '-GRAPH-': direction = 'left' if values['-GRAPH-'][0] < (G_SIZE[0] // 2) else 'right' + # Do the animation for i in range(G_SIZE[0]//move_amount): - graph.move_figure(id, -move_amount if direction == 'left' else move_amount, 0) - window.read(timeout=0) - graph.delete_figure(id) + graph.move_figure(image_id, -move_amount if direction == 'left' else move_amount, 0) + window.refresh() + graph.delete_figure(image_id) + # Bump the image index if direction == 'left': offset = (offset + (num_files - 1)) % num_files # Decrement - roll over to MAX from 0 else: