Problem aligning buttons with image, in a widget, using pyqt5 graphical library

Question

I am trying to create a screen with a background image and two buttons (ok and Cancel) with press/drop effect using the graphical library pyqt5, of the programming language python, however, I have two problems: I can’t align the buttons to the center of the widget and the button event seems to be happening twice.

Below follows the code:

import sys
from PyQt5 import QtGui
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *


class PicButton(QAbstractButton):
    def __init__(self, pixmap, pixmap_pressed, id_button, parent=None):
        super(PicButton, self).__init__(parent)
        self.pixmap = pixmap
        self.pixmap_pressed = pixmap_pressed
        self.id_buton = id_button

        self.pressed.connect(self.update)
        self.released.connect(self.update)

    def paintEvent(self, event):
        if self.isDown():
            pix = self.pixmap_pressed
            print("botao pressionado: ", self.id_buton)
        else:
            pix = self.pixmap

        painter = QPainter(self)
        painter.drawPixmap(event.rect(), pix)

    def enterEvent(self, event):
        self.update()

    def leaveEvent(self, event):
        self.update()

    def sizeHint(self):
        return QSize(131, 82)


app = QApplication(sys.argv)
window = QWidget()
window.setGeometry(800, 450, 800, 450)

pixmap = QPixmap("background.png")
brush = QBrush(pixmap)
palette = QPalette()
palette.setBrush(QPalette.Background, brush)
window.setPalette(palette)
button1 = PicButton(QtGui.QPixmap("cancel_up.png"), QtGui.QPixmap("cancel_down.png"), "cancel")
button2 = PicButton(QtGui.QPixmap("ok_up.png"), QtGui.QPixmap("ok_down.png"), "ok")

layout = QHBoxLayout()
layout.addStretch(1)
layout.addWidget(button1)
layout.addWidget(button2)
layout.setAlignment(Qt.AlignCenter)

window.setLayout(layout)
window.show()

sys.exit(app.exec_())

To obtain the images used in the program download them in the following link: images.

Would anyone know how to solve these problems?

Answer 1

Events are being activated twice as there are two calls to the same.

To correct, simply remove the lines

self.pressed.connect(self.update)
self.released.connect(self.update)

When centering the image, simply remove the command

layout.addStretch(1)

Since then you add one Qspaceritem making your buttons go to the side.

In the end, the code would look like this:

import sys
from PyQt5 import QtGui
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *


class PicButton(QAbstractButton):
    def __init__(self, pixmap, pixmap_pressed, id_button, parent=None):
        super(PicButton, self).__init__(parent)
        self.pixmap = pixmap
        self.pixmap_pressed = pixmap_pressed
        self.id_buton = id_button

        self.pressed.connect(self.update)
        self.released.connect(self.update)

    def paintEvent(self, event):
        if self.isDown():
            pix = self.pixmap_pressed
            print("botao pressionado: ", self.id_buton)
        else:
            pix = self.pixmap

        painter = QPainter(self)
        painter.drawPixmap(event.rect(), pix)

    def enterEvent(self, event):
        self.update()

    def leaveEvent(self, event):
        self.update()

    def sizeHint(self):
        return QSize(131, 82)


app = QApplication(sys.argv)
window = QWidget()
window.setGeometry(800, 450, 800, 450)

pixmap = QPixmap("background.png")
brush = QBrush(pixmap)
palette = QPalette()
palette.setBrush(QPalette.Background, brush)
window.setPalette(palette)
button1 = PicButton(QtGui.QPixmap("cancel_up.png"), QtGui.QPixmap("cancel_down.png"), "cancel")
button2 = PicButton(QtGui.QPixmap("ok_up.png"), QtGui.QPixmap("ok_down.png"), "ok")


layout = QHBoxLayout()
layout.addStretch(0)
layout.addWidget(button1)
layout.addWidget(button2)
layout.setAlignment(Qt.AlignCenter)

window.setLayout(layout)
window.show()

sys.exit(app.exec_())