In GTK, how can I scale an image? Right now I load images with PIL and scale them beforehand, but is there a way to do it with GTK?
Load the image from a file using gtk.gdk.Pixbuf for that:
import gtk
pixbuf = gtk.gdk.pixbuf_new_from_file('/path/to/the/image.png')
then scale it:
pixbuf = pixbuf.scale_simple(width, height, gtk.gdk.INTERP_BILINEAR)
Then, if you want use it in a gtk.Image, crate the widget and set the image from the pixbuf.
image = gtk.Image()
image.set_from_pixbuf(pixbuf)
Or maybe in a direct way:
image = gtk.image_new_from_pixbuf(pixbuf)
It might be more effective to simply scale them before loading. I especially think so since I use these functions to load in 96x96 thumbnails from sometimes very large JPEGs, still very fast.
gtk.gdk.pixbuf_new_from_file_at_scale(..)
gtk.gdk.pixbuf_new_from_file_at_size(..)
Scale image from URL. ( scale reference )
import pygtk
pygtk.require('2.0')
import gtk
import urllib2
class MainWin:
def destroy(self, widget, data=None):
print "destroy signal occurred"
gtk.main_quit()
def __init__(self):
self.window = gtk.Window(gtk.WINDOW_TOPLEVEL)
self.window.connect("destroy", self.destroy)
self.window.set_border_width(10)
self.image=gtk.Image()
self.response=urllib2.urlopen(
'http://192.168.1.11/video/1024x768.jpeg')
self.loader=gtk.gdk.PixbufLoader()
self.loader.set_size(200, 100)
#### works but throwing: glib.GError: Unrecognized image file format
self.loader.write(self.response.read())
self.loader.close()
self.image.set_from_pixbuf(self.loader.get_pixbuf())
self.window.add(self.image)
self.image.show()
self.window.show()
def main(self):
gtk.main()
if __name__ == "__main__":
MainWin().main()
*EDIT: (work out fix) *
try:
self.loader=gtk.gdk.PixbufLoader()
self.loader.set_size(200, 100)
# ignore tihs:
# glib.GError: Unrecognized image file format
self.loader.write(self.response.read())
self.loader.close()
self.image.set_from_pixbuf(self.loader.get_pixbuf())
except Exception, err:
print err
pass
Just FYI, here is a solution which scales the image based on window size (Implying you are implementing this in a class which extends GtkWindow).
let [width, height] = this.get_size(); // Get size of GtkWindow
this._image = new GtkImage();
let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(filePath,width,height,true);
this._image.set_from_pixbuf(pixbuf);
anyone doing this in C. This is how it's done
//Assuming you already loaded the file and saved the filename
//GTK_IMAGE(image) is the container used to display the image
GdkPixbuf *pb;
pb = gdk_pixbuf_new_from_file(file_name, NULL);
pb = gdk_pixbuf_scale_simple(pb,700,700,GDK_INTERP_BILINEAR);
gtk_image_set_from_pixbuf(GTK_IMAGE(image), pb);
actually when we use
gdk_pixbuf_scale_simple(pb,700,700,GDK_INTERP_BILINEAR); this function causes memory leakage (If we monitor task manager the memory requirement goes on increasing till it kills the process) when used with a timer event. How to solve that
Related
the problem i had with QGraphicsView it shows images (Pillow generated images) with low quality that i can't read the text on image however i can see details better if i zoomed but on its full size it's not clear and very disappointing.
here is two samples one of the problem and one of wut it should be fixed to.
QGraphicsView scene quality problem
and this
same image opened from windows image viewer with same size:
link for sample: https://imgur.com/a/JINAq4S
the code sample which will cover the issue.
font link: https://gofile.io/d/dXesZv
from PyQt5 import QtWidgets, QtGui, QtCore, QtMultimedia
from PIL import Image, ImageDraw, ImageFont
from PIL.ImageQt import ImageQt
import os
class Main(QtWidgets.QWidget):
def __init__(self, parent=None):
super().__init__(parent)
#the image that would be viewed in QGraphicsView.
_fnt = ImageFont.truetype("ar.ttf" , 100)
_image = Image.new("RGBA", size=(2480, 3508), color="white")
_draw = ImageDraw.Draw(_image)
_draw.text((1000, 200), text="See See", fill="black", font=_fnt)
#QGraphicsView ...
_image.save("sample.png") ; os.startfile("sample.png") # to see what it should look like, like windows image viewer shows it.
self.result = ImageViewer(self, _image)
_layout = QtWidgets.QVBoxLayout()
_layout.addWidget(self.result)
self.setLayout(_layout)
class ImageViewer(QtWidgets.QGraphicsView):
def __init__(self, parent, image):
super(ImageViewer, self).__init__(parent)
self._scene = QtWidgets.QGraphicsScene(self)
qim = ImageQt(image)
self._pixmap = QtGui.QPixmap.fromImage(qim)
self._photo = QtWidgets.QGraphicsPixmapItem(self._pixmap)
self._scene.addItem(self._photo)
self.setScene(self._scene)
self.setBackgroundBrush(QtGui.QBrush(QtGui.QColor(230, 230, 230)))
def resizeEvent(self, event):
self.fitInView(self._photo, QtCore.Qt.KeepAspectRatio)
super().resizeEvent(event)
if __name__ == '__main__':
import sys
app = QtWidgets.QApplication(sys.argv)
main = Main()
main.setWindowState(QtCore.Qt.WindowMaximized)
main.show()
app.exec_()
eventually I came up to kinda an answer to my question:
the issue was:
QGraphicsView's performance with high resolution images is poor (can't read small details in image) as antialiasing algorithm doesn't work well with very small details.
what I tried, helped but never solved:
I used .setTransformationMode(QtCore.Qt.SmoothTransformation) and .setRenderHints(QtGui.QPainter.Antialiasing | QtGui.QPainter.HighQualityAntialiasing) which helped.
what I gave away to solve it:
I resized the high resolution image to a smaller resolution that can be viewed a good quality with the ability to read small details like small text.
how i resized the image:-
the image used in the scene is a pillow object so i used the method .resize((int(image.size[0]/3.5), int(image.size[1]/3.5)), Image.ANTIALIAS), notice 1/3.5 ratio is optional.
I have an image that is saved in a file test.bmp and this file is overwritten 2 times per second
(I want to show 2 images per second).
Here is what I have so far:
import tkinter as tk
from PIL import Image, ImageTk
root = tk.Tk()
img_path = 'test.bmp'
img = ImageTk.PhotoImage(Image.open(img_path), Image.ANTIALIAS))
canvas = tk.Canvas(root, height=400, width=400)
canvas.create_image(200, 200, image=img)
canvas.pack()
root.mainloop()
But I don't know how can I refresh the image every ½ second?
I'm using Python3 and Tkinter.
Gee, the code in your question looks very familiar...
Coming up with an answer comprised of tested code was complicated by the need to have the image file be updated by some mysterious unspecified process. This is done in the code below by creating a separate thread that periodically overwrites the image file independent of the main process. I tried to delineate this code from the rest with comments because I felt it was somewhat distracting and makes things seem more complex than they are really.
The main takeaway is that you'll need to use the universal tkinter widget after() method to schedule the image to be refreshed at some future time. Care also needs to be taken to first create a place-holder canvas image object so it can be updated in-place later. This is needed because there may be other canvas objects present, and otherwise the updated image could cover them up depending on relative placement if a place-holder had not been created (so the image object id that's returned can be saved and used later to change it).
from PIL import Image, ImageTk
import tkinter as tk
#------------------------------------------------------------------------------
# Code to simulate background process periodically updating the image file.
# Note:
# It's important that this code *not* interact directly with tkinter
# stuff in the main process since it doesn't support multi-threading.
import itertools
import os
import shutil
import threading
import time
def update_image_file(dst):
""" Overwrite (or create) destination file by copying successive image
files to the destination path. Runs indefinitely.
"""
TEST_IMAGES = 'test_image1.png', 'test_image2.png', 'test_image3.png'
for src in itertools.cycle(TEST_IMAGES):
shutil.copy(src, dst)
time.sleep(.5) # pause between updates
#------------------------------------------------------------------------------
def refresh_image(canvas, img, image_path, image_id):
try:
pil_img = Image.open(image_path).resize((400,400), Image.ANTIALIAS)
img = ImageTk.PhotoImage(pil_img)
canvas.itemconfigure(image_id, image=img)
except IOError: # missing or corrupt image file
img = None
# repeat every half sec
canvas.after(500, refresh_image, canvas, img, image_path, image_id)
root = tk.Tk()
image_path = 'test.png'
#------------------------------------------------------------------------------
# More code to simulate background process periodically updating the image file.
th = threading.Thread(target=update_image_file, args=(image_path,))
th.daemon = True # terminates whenever main thread does
th.start()
while not os.path.exists(image_path): # let it run until image file exists
time.sleep(.1)
#------------------------------------------------------------------------------
canvas = tk.Canvas(root, height=400, width=400)
img = None # initially only need a canvas image place-holder
image_id = canvas.create_image(200, 200, image=img)
canvas.pack()
refresh_image(canvas, img, image_path, image_id)
root.mainloop()
I have very strange problem with gtk.Image(). Simple question; how to update image?
On window creation I create image and pack it… On that time I load image from disk. Now I start downloading image from url, and when it's done I just want to replace existing image with new one. I rewrite content of same file on disk and then do:
pixbuf = gtk.gdk.pixbuf_new_from_file(image_path)
self._user_avatar.set_from_pixbuf(pixbuf)
I have tried
self._user_avatar.set_from_file(image_path)
and
self._user_avatar.clear()
nothing works. When i restart app there is a new image and everything is ok.
gtk.Image.set_from_pixbuf is the right method, so your problem may come from something else. Try on the most simple piece of code to reproduce your problem.
Here's a working sample:
import pygtk
pygtk.require('2.0')
import gtk
pics = []
clicks = 0
def on_destroy (widget):
gtk.main_quit()
return False
def on_button_clicked (widget, image):
global clicks
clicks += 1
image.set_from_pixbuf (pics[clicks % len(pics)])
def create ():
window = gtk.Window(gtk.WINDOW_TOPLEVEL)
window.connect("destroy", on_destroy)
pics.append (gtk.gdk.pixbuf_new_from_file("sample1.png"))
pics.append (gtk.gdk.pixbuf_new_from_file("sample2.png"))
image = gtk.Image()
image.set_from_pixbuf(pics[0])
button = gtk.Button ("Switch Image")
button.connect("clicked", on_button_clicked, image)
vbox = gtk.VBox()
vbox.pack_start (image)
vbox.pack_start (button)
window.add(vbox)
window.show_all()
if __name__ == "__main__":
create()
gtk.main()
I have written this simple script in python:
import gtk
window = gtk.Window()
window.set_size_request(800, 700)
window.show()
gtk.main()
now I want to load in this window an image from web ( and not from my PC ) like this:
http://www.dailygalaxy.com/photos/uncategorized/2007/05/05/planet_x.jpg
How can I do that ?
P.S. I don't want download the image ! I just want load the image from the URL.
This downloads the image from a url, but writes the data into a gtk.gdk.Pixbuf instead of to a file:
import pygtk
pygtk.require('2.0')
import gtk
import urllib2
class MainWin:
def destroy(self, widget, data=None):
print "destroy signal occurred"
gtk.main_quit()
def __init__(self):
self.window = gtk.Window(gtk.WINDOW_TOPLEVEL)
self.window.connect("destroy", self.destroy)
self.window.set_border_width(10)
self.image=gtk.Image()
response=urllib2.urlopen(
'http://www.dailygalaxy.com/photos/uncategorized/2007/05/05/planet_x.jpg')
loader=gtk.gdk.PixbufLoader()
loader.write(response.read())
loader.close()
self.image.set_from_pixbuf(loader.get_pixbuf())
# This does the same thing, but by saving to a file
# fname='/tmp/planet_x.jpg'
# with open(fname,'w') as f:
# f.write(response.read())
# self.image.set_from_file(fname)
self.window.add(self.image)
self.image.show()
self.window.show()
def main(self):
gtk.main()
if __name__ == "__main__":
MainWin().main()
Download the image. Google on how to download files with python, there are easy-to-use libraries for that.
Load the image into a widget. Look up how to display an image in GTK.
Sorry for the lack of detail, but the answer would get long and you'd still be better off reading on those subjects somewhere else.
Hope it helps!
Here's a simple script using WebKit:
#!/usr/bin/env python
import gtk
import webkit
window = gtk.Window()
window.set_size_request(800, 700)
webview = webkit.WebView()
window.add(webview)
window.show_all()
webview.load_uri('http://www.dailygalaxy.com/photos/uncategorized/2007/05/05/planet_x.jpg')
gtk.main()
Take note, though, that this does in fact download the image.
I want to render parts of a svg file by name but for the life of me I cannot figure out how to do so (using python + gtk).
Here's the svg file in question: http://david.bellot.free.fr/svg-cards/files/SVG-cards-2.0.1.tar.gz (Update: this file no longer exists, but you can track it down at http://svg-cards.sourceforge.net/)
On his site, David, says:
You can draw a card either by
rendering the file onto a pixmap and
clipping each card manually or by
using the card's name through a DOM
interface. All cards are embedded into
a SVG group.
I don't know what he means by a DOM interface. I have done some searching and the best result I found that seems to fit what I want to do is:
QSvgRenderer *renderer = new QSvgRenderer(QLatin1String("SvgCardDeck.svg"));
QGraphicsSvgItem *black = new QGraphicsSvgItem();
QGraphicsSvgItem *red = new QGraphicsSvgItem();
black->setSharedRenderer(renderer);
black->setElementId(QLatin1String("black_joker"));
red->setSharedRenderer(renderer);
red->setElementId(QLatin1String("red_joker"));
Notice however that it is for Qt and is not even written in python.
This is what I have so far:
#!/usr/bin/env python
from __future__ import absolute_import
import cairo
import gtk
import rsvg
from xml import xpath
from xml.dom import minidom
window = gtk.Window()
window.set_title("Foo")
window.set_size_request(256, 256)
window.set_property("resizable", False)
window.set_position(gtk.WIN_POS_CENTER)
window.connect("destroy", gtk.main_quit)
window.show()
document = minidom.parse("cards.svg")
element = xpath.Evaluate("//*[#id='1_club']", document)[0]
xml = element.toxml()
svg = rsvg.Handle()
svg.write(xml)
pixbuf = svg.get_pixbuf()
image = gtk.Image()
image.set_from_pixbuf(pixbuf)
image.show()
window.add(image)
gtk.main()
It doesn't work, of course.
What am I missing?
The GTK library for rendering SVG is called RSVG. It has python bindings, but they are undocumented, and they don't wrap the rsvg_handle_get_pixbuf_sub() and rsvg_handle_render_cairo_sub() functions which you would normally use for that purpose in C. Here's what you have to do as far as I can tell. You extract the XML node as Adam Crossland suggested. To render it, you have to do something like this:
import gtk
import rsvg
handle = rsvg.Handle()
handle.write(buffer=xml_data)
# xml_data is the XML string for the object you want
image = gtk.Image()
image.set_from_pixbuf(handle.get_pixbuf())
That's if you want it in a gtk.Image, otherwise do something else with the pixbuf. You can also render it to a Cairo context with handle.render_cairo(cr) where cr is your Cairo context.
EDIT:
Sorry, I didn't read the python bindings closely enough at first. The _sub() functions are implemented using the id= argument, so your program can boil down to this:
#!/usr/bin/env python
import gtk
import rsvg
window = gtk.Window()
window.set_title("Foo")
window.connect("destroy", gtk.main_quit)
window.show()
svg = rsvg.Handle(file='cards.svg')
pixbuf = svg.get_pixbuf(id='#3_diamond')
image = gtk.Image()
image.set_from_pixbuf(pixbuf)
image.show()
window.add(image)
gtk.main()
I tested this and it works. However, the window is the size of the entire SVG canvas, and is clipped to the screen size (which is why I rendered the 3 of diamonds instead of the ace of clubs which is up in the corner.) So you'll still have to find some way to crop the pixbuf around the card that you want, but that shouldn't be too hard.
Here's my answer to the cropping blank space problem. It's a rough hack but it worked great. This would also serve as a good starting point to get cards for anyone making a card game in python.
import gtk
import rsvg
svg = rsvg.Handle(file="/usr/share/gnome-games-common/cards/gnomangelo_bitmap.svg")
w, h = 202.5, 315
card_names = map(str, range(1,11)) + ["jack", "queen", "king"]
suites = ["club", "diamond", "heart", "spade"]
specials = [{"name":"black_joker","x":0, "y":4}, {"name":"red_joker","x":1, "y":4}, {"name":"back","x":2, "y":4}]
for suite_number, suite in enumerate(suites):
for card_number, card in enumerate(card_names):
print "processing", suite, card, '#'+card+'_'+suite
pixbuf = svg.get_pixbuf(id='#'+card+'_'+suite)
pixbuf.subpixbuf(int(w*card_number), int(h*suite_number), int(w), int(h)).save("./"+card+"_"+suite+".png","png", {})
for special in specials:
print "processing", special["name"]
pixbuf = svg.get_pixbuf(id='#'+special["name"])
card_number = special["x"]
suite_number = special["y"]
pixbuf.subpixbuf(int(w*card_number), int(h*suite_number), int(w), int(h)).save("./"+special["name"]+".png","png", {})
Grave-digging a little bit here, but the answer by ptomato from 2010 also works now in 2019 for Gtk3 with some slight modifications. The below code will render only the 3 of diamonds svg id.
#!/usr/bin/env python
import gi
gi.require_version('Gtk', '3.0')
gi.require_version('Rsvg', '2.0')
from gi.repository import Gtk, Rsvg
svg = Rsvg.Handle.new_from_file('svg-cards.svg')
pixbuf = svg.get_pixbuf_sub('#3_diamond')
image = Gtk.Image()
image.set_from_pixbuf(pixbuf)
image.show()
window = Gtk.Window()
window.set_title("Foo")
window.connect("destroy", Gtk.main_quit)
window.show()
window.add(image)
Gtk.main()
I believe that what he means by 'through a DOM interface' is that since SVG is XML, you could load the SVG file in minidom, or some other Python XML parser, and extract the XML node with the specific name that you are looking for. That XML node should represent an item that can be rendered.
You can do it by editing the tag. Edit width and height, set the viewBox attribute on the main svg element to the rectangle you want, render, repeat.
See How to show a subsection or "slice" of an SVG graphic? and http://dingoskidneys.com/~dholth/svg/