We Keep Coding

Generate Tkinter Canvas In Loop with Image

I'm attempting to create a series of canvases, each displaying a different section of an image according to the coordinates present in a list. The number of different coordinates is dynamic so it must be done in a loop.
The issue I am having is even though I'm saving my references garbage collection is preventing all canvases except the last from displaying an image.
Here is what I have so far:
import tkinter as tk
import cv2
from PIL import Image, ImageTk
class App(object):
def __init__(self):
self.root = tk.Tk()
# Candidates holds the coordinates for the image sections, and is hardcoded for this example
candidates = [[0,100,100,100], [15,15,200,200], [30,30,200,200], [50,50,200,200], [100,100,200,200], [200,200,200,200]]
self.im = cv2.imread(r"....")
j = 0
i = 0
frames = []
images = []
refs = []
for candidate in candidates:
x,y,w,h = tuple(candidate)
self.img_tk = ImageTk.PhotoImage(Image.fromarray(self.im[y:y+h, x:x+w]))
Frame = tk.Canvas(self.root,bg='white', highlightthickness=1, highlightbackground="black", width=100, height= 100)
Frame.grid(row = i, column = j, sticky = 'w, e, n, s', padx=5, pady=5)
ref = Frame.create_image(0, 0, image=self.img_tk, anchor="nw")
images.append(self.img_tk)
refs.append(ref)
frames.append(Frame)
if j<2:
j+=1
else:
j=0
i+=1
app = App()
app.root.mainloop()
and the result:
As you can see, only the last frame in the loop has an image created. Any thoughts are greatly appreciated, thanks.

It is because images is a local variable, so it will be garbage collected after the function exits, so are the image references stored in it. The last image can be shown because self.img_tk saves the reference.
To solve it, change images to instance variable self.images.

How to center an image in tkinter with PIL

I want to center an image in tkinter canvas. The only thing I could think of is using anchor = 'c' but that does not seem to work. I have also tried using it on the stage.
def newsetup(filelocation):
global width, height
for widgets in root.winfo_children():
widgets.destroy()
stage = Canvas(root, width = 1000, height = 700, highlightbackground = 'red', highlightthickness = 2)
stage.pack()
imgtk = ImageTk.PhotoImage(Image.open(filelocation))
stage.create_image(stage.winfo_width() + 2, stage.winfo_height() + 2, image = imgtk, anchor = CENTER)
stage.image = imgtk

if you want to center on canvas then you need
stage.winfo_width()/2, stage.winfo_height()/2
(even without anchor= which as default has value center)
But if you put image before it runs mainloop() then stage.winfo_width() stage.winfo_height() gives 0,0 instead of expected width, height (because mainloop creates window and it sets all sizes for widgets) and it may need root.update() to run mainloop once and it will calculate all sizes.
import tkinter as tk
from PIL import ImageTk, Image
root = tk.Tk()
stage = tk.Canvas(root, width=1000, height=700)
stage.pack()
root.update() # force `mainloop()` to calculate current `width`, `height` for canvas
# and later `stage.winfo_width()` `stage.winfo_height()` will get correct values instead `0`
#imgtk = ImageTk.PhotoImage(Image.open('lenna.png'))
imgtk = ImageTk.PhotoImage(file='lenna.png')
stage.create_image((stage.winfo_width()/2, stage.winfo_height()/2), image=imgtk, anchor='center')
stage.image = imgtk
root.mainloop()
Result:
Image Lenna from Wikipedia.
EDIT:
If you want to keep it centered when you resize window then you can bind event <Configure> to canvas and it will execute assigned function - and it can move image.
But it needs image ID which you can get when you create image
img_id = stage.create_image(...)
Because <Configure> is executed when it creates window so code doesn't need root.update() because on_resize() will set correct position at start.
import tkinter as tk
from PIL import ImageTk, Image
# --- functions ---
def on_resize(event):
# it respects anchor
x = event.width/2
y = event.height/2
stage.coords(img_id, x, y)
# it DOESN'T respects anchor so you have to add offset
#x = (event.width - imgtk.width())/2
#y = (event.height - imgtk.height())/2
#stage.moveto(img_id, x, y) # doesn't respect anchor
#stage.itemconfigure(img_id, ...)
# --- main ---
root = tk.Tk()
stage = tk.Canvas(root, width=1000, height=700)
stage.pack(fill='both', expand=True)
#root.update() # force `mainloop()` to calculate current `width`, `height` for canvas
# and later `stage.winfo_width()` `stage.winfo_height()` will get correct values instead `0`
#imgtk = ImageTk.PhotoImage(Image.open('lenna.png'))
imgtk = ImageTk.PhotoImage(file='lenna.png')
img_id = stage.create_image((stage.winfo_width()/2, stage.winfo_height()/2), image=imgtk, anchor='center')
stage.image = imgtk
stage.bind('<Configure>', on_resize) # run function when Canvas change size
root.mainloop()

