Making Icon with more than one image

[weepdoo]

Hye,

I want to display some icon with my model.
When I just use some simple picture (QIcon) it work well.

But, I would like this icon to be an addition of an icon that represent the type of data, and an icon that repsent it's state.

For exemple, I would like:
qtg_aircraft.png + qtg_locked.png => qtg_aircraft_locked.png

I tried to make a QIcon, and use the method addPixmap, after I resised the pixmap... but it do not work.
I'm a big noob in interface coding, and image manipulation... if some of you can help

[wysota]

addPixmap won't work. Create a new icon which is a composition of both these icons and replace one icon with the other when you need it.

[weepdoo]

addPixmap won't work.

I've seen :P

Create a new icon which is a composition of both these icons and replace one icon with the other when you need it.

That exactly what I do not know how to do it: the composition

[fullmetalcoder]

That exactly what I do not know how to do it: the composition

There's no generic plain-Qt way to achieve that... Still you can do it quite easily because QPixmap is a QPaintDevice... Hence you can do something like this (I ignored size and position stuff here but you'll have to play with them...) :

QPixmap layer1("plane.png"), layer2("lock.png"), compose;
 
QPainter p(&compose);
p.drawPixmap(layer1);
p.drawPixmap(layer2);

QPixmap layer1("plane.png"), layer2("lock.png"), compose;

QPainter p(&compose);
p.drawPixmap(layer1);
p.drawPixmap(layer2);

To copy to clipboard, switch view to plain text mode 

[weepdoo]

Hye everybody !

I can now compose icon, but, I stell have a problem: the background color.
I used the "setBackground" and "setBrush" method, but it do not seems to work as I wish.
I always have a black background (and my image are in png with alpha).

One more time: I'm developing in Python with PyQt :P

Here is the display of the pixmap alone (without painting):
image_without_composition.jpg

The code for this:

import sys
from PyQt4 import QtGui
from PyQt4 import QtCore
 
if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
 
    i1 = QtGui.QPixmap('qtg_aircraft.png')
 
    label = QtGui.QLabel()
    label.setPixmap(i1)  #Just display the pixmap
    label.show()
    sys.exit(app.exec_())

import sys
from PyQt4 import QtGui
from PyQt4 import QtCore

if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
        
    i1 = QtGui.QPixmap('qtg_aircraft.png')
    
    label = QtGui.QLabel()
    label.setPixmap(i1)  #Just display the pixmap
    label.show()
    sys.exit(app.exec_())

To copy to clipboard, switch view to plain text mode 

The same picture, with painting:
image_composition_alone.jpg

The code for this is:

import sys
from PyQt4 import QtGui, QtCore
 
if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
 
    i1 = QtGui.QPixmap('qtg_aircraft.png')
 
    result = QtGui.QPixmap(QtCore.QSize(24, 24))
    painter = QtGui.QPainter(result)
 
    painter.setBrush(QtGui.QBrush(QtCore.Qt.NoBrush))
    painter.drawImage(QtCore.QRect(0, 0, 24, 24), #<= we paint the Pixmap
                      i1.toImage(),
                      QtCore.QRect(0, 0, 24, 24))
    painter.end()
 
    label = QtGui.QLabel()
    label.setPixmap(result)  # <= display the result painted
    label.show()
    sys.exit(app.exec_())

import sys
from PyQt4 import QtGui, QtCore

if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    
    i1 = QtGui.QPixmap('qtg_aircraft.png')
    
    result = QtGui.QPixmap(QtCore.QSize(24, 24))
    painter = QtGui.QPainter(result)

    painter.setBrush(QtGui.QBrush(QtCore.Qt.NoBrush))
    painter.drawImage(QtCore.QRect(0, 0, 24, 24), #<= we paint the Pixmap
                      i1.toImage(),
                      QtCore.QRect(0, 0, 24, 24))
    painter.end()

    label = QtGui.QLabel()
    label.setPixmap(result)  # <= display the result painted
    label.show()
    sys.exit(app.exec_())

To copy to clipboard, switch view to plain text mode 

And last (but not least), with the same code, but I load one more pixmap, I've got this:
image_composition_with_pixmap.jpg

The code is:

import sys
from PyQt4 import QtGui, QtCore
 
if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
 
    i1 = QtGui.QPixmap('qtg_aircraft.png')
    i2 = QtGui.QPixmap('qtg_locked.png') #<= the only new line !!!
 
    result = QtGui.QPixmap(QtCore.QSize(24, 24))
    painter = QtGui.QPainter(result)
 
    painter.setBrush(QtGui.QBrush(QtCore.Qt.NoBrush))
 
    painter.drawImage(QtCore.QRect(0, 0, 24, 24),
                      i1.toImage(),
                      QtCore.QRect(0, 0, 24, 24))
 
    painter.end()
 
    label = QtGui.QLabel()
    label.setPixmap(result)
    label.show()
    sys.exit(app.exec_())

