I want to show images in the Listbox tkinter widget. My code looks like this:
mylist = Listbox(self.labelFrame3, yscrollcommand=self.yscrollbar.set, selectmode=SINGLE)
mylist.grid(row=0, column=0, rowspan=21, columnspan=21, sticky=(N, S, E, W))
img = Image.open('modeldata/photosamples/amanullahattamuhammad2.0.jpg') # PIL solution
img = img.resize((200, 200), Image.ANTIALIAS) # The (250, 250) is (height, width)
img = ImageTk.PhotoImage(img)
How to print this image in Listbox?
As someone mentioned in a comment you can't put images in a Listbox, but as I mentioned in another, you could use a Text widget instead because you can put images into them. Below is a relatively simple demonstration of how something like that can be done. Its two buttons illustrate how it can display just text or a combination of the two simultaneously. Text widget are actually very versatile.
Anyway, since presumably you want a scrollable list, the Text subclass named tkinter.scrolledtext is used instead of plain one to save work. Since it's a subclass, it can do anything its baseclass can do.
from pathlib import Path
from PIL import Image, ImageTk
import tkinter as tk
from tkinter.constants import *
from tkinter.scrolledtext import ScrolledText
class App:
def __init__(self, image_folder_path, image_file_extensions):
self.root = tk.Tk()
self.image_folder_path = image_folder_path
self.image_file_extensions = image_file_extensions
self.create_widgets()
self.root.mainloop()
def create_widgets(self):
self.list_btn = tk.Button(self.root, text='List Images', command=self.list_images)
self.list_btn.grid(row=0, column=0)
self.show_btn = tk.Button(self.root, text='Show Images', command=self.show_images)
self.show_btn.grid(row=1, column=0)
self.text = ScrolledText(self.root, wrap=WORD)
self.text.grid(row=2, column=0, padx=10, pady=10)
self.text.image_filenames = []
self.text.images = []
def list_images(self):
''' Create and display a list of the images the in folder that have one
of the specified extensions. '''
self.text.image_filenames.clear()
for filepath in Path(self.image_folder_path).iterdir():
if filepath.suffix in self.image_file_extensions:
self.text.insert(INSERT, filepath.name+'\n')
self.text.image_filenames.append(filepath)
def show_images(self):
''' Show the listed image names along with the images themselves. '''
self.text.delete('1.0', END) # Clear current contents.
self.text.images.clear()
# Display images in Text widget.
for image_file_path in self.text.image_filenames:
img = Image.open(image_file_path).resize((64, 64), Image.ANTIALIAS)
img = ImageTk.PhotoImage(img)
self.text.insert(INSERT, image_file_path.name+'\n')
self.text.image_create(INSERT, padx=5, pady=5, image=img)
self.text.images.append(img) # Keep a reference.
self.text.insert(INSERT, '\n')
image_folder_path = 'modeldata/photosamples'
image_file_extensions = {'.jpg', '.png'}
App(image_folder_path, image_file_extensions)
Here's it running on a folder on my computer with the images shown:
Related
I have a program that resizes the buttons when you resize the window but the image doesn't resize with the buttons.
This is my code:
l = Label(window, image=img).grid(row=0, column=0, rowspan=3, sticky='nesw')
con = Frame(window).grid(row=0, column=1, sticky='nesw')
nextImg = PhotoImage(file='nextImg.png')
lastImg = PhotoImage(file='lastImg.png')
ok = PhotoImage(file="ok".png')
nextCam = Button(con, image=nextImg, command=nxt, background='#2B2B2B').grid(row=0, column=1, sticky='nesw')
lastCam = Button(con, image=lastImg, command=lst, background='#2B2B2B').grid(row=2, column=1, sticky='nesw')
takeImg = Button(con, image=ok, command=ok, background='#2B2B2B').grid(row=1, column=1, sticky='nesw')
I expect the output to look like this:
But what it actually does is:
------------------------Edit-----------------------
This needs to work with more than 2 buttons.
Interesting question. PhotoImage does not have a resize method, but you could use a PIL image to get that. If you don't have PIL you need to pip install pillow to get it.
import tkinter as tk
from PIL import Image, ImageTk
class ImageButton(tk.Button):
"""A button that displays an Image and resizes the image as the Button size changes"""
def __init__(self, master=None, image=None, **kwargs):
super().__init__(master, **kwargs)
if not image: return # no image provided; act as a normal Button
if isinstance(image, str):
self.image = Image.open(image)
elif isinstance(image, Image.Image):
self.image = image
else:
raise TypeError("'image' argument must be a PIL.Image or filename")
self.bind("<Configure>", self._on_configure)
def _on_configure(self, event=None):
size = event.width-4, event.height-4
self.photoimage = ImageTk.PhotoImage(self.image.resize(size))
self.config(image=self.photoimage)
### test / demo code: ###
def main():
root = tk.Tk()
root.geometry('200x200')
win = ImageButton(root, image="ON.gif")
win.pack(fill=tk.BOTH, expand=True)
root.mainloop()
if __name__ == '__main__':
main()
Note that you MUST define the initial size of the window for this to work. If you don't then every resize will trigger it to grow some more.
I want to put a background image in a Frame, this is the code that I'm trying to run without success.
import tkinter as tk
from tkinter import *
root = tk.Tk()
F1 = Frame(root)
F1.grid(row=0)
photo = PhotoImage(file="sfondo.png")
label = Label(F1, image=photo)
label.image = photo
label.place(x=0, y=0)
b = tk.Button(label, text="Start")
b.grid(row=8, column=8)
root.mainloop()
If I run the code as this, only a little point in the top left corner is displayed (the frame without nothing in, even if I placed the label inside of it). If I replace the label parent with root, it displays the button with a little part of the image as backgound (only the perimeter of the button is colored for a few pixels). However what I want is a full displayed background image in the frame where I can put the widgets that I want.
I tried to with the place method as this and PIL module
import tkinter as tk
from tkinter import *
from PIL import Image, ImageTk
root = tk.Tk()
F1 = Frame(root)
F1.grid(row=0)
image = Image.open("sfondo.png")
render = ImageTk.PhotoImage(image)
img = tk.Label(F1, image=render)
img.image = render
img.place(x=0, y=40)
b = tk.Button(img, text="Start")
b.grid(row=8, column=8)
root.mainloop()
Here more or less I'm having the same problems, if I set the parent of the label to root, the button is displayed with the perimeter coloured.
If I set the parent to F1 nothing happens and in both cases if I set the parent as root and remove the button, the image is fully displayed.
But what I want is that the image is fully displayed in the frame and after diplay on the background image the widgets.
You could put an image on a Canvas, and then place a Button on that by putting it inside a Canvas window object which can hold any Tkinter widget.
Additional widgets can be added in a similar fashion, each inside its own Canvas window object (since they can hold only a single widget each). You can workaround that limitation by placing a Frame widget in the Canvas window, and then putting other widgets inside it.
Here's an example showing how to display a single Button:
from PIL import Image, ImageTk
import tkinter as tk
IMAGE_PATH = 'sfondo.png'
WIDTH, HEIGTH = 200, 200
root = tk.Tk()
root.geometry('{}x{}'.format(WIDTH, HEIGHT))
canvas = tk.Canvas(root, width=WIDTH, height=HEIGTH)
canvas.pack()
img = ImageTk.PhotoImage(Image.open(IMAGE_PATH).resize((WIDTH, HEIGTH), Image.ANTIALIAS))
canvas.background = img # Keep a reference in case this code is put in a function.
bg = canvas.create_image(0, 0, anchor=tk.NW, image=img)
# Put a tkinter widget on the canvas.
button = tk.Button(root, text="Start")
button_window = canvas.create_window(10, 10, anchor=tk.NW, window=button)
root.mainloop()
Screenshot:
Edit
While I don't know of a way to do it in Frame instead of a Canvas, you could derive your own Frame subclass to make adding multiple widgets easier. Here's what I mean:
from PIL import Image, ImageTk
import tkinter as tk
class BkgrFrame(tk.Frame):
def __init__(self, parent, file_path, width, height):
super(BkgrFrame, self).__init__(parent, borderwidth=0, highlightthickness=0)
self.canvas = tk.Canvas(self, width=width, height=height)
self.canvas.pack()
pil_img = Image.open(file_path)
self.img = ImageTk.PhotoImage(pil_img.resize((width, height), Image.ANTIALIAS))
self.bg = self.canvas.create_image(0, 0, anchor=tk.NW, image=self.img)
def add(self, widget, x, y):
canvas_window = self.canvas.create_window(x, y, anchor=tk.NW, window=widget)
return widget
if __name__ == '__main__':
IMAGE_PATH = 'sfondo.png'
WIDTH, HEIGTH = 350, 200
root = tk.Tk()
root.geometry('{}x{}'.format(WIDTH, HEIGTH))
bkrgframe = BkgrFrame(root, IMAGE_PATH, WIDTH, HEIGTH)
bkrgframe.pack()
# Put some tkinter widgets in the BkgrFrame.
button1 = bkrgframe.add(tk.Button(root, text="Start"), 10, 10)
button2 = bkrgframe.add(tk.Button(root, text="Continue"), 50, 10)
root.mainloop()
Result:
Update
It recently dawned on me that there actually is a simpler way to do this than creating a custom Frame subclass as shown in my previous edit above. The trick is to place() a Label with image on it in the center of the parent Frame — you are then free to use other geometry managers like pack() and grid() as you normally would — as illustrated in the sample code below. Not only is it less complicated, it's also a more "natural" way of adding widgets than needing to call a non-standard method such as add().
from PIL import Image, ImageTk
import tkinter as tk
IMAGE_PATH = 'sfondo.png'
WIDTH, HEIGHT = 250, 150
root = tk.Tk()
root.geometry('{}x{}'.format(WIDTH, HEIGHT))
# Display image on a Label widget.
img = ImageTk.PhotoImage(Image.open(IMAGE_PATH).resize((WIDTH, HEIGHT), Image.ANTIALIAS))
lbl = tk.Label(root, image=img)
lbl.img = img # Keep a reference in case this code put is in a function.
lbl.place(relx=0.5, rely=0.5, anchor='center') # Place label in center of parent.
# Add other tkinter widgets.
button = tk.Button(root, text="Start")
button.grid(row=0, column=0)
button = tk.Button(root, text="Continue")
button.grid(row=0, column=1, padx=10)
root.mainloop()
Result#2
P.S. You can download a copy of the sfondo.png background image from here.
I am trying to bind a photo to the list box, but the photo does not appear.
I tried to take a specific photo path here. with the same code above (in the choosePhoto) and it worked. For some reason when in the code inside the function and is binding the function to the listBox, the photo does not appear.
My code:
from tkinter import *
from PIL import ImageTk, Image
from os import *
def openPath(path,listBox):
try:
path2=str(path)
list1= listdir(path2)
listBox.delete(0,END)
for i in range(len(list1)):
listBox.insert(i,list1[i])
except:
print("file does not exist")
def choosePhoto(event):
path=str(textFolder.get())+"\\"+str(listBoxPath.get(ACTIVE))
image1=ImageTk.PhotoImage(Image.open(path))
lbl.configure(image=image1)
print(path)
root = Tk()
root.geometry("450x600")
root.title("project image proccesor")
frame1=Frame(root,width=250,height=100)
frame1.pack(side=LEFT,fill=BOTH)
frame4=Frame(root,width=250,height=100)
frame4.pack(side=RIGHT,fill=BOTH)
lblFolder=Label(frame1,text="Enter folder path:")
lblFolder.grid(row=0,column=0)
textFolder=Entry(frame1,insertwidth=4)
textFolder.grid(rowspan=1,column=0)
listBoxPath=Listbox(frame1)
listBoxPath.grid(row=2)
bChoose=Button(frame1,text="Choose",command=lambda: openPath(textFolder.get(),listBoxPath)).grid(row=1,column=1)
lbl=Label(frame4, text="waiting for photo")
listBoxPath.bind('<<ListboxSelect>>', choosePhoto)
root.mainloop()
There are 3 issues I can see here in your code.
1st. You need to define image1 as a global because this image is currently a local variable in the function and once the function completes the images is deleted unless you define it in the global namespace.
2nd. Your label that is used for displaying the images has not yet been placed on the screen. You need to use some geometry manager (probably grid()) in this case to display the image.
3rd. You are currently using ACTIVE in your selection on the list box. This will results in you selecting what was active prior to you clicking instead of what you just clicked on.
Change this:
list_box_path.get(ACTIVE)
to this:
list_box_path.get(list_box_path.curselection())
I have cleaned up your code a bit to more closely fit the PEP8 standard and added some minor changes and reduced section of code that were not needed.
import tkinter as tk
from PIL import ImageTk, Image
from os import listdir
def open_path(path):
try:
list1 = listdir(path)
list_box_path.delete(0, "end")
for i in range(len(list1)):
list_box_path.insert(i, list1[i])
except:
print("file does not exist")
def choose_photo(event):
global image1
path = Image.open("{}\\{}".format(text_folder.get(), list_box_path.get(list_box_path.curselection())))
image1 = ImageTk.PhotoImage(path)
lbl.configure(image=image1)
root = tk.Tk()
root.geometry("450x600")
root.title("project image processor")
frame1 = tk.Frame(root, width=250, height=100)
frame4 = tk.Frame(root, width=250, height=100)
lbl_folder = tk.Label(frame1, text="Enter folder path:")
text_folder = tk.Entry(frame1, insertwidth=4)
list_box_path = tk.Listbox(frame1)
b_choose = tk.Button(frame1, text="Choose", command=lambda: open_path(text_folder.get()))
lbl = tk.Label(frame4, text="waiting for photo")
frame1.pack(side="left", fill="both")
frame4.pack(side="right", fill="both")
lbl_folder.grid(row=0, column=0)
text_folder.grid(rowspan=1, column=0)
list_box_path.grid(row=2)
b_choose.grid(row=1, column=1)
lbl.grid(row=0, column=0)
list_box_path.bind('<<ListboxSelect>>', choose_photo)
root.mainloop()
I'm trying to write a script that will allow the user to select a folder with images and then save the coordinates of the user's clicks on each image. To do this I would like to display each image file on a Tkinter canvas, save click locations, then when the canvas is closed, open the next image.
I can get this to work for a single image with the code below (adapted from this question). I was hoping the for File in imgs loop would keep opening the next image, but it does not. I suspect I need a on_closing function to tell Tkinter to open another image.
What's the proper way to have Tkinter open the next image after closing an image?
from Tkinter import *
from tkFileDialog import askopenfilenames, askopenfilename, askdirectory
from PIL import Image, ImageTk
import cv2
import numpy as np
import os
if __name__ == "__main__":
root = Tk()
#setting up a tkinter canvas with scrollbars
frame = Frame(width=1920, height=1080, bd=2, relief=SUNKEN)
frame.grid_rowconfigure(0, weight=1)
frame.grid_columnconfigure(0, weight=1)
xscroll = Scrollbar(frame, orient=HORIZONTAL)
xscroll.grid(row=1, column=0, sticky=E+W)
yscroll = Scrollbar(frame)
yscroll.grid(row=0, column=1, sticky=N+S)
canvas = Canvas(frame, bd=0, xscrollcommand=xscroll.set, yscrollcommand=yscroll.set)
canvas.config(width=1920, height=1080)
canvas.grid(row=0, column=0, sticky=N+S+E+W)
xscroll.config(command=canvas.xview)
yscroll.config(command=canvas.yview)
frame.pack(fill=BOTH,expand=1)
# Function to be called when mouse is clicked
def save_coords(event):
coords.append([event.x, event.y])
# def on_closing():
# Open the next image file
# Create empty list for coordinate arrays to be appended to
coords = []
# Choose multiple images
img_dir = askdirectory(parent=root, initialdir="D:/Temp/", title='Choose folder')
os.chdir(img_dir)
imgs = os.listdir(img_dir)
#imgs = askopenfilenames(parent=root, initialdir="D:/Temp/cvCal/", title='Choose images')
for File in imgs:
img = ImageTk.PhotoImage(Image.open(File).resize((1280,720), Image.ANTIALIAS))
canvas.create_image(0,0,image=img,anchor="nw")
canvas.config(scrollregion=canvas.bbox(ALL))
canvas.bind("<Button 1>",save_coords)
# on_closing()...
root.mainloop()
It would be a lot easier if you can use a Label instead:
Also, note there is no reason to use ImageTk since loading an image from a file is built into tkinter as Tkinter.PhotoImage.
Also, I converted your wildcard import to a normal import; wildcard imports are messy and against PEP8.
Lastly, I don't know what you mean with 'on closing', so I added a button to advance to the next image. This will throw a StopIteration error on the last image that you will need to handle.
import Tkinter as tk
from tkFileDialog import askdirectory
import os
# Create empty list for coordinate arrays to be appended to
coords = []
# Function to be called when mouse is clicked
def save_coords(event):
click_loc = [event.x, event.y]
print "you clicked on", click_loc
coords.append(click_loc)
# Function to load the next image into the Label
def next_img():
img_label.img = tk.PhotoImage(file=next(imgs))
img_label.config(image=img_label.img)
root = tk.Tk()
# Choose multiple images
img_dir = askdirectory(parent=root, initialdir="D:/Temp/", title='Choose folder')
os.chdir(img_dir)
imgs = iter(os.listdir(img_dir))
img_label = tk.Label(root)
img_label.pack()
img_label.bind("<Button-1>",save_coords)
btn = tk.Button(root, text='Next image', command=next_img)
btn.pack()
next_img() # load first image
root.mainloop()
print coords
I'm trying to create a program using Tkinter that displays a thumbnail from several different directories in on window. So far I have this:
import Tkinter as tk
from PIL import Image, ImageTk
import Image, os
root = tk.Tk()
root.title('Shot Viewer')
w, h, x, y = 1000, 1000, 0, 0
root.geometry("%dx%d+%d+%d" % (w, h, x, y))
#quit
def quit(root):
root.quit()
root.destroy()
path = "/media/Expansion Drive/Heros Mission 3/Scenes/Scene 1-3/Shots/"
labels = []
for files in os.listdir(path):
number = files.split("_")[1]
filed = "/media/Expansion Drive/Heros Mission 3/Scenes/Scene 1-3/Shots/Shot_{} /Frames/Shot_{}_000000.png".format(number, number)
if os.path.lexists(filed) == 'False':
pass
else:
im = Image.open(imageFile)
im.thumbnail((96, 170), Image.ANTIALIAS)
image = ImageTk.PhotoImage(im)
label = tk.Label(root, image=image, name=number)
labels.append(label)
print labels
for label in labels:
panel = label.grid()
panel2.grid(row=2, column=1)
button2 = tk.Button(panel2, text='Quit', command=lambda root=root:quit(root))
button2.grid(row=1, column=1, sticky='NW')
root.mainloop()
However this is not working, does anyone have any suggestions?
Thanks
Tom
Use the glob module to help find the relevant files.
As for images failing to appear:
import Tkinter as tk
from PIL import Image, ImageTk
import glob
root = tk.Tk()
labels = []
for jpeg in glob.glob("C:/Users/Public/Pictures/Sample Pictures/*.jpg")[:5]:
im = Image.open(jpeg)
im.thumbnail((96, 170), Image.ANTIALIAS)
photo = ImageTk.PhotoImage(im)
label = tk.Label(root, image=photo)
label.pack()
label.img = photo # *
# * Each time thru the loop, the name 'photo' has a different
# photoimage assigned to it.
# This means that you need to create a separate, 'longer-lived'
# reference to each photoimage in order to prevent it from
# being garbage collected.
# Note that simply passing a photoimage to a Tkinter widget
# is not enough to keep that photoimage alive.
labels.append(label)
root.mainloop()
I do not think you are handling it correctly where you say panels = label.grid(). Instead, try to just do label.grid so it is not an assignment operator but an action.