Merge pull request #4933 from PySimpleGUI/Dev-latest

Dev latest

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:

DemoPrograms/Demo_Graph_Elem_Image_Album_No_PIL.py

@@ -0,0 +1,67 @@
+#!/usr/bin/env python
+import PySimpleGUI as sg
+import os
+
+"""
+    Demo Image Album... NO PIL version.... 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.
+
+    Same program as the Demo_Graph_Elem_Image_Album.py, but without using PIL
+
+    Not using PIL has 2 impacts:
+    1. The images are not resized to fit the window
+    2. The images are limited to PNG and GIF files
+
+    Copyright 2021 PySimpleGUI.org
+"""
+
+G_SIZE = (800, 600)  # Size of the Graph in pixels. Using a 1 to 1 mapping of pixels to pixels
+
+sg.theme('black')
+folder = sg.popup_get_folder('Where are your images?')
+if not folder:
+    exit(0)
+
+file_list = os.listdir(folder)
+fnames = [f for f in file_list if os.path.isfile(
+    os.path.join(folder, f)) and f.lower().endswith((".png", ".gif"))]
+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-', pad=(0, 0))
+
+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)
+
+offset, move_amount, direction = 0, 5, 'left'
+
+while True:
+    file_to_display = os.path.join(folder, fnames[offset])
+    window['-FILENAME-'].update(file_to_display)
+
+    image_id = graph.draw_image(filename=file_to_display, location=(0, G_SIZE[1]))
+
+    event, values = window.read()
+    if event == sg.WIN_CLOSED:
+        break
+
+    # 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(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:
+        offset = (offset + 1) % num_files  # Increment to MAX then roll over to 0
+
+window.close()