How can I Iterate through a list of Images and Display them in Tkinter

So, my goal is to create a sort of slideshow within Tkinter. I have a list of images like Images = ["1.png", "2.png", ...], I want to be able to iterate through the list and display each image in a Tkinter window, the concept is simple and as follows:
Display Image 1
30 Second Delay
Display Image 2
30 Second Delay
Display Image 3
I have managed to iterate the images using a button press, however, I do not want to have to click a button as it is meant to imitate a slideshow, I also attempted looping a function but the time.sleep() function does not delay in the correct way because of how Tkinter behaves.
I managed to achieve the above using mostly source code from here, and I would appreciate a little hand achieving the above.
My Code:
from tkinter import *
from PIL import ImageTk, Image
Window = Tk()
Window.geometry("1920x1080")
Window.resizable(0, 0)
Label1 = Label(Window)
Label1.pack()
Images = iter(["1.png", "2.png", "3.png", "4.png", "5.png",
"6.png", "7.png", "8.png", "9.png", "10.png"])
def Next_Image(Val):
try:
Image1 = next(Images)
except StopIteration:
return
Image1 = ImageTk.PhotoImage(Image.open(Image1))
Label1.Image = Image1
Label1["image"] = Image1
Button1 = Button(text = "Next image", command =
lambda:Next_Image(1))
Button1.place(x = 50, y = 50)
Next_Image(1)
Window.mainloop()
I also attempted to use .after(), however, it did not display each image, it skipped from the first image to the last straight away with the compounded delay.
for x in range(1, 11):
Window.after(1000, lambda : Next_Image(1))

You need to create a function that gets the image off of the list and displays it, and then uses after to call itself again in a second. Your main program needs to call this exactly once, and then it will run until it runs out of things to do.
Here's a working example that uses a text string for simplicity, but it should be obvious how to modify it to use images.
import tkinter as tk
images = iter(["1.png", "2.png", "3.png", "4.png", "5.png",
"6.png", "7.png", "8.png", "9.png", "10.png"])
def next_image():
try:
image = next(images)
label.configure(text=image)
root.after(1000, next_image)
except StopIteration:
return
root = tk.Tk()
label = tk.Label(root, width = 40, height=4)
label.pack()
next_image()
root.mainloop()

You can use .after() to switch image periodically:
from itertools import cycle
...
# use cycle() instead of iter()
Images = cycle([f"{i}.png" for i in range(1, 5)])
...
def next_image():
# use next() to get next image in the cycle list
Label1.image = ImageTk.PhotoImage(file=next(Images))
Label1['image'] = Label1.image
# switch image again after 1 second
Label1.after(1000, next_image)
next_image() # start the loop
Window.mainloop()

This worked, Thank you #acw1668 and #Bryan Oakley.
from tkinter import *
from PIL import ImageTk, Image
Window = Tk()
Window.geometry("1920x1080")
Window.resizable(0, 0)
Label1 = Label(Window)
Label1.pack()
Images = iter(["1.png", "2.png", "3.png", "4.png", "5.png", "6.png",
"7.png", "8.png", "9.png", "10.png"])
def Next_Image(Val):
try:
Image1 = next(Images)
except StopIteration:
return
Image1 = ImageTk.PhotoImage(Image.open("BuyingConfig\\" + Image1))
Label1.Image = Image1
Label1["image"] = Image1
Window.after(3000, lambda:Next_Image(1))
Window.after(0, lambda:Next_Image(1))
Window.mainloop()

How to display one image after another using .after()

I am trying to display an image to the window based on a phrase. If the character in the phrase matches the name of the picture, it should be displayed on the window. If the phrase has more than one character, the picture related to the character after the current character should be displayed to the right of the current character's picture. How would I be able to make it so that a new side-by side picture duo shows up, this time showing the picture related to the second character on the left and the third character on the right, and so on? I tried using .after() but I am not sure where to place it.
Also, when I run the following code I get an index out of range error unless I use the break statement.but I can't seem to figure out what it is. Maybe using the after() method will fix it?
import tkinter as tk
from PIL import ImageTk, Image, ImageDraw, ImageFont
import time
def open_image():
global i
global image
global img
global image2
global img2
if i < len(phrase):
if phrase[i] == " ":
image = Image.open("Rest.jpg")
img = ImageTk.PhotoImage(image)
panel['image'] = img
else:
image = Image.open(phrase[i] + ".jpg")
img = ImageTk.PhotoImage(image)
panel['image'] = img
if phrase[i + 1] != None and phrase[i + 1] != " ":
image2 = Image.open(phrase[i + 1] + ".jpg")
panel2['image2'] = img2
else:
image2 = Image.open("Rest1.jpg")
panel2['image2'] = img2
i += 1
window.after(2000, open_image)
else:
window.destroy()
# --- main ---
i = 0
phrase = " trac "
window = tk.Tk()
panel = tk.Label(window) # without image
panel.pack(side = "left", fill = "both", expand = "1", padx = 5, pady = 5)
panel2 = tk.Label(window)
panel2.pack(side = "left", fill = "both", expand = "1", padx = 5, pady = 5)
# use it after creating Label so it can set image
open_image()
window.mainloop()

