PySide2 - How can I show the “count of unread” on label?

Question

I know that when I trigger an edit event, I add the one to the counter, but how to display it on the label ?

Or, is this actually two labels displayed in the same block ?

Answer 1

Thanks @Loïc G. , based on the keywords you provided then I write some code below,

It's might be work well. But how to erase before I redraw ?

from PySide2 import QtCore,QtWidgets,QtGui
from PySide2.QtCore import QPoint
from PySide2.QtGui import QPainter,QPixmap,QImage
from PySide2.QtWidgets import QApplication,QLabel
import sys

if __name__ == "__main__":
    app = QApplication(sys.argv)
    image = QImage('Start.png')
    painter = QPainter()
    painter.begin(image)
    painter.setBrush(QtCore.Qt.yellow)
    center = QPoint(33,35)
    painter.drawEllipse(center,10,10)
    painter.drawText(30,40,'1')
    painter.end()

    label = QLabel()
    label.setPixmap(QPixmap.fromImage(image))
    label.show()

    sys.exit(app.exec_())

Answer 2

As said on a comment, you have to create the image with QPixmap, then draw the blue circle and the text using QPainter and set the final image as icon of a button.

Below, you will find a working example with 2 pushbuttons to increment/decrement the "unread" value.

Each time this value is changed, a unreadCountChanged() signal is emitted.

The image is created on unreadCountChanged slot and set as button icon.

from PyQt4 import QtCore, QtGui
import sys


class MyApplication(QtGui.QMainWindow):
    def __init__(self):
        super(MyApplication, self).__init__()
        self.unreadCount = 0

        self.setupUi()
        self.connect(self, QtCore.SIGNAL("unreadCountChanged()"), self.unreadCountChanged)

    def setupUi(self):
        self.pixmapBtn = QtGui.QPushButton(self)
        self.pixmapBtn.setGeometry(QtCore.QRect(0, 0, 41, 41))
        icon = QtGui.QIcon()
        icon.addPixmap(QtGui.QPixmap("play.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.pixmapBtn.setIconSize(QtCore.QSize(32, 32))
        self.pixmapBtn.setIcon(icon)

        upBtn = QtGui.QPushButton("+", self)
        upBtn.setGeometry(QtCore.QRect(60, 0, 41, 41))
        self.connect(upBtn, QtCore.SIGNAL("clicked()"), self.onUpClicked)

        downBtn = QtGui.QPushButton("-", self)
        downBtn.setGeometry(QtCore.QRect(60, 50, 41, 41))
        self.connect(downBtn, QtCore.SIGNAL("clicked()"), self.onDownClicked)

        self.unreadLabel = QtGui.QLabel(self)
        self.unreadLabel.setText("Count: {}".format(self.unreadCount))
        self.unreadLabel.setGeometry(QtCore.QRect(5, 60, 51, 16))

        self.resize(200, 200)

    def onUpClicked(self):
        self.unreadCount += 1
        self.emit(QtCore.SIGNAL("unreadCountChanged()"))

    def onDownClicked(self):
        if self.unreadCount > 0:
            self.unreadCount -= 1
        self.emit(QtCore.SIGNAL("unreadCountChanged()"))

    def unreadCountChanged(self):
        self.unreadLabel.setText("Count: {}".format(self.unreadCount))

        pixmap = QtGui.QPixmap("play.png")
        if self.unreadCount > 0:
            painter = QtGui.QPainter()
            painter.begin(pixmap)
            painter.setBrush(QtCore.Qt.blue)  # Set the circle color
            center = QtCore.QPoint(90, 90)
            painter.drawEllipse(center, 40, 40)
            font = painter.font()
            font.setPointSize(30)
            pen = painter.pen()
            pen.setColor(QtCore.Qt.white)  # Set the text color
            painter.setPen(pen)
            painter.setFont(font)
            painter.drawText(80, 100, str(self.unreadCount))
            painter.end()

        icon = QtGui.QIcon()
        icon.addPixmap(pixmap, QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.pixmapBtn.setIcon(icon)


if __name__ == '__main__':
    app = QtGui.QApplication(sys.argv)
    w = MyApplication()
    w.show()
    sys.exit(app.exec_())