Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How Can I Draw Notification Head On "QTabBar"
Forum Updated to NodeBB v4.3 + New Features

How Can I Draw Notification Head On "QTabBar"

Scheduled Pinned Locked Moved Unsolved General and Desktop
qtabwiqtabbaqt 6.6paint eventpainter
12 Posts 4 Posters 1.5k Views 2 Watching
  • 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.
  • S Offline
    S Offline
    SGaist
    Lifetime Qt Champion
    wrote on 12 Dec 2023, 20:42 last edited by
    #2

    Hi and welcome to devnet,

    There are several possibilities. One of them is to customize the paintEvent as you did. Another one is to use a small custom widget where you paint the number and move it at the right place on top of your tab widget.

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

    S 1 Reply Last reply 13 Dec 2023, 03:55
    0
    • S SGaist
      12 Dec 2023, 20:42

      Hi and welcome to devnet,

      There are several possibilities. One of them is to customize the paintEvent as you did. Another one is to use a small custom widget where you paint the number and move it at the right place on top of your tab widget.

      S Offline
      S Offline
      Serafim Rafail
      wrote on 13 Dec 2023, 03:55 last edited by
      #3

      @SGaist second option sounds better, can you please give me a little bit of code snippet on how can i paint this and add to my QTabBar
      "i am sorry to bother you but i am a total beginner".

      S 1 Reply Last reply 13 Dec 2023, 21:08
      0
      • S Serafim Rafail
        13 Dec 2023, 03:55

        @SGaist second option sounds better, can you please give me a little bit of code snippet on how can i paint this and add to my QTabBar
        "i am sorry to bother you but i am a total beginner".

        S Offline
        S Offline
        SGaist
        Lifetime Qt Champion
        wrote on 13 Dec 2023, 21:08 last edited by
        #4

        QPainter::drawEllipse in a square
        QPainter::drawText in the same square.

        Without forgetting to change the brush to the color your want.

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

        S 1 Reply Last reply 14 Dec 2023, 08:43
        1
        • S SGaist
          13 Dec 2023, 21:08

          QPainter::drawEllipse in a square
          QPainter::drawText in the same square.

          Without forgetting to change the brush to the color your want.

          S Offline
          S Offline
          Serafim Rafail
          wrote on 14 Dec 2023, 08:43 last edited by
          #5

          @SGaist can you help me out here little bit i tried your suggestion and got stuck here.

          As below image you can see the ellipse is getting cropped by tabbar how can fix this ?

          wrong.png

          The Result i want is this "photoshoped" :

          right.png

          Here is my current code :

          void c_QTabBar::paintEvent(QPaintEvent *event)
          {
              QTabBar::paintEvent(event);
              QStylePainter painter(this);
              QStyleOptionTab opt;
          
              for (int i = 0; i < count(); i++) {
                  initStyleOption(&opt, i);
          
                  QPainter *c = new QPainter(this);
                  QRectF rectangle(-5.0, -5.0, 15.0, 15.0);
                  c->setPen(QColor(Qt::red));
                  c->setBrush(QColor(Qt::red));
                  c->drawEllipse(rectangle);
                  c->end();
              }
          }
          

          Kindly Help, Thanks In Advance

          J 1 Reply Last reply 14 Dec 2023, 08:46
          0
          • S Serafim Rafail
            14 Dec 2023, 08:43

            @SGaist can you help me out here little bit i tried your suggestion and got stuck here.

            As below image you can see the ellipse is getting cropped by tabbar how can fix this ?

            wrong.png

            The Result i want is this "photoshoped" :

            right.png

            Here is my current code :

            void c_QTabBar::paintEvent(QPaintEvent *event)
            {
                QTabBar::paintEvent(event);
                QStylePainter painter(this);
                QStyleOptionTab opt;
            
                for (int i = 0; i < count(); i++) {
                    initStyleOption(&opt, i);
            
                    QPainter *c = new QPainter(this);
                    QRectF rectangle(-5.0, -5.0, 15.0, 15.0);
                    c->setPen(QColor(Qt::red));
                    c->setBrush(QColor(Qt::red));
                    c->drawEllipse(rectangle);
                    c->end();
                }
            }
            

            Kindly Help, Thanks In Advance

            J Offline
            J Offline
            jsulm
            Lifetime Qt Champion
            wrote on 14 Dec 2023, 08:46 last edited by
            #6

            @Serafim-Rafail Don't draw it in the tab bar if you don't want it to be cropped

            https://forum.qt.io/topic/113070/qt-code-of-conduct

            S 1 Reply Last reply 14 Dec 2023, 08:59
            0
            • J jsulm
              14 Dec 2023, 08:46

              @Serafim-Rafail Don't draw it in the tab bar if you don't want it to be cropped

              S Offline
              S Offline
              Serafim Rafail
              wrote on 14 Dec 2023, 08:59 last edited by
              #7

              @jsulm Thank you for your replay. Any idea where should i draw it and how??

              J 1 Reply Last reply 14 Dec 2023, 09:06
              0
              • S Serafim Rafail
                14 Dec 2023, 08:59

                @jsulm Thank you for your replay. Any idea where should i draw it and how??

                J Offline
                J Offline
                jsulm
                Lifetime Qt Champion
                wrote on 14 Dec 2023, 09:06 last edited by
                #8

                @Serafim-Rafail For example in the widget which contains the tab bar

                https://forum.qt.io/topic/113070/qt-code-of-conduct

                S 1 Reply Last reply 14 Dec 2023, 09:15
                0
                • J jsulm
                  14 Dec 2023, 09:06

                  @Serafim-Rafail For example in the widget which contains the tab bar

                  S Offline
                  S Offline
                  Serafim Rafail
                  wrote on 14 Dec 2023, 09:15 last edited by
                  #9

                  @jsulm You mean in the QTabWidget() ? I did try to do that now but it does not work.

                  Tworng.png

                  Here is my code :

                  void c_QTabWidget::paintEvent(QPaintEvent *)
                  {
                      QPainter *c = new QPainter(this);
                      QRectF rectangle(-5.0, -5.0, 15.0, 15.0);
                      c->setPen(QColor(Qt::red));
                      c->setBrush(QColor(Qt::red));
                      c->drawEllipse(rectangle);
                      c->end();
                  }
                  
                  J 1 Reply Last reply 14 Dec 2023, 09:29
                  0
                  • S Serafim Rafail
                    14 Dec 2023, 09:15

                    @jsulm You mean in the QTabWidget() ? I did try to do that now but it does not work.

                    Tworng.png

                    Here is my code :

                    void c_QTabWidget::paintEvent(QPaintEvent *)
                    {
                        QPainter *c = new QPainter(this);
                        QRectF rectangle(-5.0, -5.0, 15.0, 15.0);
                        c->setPen(QColor(Qt::red));
                        c->setBrush(QColor(Qt::red));
                        c->drawEllipse(rectangle);
                        c->end();
                    }
                    
                    J Offline
                    J Offline
                    jsulm
                    Lifetime Qt Champion
                    wrote on 14 Dec 2023, 09:29 last edited by
                    #10

                    @Serafim-Rafail said in How Can I Draw Notification Head On "QTabBar":

                    You mean in the QTabWidget() ?

                    No, the widget containing the whole tab widget.
                    It is quite simple: if you draw inside tab widget then you only can draw inside that widget, but you want to also draw outside of it.

                    https://forum.qt.io/topic/113070/qt-code-of-conduct

                    S 1 Reply Last reply 14 Dec 2023, 09:50
                    1
                    • J jsulm
                      14 Dec 2023, 09:29

                      @Serafim-Rafail said in How Can I Draw Notification Head On "QTabBar":

                      You mean in the QTabWidget() ?

                      No, the widget containing the whole tab widget.
                      It is quite simple: if you draw inside tab widget then you only can draw inside that widget, but you want to also draw outside of it.

                      S Offline
                      S Offline
                      Serafim Rafail
                      wrote on 14 Dec 2023, 09:50 last edited by
                      #11

                      @jsulm My QTabWidget() is inside QSplitter() and if i understand you correctly i need to draw inside of the QSplitter() but then how will i keep track of which notification for which tab ? I will paint the ellipse dynamically on specific tab when i need to but it can't be done if i paint this on QSplitter() is my understandings correct ? or i am missing something ? i am beginner in Qt so please explain.

                      Thanks in Advance.

                      M 1 Reply Last reply 14 Dec 2023, 12:00
                      0
                      • S Serafim Rafail
                        14 Dec 2023, 09:50

                        @jsulm My QTabWidget() is inside QSplitter() and if i understand you correctly i need to draw inside of the QSplitter() but then how will i keep track of which notification for which tab ? I will paint the ellipse dynamically on specific tab when i need to but it can't be done if i paint this on QSplitter() is my understandings correct ? or i am missing something ? i am beginner in Qt so please explain.

                        Thanks in Advance.

                        M Offline
                        M Offline
                        mpergand
                        wrote on 14 Dec 2023, 12:00 last edited by mpergand
                        #12

                        @Serafim-Rafail
                        I think you go the wrong way.
                        Simply add extra margins to the left by adding some spaces to the text of the tab and draw the number of notifs here.

                        1 Reply Last reply
                        1

                        11/12

                        14 Dec 2023, 09:50

                        • Login

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