I reduced code to create working example.
after() uses function's name without ()
open_image() loads image, assigns to global variable (to resolve problem with bug in PhotoImage) and changes image in Label
At start I create Label without image and open_image() adds first image, and later it change this image to new one.
import tkinter as tk
from PIL import Image, ImageTk
# --- functions ---
def open_image():
global i
global image
global img
if i < len(phrase): # check at the beginning to resolve problem with `IndexError: list index out of range`
image = Image.open(phrase[i] + ".jpg")
img = ImageTk.PhotoImage(image)
panel['image'] = img
i += 1
window.after(2000, open_image)
else:
#window.quit()
window.destroy()
# --- main ---
i = 0
phrase = " trac "
window = tk.Tk()
panel = tk.Label(window) # without image
panel.pack()
# use it after creating Label so it can set image in existing label
open_image()
window.mainloop()

unable to update image in tkinter using a function

I am trying to create a Tkinter to make a window that shows images using a label, then update the image using an update function, but the image that I am trying to show doesn't show up in the Tkinter window, instead, a black screen appears
I have two working code
one that shows an image on the Tkinter window
one what loops a GIF using an update function
I tried to combine them
the code I am working on that doesn't work
#import GUI
from tkinter import *
#change dir
import os
os.chdir("C:/Users/user/Desktop/test image folder/")
#add delay
import time
#import image
from PIL import Image, ImageTk
#set up the window
window = Tk()
#window.title("modify images")
#list of filename
filelist = []
#loop over all files in the working directory
for filename in os.listdir("."):
if not (filename.endswith('.png') or filename.endswith('.jpg')):
continue #skip non-image files and the logo file itself
filelist = filelist + [filename]
#list of filename
print(filelist)
#show first pic
imagefile = filelist[0]
photo = ImageTk.PhotoImage(Image.open(imagefile))
label1 = Label(window, image = photo)
label1.pack()
#update image
def update(ind):
imagefile = filelist[ind]
im = ImageTk.PhotoImage(Image.open(imagefile))
if ind < len(filelist):
ind += 1
else:
ind = 0
label1.configure(image=im)
window.after(2000, update, ind)
window.after(2000, update, 0)
#run the main loop
window.mainloop()
the other code I am trying to combine
1:the one that shows image
import tkinter as tk
from tkinter import *
from PIL import Image, ImageTk # Place this at the end (to avoid any conflicts/errors)
window = tk.Tk()
imagefile = "image.jpg"
img = ImageTk.PhotoImage(Image.open(imagefile))
lbl = tk.Label(window, image = img).pack()
window.mainloop()
print('hi')
2:updates gif
from tkinter import *
#change dir
import os
os.chdir("C:/Users/user/Desktop/Learn Python")
#add delay
import time
##### main:
window = Tk()
##### My Photo
photo1 = [PhotoImage(file="anime.gif", format="gif -index %i" %(i)) for i in range(85)]
#update image
def update(ind):
frame = photo1[ind]
if ind < 84:
ind += 1
else:
ind = 0
label.configure(image=frame)
window.after(80, update, ind)
label = Label(window, bg="black")
label.pack()
window.after(0, update, 0)
#####run the main loop
window.mainloop()
I expect it to show all images in the file one by one
it instead shows only the first image, then the window goes blank

You have problem because there is bug in PhotoImage. If you create it in function and assign to local variable then Garbage Collector removes image from memory and you see empty image. You have to create PhotoImages outside function or you have to assign it to some global variable.
Popular solution is to assign it to label which will display it.
label.im = im
Function:
def update(ind):
imagefile = filelist[ind]
im = ImageTk.PhotoImage(Image.open(imagefile))
if ind < len(filelist):
ind += 1
else:
ind = 0
label1.configure(image=im)
label1.im = im # <-- solution
window.after(2000, update, ind)
Doc: PhotoImage