import sys
from PyQt4 import QtGui, QtCore

if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    
    i1 = QtGui.QPixmap('qtg_aircraft.png')
    i2 = QtGui.QPixmap('qtg_locked.png') #<= the only new line !!!
    
    result = QtGui.QPixmap(QtCore.QSize(24, 24))
    painter = QtGui.QPainter(result)

    painter.setBrush(QtGui.QBrush(QtCore.Qt.NoBrush))

    painter.drawImage(QtCore.QRect(0, 0, 24, 24),
                      i1.toImage(),
                      QtCore.QRect(0, 0, 24, 24))

    painter.end()

    label = QtGui.QLabel()
    label.setPixmap(result)
    label.show()
    sys.exit(app.exec_())

To copy to clipboard, switch view to plain text mode 

Why my background is not transparent ? Am I steal wrong anywhere ?

Moreover, why loading a new pixmap modify my painter ? Is it a bug in PyQt ?

[wysota]

Make sure the pixmap has an alpha channel. It might be easier for you to operate on QImages.

QPixmap px(24,24);
QPainter pt(&px);
pt.fill(Qt::transparent); // this might not be required
pt.drawImage(...);
pt.drawImage(...);

QPixmap px(24,24);
QPainter pt(&px);
pt.fill(Qt::transparent); // this might not be required
pt.drawImage(...);
pt.drawImage(...);

To copy to clipboard, switch view to plain text mode 

[weepdoo]

Here it is:
image_with_alpha.jpg

The code for this is:

import sys
from PyQt4 import QtGui, QtCore
 
if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
 
    i1 = QtGui.QPixmap('qtg_aircraft.png')
    i2 = QtGui.QPixmap('qtg_locked.png')
 
    alpha = QtGui.QPixmap(QtCore.QSize(24, 24))
    alpha.fill(QtCore.Qt.transparent)
 
    result = QtGui.QPixmap(QtCore.QSize(24, 24))
 
    painter = QtGui.QPainter(result)
 
    painter.setBrush(QtGui.QBrush(QtCore.Qt.NoBrush))
 
    painter.drawPixmap(QtCore.QRect(0, 0, 24, 24),
                       alpha,
                       QtCore.QRect(0, 0, 24, 24))
 
    painter.drawImage(QtCore.QRect(0, 0, 24, 24),
                      i1.toImage(),
                      QtCore.QRect(0, 0, 24, 24))
 
    painter.drawImage(QtCore.QRect(0, 0, 15, 15),
                      i2.toImage(),
                      QtCore.QRect(0, 0, 24, 24))
 
    painter.end()
 
    label = QtGui.QLabel()
    label.setPixmap(result)
    label.show()
    sys.exit(app.exec_())

import sys
from PyQt4 import QtGui, QtCore

if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    
    i1 = QtGui.QPixmap('qtg_aircraft.png')
    i2 = QtGui.QPixmap('qtg_locked.png')
    
    alpha = QtGui.QPixmap(QtCore.QSize(24, 24))
    alpha.fill(QtCore.Qt.transparent)
    
    result = QtGui.QPixmap(QtCore.QSize(24, 24))

    painter = QtGui.QPainter(result)

    painter.setBrush(QtGui.QBrush(QtCore.Qt.NoBrush))

    painter.drawPixmap(QtCore.QRect(0, 0, 24, 24),
                       alpha,
                       QtCore.QRect(0, 0, 24, 24))

    painter.drawImage(QtCore.QRect(0, 0, 24, 24),
                      i1.toImage(),
                      QtCore.QRect(0, 0, 24, 24))

    painter.drawImage(QtCore.QRect(0, 0, 15, 15),
                      i2.toImage(),
                      QtCore.QRect(0, 0, 24, 24))

    painter.end()

    label = QtGui.QLabel()
    label.setPixmap(result)
    label.show()
    sys.exit(app.exec_())

To copy to clipboard, switch view to plain text mode 

Why does it do not work ???

[weepdoo]

I tried this:

[...]
i1 = QtGui.QPixmap('qtg_aircraft.png')
    i2 = QtGui.QPixmap('qtg_locked.png')
 
    alpha = QtGui.QPixmap(QtCore.QSize(24, 24))
    alpha.fill(QtCore.Qt.transparent)
 
    result = QtGui.QPixmap(QtCore.QSize(24, 24))
 
    painter = QtGui.QPainter(result)
 
    brush = QtGui.QBrush(QtCore.Qt.SolidPattern)
    brush.setColor(QtGui.QColor(QtCore.Qt.transparent))
 
    painter.setBrush(brush)
 
    painter.drawPixmap(QtCore.QRect(0, 0, 24, 24),
                       alpha,
                       QtCore.QRect(0, 0, 24, 24))
 
    painter.drawImage(QtCore.QRect(0, 0, 24, 24),
                      i1.toImage(),
                      QtCore.QRect(0, 0, 24, 24))
