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()
Related
I have code to display 2x5 images and change them when I click on them. However, the code I wrote does not display any images in the tkinter windows. Why?
Some details:
the URLs are working fine
import tkinter as tk
from PIL import Image, ImageTk
# Create the main window
root = tk.Tk()
# Create a list of images to display
images = ['https://lh3.googleusercontent.com/SsEIJWka3_cYRXXSE8VD3XNOgtOxoZhqW1uB6UFj78eg8gq3G4jAqL4Z_5KwA12aD7Leqp27F653aBkYkRBkEQyeKxfaZPyDx0O8CzWg=s0',
'https://lh3.googleusercontent.com/Bawo7r1nPZV6sJ4OHZJHdKV_4Ky59vquAR7KoUXcNZgx9fqTaOW-QaOM9qoyYhOTAopzjt9OIfW06RMwa-9eJW9KjQw=s0',
'https://lh3.googleusercontent.com/tm1DbZrAP0uBM-OJhLwvKir1Le5LglRF_bvbaNi6m-F_pIyttsWQz040soRY9pWA9PgNEYFA_fBkg_keYixRXCAjz9Q=s0',
'https://lh3.googleusercontent.com/AyiKhdEWJ7XmtPXQbRg_kWqKn6mCV07bsuUB01hJHjVVP-ZQFmzjTWt7JIWiQFZbb9l5tKFhVOspmco4lMwqwWImfgg=s0',
'https://lh3.googleusercontent.com/FNNTrTASiUR0f49UVUY5bisIM-3RlAbf_AmktgnU_4ou1ZG0juh3pMT1-xpQmtN1R8At4Gq9B4ioSSi4TVrgbCZsmtY=s0',
'https://lh3.googleusercontent.com/mAyAjvYjIeAIlByhJx1Huctgeb58y7519XYP38oL1FXarhVlcXW7kxuwayOCFdnwtOp6B6F0HJmmws-Ceo5b_pNSSQs=s0',
'https://lh3.googleusercontent.com/gShVRyvLLbwVB8jeIPghCXgr96wxTHaM4zqfmxIWRsUpMhMn38PwuUU13o1mXQzLMt5HFqX761u8Tgo4L_JG1XLATvw=s0',
'https://lh3.googleusercontent.com/KA2hIo0BlMDmyQDEC3ixvp9WHgcyJnlAvWtVcZmExh9ocPoZdQGRJh7bZjE2Mx2OGC0Zi3QGHGP0LlmuFgRlIYs36Sgn5G2OD-0MaTo=s0',
'https://lh3.googleusercontent.com/N2m90mImdcoLacUybb_rxcktTwtr0LFhtuzxbSE9elIhElF6jpWngx96_uZ0L1TGNof5pNt4n_Ygb4KYlPTpA9o6788=s0',
'https://lh3.googleusercontent.com/1pTfYJlLwVTifKj4PlsWPyAg4PcIVBAiVvB8sameSnmm7HRd056abNUIRq33rgry7u9t-ju-eHOnbfqQpK4q_8IwzIXZ4WgrqZW9l7U=s0',
'https://lh3.googleusercontent.com/0bgOiMrBM2GuhW_pNeQW711GuB3kD7Gq7AILGHaJGeWKa1Fu1hUJGpOjvSpiP_XpgRlC4jVmH0Z1233PEPMJTfNRR7Q=s0',
'https://lh3.googleusercontent.com/x9NFmu-RbZ_9M5BK_hOzQRdVj4pu7p--y_IYwDK46lDPzQtTIO9AlBV_ObgQiY7GeWE0ZfNjMSyrCWgnwL4MCasQZQ=s0']
# Create a variable to keep track of the current image
current_image = [0,0,0,0,0,0,0,0,0,0]
# Create a grid of labels to display the images
image_grid = [[tk.Label(root) for _ in range(5)] for _ in range(2)]
# Function to change the image
def change_image(x,y):
global current_image
current_image[x*5+y] += 1
if current_image[x*5+y] >= len(images):
current_image[x*5+y] = 0
image = Image.open(BytesIO(requests.get(images[current_image[x*5+y]]).content))
image = image.resize((256,256))
print(image)
photo = ImageTk.PhotoImage(image)
image_grid[x][y].config(image=photo)
image_grid[x][y].image = photo
# Bind labels to the function
for i in range(2):
for j in range(5):
image_grid[i][j].bind("<Button-1>", lambda event, x=i, y=j: change_image(x,y))
image_grid[i][j].grid(row=i, column=j)
# Start the main loop
root.mainloop()
The Images will only display after you click on a label. And your labels are all very small when you initialize your window. Set a bigger window and use sticky in grid to get bigger cells (you can even set a border to the labels to see where exactly you're clicking):
import tkinter as tk
from PIL import Image, ImageTk
from io import BytesIO
import requests
# Create the main window
root = tk.Tk()
root.geometry('1280x720')
# Create a list of images to display
images = ['https://lh3.googleusercontent.com/SsEIJWka3_cYRXXSE8VD3XNOgtOxoZhqW1uB6UFj78eg8gq3G4jAqL4Z_5KwA12aD7Leqp27F653aBkYkRBkEQyeKxfaZPyDx0O8CzWg=s0',
'https://lh3.googleusercontent.com/Bawo7r1nPZV6sJ4OHZJHdKV_4Ky59vquAR7KoUXcNZgx9fqTaOW-QaOM9qoyYhOTAopzjt9OIfW06RMwa-9eJW9KjQw=s0',
'https://lh3.googleusercontent.com/tm1DbZrAP0uBM-OJhLwvKir1Le5LglRF_bvbaNi6m-F_pIyttsWQz040soRY9pWA9PgNEYFA_fBkg_keYixRXCAjz9Q=s0',
'https://lh3.googleusercontent.com/AyiKhdEWJ7XmtPXQbRg_kWqKn6mCV07bsuUB01hJHjVVP-ZQFmzjTWt7JIWiQFZbb9l5tKFhVOspmco4lMwqwWImfgg=s0',
'https://lh3.googleusercontent.com/FNNTrTASiUR0f49UVUY5bisIM-3RlAbf_AmktgnU_4ou1ZG0juh3pMT1-xpQmtN1R8At4Gq9B4ioSSi4TVrgbCZsmtY=s0',
'https://lh3.googleusercontent.com/mAyAjvYjIeAIlByhJx1Huctgeb58y7519XYP38oL1FXarhVlcXW7kxuwayOCFdnwtOp6B6F0HJmmws-Ceo5b_pNSSQs=s0',
'https://lh3.googleusercontent.com/gShVRyvLLbwVB8jeIPghCXgr96wxTHaM4zqfmxIWRsUpMhMn38PwuUU13o1mXQzLMt5HFqX761u8Tgo4L_JG1XLATvw=s0',
'https://lh3.googleusercontent.com/KA2hIo0BlMDmyQDEC3ixvp9WHgcyJnlAvWtVcZmExh9ocPoZdQGRJh7bZjE2Mx2OGC0Zi3QGHGP0LlmuFgRlIYs36Sgn5G2OD-0MaTo=s0',
'https://lh3.googleusercontent.com/N2m90mImdcoLacUybb_rxcktTwtr0LFhtuzxbSE9elIhElF6jpWngx96_uZ0L1TGNof5pNt4n_Ygb4KYlPTpA9o6788=s0',
'https://lh3.googleusercontent.com/1pTfYJlLwVTifKj4PlsWPyAg4PcIVBAiVvB8sameSnmm7HRd056abNUIRq33rgry7u9t-ju-eHOnbfqQpK4q_8IwzIXZ4WgrqZW9l7U=s0',
'https://lh3.googleusercontent.com/0bgOiMrBM2GuhW_pNeQW711GuB3kD7Gq7AILGHaJGeWKa1Fu1hUJGpOjvSpiP_XpgRlC4jVmH0Z1233PEPMJTfNRR7Q=s0',
'https://lh3.googleusercontent.com/x9NFmu-RbZ_9M5BK_hOzQRdVj4pu7p--y_IYwDK46lDPzQtTIO9AlBV_ObgQiY7GeWE0ZfNjMSyrCWgnwL4MCasQZQ=s0']
# Create a variable to keep track of the current image
current_image = [0,0,0,0,0,0,0,0,0,0]
# Create a grid of labels to display the images
image_grid = [[tk.Label(root, borderwidth=2, relief="groove") for _ in range(5)] for _ in range(2)]
# Function to change the image
def change_image(x,y):
global current_image
current_image[x*5+y] += 1
if current_image[x*5+y] >= len(images):
current_image[x*5+y] = 0
image = Image.open(BytesIO(requests.get(images[current_image[x*5+y]]).content))
image = image.resize((256,256))
print(image)
photo = ImageTk.PhotoImage(image)
image_grid[x][y].config(image=photo)
image_grid[x][y].image = photo
# Bind labels to the function
for i in range(2):
root.rowconfigure(i, weight=1)
for j in range(5):
root.columnconfigure(j, weight=1)
image_grid[i][j].bind("<Button-1>", lambda event, x=i, y=j: change_image(x,y))
image_grid[i][j].grid(row=i, column=j, sticky="nsew")
# Start the main loop
root.mainloop()
Note: setting rowconfigure/columnconfigure ensures that the cells have the same dimension, you might want to use it in change_image as well
your issue is that the labels start with a zero width and height because they are empty, you could set a placeholder image on startup to make the GUI fit exactly perfect around it.
import tkinter as tk
from PIL import Image, ImageTk
from io import BytesIO
import requests
# Create the main window
root = tk.Tk()
# Create a list of images to display
images = ['https://lh3.googleusercontent.com/SsEIJWka3_cYRXXSE8VD3XNOgtOxoZhqW1uB6UFj78eg8gq3G4jAqL4Z_5KwA12aD7Leqp27F653aBkYkRBkEQyeKxfaZPyDx0O8CzWg=s0',
'https://lh3.googleusercontent.com/Bawo7r1nPZV6sJ4OHZJHdKV_4Ky59vquAR7KoUXcNZgx9fqTaOW-QaOM9qoyYhOTAopzjt9OIfW06RMwa-9eJW9KjQw=s0',
'https://lh3.googleusercontent.com/tm1DbZrAP0uBM-OJhLwvKir1Le5LglRF_bvbaNi6m-F_pIyttsWQz040soRY9pWA9PgNEYFA_fBkg_keYixRXCAjz9Q=s0',
'https://lh3.googleusercontent.com/AyiKhdEWJ7XmtPXQbRg_kWqKn6mCV07bsuUB01hJHjVVP-ZQFmzjTWt7JIWiQFZbb9l5tKFhVOspmco4lMwqwWImfgg=s0',
'https://lh3.googleusercontent.com/FNNTrTASiUR0f49UVUY5bisIM-3RlAbf_AmktgnU_4ou1ZG0juh3pMT1-xpQmtN1R8At4Gq9B4ioSSi4TVrgbCZsmtY=s0',
'https://lh3.googleusercontent.com/mAyAjvYjIeAIlByhJx1Huctgeb58y7519XYP38oL1FXarhVlcXW7kxuwayOCFdnwtOp6B6F0HJmmws-Ceo5b_pNSSQs=s0',
'https://lh3.googleusercontent.com/gShVRyvLLbwVB8jeIPghCXgr96wxTHaM4zqfmxIWRsUpMhMn38PwuUU13o1mXQzLMt5HFqX761u8Tgo4L_JG1XLATvw=s0',
'https://lh3.googleusercontent.com/KA2hIo0BlMDmyQDEC3ixvp9WHgcyJnlAvWtVcZmExh9ocPoZdQGRJh7bZjE2Mx2OGC0Zi3QGHGP0LlmuFgRlIYs36Sgn5G2OD-0MaTo=s0',
'https://lh3.googleusercontent.com/N2m90mImdcoLacUybb_rxcktTwtr0LFhtuzxbSE9elIhElF6jpWngx96_uZ0L1TGNof5pNt4n_Ygb4KYlPTpA9o6788=s0',
'https://lh3.googleusercontent.com/1pTfYJlLwVTifKj4PlsWPyAg4PcIVBAiVvB8sameSnmm7HRd056abNUIRq33rgry7u9t-ju-eHOnbfqQpK4q_8IwzIXZ4WgrqZW9l7U=s0',
'https://lh3.googleusercontent.com/0bgOiMrBM2GuhW_pNeQW711GuB3kD7Gq7AILGHaJGeWKa1Fu1hUJGpOjvSpiP_XpgRlC4jVmH0Z1233PEPMJTfNRR7Q=s0',
'https://lh3.googleusercontent.com/x9NFmu-RbZ_9M5BK_hOzQRdVj4pu7p--y_IYwDK46lDPzQtTIO9AlBV_ObgQiY7GeWE0ZfNjMSyrCWgnwL4MCasQZQ=s0']
# Create a variable to keep track of the current image
current_image = [0,0,0,0,0,0,0,0,0,0]
# Create a grid of labels to display the images
image = Image.new('RGBA', (256, 256))
photo = ImageTk.PhotoImage(image)
image_grid = [[tk.Label(root, image=photo, borderwidth=2, relief="groove") for _ in range(5)] for _ in range(2)]
# Function to change the image
def change_image(x,y):
global current_image
current_image[x*5+y] += 1
if current_image[x*5+y] >= len(images):
current_image[x*5+y] = 0
image = Image.open(BytesIO(requests.get(images[current_image[x*5+y]]).content))
image = image.resize((256,256))
print(image)
photo = ImageTk.PhotoImage(image)
image_grid[x][y].config(image=photo)
image_grid[x][y].image = photo
# Bind labels to the function
for i in range(2):
root.rowconfigure(i, weight=1)
for j in range(5):
root.columnconfigure(j, weight=1)
image_grid[i][j].bind("<Button-1>", lambda event, x=i, y=j: change_image(x,y))
image_grid[i][j].grid(row=i, column=j)
# Start the main loop
root.mainloop()
As already mentioned, you used Label without a text and they were just not visible. I suggest you use Button instead. Your x and y in change_image update correctly, but images[current_image[x*5+y]] always pointed to the same image. I simplified your code and removed the global variable:
import tkinter as tk
from PIL import Image, ImageTk
import requests
from io import BytesIO
# Create the main window
root = tk.Tk()
# Create a list of images to display
images = ['https://lh3.googleusercontent.com/SsEIJWka3_cYRXXSE8VD3XNOgtOxoZhqW1uB6UFj78eg8gq3G4jAqL4Z_5KwA12aD7Leqp27F653aBkYkRBkEQyeKxfaZPyDx0O8CzWg=s0',
'https://lh3.googleusercontent.com/Bawo7r1nPZV6sJ4OHZJHdKV_4Ky59vquAR7KoUXcNZgx9fqTaOW-QaOM9qoyYhOTAopzjt9OIfW06RMwa-9eJW9KjQw=s0',
'https://lh3.googleusercontent.com/tm1DbZrAP0uBM-OJhLwvKir1Le5LglRF_bvbaNi6m-F_pIyttsWQz040soRY9pWA9PgNEYFA_fBkg_keYixRXCAjz9Q=s0',
'https://lh3.googleusercontent.com/AyiKhdEWJ7XmtPXQbRg_kWqKn6mCV07bsuUB01hJHjVVP-ZQFmzjTWt7JIWiQFZbb9l5tKFhVOspmco4lMwqwWImfgg=s0',
'https://lh3.googleusercontent.com/FNNTrTASiUR0f49UVUY5bisIM-3RlAbf_AmktgnU_4ou1ZG0juh3pMT1-xpQmtN1R8At4Gq9B4ioSSi4TVrgbCZsmtY=s0',
'https://lh3.googleusercontent.com/mAyAjvYjIeAIlByhJx1Huctgeb58y7519XYP38oL1FXarhVlcXW7kxuwayOCFdnwtOp6B6F0HJmmws-Ceo5b_pNSSQs=s0',
'https://lh3.googleusercontent.com/gShVRyvLLbwVB8jeIPghCXgr96wxTHaM4zqfmxIWRsUpMhMn38PwuUU13o1mXQzLMt5HFqX761u8Tgo4L_JG1XLATvw=s0',
'https://lh3.googleusercontent.com/KA2hIo0BlMDmyQDEC3ixvp9WHgcyJnlAvWtVcZmExh9ocPoZdQGRJh7bZjE2Mx2OGC0Zi3QGHGP0LlmuFgRlIYs36Sgn5G2OD-0MaTo=s0',
'https://lh3.googleusercontent.com/N2m90mImdcoLacUybb_rxcktTwtr0LFhtuzxbSE9elIhElF6jpWngx96_uZ0L1TGNof5pNt4n_Ygb4KYlPTpA9o6788=s0',
'https://lh3.googleusercontent.com/1pTfYJlLwVTifKj4PlsWPyAg4PcIVBAiVvB8sameSnmm7HRd056abNUIRq33rgry7u9t-ju-eHOnbfqQpK4q_8IwzIXZ4WgrqZW9l7U=s0',
'https://lh3.googleusercontent.com/0bgOiMrBM2GuhW_pNeQW711GuB3kD7Gq7AILGHaJGeWKa1Fu1hUJGpOjvSpiP_XpgRlC4jVmH0Z1233PEPMJTfNRR7Q=s0',
'https://lh3.googleusercontent.com/x9NFmu-RbZ_9M5BK_hOzQRdVj4pu7p--y_IYwDK46lDPzQtTIO9AlBV_ObgQiY7GeWE0ZfNjMSyrCWgnwL4MCasQZQ=s0']
# Create a grid of labels to display the images
image_grid = [[tk.Button(root, text=f"Button {x} {y}") for x in range(5)] for y in range(2)]
# Function to change the image
def change_image(x,y):
print(f"Changing image to: {x} {y} (index: {x*5+y}): {images[x*5+y]}")
image = Image.open(BytesIO(requests.get(images[x*5+y]).content))
image = image.resize((256, 256))
print(image)
photo = ImageTk.PhotoImage(image)
image_grid[x][y].config(image=photo)
image_grid[x][y].image = photo
# Bind labels to the function
for i in range(2):
for j in range(5):
image_grid[i][j].bind("<Button-1>", lambda event, x=i, y=j: change_image(x,y))
image_grid[i][j].grid(row=i, column=j)
# Start the main loop
root.mainloop()
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()
I'm trying to put a background image in my tkinter project, but despite of several attempts it's simply not showing up.
Here is the code:
import tkinter
from PIL import ImageTk,Image
show_screen = tkinter.Tk()
show_screen.geometry('900x900')
show_screen.title("LEARNTECH OPE")
img_show = Image.open("C:\PYTHON IDE\RemoteProctoring_Featured.png")
show_image = ImageTk.PhotoImage(img_show)
show_label = tkinter.Label(show_screen,font=("Arial Bold",10),fg="blue",
text="FILL THE NECESSARY DETAILS GIVEN BELOW")
show_label.place(x=600,y=0)
enter_field = tkinter.Entry(show_screen,width=50)
enter_field.place(x=600,y=200)
def clicked():
ref = "Welcome" + enter_field.get()
show_label.configure(text=ref)
show_button = tkinter.Button(show_screen,text="CLICK TO EXIT",
fg="green",command=clicked).place(x=600,y=400)
show_screen.mainloop()
As I said in a comment, images can only be displayed as part of some tkinter widget. Below is an example of doing that by putting the image in a Label. I also added code to resize the image to fill the window (aka "screen" in your code).
import tkinter
from PIL import ImageTk, Image
WIDTH, HEIGHT = 900, 900
IMG_PATH = r"C:\PYTHON IDE\RemoteProctoring_Featured.png" # Note 'r' prefix.
show_screen = tkinter.Tk()
show_screen.geometry('{}x{}'.format(WIDTH, HEIGHT))
show_screen.title("LEARNTECH OPE")
# Place background image on a Label widget.
tmp_img = Image.open(IMG_PATH).resize((WIDTH, HEIGHT), Image.ANTIALIAS)
bkg_img = ImageTk.PhotoImage(tmp_img)
bkg_label = tkinter.Label(show_screen, image=bkg_img)
bkg_label.img = bkg_img # Keep a reference in case this code put is in a function.
bkg_label.place(relx=0.5, rely=0.5, anchor='center') # Place in center of window.
enter_field = tkinter.Entry(show_screen,width=50)
enter_field.place(x=600,y=200)
show_label = tkinter.Label(show_screen,font=("Arial Bold",10),fg="blue",
text="FILL THE NECESSARY DETAILS GIVEN BELOW")
show_label.place(x=600,y=0)
def clicked():
ref = "Welcome " + enter_field.get()
show_label.configure(text=ref)
show_button = tkinter.Button(show_screen,text="CLICK TO EXIT",
fg="green",command=clicked)
show_button.place(x=600,y=400)
show_screen.mainloop()
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
I have been trying to make a top-level window view which collects and shows all the images present in a folder in columns of 10. If the images were more than the allocated size of the window I wanted it to be possible to scroll through the images. I followed the answer given to Scrollable Toplevel Window (tkinter)
to correctly add an image to a canvas and make it possible to scroll through them. But, in my case the entire popup window just comes out to be blank. Here is the code
import tkinter as tk
from tkinter import *
import glob
import os
from PIL import Image, ImageTk
def pop_up_window():
win = Toplevel()
vbar = tk.Scrollbar(win, orient = VERTICAL)
vbar.grid(row = 0, column = 1, sticky = "ns")
container = tk.Canvas(win, height=300, width=720, scrollregion=(0, 0, 300, 720))
container.grid(row = 0, column = 0, sticky = "nsew")
vbar.config(command=container.yview)
container.config(yscrollcommand=vbar.set)
path = "D:\\image_collection"
COLUMNS = 10
image_count = 0
for infile in glob.glob(os.path.join(path, '*.jpg')):
image_count += 1
r, c = divmod(image_count-1, COLUMNS)
im = Image.open(infile)
resized = im.resize((100, 100), Image.ANTIALIAS)
img_part = ImageTk.PhotoImage(Image.open(infile).resize((100, 100), Image.ANTIALIAS))
image_in_canvas = container.create_image(r, c, image = img_part)
win.rowconfigure(0, weight=1)
win.columnconfigure(0, weight=1)
root = Tk()
button = Button(root, text='Call Pop-up window', command = pop_up_window)
button.place(x = 0, y = 0)
root.mainloop()
What changes should I make?
You need to keep a reference to your images or it will be garbage collected by Python. A simple change can do it:
placeholder = []
def pop_up_window():
...
for infile in glob.glob(os.path.join(path, '*.jpg')):
image_count += 1
r, c = divmod(image_count-1, COLUMNS)
im = Image.open(infile)
img_part = ImageTk.PhotoImage(Image.open(infile).resize((100, 100), Image.ANTIALIAS))
placeholder.append(img_part)
image_in_canvas = container.create_image(r, c, image = img_part)
Also I want to point that the create_image method takes two coordinates as args. You are currently creating them as if they are grids, and it won't show up in the alignment you expected.
Your code works but it have few issues with it. I fixed all of them or maybe most of them, in case I forgot to notice it.
When creating an image in a function always create a reference to them as here you have many images so you can create a list to your container.
To keep updating the scrollregion depending upon the amount of images bind "" to the container with the callback function lambda e: scrollregion=container.bbox('all').
Here are the changes that I did to your pop_up_window function.
...
path = "D:\\image_collection"
COLUMNS = 7
container.img_list = []
column = 0
row = 0
for infile in glob.glob(os.path.join(path, '*.jpg')):
if column >= COLUMNS:
column = 0
row += 1
im = Image.open(infile).resize((100, 100), Image.ANTIALIAS)
img = ImageTk.PhotoImage(im)
container.img_list.append(img)
container.create_image(column*100+10, row*100+10, image = img, anchor='nw')
column += 1
container.bind('<Configure>',lambda e:container.configure(scrollregion=container.bbox('all')))
...