After 1 week of constant failure I'm still not able to do a simple task: Load a png with alpha channel or with white background (in example bellow) and have it maintain its transparency in wx.StaticBitmap.
This I need in a wx.panel later. It should stay like this or similar.
This is one of my approaches (white background):
def __init__(self, parent):
wx.Panel.__init__(self, parent)
self.loc = wx.Image("intro/image.png",wx.BITMAP_TYPE_PNG).ConvertToBitmap()
z = wx.Mask(self.loc, wx.WHITE)
self.loc.SetMask(z)
self.locopic = wx.StaticBitmap(self, -1, self.loc, (0, 0))
I read tons on this topic. I'm rubbish. Sorry. I think I miss something obvious here. wx.Mask , Transparent images
Update:
I managed to get this far with the example found at WorkinWithImages:
import ImageConversions
...
puFilename = "intro/imagealpha.png"
pilImage = Image.open( puFilename )
pilImageWithAlpha = ImageConversions.WxImageFromPilImage( pilImage, createAlpha=True )
self.puWxBitmap = pilImageWithAlpha.ConvertToBitmap()
self.locopic = wx.StaticBitmap(self, -1, self.puWxBitmap)
This is creating the transparent wx.image from a PNG with alpha channel BUT in wx.StaticBitmap would have an ugly black colour where the transparency should be. This is driving me maaad!!! HELP PLEASE!
If only I would manage to display in the wx.panel that image with the transparency in the right place
Thank you community!
As discussed in the python SO chat:
class MyPanel(wx.Panel):
def __init__(self, parent):
wx.Panel.__init__(self, parent)
self.Bind(wx.EVT_PAINT, self.OnPaint)
self.loc = wx.Bitmap("intro/image.png")
def OnPaint(self, evt):
dc = wx.PaintDC(self)
dc.SetBackground(wx.Brush("WHITE"))
# ... drawing here all other images in order of overlapping
dc.DrawBitmap(self.loc, 0, 0, True)
The trick is to draw all overlapping images with the wx.PaintDC.
Additionally it's more convenient to use wx.Bitmap instead of wx.Image(..., wx.BITMAP_TYPE_PNG).ConvertToBitmap() for loading PNGs from the file system.
Related
There is a very annoying kind of shadow/frame over my PyQt5 window. The window is made as a custom class:
class CustomWindow(QMainWindow):
def __init__(self):
super(CustomWindow,self).__init__()
self.bg = '#FFFFFF'
self.opacity =1
def paintEvent(self, event=None):
painter = QPainter(self)
painter.setOpacity(self.opacity)
painter.setBrush(QColor(self.bg))
painter.setPen(QPen(QColor(0,0,0)))
painter.drawRect(self.rect())
def config(self, bg, op):
self.bg = bg
self.opacity = op
The shadow thing I'm talking about:
You can see that there are thin black lines on the left and upper edges of the window. Does anyone know how to disable them?
Musicmante's solution worked:
You're drawing it. 0, 0, 0 is black in rgb. Change to painter.setPen(Qt.NoPen)
Here I wrote this code but did not work:
import sys
from PyQt4 import QtGui, QtCore
class CricleImage(QtCore.QObject):
def __init__(self):
super(CricleImage, self).__init__()
self.pix = QtGui.QGraphicsPixmapItem(QtGui.QPixmap("bird(01).jpg"))
#drawRoundCircle
rect = self.pix.boundingRect()
self.gri = QtGui.QGraphicsRectItem(rect)
self.gri.setPen(QtGui.QColor('red'))
if __name__ == '__main__':
myQApplication = QtGui.QApplication(sys.argv)
IMG = CricleImage()
#scene
scene = QtGui.QGraphicsScene(0, 0, 400, 300)
scene.addItem(IMG.pix)
#view
view = QtGui.QGraphicsView(scene)
view.show()
sys.exit(myQApplication.exec_())
One possible solution is to overwrite the paint() method of the QGraphicsPixmapItem and use setClipPath to restrict the painting region:
from PyQt4 import QtCore, QtGui
class CirclePixmapItem(QtGui.QGraphicsPixmapItem):
#property
def radius(self):
if not hasattr(self, "_radius"):
self._radius = 0
return self._radius
#radius.setter
def radius(self, value):
if value >= 0:
self._radius = value
self.update()
def paint(self, painter, option, widget=None):
painter.save()
rect = QtCore.QRectF(QtCore.QPointF(), 2 * self.radius * QtCore.QSizeF(1, 1))
rect.moveCenter(self.boundingRect().center())
path = QtGui.QPainterPath()
path.addEllipse(rect)
painter.setClipPath(path)
super().paint(painter, option, widget)
painter.restore()
if __name__ == "__main__":
import sys
app = QtGui.QApplication(sys.argv)
pixmap = QtGui.QPixmap("logo.jpg")
scene = QtGui.QGraphicsScene()
view = QtGui.QGraphicsView(scene)
view.setRenderHints(
QtGui.QPainter.Antialiasing | QtGui.QPainter.SmoothPixmapTransform
)
it = CirclePixmapItem(pixmap)
scene.addItem(it)
it.radius = pixmap.width() / 2
view.show()
sys.exit(app.exec_())
Update:
# ...
view = QtGui.QGraphicsView(
scene, alignment=QtCore.Qt.AlignTop | QtCore.Qt.AlignLeft
)
# ...
view.show()
it.setPos(80, 80)
sys.exit(app.exec_())
Second possible solution:
import sys
#from PyQt4 import QtCore, QtGui
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
class Label(QLabel):
def __init__(self, *args, antialiasing=True, **kwargs):
super(Label, self).__init__(*args, **kwargs)
self.Antialiasing = antialiasing
self.setMaximumSize(200, 200)
self.setMinimumSize(200, 200)
self.radius = 100
self.target = QPixmap(self.size())
self.target.fill(Qt.transparent) # Fill the background with transparent
# Upload image and zoom to control level
p = QPixmap("head2.jpg").scaled(
200, 200, Qt.KeepAspectRatioByExpanding, Qt.SmoothTransformation)
painter = QPainter(self.target)
if self.Antialiasing:
# antialiasing
painter.setRenderHint(QPainter.Antialiasing, True)
painter.setRenderHint(QPainter.HighQualityAntialiasing, True)
painter.setRenderHint(QPainter.SmoothPixmapTransform, True)
path = QPainterPath()
path.addRoundedRect(
0, 0, self.width(), self.height(), self.radius, self.radius)
# pruning
painter.setClipPath(path)
painter.drawPixmap(0, 0, p)
self.setPixmap(self.target)
class Window(QWidget):
def __init__(self, *args, **kwargs):
super(Window, self).__init__(*args, **kwargs)
layout = QHBoxLayout(self)
layout.addWidget(Label(self))
self.setStyleSheet("background: green;")
if __name__ == "__main__":
app = QApplication(sys.argv)
w = Window()
w.show()
sys.exit(app.exec_())
Another approach, slightly different from the one provided by eyllanesc. While this might seem much more complicated than that, I believe that it offers a better implementation and interface, with the addition of better performance.
In this case, instead of overriding the paint method (that is run everytime the item is painted, which happens very often), I'm using the shape() function along with the QGraphicsItem.ItemClipsToShape flag, that allows to limit the painting only within the boundaries of the path shape.
What shape() does is to return a QPainterPath that includes only the "opaque" portions of an item that will react to mouse events and collision detection (with the scene boundaries and its other items). In the case of a QGraphicsPixmapItem this also considers the possible mask (for example, a PNG based pixmap with transparent areas, or an SVG image). By setting the ItemClipsToShape we can ensure that the painting will only cover the parts of the image that are within that shape.
The main advantage of this approach is that mouse interaction and collision detection with other items honors the actual circle shape of the item.
This means that if you click outside the circle (but still within the rectangle area of the full image), the item will not receive the event. Also, if the image supports masking (a PNG with transparent areas) which by default would not be part of the shape, this method will take that into account.
Also, by "caching" the shape we are also speeding up the painting process a bit (since Qt will take care of it, without any processing done using python).
class CircleClipPixmapItem(QtGui.QGraphicsPixmapItem):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setFlag(self.ItemClipsToShape)
self.updateRect()
def updateRect(self):
baseRect = super().boundingRect()
minSize = min(baseRect.width(), baseRect.height())
self._boundingRect = QtCore.QRectF(0, 0, minSize, minSize)
self._boundingRect.moveCenter(baseRect.center())
self._shape = QtGui.QPainterPath()
self._shape.addEllipse(self._boundingRect)
# the shape might include transparent areas, using the & operator
# I'm ensuring that _shape only includes the areas that intersect
# the shape provided by the base implementation
self._shape &= super().shape()
def setPixmap(self, pm):
super().setPixmap(pm)
# update the shape to reflect the new image size
self.updateRect()
def setShapeMode(self, mode):
super().setShapeMode(mode)
# update the shape with the new mode
self.updateRect()
def boundingRect(self):
return self._boundingRect
def shape(self):
return self._shape
Keep in mind that there's a catch about both methods: if the aspect ratio of the image differs very much from 1:1, you'll always end up with some positioning issues. With my image, for example, it will always be shown 60 pixel right from the actual item position. If you want to avoid that, the updateRect function will be slightly different and, unfortunately, you'll have to override the paint() function (while still keeping it a bit faster than other options):
def updateRect(self):
baseRect = super().boundingRect()
minSize = min(baseRect.width(), baseRect.height())
self._boundingRect = QtCore.QRectF(0, 0, minSize, minSize)
# the _boundingRect is *not* centered anymore, but a new rect is created
# as a reference for both shape intersection and painting
refRect= QtCore.QRectF(self._boundingRect)
refRect.moveCenter(baseRect.center())
# note the minus sign!
self._reference = -refRect.topLeft()
self._shape = QtGui.QPainterPath()
self._shape.addEllipse(self._boundingRect)
self._shape &= super().shape().translated(self._reference)
# ...
def paint(self, painter, option, widget):
# we are going to translate the painter to the "reference" position,
# let's save its state before that
painter.save()
painter.translate(self._reference)
super().paint(painter, option, widget)
painter.restore()
This will make the boundingRect (and resulting internal shape) position the whole item at the top-left of the item position.
The following image shows the differences between the two approaches; I've used a PNG with transparent areas to better explain the whole concept.
On the top there is the source image, in the middle the paint() override approach, and finally the shape() implementation at the bottom.
While there seems to be no difference between the two methods, as shown on the examples on the left, on the right I've highlighted the actual boundaries of each item, by showing their boundingRect (in blue), shape (in red), which will be used for mouse events, collision detection and paint clipping; the green circle shows the overall circle used for both shape and painting.
The examples in the middle show the positioning based on the original image size, while on the right you can see the absolute positioning based on the effective circle size as explained above.
Drawing a circle around the image
Unfortunately, the ItemClipsToShape flag doesn't support antialiasing for clipping: if we just draw a circle after painting the image the result will be ugly. On the left you can see that the circle is very pixellated and does not overlap perfectly on the image. On the right the correct painting.
To support that, the flag must not be set, and the paint function will be a bit different.
class CircleClipPixmapItem(QtGui.QGraphicsPixmapItem):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
# we don't need this anymore:
# self.setFlag(self.ItemClipsToShape)
# always set the shapeMode to the bounding rect without any masking:
# if the image has transparent areas they will be clickable anyway
self.setShapeMode(self.BoundingRectShape)
self.updateRect()
self.pen = QtGui.QPen(QtCore.Qt.red, 2)
# ...
def setPen(self, pen):
self.pen = pen
self.update()
def paint(self, painter, option, widget):
# we are going to translate the painter to the "reference" position,
# and we are also changing the pen, let's save the state before that
painter.save()
painter.translate(.5, .5)
painter.setRenderHints(painter.Antialiasing)
# another painter save "level"
painter.save()
# apply the clipping to the painter
painter.setClipPath(self._shape)
painter.translate(self._reference)
super().paint(painter, option, widget)
painter.restore()
painter.setPen(self.pen)
# adjust the rectangle to precisely match the circle to the image
painter.drawEllipse(self._boundingRect.adjusted(.5, .5, -.5, -.5))
painter.restore()
# restore the state of the painter
I need to be able to rescale an image (in realtime) in a wx.Panel when parent wx.Frame is resized (for example for wxPython for image and buttons (resizable)).
This code now works, the behaviour is like in a standard Photo Viewer : the image fits perfectly the parent window, and the rescaling respects aspect ratio.
import wx
class MainPanel(wx.Panel):
def __init__(self, parent):
wx.Panel.__init__(self, parent, -1, style=wx.FULL_REPAINT_ON_RESIZE)
self.Bind(wx.EVT_PAINT, self.OnPaint)
self.img = wx.Image('background.png', wx.BITMAP_TYPE_PNG)
self.imgx, self.imgy = self.img.GetSize()
def OnPaint(self, event):
dc = wx.PaintDC(self)
dc.Clear()
x,y = self.GetSize()
posx,posy = 0, 0
newy = int(float(x)/self.imgx*self.imgy)
if newy < y:
posy = int((y - newy) / 2)
y = newy
else:
newx = int(float(y)/self.imgy*self.imgx)
posx = int((x - newx) / 2)
x = newx
img = self.img.Scale(x,y, wx.IMAGE_QUALITY_HIGH)
self.bmp = wx.BitmapFromImage(img)
dc.DrawBitmap(self.bmp,posx,posy)
class MainFrame(wx.Frame):
def __init__(self, parent):
wx.Frame.__init__(self, parent, -1, title='Test', size=(600,400))
self.panel = MainPanel(self)
self.Show()
app = wx.App(0)
frame = MainFrame(None)
app.MainLoop()
Before continuing to implement some things, I would to know :
is this the "good way" to do it ?
the FULL_REPAINT_ON_RESIZE might be a bit too much (inefficient), but I couldn't make it without this, do you have ideas to improve this ?
how to track mouse clicks ? Example : I want to track a click in a rectangle (10,20) to (50,50) in the original coordinates of the original image. Should I convert this in new coordinates (because the image has been rescaled!) ? This would mean I should do all things now in a very low-level...
This is not a bad way to do it but there are a couple of things you could easily optimize:
Don't call wxImage::Scale() every time in OnPaint(). This is a slow operation and you should do it only once, in your wxEVT_SIZE handler instead of doing it every time you repaint the window.
Call SetBackgroundStyle(wxBG_STYLE_PAINT) to indicate that your wxEVT_PAINT handler already erases the background entirely, this will reduce flicker on some platforms (you won't see any difference on the others which always use double buffering anyhow, but it will still make repainting marginally faster even there).
As for the mouse clicks, I think you don't have any choice but to translate the coordinates yourself.
I'm trying to make a special splash screen that is displayed while the application is loading,
it outputs messages of the various components loading and features a progress bar.
The first job I am tackling is mapping a .png image to the frame that will host the splash screen.
import wx
class edSplash(wx.Frame):
def __init__(self, parent, title):
wx.Frame.__init__(self, parent, -1, title, size=(410, 410), style=wx.NO_BORDER)
self.SetBackgroundStyle(wx.BG_STYLE_CUSTOM)
self.Center()
self.Bind(wx.EVT_ERASE_BACKGROUND, self.OnEraseBackground)
return
def OnEraseBackground(self, evt):
dc = evt.GetDC()
if not dc:
dc = wx.ClientDC(self)
rect = self.GetUpdateRegion().GetBox()
dc.SetClippingRect(rect)
tempBrush = wx.Brush((0,0,0,0),wx.TRANSPARENT)
print tempBrush
dc.SetBackground(tempBrush)
dc.SetBackgroundMode(wx.TRANSPARENT)
#dc.Clear()
img = wx.Image("splash.png", wx.BITMAP_TYPE_PNG, -1)
bmp = wx.BitmapFromImage(img)
dc.DrawBitmap(bmp, 0, 0, True)
def PushMessage(self, mesage):
print mesage
class edApp(wx.App):
def OnInit(self):
splash = edSplash(None, 'Ed')
self.SetTopWindow(splash)
splash.Show(True)
return True
if __name__ == '__main__':
edApp(redirect=False).MainLoop()
The problem is that dc.Clear() clears to an opaque rectangle, although i have set it's brush and mode to transparent (I think :D). Commenting out dc.Clear() gives me the desired variable transparency based on the .png's alpha channel but the window gathers image noise from the neighboring windows.
How could I get both the .png's transparency and have the background clearing to an transparent brush to keep from gathering image noise?
Maybe you should try putting the background image onto a panel rather than the frame. Here's one way to do it:
http://www.blog.pythonlibrary.org/2010/03/18/wxpython-putting-a-background-image-on-a-panel/
I want to load an image, resize it to a given size and after draw it in a specific position in a panel.
All this using wxpython.
How can I do it?
Thanks in advance!
wx.Image has a Scale method that will do the resizing. The rest is normal wx coding.
Here's a complete example for you.
import wx
def scale_bitmap(bitmap, width, height):
image = wx.ImageFromBitmap(bitmap)
image = image.Scale(width, height, wx.IMAGE_QUALITY_HIGH)
result = wx.BitmapFromImage(image)
return result
class Panel(wx.Panel):
def __init__(self, parent, path):
super(Panel, self).__init__(parent, -1)
bitmap = wx.Bitmap(path)
bitmap = scale_bitmap(bitmap, 300, 200)
control = wx.StaticBitmap(self, -1, bitmap)
control.SetPosition((10, 10))
if __name__ == '__main__':
app = wx.PySimpleApp()
frame = wx.Frame(None, -1, 'Scaled Image')
panel = Panel(frame, 'input.jpg')
frame.Show()
app.MainLoop()
First off I think the wxPython Docs and Demos do a great job explaining how to use their libraries, especially because the demos can be played with on the fly to see the affect or you can revert to the original. Here is the Windows link to download all the files:
http://www.wxpython.org/download.php#binaries
That said, here is the example code from the demo:
def runTest(frame, nb, log):
bmp = wx.Image(opj('bitmaps/image.bmp'), wx.BITMAP_TYPE_BMP).ConvertToBitmap()
gif = wx.Image(opj('bitmaps/image.gif'), wx.BITMAP_TYPE_GIF).ConvertToBitmap()
png = wx.Image(opj('bitmaps/image.png'), wx.BITMAP_TYPE_PNG).ConvertToBitmap()
jpg = wx.Image(opj('bitmaps/image.jpg'), wx.BITMAP_TYPE_JPEG).ConvertToBitmap()
panel = wx.Panel(nb, -1)
pos = 10
wx.StaticBitmap(panel, -1, bmp, (10, pos), (bmp.GetWidth(), bmp.GetHeight()))
pos = pos + bmp.GetHeight() + 10
wx.StaticBitmap(panel, -1, gif, (10, pos), (gif.GetWidth(), gif.GetHeight()))
pos = pos + gif.GetHeight() + 10
wx.StaticBitmap(panel, -1, png, (10, pos), (png.GetWidth(), png.GetHeight()))
pos = pos + png.GetHeight() + 10
wx.StaticBitmap(panel, -1, jpg, (10, pos), (jpg.GetWidth(), jpg.GetHeight()))
return panel
Here it shows how to load an image and displays it on a panel. There are some objects not explained here, but it should give you the general gist.
If you mean adding the image to a toolbar / listbook / toolbook etc.. you will have to convert it to a bitmap (usually only bitmaps allowed).
As far as i know you can't re-size a bitmap, therefore you will have to resize an image before and then convert it.
Here is a good example http://markandclick.com/1/post/2011/12/wxpython-resize-embedded-bitmap-before-adding-it-as-a-tool.html
Here is a copy from the example:
def getFolderBitmap():
img = folder_icon.GetImage().Rescale(scaleW, scaleH)
return img.ConvertToBitmap()