[...]

[...]
i1 = QtGui.QPixmap('qtg_aircraft.png')
    i2 = QtGui.QPixmap('qtg_locked.png')
    
    alpha = QtGui.QPixmap(QtCore.QSize(24, 24))
    alpha.fill(QtCore.Qt.transparent)
    
    result = QtGui.QPixmap(QtCore.QSize(24, 24))

    painter = QtGui.QPainter(result)

    brush = QtGui.QBrush(QtCore.Qt.SolidPattern)
    brush.setColor(QtGui.QColor(QtCore.Qt.transparent))

    painter.setBrush(brush)

    painter.drawPixmap(QtCore.QRect(0, 0, 24, 24),
                       alpha,
                       QtCore.QRect(0, 0, 24, 24))

    painter.drawImage(QtCore.QRect(0, 0, 24, 24),
                      i1.toImage(),
                      QtCore.QRect(0, 0, 24, 24))
[...]

To copy to clipboard, switch view to plain text mode 

But it do not work... any other idea ?

[fullmetalcoder]

I've played a bit with a very small code sample and here's what I come to so far :

QPixmap layer1("tv.png"),
            layer2("locked.png"),
            compose(layer1.size());
 
    compose.fill(Qt::transparent);
 
    QPixmap alphacopy = layer2;
    alphacopy.setMask(layer2.mask());
 
    QPainter p(&compose);
    p.drawPixmap(    0,
                    0,
                    layer1);
 
    p.drawPixmap(    layer1.width() - layer2.width(),
                    layer1.height() - layer2.height(),
                    alphacopy);

QPixmap layer1("tv.png"),
            layer2("locked.png"),
            compose(layer1.size());
    
    compose.fill(Qt::transparent);
    
    QPixmap alphacopy = layer2;
    alphacopy.setMask(layer2.mask());
    
    QPainter p(&compose);
    p.drawPixmap(    0,
                    0,
                    layer1);
    
    p.drawPixmap(    layer1.width() - layer2.width(),
                    layer1.height() - layer2.height(),
                    alphacopy);

To copy to clipboard, switch view to plain text mode 

Note : I'm not familiar with Python so I preferred posting my C++ code and let you (or someone else) port it to Python. I should not be hard anyway...

Note bis : the tv.png comes from crystalsvg (64x64) and the locked.png I use is a 22x22, renamed, encrypted.png from crystalsvg.

[weepdoo]

Here is how I "translate" it to python:

import sys
from PyQt4 import QtGui, QtCore
 
if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
 
    i1 = QtGui.QPixmap('qtg_aircraft.png')
    i2 = QtGui.QPixmap('qtg_locked.png')
 
    result = QtGui.QPixmap(QtCore.QSize(24, 24))
    result.fill(QtCore.Qt.transparent)
 
    alpha = QtGui.QPixmap(i2)
    alpha.setMask(i2.mask())
 
    painter = QtGui.QPainter(result)
 
    painter.drawPixmap(QtCore.QRect(0, 0, 24, 24),
                       i1,
                       QtCore.QRect(0, 0, 24, 24))
 
    painter.drawPixmap(QtCore.QRect(0, 0, 15, 15),
                       alpha,
                       QtCore.QRect(0, 0, 24, 24))
 
    painter.end()
 
    label = QtGui.QLabel()
    label.setPixmap(result)
    label.show()
    sys.exit(app.exec_())

import sys
from PyQt4 import QtGui, QtCore

if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    
    i1 = QtGui.QPixmap('qtg_aircraft.png')
    i2 = QtGui.QPixmap('qtg_locked.png')
    
    result = QtGui.QPixmap(QtCore.QSize(24, 24))
    result.fill(QtCore.Qt.transparent)

    alpha = QtGui.QPixmap(i2)
    alpha.setMask(i2.mask())

    painter = QtGui.QPainter(result)

    painter.drawPixmap(QtCore.QRect(0, 0, 24, 24),
                       i1,
                       QtCore.QRect(0, 0, 24, 24))

    painter.drawPixmap(QtCore.QRect(0, 0, 15, 15),
                       alpha,
                       QtCore.QRect(0, 0, 24, 24))

    painter.end()

    label = QtGui.QLabel()
    label.setPixmap(result)
    label.show()
    sys.exit(app.exec_())

To copy to clipboard, switch view to plain text mode 

Thank to everyone who help me