I'm working on an app to display a grid of images, much like the main screen of iPhoto or other similar programs. To do so, I set up a Canvas, and iterate through a list of filenames, creating a PhotoImage from each, and displaying them on the canvas:
self.canvas = Canvas(self.bottomFrame, width = 700, height = 470, bg = "Red")
self.canvas.pack()
for i, filename in enumerate(image_list):
photo_image = PhotoImage(filename)
self.canvas.create_image(100*(round(i/4)+1), 100*(i+1), image = photo_image)
self.labelList.append(photo_image)
The labelList is an attribute of the Application class, and the image_list is populated with filenames of .gif photos. When I run the app, however, no images display. I know the canvas is there, because a red rectangle shows up, but there are no images on it.
What am I missing here - I've scrolled through endless pages of discussion looking for results and haven't found any that work.
photo_image = PhotoImage(filename)
should be
photo_image = PhotoImage(file=filename)
Otherwise, you just set name, since the __init__ function of PhotoImage looks like this:
__init__(self, name=None, cnf={}, master=None, **kw)
Also note that PhotoImage can only handle GIF and PGM/PPM files. If you want other file types, you have to use PIL (example).
Related
Hello I am new at programming and I am making a tkinter project to learn.
In my project, because i didnt like the tkinter widgets, ive decided to only use the Canvas widget and draw all my program there.
To do that I am making my own widgets that will be drawn in the canvas.
What I want is a Widget that follows the following structure:
class Rectangle:
def __init__(self, canvas, coords, img):
self.canvas = canvas
self.img = img
def _redraw(self, coords):
self.img.redraw(coords)
I want the Widget to store an image_object of some sort. The function _redraw will give the coordinates of the new size like so (x0, y0, x1, y1), and I want the img object to redraw itself to fit the new coordinates.
I was wondering the best way to accomplish this (in terms of space and speed), idealy I would like to work with svg files. Any suggestions?
class Image:
def __init__(self, canvas, filePath):
self.canvas = canvas
self.img = tk.PhotoImage(file = filePath)
def _redraw(self, x, y):
return self.canvas.create_image(x, y, image = self.img)
def setScale(self, scale):
if scale >= 1:
self.img = self.img.zoom(int(scale))
else:
self.img = self.img.subsample(int(1/scale))
I've use it with pngs, untested with svgs.
So with pngs etc it's best to resize the images externally before loading, but the scale function works fine if that's inconvenient.
There are more options to add to create_image() like anchor etc, see the documentation.
Also, there are several ways to move the image. One is to undraw and redraw it elsewhere (you need to keep the id returned from create_image() so that you can undraw it). The other is to use the coords() function, see documentation, also see Change coords of line in python tkinter canvas
I'm trying to open image files and display them in python 3.8 using Tkinter and Pillow, but something is scaling the images wrong on my screen.
import tkinter as tk
from PIL import Image, ImageTk
class ViewingWindow(tk.Frame):
def __init__(self, parent):
tk.Frame.__init__(self, parent)
self.image = None
self.canvas = tk.Canvas(self, width=500, height=500)
self.canvas.pack()
def setImage(self, img):
self.image = img
print(img.width())
print(img.height())
print(self.canvas["width"])
print(self.canvas["height"])
self.canvas.create_image(0, 0, anchor=tk.NW, image=img)
window = tk.Tk()
canvas = ViewingWindow(window)
canvas.pack()
img = Image.open("500x500.jpg")
img = ImageTk.PhotoImage(img)
canvas.setImage(img)
window.mainloop()
This is the result, shown for reference is Windows image viewer at "show actual size", and Gimp at scaling=100%:
The 4 print statements all show "500", every part of the system seems to agree that the image is shown at 500x500, except the actual pixels on the screen. For whatever reason it's scaled to something close to 750x750, what in the world is scaling my image? This is consistent for all images I've tried to open in Tkinter, and regardless on window size and widget sizes.
Tested on Windows 10 with screen resolution 1920x1080.
it's scaled to something close to 750x750
750/500 = 150%.It seems that your system zoom ratio is 150%.
To show the right image size.Just like furas said,you need to use DPI awareness.Read the problem in MSDN official doc
About DPI awareness.
To solve the problem,you can set the DPI awareness in your code.(Or you can change the zoom ratio to 100%)
In my PC,the are not the same size without DPI awareness.Now after set the DPI awareness:
Add this in your code:
import ctypes
ctypes.windll.shcore.SetProcessDpiAwareness(2) # this could only be used when your version of windows >= 8.1
As the title says, when attempting to save the Canvas using Postscript, it works fine with all non-window elements (rects, ovals etc..) and it works perfectly in capturing window elements that are CURRENTLY on screen when I push the button. But none of the window elements outside of the screen at the time.
This issue seems so arbitrary I gotta wonder if there even is a solution, hopefully someone out there has figured something out.
Here is some example code, where I simplify to present the exact issue:
#!/usr/bin/python3
#
# This file is intended as a simplified example for Stack Overflow.
# The original program is far greater and is a writing tool for branching dialogue, much like Twine.
from tkinter import Tk, Canvas, Frame, Text, Label
class Canv(Canvas):
def __init__(self, parent):
"""Simple Canvas class."""
Canvas.__init__(self, parent)
self.parent = parent
self.config(background="white", width=960, height=640)
self.num = 1
self.pack()
self.bindings()
def bindings(self):
"""All the button bindings."""
self.bind("<Button-1>", self.add_window)
self.bind("<ButtonPress-2>", self.mark)
self.bind("<ButtonRelease-2>", self.drag)
self.bind("<Button-3>", self.take_ps)
def add_window(self, e):
"""Here I add the Label as a Canvas window.
And include an Oval to mark its location.
"""
text = "Textwindow {}".format(self.num)
self.num += 1
window = TextWindow(self, text)
pos = (self.canvasx(e.x), self.canvasy(e.y))
self.create_window(pos, window=window)
bbox = (pos[0]-50, pos[1]-50, pos[0]+50, pos[1]+50)
self.create_oval(bbox, width=3, outline="green")
def mark(self, e):
"""Simple Mark to drag method."""
self.scan_mark(e.x, e.y)
def drag(self, e):
"""This drags, using the middle mouse button, the canvas to move around."""
self.scan_dragto(e.x, e.y, 5)
def take_ps(self, e):
"""Here I take a .ps file of the Canvas.
Bear in mind the Canvas is virtually infinite, so I need to set the size of the .ps file
to the bounding box of every current element on the Canvas.
"""
x1, y1, x2, y2 = self.bbox("all")
self.postscript(file="outfile.ps", colormode="color", x=x1, y=y1, width=x2, height=y2)
print("Writing file outfile.ps...")
class TextWindow(Frame):
def __init__(self, parent, text):
"""Very simple label class.
Might have been overkill, I originally intended there to be more to this class,
but it proved unnecesary for this example.
"""
Frame.__init__(self, parent)
self.pack()
self.label = Label(self, text=text)
self.label.pack()
if __name__ == "__main__": #<---Boilerplate code to run tkinter.
root = Tk()
app = Canv(root)
root.mainloop()
This is an example .jpg based on the postscript.
As you can see from the image, all the green circles on the right have the window label intact. Well ALL the green circles are supposed to have them, and in the program they work fine, the are just not showing in the postscript. And yes, my screen was over the right circles when I clicked the take_ps button.
As for alternatives, I need the canvas to be draggable, I need it to expand, potentially vast distances in both direction. And I cannot put text directly on the canvas, as it would take too much space. It is intended to have text fields, not just a label in the windows on the canvas (became too much code for this example), and the reason I need text in a window, and not directly on the screen, is the text might easily take more space then it should. I need the canvas to show the RELATION between the text fields, and the text windows to contain the text for editing, not necessarily full display. As it says, I'm making a branching dialogue tool for a game, much like Twine.
I ran into this issue also. I was able to configure the canvas temporarily to match the size of the output image. Then I configured it back to the original size after I was done creating the postscript file.
height_0 = canvas.winfo_height()
width_0 = canvas.winfo_width()
canvas.config(width= max_width, height= max_height)
root.update()
canvas.postscript(file='filename.ps',colormode='color')
canvas.config(width= width_0, height= height_0)
root.update()
I am a begginer in python, tkinter. I have written a code that should normally display an image in a canvas.
What happens is that the main frame (gui) is displayed with the menu bar, then when I click on load image, the gui window shrinks (to 100x100 I guess) but nothing is displayed within.
Could you please explain to me why this is happening so I can understand where the error occurs, and how to correct it?
# -*- coding:utf-8 -*-
# Imports
from tkinter import Tk, Menu, Canvas
from PIL import Image, ImageTk
# Function definitions
def deleteImage(canvas):
canvas.delete("all")
return
def loadImage(canvas, img):
filename = ImageTk.PhotoImage(img)
canvas.image = filename
canvas.create_image(0,0,anchor='nw',image=filename)
return
def quitProgram():
gui.destroy()
# Main window
gui = Tk()
# Inside the main gui window
#Creating an object containing an image
# A canvas with borders that adapt to the image within it
img = Image.open("fleur.jpg")
canvas = Canvas(gui,height=img.size[0],width=img.size[0])
canvas.pack()
# Menu bar
menubar = Menu(gui)
# Adding a cascade to the menu bar:
filemenu = Menu(menubar, tearoff=0)
menubar.add_cascade(label="Files", menu=filemenu)
# Adding a load image button to the cascade menu "File"
filemenu.add_command(label="Load an image", command=loadImage)
# Adding a delete image button to the cascade menu "File"
filemenu.add_command(label="Delete image", command=deleteImage)
filemenu.add_separator()
filemenu.add_command(label="Quit", command=quitProgram)
menubar.add_separator()
menubar.add_cascade(label="?")
# Display the menu bar
gui.config(menu=menubar)
gui.mainloop()
EDIT:
The second problem is that I want to create a canvas and the image in the main gui window, and pass them as arguments to the menu buttons (See code above, where img and canvas are created separately from the function loadImage). Seeing as putting parenthesis in the command=loadImage() created a problem on its own.
Another point that rises a question in my head : Regarding the first problem which was solved by keeping a reference to the filename=ImageTk.PhotoImage(img). Wouldn't it normally be pointless to keep a reference inside the function since it's a local variable anyway?
As stated in effbot's PhotoImage page, you have to keep a reference of your image to ensure it's not garbage collected.
You must keep a reference to the image object in your Python program,
either by storing it in a global variable, or by attaching it to
another object.
Note: When a PhotoImage object is garbage-collected by Python (e.g.
when you return from a function which stored an image in a local
variable), the image is cleared even if it’s being displayed by a
Tkinter widget.
To avoid this, the program must keep an extra reference to the image
object. A simple way to do this is to assign the image to a widget
attribute, like this:
Your loadImage() method should look like below.
def loadImage():
img = Image.open("fleur.jpg")
filename = ImageTk.PhotoImage(img)
canvas = Canvas(gui,height=100,width=100)
canvas.image = filename # <--- keep reference of your image
canvas.create_image(0,0,anchor='nw',image=filename)
canvas.pack()
I have this code here that creates a Tkinter Canvas widget, then embeds an image within it.
import Tkinter
from PIL import ImageTk, Image
class image_manip(Tkinter.Tk):
def __init__(self):
Tkinter.Tk.__init__(self)
self.configure(bg='red')
self.ImbImage = Tkinter.Canvas(self, highlightthickness=0, bd=0, bg='blue')
self.ImbImage.pack()
self.i = ImageTk.PhotoImage(Image.open(r'test.png'))
self.ImbImage.create_image(150, 100, image=self.i)
def run():
image_manip().mainloop()
if __name__ == "__main__":
run()
I'd like to be able to create a blank image within the Canvas widget, so that I could do pixel by pixel manipulation within the widget. How would one go about this?
To create a new blank image (rather than opening one), you can use the Image.new(...) method in place of your Image.open(...). It is described in The Image Module.
Then call self.i.put(...) to do pixel-by-pixel manipulation. (i is the PhotoImage object as in your example.)
Here's some general information on The Tkinter PhotoImage Class.