Qtool Images

sherief

On the Qt designer, how do you create a button that switches the icon image when clicked?

Thank you for the assistance!

SGaist

Hi and welcome to devnet,

Do you mean a QPushButton with an icon ?

sherief

Yes, either QPushButton or QToolButton (both with icons), whichever one would make the most sense

SGaist

And by click do you mean it's a checkable button ?

sherief

This is the current code related to the button:

    self.pushButton = QtWidgets.QPushButton(self.centralwidget)
    self.pushButton.setGeometry(QtCore.QRect(160, 180, 271, 121))
    self.pushButton.setStyleSheet("")
    self.pushButton.setText("")
    icon = QtGui.QIcon()
    
    icon.addPixmap(QtGui.QPixmap("images/Clicking.png"))
    icon.addPixmap(QtGui.QPixmap("images/Off.png"), QtGui.QIcon.Active)
    icon.addPixmap(QtGui.QPixmap("images/On.png"), QtGui.QIcon.Normal, QtGui.QIcon.On)


    self.pushButton.setIcon(icon)
    self.pushButton.setIconSize(QtCore.QSize(300, 300))
    self.pushButton.setCheckable(True)
    self.pushButton.setAutoRepeatDelay(400)
    self.pushButton.setDefault(False)
    self.pushButton.setObjectName("pushButton")

I want the button to be off.png by default, then when I'm clicking on it the icon becomes clicking.png, and when I release the click it becomes On.png
Currently, it is off.png by default, but clicking on it does not change the icon to clicking.png, and releasing does successfully change the icon to on.png

Strangely enough though, when I'm clicking on the window (instead of the actual button), the icon switches to clicking.png and goes back to off.png once I release it.
How can I fix the middle three lines so that the icon becomes clicking.png when I'm holding the click on the button, and then become on.png once I release it? Thanks

Note: I don't think the code would run as is if you don't have any of the images saved on your computer.

jsulm

@sherief Use https://doc.qt.io/qt-5/qabstractbutton.html#pressed and https://doc.qt.io/qt-5/qabstractbutton.html#released signals to change the icon.

J.Hilk

@sherief

this seems like a good point to use stylesheets, I would think.
Not sure if the setup is the same for Python, but I would think so:

self.pushButton.setStyleSheet("QPushButton:{border-image:url(:/images/Off.png);}QPushButton:pressed{border-image:url(:/images/Clicking.png);}QPushButton:checked{(border-image:url(:/images/On.png);}");