How to make double arrow button in PyQt

Question

I'm trying to make a button like this

Currently I can create the middle two buttons (single right or single left) using Qt::LeftArrow or Qt::RightArrow from setArrowType(). From the docs, there seems to only be 5 possible types. If this feature is not built in, how can I make a custom double arrow button?

Right now I have this

from PyQt4 import QtCore, QtGui
import sys

class PanningButton(QtGui.QToolButton):
    """Custom button with click, short/long press, and auto-repeat functionality"""

    def __init__(self):
        QtGui.QToolButton.__init__(self)
        self.setArrowType(QtCore.Qt.LeftArrow)
        # Enable auto repeat on button hold
        self.setAutoRepeat(True)
        # Initial delay in ms before auto-repetition kicks in
        self.setAutoRepeatDelay(700)
        # Length of auto-repetition
        self.setAutoRepeatInterval(500)
        self.clicked.connect(self.buttonClicked)
        self._state = 0

    def buttonClicked(self):
        # Panning
        if self.isDown():
            if self._state == 0:
                self._state = 1
                self.setAutoRepeatInterval(50)
        # Mouse release
        elif self._state == 1:
            self._state = 0
            self.setAutoRepeatInterval(125)

def pressed():
    global counter
    counter += 1
    print(counter)

if __name__ == '__main__':
    app = QtGui.QApplication([])

    counter = 0
    panning_button = PanningButton()
    panning_button.clicked.connect(pressed)

    panning_button.show()
    sys.exit(app.exec_())

eyllanesc · Accepted Answer · 2019-05-23T04:31:48.860

There are several options:

Use the Qt icons, in this case you can use the standardIcon() of QStyle:

from PyQt4 import QtCore, QtGui


class Widget(QtGui.QWidget):
    def __init__(self, parent=None):
        super(Widget, self).__init__(parent)
        button1 = QtGui.QToolButton()
        button1.setIcon(
            button1.style().standardIcon(QtGui.QStyle.SP_MediaSeekBackward)
        )

        button2 = QtGui.QToolButton()
        button2.setArrowType(QtCore.Qt.LeftArrow)

        button3 = QtGui.QToolButton()
        button3.setArrowType(QtCore.Qt.RightArrow)

        button4 = QtGui.QToolButton()
        button4.setIcon(
            button1.style().standardIcon(QtGui.QStyle.SP_MediaSeekForward)
        )

        lay = QtGui.QHBoxLayout(self)
        for btn in (button1, button2, button3, button4):
            lay.addWidget(btn)


if __name__ == "__main__":
    import sys

    app = QtGui.QApplication(sys.argv)
    w = Widget()
    w.show()
    sys.exit(app.exec_())

Create the icons with QPainter

def create_icon():
    pixmap = QtGui.QPixmap(QtCore.QSize(128, 128))
    pixmap.fill(QtCore.Qt.transparent)
    painter = QtGui.QPainter(pixmap)
    # draw icon
    painter.end()
    return QtGui.QIcon(pixmap)

Use icons created by an image editor like photoshop, corel draw, gimp, etc.

IMHO the simplest solution is the last case since in the first case you are limited to what Qt provides, in the second case it can be unnecessarily complicated, however the third case is the optimal option.

using option 1 works but how can I change the icon color from default black to say green? — nathancy, May 28 '19 at 22:45
@nathancy As I pointed out in the last part of my answer: the limitation of the first method is that you must accept what Qt provides, and in this case you can not change the color easily. Why not use an image generated by an image editor ?, I think it's the best and easiest. — eyllanesc, May 28 '19 at 22:50
I also think option 3 is easiest but for my application the image will not be packaged easily when it gets complied into an executable. The `SP_MediaSeekForward` icon seems to be good enough but I just need to be able to change the color — nathancy, May 28 '19 at 22:58
@nathancy If you are going to use pyinstaller you must use the data attribute, every GUI has the icons as images, another option is to use a .qrc, see https://stackoverflow.com/questions/15864762/pyqt4-how-do-i-compile -and-import-a-qrc-file-into-my-program. As you point out that is the limitation of the first alternative — eyllanesc, May 28 '19 at 23:05

How to make double arrow button in PyQt

1 Answers1