Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Qt for Python
  4. Help about Custom Paint Event of Progressbar
QtWS25 Last Chance

Help about Custom Paint Event of Progressbar

Scheduled Pinned Locked Moved Solved Qt for Python
custom widgetprogressbarcssthemepython
5 Posts 3 Posters 976 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • E Offline
    E Offline
    Emrecp
    wrote on 22 Mar 2022, 13:17 last edited by Emrecp
    #1

    Hello, I want to make a custom progressbar.
    Here is I wanted:
    1.png
    Here is the result on Qt:
    2.png
    If you look closely, the polygon in the upper right has crossed the progressbar. How can I fix that?

    My code:

    import sys, os, time
    from PySide6 import QtCore, QtWidgets, QtGui
    from PySide6.QtWidgets import *
    from PySide6.QtCore import *
    from PySide6.QtGui import *
    
    
    class EProgressbar(QProgressBar):
        def __init__(self):        
            super(EProgressbar, self).__init__(None)
            self.r, self.h = 15, 32
            self.setValue(self.value())
        def paintEvent(self, event: QPaintEvent) -> None:
            pt = QPainter();pt.begin(self);pt.setRenderHint(QPainter.Antialiasing,True)        #pt.setRenderHint(QPainter.SmoothPixmapTransform,True)
            path = QPainterPath();path2 = QPainterPath(); path3 = QPainterPath()
    
    
            BRUSH_BASE_BACKGROUND, BRUSH_BASE_FOREGROUND, BRUSH_POLYGON, BRUSH_CORNER = QColor(247,247,250), QColor(255,152,91), QColor(255,191,153), QColor(203,203,205)
    
    
    
            pt.setPen(QPen(BRUSH_CORNER,1.5));pt.setBrush(BRUSH_BASE_BACKGROUND)
            rect = QRect(1, 0, self.width()-2, self.h)
            path.addRoundedRect(rect, self.r, self.r)
    
    
    
    
    
            path2.addRoundedRect(QRect(2,2, self.value() / 100 * self.width() - 4, self.h-4), self.r, self.r)
    
    
    
    
            pt.drawPath(path)
            pt.setBrush(BRUSH_BASE_FOREGROUND)
    
            pt.drawPath(path2)
    
            pt.setPen(Qt.NoPen)
            pt.setBrush(BRUSH_POLYGON)
            start_x = 20
            y, dx = 3, 6
            polygon_width = 14
            polygon_space =18 #15#18
            progress_filled_width = self.value()/self.maximum()*self.width()
            for i in range(100):
                x = start_x + (i*polygon_width) + (i*polygon_space)
                if x >= progress_filled_width or (x+ polygon_width >= progress_filled_width):
                    break
                path2.addPolygon(QPolygon([
                QPoint(x, y),
                QPoint(x+polygon_width, y),
                QPoint(x+polygon_width/2, self.h-y),
                QPoint(x-polygon_width/2, self.h-y),
                #QPoint(15, d*2),
                #QPoint(10, self.h-d*2),
                #QPoint(10, d * 2),
                #QPoint(15, self.h-d*2),
    
            ]))
            pt.drawPath(path2)
    
            font = QFont('Helvetica', 11, weight=QFont.Bold)
            pt.setFont(font)
            pt.setPen(Qt.white)
            pt.drawText(QRect(2,2,self.width()-4,self.h-4), Qt.AlignCenter, f"%{self.value()}")
    
            pt.end()
    
    
    if __name__ == "__main__":
        app = QApplication(sys.argv)
        wind = QMainWindow();wind.setStyleSheet("QMainWindow{background-color:blue}")
        wind.setWindowTitle("EProgressBar")
        wind.resize(200,150)
        #wid = QWidget()
        #lay = QHBoxLayout(wid)
        #lay.setAlignment(Qt.AlignCenter)
        e = EProgressbar()
        e.setValue(80)
        e.setGeometry(QRect(10,10,170,250))
        #lay.addWidget(e)
        #wind.setCentralWidget(wid)
        e.setParent(wind)
        wind.show()
        sys.exit(app.exec())
    
    P 1 Reply Last reply 22 Mar 2022, 14:00
    0
    • S Offline
      S Offline
      SGaist
      Lifetime Qt Champion
      wrote on 22 Mar 2022, 19:49 last edited by
      #4

      Hi,

      From the top of my head, you would need to do some clipping.

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      E 1 Reply Last reply 22 Mar 2022, 20:33
      1
      • E Emrecp
        22 Mar 2022, 13:17

        Hello, I want to make a custom progressbar.
        Here is I wanted:
        1.png
        Here is the result on Qt:
        2.png
        If you look closely, the polygon in the upper right has crossed the progressbar. How can I fix that?

        My code:

        import sys, os, time
        from PySide6 import QtCore, QtWidgets, QtGui
        from PySide6.QtWidgets import *
        from PySide6.QtCore import *
        from PySide6.QtGui import *
        
        
        class EProgressbar(QProgressBar):
            def __init__(self):        
                super(EProgressbar, self).__init__(None)
                self.r, self.h = 15, 32
                self.setValue(self.value())
            def paintEvent(self, event: QPaintEvent) -> None:
                pt = QPainter();pt.begin(self);pt.setRenderHint(QPainter.Antialiasing,True)        #pt.setRenderHint(QPainter.SmoothPixmapTransform,True)
                path = QPainterPath();path2 = QPainterPath(); path3 = QPainterPath()
        
        
                BRUSH_BASE_BACKGROUND, BRUSH_BASE_FOREGROUND, BRUSH_POLYGON, BRUSH_CORNER = QColor(247,247,250), QColor(255,152,91), QColor(255,191,153), QColor(203,203,205)
        
        
        
                pt.setPen(QPen(BRUSH_CORNER,1.5));pt.setBrush(BRUSH_BASE_BACKGROUND)
                rect = QRect(1, 0, self.width()-2, self.h)
                path.addRoundedRect(rect, self.r, self.r)
        
        
        
        
        
                path2.addRoundedRect(QRect(2,2, self.value() / 100 * self.width() - 4, self.h-4), self.r, self.r)
        
        
        
        
                pt.drawPath(path)
                pt.setBrush(BRUSH_BASE_FOREGROUND)
        
                pt.drawPath(path2)
        
                pt.setPen(Qt.NoPen)
                pt.setBrush(BRUSH_POLYGON)
                start_x = 20
                y, dx = 3, 6
                polygon_width = 14
                polygon_space =18 #15#18
                progress_filled_width = self.value()/self.maximum()*self.width()
                for i in range(100):
                    x = start_x + (i*polygon_width) + (i*polygon_space)
                    if x >= progress_filled_width or (x+ polygon_width >= progress_filled_width):
                        break
                    path2.addPolygon(QPolygon([
                    QPoint(x, y),
                    QPoint(x+polygon_width, y),
                    QPoint(x+polygon_width/2, self.h-y),
                    QPoint(x-polygon_width/2, self.h-y),
                    #QPoint(15, d*2),
                    #QPoint(10, self.h-d*2),
                    #QPoint(10, d * 2),
                    #QPoint(15, self.h-d*2),
        
                ]))
                pt.drawPath(path2)
        
                font = QFont('Helvetica', 11, weight=QFont.Bold)
                pt.setFont(font)
                pt.setPen(Qt.white)
                pt.drawText(QRect(2,2,self.width()-4,self.h-4), Qt.AlignCenter, f"%{self.value()}")
        
                pt.end()
        
        
        if __name__ == "__main__":
            app = QApplication(sys.argv)
            wind = QMainWindow();wind.setStyleSheet("QMainWindow{background-color:blue}")
            wind.setWindowTitle("EProgressBar")
            wind.resize(200,150)
            #wid = QWidget()
            #lay = QHBoxLayout(wid)
            #lay.setAlignment(Qt.AlignCenter)
            e = EProgressbar()
            e.setValue(80)
            e.setGeometry(QRect(10,10,170,250))
            #lay.addWidget(e)
            #wind.setCentralWidget(wid)
            e.setParent(wind)
            wind.show()
            sys.exit(app.exec())
        
        P Offline
        P Offline
        Pl45m4
        wrote on 22 Mar 2022, 14:00 last edited by
        #2

        @Emrecp

        Maybe this helps...
        It's C++ code, but maybe you can adept. It requires some re-calculation... maybe there's another way..


        If debugging is the process of removing software bugs, then programming must be the process of putting them in.

        ~E. W. Dijkstra

        E 1 Reply Last reply 22 Mar 2022, 19:40
        1
        • P Pl45m4
          22 Mar 2022, 14:00

          @Emrecp

          Maybe this helps...
          It's C++ code, but maybe you can adept. It requires some re-calculation... maybe there's another way..

          E Offline
          E Offline
          Emrecp
          wrote on 22 Mar 2022, 19:40 last edited by
          #3

          @Pl45m4 Thank you but it did not help me.

          1 Reply Last reply
          0
          • S Offline
            S Offline
            SGaist
            Lifetime Qt Champion
            wrote on 22 Mar 2022, 19:49 last edited by
            #4

            Hi,

            From the top of my head, you would need to do some clipping.

            Interested in AI ? www.idiap.ch
            Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

            E 1 Reply Last reply 22 Mar 2022, 20:33
            1
            • S SGaist
              22 Mar 2022, 19:49

              Hi,

              From the top of my head, you would need to do some clipping.

              E Offline
              E Offline
              Emrecp
              wrote on 22 Mar 2022, 20:33 last edited by
              #5

              @SGaist Wow thank you very much!
              I fixed with pt.setClipPath(path2, Qt.ClipOperation.ReplaceClip)

              Some part of total code:

               progress_filled_width = self.value()/self.maximum()*self.width()
               pt.setClipPath(path2, Qt.ClipOperation.ReplaceClip)
               for i in range(100):
              
              1 Reply Last reply
              0

              5/5

              22 Mar 2022, 20:33

              • Login

              • Login or register to search.
              5 out of 5
              • First post
                5/5
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved