I'm embedding matplotlib in my PyQt 4 application and using it to display images. The matplotlib control is being displayed in a QDockWidget, and I'm setting some its parameters as follows:
imagePlot = self.axes.imshow(myNumpyArray, interpolation = "nearest")
imagePlot.axes.set_axis_off()
imagePlot.axes.get_xaxis().set_visible(False)
imagePlot.axes.get_yaxis().set_visible(False)
self.fig.subplots_adjust(bottom = 0, top = 1, left = 0, right = 1)
This has the desired effect i.e. the image is displayed filling as much space as possible in the QDockWidget while maintaining the aspect ratio. I can resize the dock widget by shrinking it horizontally and then expanding it and the image display is correct (filling as much space as possible while maintaining the aspect ratio). Now, if I add the following line:
imagePlot.axes.set(adjustable = "datalim")
I get unexpected behavior. Initially the image is displayed in the same manner as before, but after shrinking and expanding horizontally matplotlib seems to introduce a border around the data. For example, here's the image as it is displayed initially (and correctly):
And here's what matplotlib displays after I drag the side of the containing dock widget and shrink, then expand back to original size. Note the appearance of the border around the image.
What is causing this and how can I prevent it? Thank you.
Related
I'm attempting to adapt martineau's excellent answer on how to use tkinter to highlight and select an area of an image with a mouse. My goal is to modify the code to support huge images, such as 10000x6000 pixels or more!
This is my first attempt at using tkinter, and it's much more challenging than expected.
The three options which I've considered and experimented with are:
Load the image, then scale the image to the size available in the window before placing it on the canvas. This in turn requires that I know the scale factor, so I can reverse the scaling when operating on the original image.
Add scrollbars to the side/button on the visible part of the image in the canvas. (My preferred option).
Don't add scrollbars, but use the cursor keys to scroll the visible part of the image in the canvas.
I've tried to do all of them, but ran into various kinds of trouble:
I used root.state('zoomed') to maximize the window, then placed a button to top of the window using tk.Button(...).pack(fill=tk.X) before placing the canvas as in the linked code using self.canvas = tk.Canvas(...). At this time I discovered two issues: It turns out that I can't maximize the canvas to the remaining space in the window using self.canvas.pack(fill=tk.BOTH) (it only expands the width). Another more crucial issue was that I could not read the actual width/height value that the canvas was expanded to, (or get there available space in the window before placing the canvas), and without these values, I can't calculate the scaling factor. :-(
I tried to follow various methods of adding scrollbars to the packed canvas but they all, with one exception, required to use the grid method and I quickly found that pack and grid methods were conflicting methods. After several attempts at rewriting the code to use the grid method, I gave up. The place method seemed promising, except that it will require me to size the canvas manually and then place the scrollbars at calculated offsets to the canvas... and all of this required that I have the same values that were needed to calculate the scaling factor above. :-(
I didn't get very far with this, as it seems I can't get (keyboard?) binds to work at all (On windows with Python 3.10.6). Shouldn't something like self.canvas.bind("<Right>", lambda event: print("Ping")) followed by self.canvas.focus_set() (perhaps with root instead of the canvas) work?
I'm sure I'm overlooking something basic, but after a few evenings looking at this I've gotten nowhere. :-(
I hope some of you can provide help and/or pointers allowing me to get further.
Ohh, for completeness, I'm trying to hack together a small tool that does the following:
On startup requests and load an image file. (Adding a button to perform the load/re-load is nice to have, but not strictly needed. )
Display the image file and allow an area of the image to be selected with the mouse.
Perform some software analysis on the selected part of the image when a button is pressed.
I would like to display, in my custom window, two images in PyQt4. In the left side, a source image. In the right side, a transformed -transformation will be pixel-wise- image. The images will be in RGBA format loaded by PIL(low), and for numpy (scipy.ndimage.imread).
Both images have the same size (since the transformed image will be generated from the source image), and both displays will have the same size (independent of the image size):
If the image width is lower than display's, the image will be left-centered in the display. If it is greater, I need a scroll for the source display.
An analogous criterion for height, top-centered, and vertical scroll bars.
If I scroll in the source display, the transformed's display will scroll as well, but the transformed's display will not have scrollbars.
Question: What component could I use to display an image with inner scrolling capabilities? (I will be happy with the component name, and some guidelines; code would be appreciated but the main concept is the important thing for the answer).
There are several solutions. If you just want to create the numpy "image" once and then display it, and it's not too big (or you don't care about memory), you can simply convert it to a QPixmap and display that in a viewport: Convert numpy array to PySide QPixmap
self.imageLabel = QtGui.QLabel()
self.imageLabel.setBackgroundRole(QtGui.QPalette.Base)
self.imageLabel.setSizePolicy(QtGui.QSizePolicy.Ignored,
QtGui.QSizePolicy.Ignored) # not sure about this one.
self.imageLabel.setPixmap(...pixmap here...)
self.scrollArea = QtGui.QScrollArea()
self.scrollArea.setBackgroundRole(QtGui.QPalette.Dark)
self.scrollArea.setWidget(self.imageLabel)
(taken from http://ftp.ics.uci.edu/pub/centos0/ics-custom-build/BUILD/PyQt-x11-gpl-4.7.2/examples/widgets/imageviewer.py)
If the image is too big, then you can add a paint hook. In the hook, get the visible part of the QScrollArea (the viewport), turn just this into a pixmap and render it.
The same is true when the numpy array changes all the time. You need to trigger a refresh when the array has been updated. Qt will then call the paint hook and the new content will become visible.
I'm developing a GUI using QTDesigner for some image processing tasks. I have two graphic views beneath each other in a grid layout. Both should display an image and later on I will add overlays.
I create my Pixmap img_pixmap and add it to my Scene. This scene is then added to my graphics view. Since my image is much larger than my screen size I apply fitInView(). In code:
self.img_pixmap_p = self.img_scene.addPixmap(img_pixmap)
self.img_view.setScene(self.img_scene)
self.img_scene.setSceneRect(QtCore.QRectF())
self.img_view.fitInView(self.img_scene.sceneRect(), QtCore.Qt.KeepAspectRatio)
So far, so good but how do i get rid of the white space around my image view? Ideally, I want my pixmap use the full width of the graphics view and to keep the aspect ratio, the graphics view should adjust its height accordingly. Any ideas on how to achieve that in a straight forward fashion?
Here an image to get a better idea of what I get:
As you can see, there are white borders, which I want to avoid.
Okay, I did as suggested by Pavel:
img_aspect_ratio = float(pixmap.size().width()) / pixmap.size().height()
width = img_view.size().width()
img_view.setFixedHeight( width / img_aspect_ratio )
img_view.fitInView(img_scene.sceneRect(), QtCore.Qt.KeepAspectRatio)
It works fine when you call this in each resizeEvent().
wxPython 2.8.10, Python 2.6.2, Windows 7 x64
So I am having a bit of a wxPython issue I am hoping someone can say where I am going wrong. In my application I have Sliders where the background colour changes as you move the slider around. I do this via SetBackgroundColour from within a EVT_SLIDER handler. It mostly works, but I end up with a border of unchanged colour around the outer edge of the widget.
I have tried Refresh up the chain, RefreshRect on the top level Frame around the widget (and a few pixels further out), various combinations of Update and Layout, but nothing seems to erase it. The best I have managed is if I use something like:
frame = wx.GetTopLevelParent(slider)
rect = slider.GetRect()
slider.ClearBackground()
slider.SetBackgroundColour(wx.Colour(red,green,blue))
frame.RefreshRect(rect)
It will correctly draw the background box with the new colour without the border issue, but it will not repaint the slider itself.
However, if I click away so the focus is elsewhere, the border snaps to the new colour.
I could probably use an overlay or custom paint function but I am hoping there is something I am missing here that will get me the desired results.
Any suggestions?
(edited to add)
Looks like resizing the window manually corrects the issue, but Layout() does not.
It also functions correctly if you do the client size trick:
w,h = slider.GetClientSize()
slider.SetClientSize( (w+1,h) )
slider.SetClientSize( (w,h) )
I think transparent is the right word I'm looking for. Hopefully my description will explain it properly no matter what.
I have a graph of time based data going back decades. Pretty much simply setup to show one day per x-pixel, unless zoomed in closer. I would like to have a box, maybe along the lines of 5x100, appear on top of the graph so when I move the mouse over the graph the box will move and keep pace with the mouse. Anotherwords showing what was happening in the 5 furthest days 'x number of days prior'. Anotherwords when computing an average going forward what are the next values to be falling off as new data arrives. Naturally I want the underlying graphed data to be displayed with the transparent box on top of it outlining the days in question. This may get crazy enough to be a much wider box with two areas that are colored light grey or something like that to show the areas in question but the colored areas are separated by numerous days(could be multiple transparent windows that are tracked together as well. Is this feasible with tkinter? From the research I've been doing it's questionable if using
root.attributes('alpha', .30)
would work or not. It doesn't sound like I could do something like as it would end up making the graph transparent to whatever is underneath it.
self.Graph.create_line()
self.Box.attributes('alpha', .30)
If I understand correctly I have to use
attributes
right at the root level versus the individual 'window' level so the above (severely chopped down) code wouldn't work...or would it. I haven't had a chance to try anything out yet to see what happens...that will be later on this evening. Kinda hoping to save myself a little time by asking now and you never know who else may need the help sometime.
If I understand what you're trying to do, it's going to be pretty hard.
Setting window attributes works just fine to make a window transparent. You've got a minor problem in the code—attributes start with a hyphen—but otherwise you've got it right:
self.Box.attributes("-alpha", .30)
However, it sounds like you want that Box to be an embedded part of the graph window, not its own top-level window that can be dragged around by the user, etc. Unfortunately, Tkinter does not have any notion of child windows, and it doesn't expose nearly enough of the native stuff you'd need to fake them by creating an immobile window and manually moving it to track the movements of another window. So, you don't have a window, which means you don't have window transparency.
The obvious thing for Box to be is some kind of widget, like a Frame or Canvas. But widgets don't have transparency.
Box could instead be just a collection of elements drawn onto the same Canvas as the Graph. That seems promising… but none of the Canvas methods handle alpha transparency. (Some of them do handle all-or-nothing transparency, but that doesn't help.)
One thing that does handle transparency is PhotoImage. So, if you draw Box off-screen, get the resulting contents as a PhotoImage, add the alpha (e.g., via PIL), then create_image the result… close, but no cigar. Depending on the settings of the underlying Tk library, Tkinter may just draw the pixmap with 1-bit transparency or ignore transparency completely. (Experiment with loading alpha-transparent PNG files in PIL and drawing them on a Canvas.) So, unless you want an app that looks right on some systems, doesn't draw the Box at all on others, and draws it opaque on others, this is a dead end.
So, what's left? Only manual compositing: Draw the Graph and the Box on separate off-screen windows, get the pixmaps, use PIL to compose them, and create_image the result.
At which point you're probably better off just using something like PIL's ImageDraw or a more powerful library to construct the pixmap in the first place. Or, of course, using a more powerful GUI library than Tk, like Qt or wx.
Maybe this can give you some ideas to play with:
from tkinter import *
root = Tk()
c = Canvas(root, width=640, height=480, bd=0, highlightthickness=0)
c.create_line(0,240,640,240, fill='blue')
c.pack()
#pil image with transparency
try:
from PIL import Image, ImageTk
except ImportError:
pass
else:
pim = Image.new('RGBA', (5,100), (0,255,0,64))
photo = ImageTk.PhotoImage(pim)
c.create_image(200,200, image=photo, anchor='nw')
#blank standard photoimage with red vertical borders
im = PhotoImage(width=7, height=480)
dat = ('red',)*480
im.put(dat, to=(0,0))
im.put(dat, to=(6,0))
box = c.create_image(0, 0, image=im, anchor='nw')
def on_motion(event):
left,top = c.coords(box)
dx = event.x - (left+7)
c.move(box, dx, 0)
c.bind('<Motion>', on_motion)
root.mainloop()