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. QTabWidget, setting colour of tab itself ?
Forum Updated to NodeBB v4.3 + New Features

QTabWidget, setting colour of tab itself ?

Scheduled Pinned Locked Moved Solved General and Desktop
114 Posts 4 Posters 61.2k Views 1 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.
  • J.HilkJ J.Hilk

    @SPlatten

    admittedly one has no direct access to the "Tab" but we can cheat/abuse already existing functions:

    for example:

     QTabBar::tab [whatsThis="aTabWithErrors"]{
         background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                          stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                          stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
              border: 2px solid #C4C4C3;
              border-bottom-color: #C2C7CB; /* same as the pane color */
              border-top-left-radius: 4px;
              border-top-right-radius: 4px;
              min-width: 8ex;
              padding: 2px;
     }
    

    than:

    ui->myTabwidget->tabBar()->setTabWhatsThis(0, "aTabWithErrors");
    
    SPlattenS Offline
    SPlattenS Offline
    SPlatten
    wrote on last edited by
    #14

    @J-Hilk , I don't understand the syntax of what you have posted, what is setTabWhatsThis ?

    J.HilkJ 1 Reply Last reply
    0
    • SPlattenS SPlatten

      @J-Hilk , I don't understand the syntax of what you have posted, what is setTabWhatsThis ?

      J.HilkJ Offline
      J.HilkJ Offline
      J.Hilk
      Moderators
      wrote on last edited by
      #15

      @SPlatten its a function of QTabBar
      https://doc.qt.io/qt-6/qtabbar.html#setTabWhatsThis

      I checked its also part of the qt4 QTabBar class.


      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


      Q: What's that?
      A: It's blue light.
      Q: What does it do?
      A: It turns blue.

      SPlattenS 2 Replies Last reply
      1
      • J.HilkJ J.Hilk

        @SPlatten its a function of QTabBar
        https://doc.qt.io/qt-6/qtabbar.html#setTabWhatsThis

        I checked its also part of the qt4 QTabBar class.

        SPlattenS Offline
        SPlattenS Offline
        SPlatten
        wrote on last edited by SPlatten
        #16

        @J-Hilk , just tried this and getting:

        error: `QTabBar* QTabWidget::tabBar() const' is protected
        

        The line where this error occurs:

        ui_->tab_widget->tabBar()->setTabWhatsThis((int)tabIndex, style);
        
        J.HilkJ 1 Reply Last reply
        0
        • J.HilkJ J.Hilk

          @SPlatten its a function of QTabBar
          https://doc.qt.io/qt-6/qtabbar.html#setTabWhatsThis

          I checked its also part of the qt4 QTabBar class.

          SPlattenS Offline
          SPlattenS Offline
          SPlatten
          wrote on last edited by SPlatten
          #17

          @JoeCFD , @J-Hilk , looking at: https://www.w3schools.com/cssref/css_selectors.asp

          Is there a syntax that would allow me to use something like:

          QTabBar::tab[id*="c2_tab"] {
              background-color: #ff0000;
          }
          

          Where id is the objectName.

          J.HilkJ 1 Reply Last reply
          0
          • SPlattenS SPlatten

            @J-Hilk , just tried this and getting:

            error: `QTabBar* QTabWidget::tabBar() const' is protected
            

            The line where this error occurs:

            ui_->tab_widget->tabBar()->setTabWhatsThis((int)tabIndex, style);
            
            J.HilkJ Offline
            J.HilkJ Offline
            J.Hilk
            Moderators
            wrote on last edited by
            #18

            @SPlatten well, I can't reproduce that, this compiles just fine:

             QApplication a(argc, argv);
            
                QTabWidget tabWidget;
                tabWidget.setStyleSheet("QTabBar::tab[whatsThis=\"aTabWithErrors\"]{"
                                        "background-color: darkred;}");
            
                tabWidget.addTab(new QWidget(), "SomeTab");
                tabWidget.addTab(new QWidget(), "SomeOtherTab");
                tabWidget.show();
            
                auto tabbar = tabWidget.tabBar();
                tabbar->setTabWhatsThis(1,"aTabWithErrors");
            
                qDebug() << tabWidget.tabBar()->tabWhatsThis(0);
                qDebug() << tabWidget.tabBar()->tabWhatsThis(1);
            
                return a.exec();
            

            but I do not get it to work. It works fine with a QPushButton, but not with the tab.

            QPushButton btn;
                btn.setStyleSheet("QPushButton[whatsThis=\"aTabWithErrors\"]{background-color:darkred;}");
                btn.setWhatsThis("aTabWithErrors");
                btn.show();
            

            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


            Q: What's that?
            A: It's blue light.
            Q: What does it do?
            A: It turns blue.

            JonBJ 1 Reply Last reply
            0
            • SPlattenS SPlatten

              @JoeCFD , @J-Hilk , looking at: https://www.w3schools.com/cssref/css_selectors.asp

              Is there a syntax that would allow me to use something like:

              QTabBar::tab[id*="c2_tab"] {
                  background-color: #ff0000;
              }
              

              Where id is the objectName.

              J.HilkJ Offline
              J.HilkJ Offline
              J.Hilk
              Moderators
              wrote on last edited by
              #19

              @SPlatten said in QTabWidget, setting colour of tab itself ?:

              Where id is the objectName.

              that works too, if you can get access to the tab, to set the objectname ? I'm not sure it has one by default.


              Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


              Q: What's that?
              A: It's blue light.
              Q: What does it do?
              A: It turns blue.

              1 Reply Last reply
              0
              • J.HilkJ J.Hilk

                @SPlatten well, I can't reproduce that, this compiles just fine:

                 QApplication a(argc, argv);
                
                    QTabWidget tabWidget;
                    tabWidget.setStyleSheet("QTabBar::tab[whatsThis=\"aTabWithErrors\"]{"
                                            "background-color: darkred;}");
                
                    tabWidget.addTab(new QWidget(), "SomeTab");
                    tabWidget.addTab(new QWidget(), "SomeOtherTab");
                    tabWidget.show();
                
                    auto tabbar = tabWidget.tabBar();
                    tabbar->setTabWhatsThis(1,"aTabWithErrors");
                
                    qDebug() << tabWidget.tabBar()->tabWhatsThis(0);
                    qDebug() << tabWidget.tabBar()->tabWhatsThis(1);
                
                    return a.exec();
                

                but I do not get it to work. It works fine with a QPushButton, but not with the tab.

                QPushButton btn;
                    btn.setStyleSheet("QPushButton[whatsThis=\"aTabWithErrors\"]{background-color:darkred;}");
                    btn.setWhatsThis("aTabWithErrors");
                    btn.show();
                
                JonBJ Offline
                JonBJ Offline
                JonB
                wrote on last edited by JonB
                #20

                @J-Hilk said in QTabWidget, setting colour of tab itself ?:

                @SPlatten well, I can't reproduce that, this compiles just fine:

                auto tabbar = tabWidget.tabBar();

                At Qt 5 this is fine. But at Qt4 (which is what the OP is using) the only doc reference I can find now Googling is https://het.as.utexas.edu/HET/Software/html/qtabwidget.html#tabBar, and that has

                QTabBar * QTabWidget::tabBar () const [protected]
                

                So at Qt4 it was protected..., per the OP's error message! So @SPlatten if you want/need to use the code you have been shown as-is, looks like you will need to subclass QTabWidget so as to gain access to QTabWidget::tabBar(). (Or maybe tabWidget->findChild<QTabBar *>() would work for you to avoid subclassing.)

                SPlattenS 1 Reply Last reply
                1
                • JonBJ JonB

                  @J-Hilk said in QTabWidget, setting colour of tab itself ?:

                  @SPlatten well, I can't reproduce that, this compiles just fine:

                  auto tabbar = tabWidget.tabBar();

                  At Qt 5 this is fine. But at Qt4 (which is what the OP is using) the only doc reference I can find now Googling is https://het.as.utexas.edu/HET/Software/html/qtabwidget.html#tabBar, and that has

                  QTabBar * QTabWidget::tabBar () const [protected]
                  

                  So at Qt4 it was protected..., per the OP's error message! So @SPlatten if you want/need to use the code you have been shown as-is, looks like you will need to subclass QTabWidget so as to gain access to QTabWidget::tabBar(). (Or maybe tabWidget->findChild<QTabBar *>() would work for you to avoid subclassing.)

                  SPlattenS Offline
                  SPlattenS Offline
                  SPlatten
                  wrote on last edited by
                  #21
                  This post is deleted!
                  1 Reply Last reply
                  0
                  • SPlattenS SPlatten

                    @JoeCFD , @JonB , unfortunately the requirement has now changed....each tab contains other controls. If any of the controls contain in the tab panels are in a specific fault state then the requirement is to make the tab background red to reflect this, so the user is highlighted that the content of the tab are in the fault state.

                    How can I do this so that multiple tabs may be in the fault (red background) state?

                    JoeCFDJ Offline
                    JoeCFDJ Offline
                    JoeCFD
                    wrote on last edited by JoeCFD
                    #22

                    @SPlatten Ideally it may be better to flash a tiny icon on the tab. For this you may need to customize your tab and it can take long for you make it. You can simply check the source code of qtabwidget and qtabbar and borrow some. But sure you can reset the tab color with style sheet like
                    warning: yellow; fatal: red.

                    SPlattenS 1 Reply Last reply
                    0
                    • JoeCFDJ JoeCFD

                      @SPlatten Ideally it may be better to flash a tiny icon on the tab. For this you may need to customize your tab and it can take long for you make it. You can simply check the source code of qtabwidget and qtabbar and borrow some. But sure you can reset the tab color with style sheet like
                      warning: yellow; fatal: red.

                      SPlattenS Offline
                      SPlattenS Offline
                      SPlatten
                      wrote on last edited by
                      #23

                      @JoeCFD , thank you, any samples ?

                      JoeCFDJ 1 Reply Last reply
                      0
                      • SPlattenS SPlatten

                        @JoeCFD , thank you, any samples ?

                        JoeCFDJ Offline
                        JoeCFDJ Offline
                        JoeCFD
                        wrote on last edited by JoeCFD
                        #24

                        @SPlatten I can explain the concept to you, but can not give you code. You create a tabbar class to inherit qtabbar and add it to qtabwidget. Define or add your tabs(a class tab with text and icons) to tabbar and override paintEvent in tabbar to paint all tabs. Then you can add a timer to tab class to hide or display or toggle icons when needed.
                        QTabBar source code is here:
                        https://code.woboq.org/qt5/qtbase/src/widgets/widgets/qtabbar.cpp.html

                        SPlattenS 2 Replies Last reply
                        1
                        • JoeCFDJ JoeCFD

                          @SPlatten I can explain the concept to you, but can not give you code. You create a tabbar class to inherit qtabbar and add it to qtabwidget. Define or add your tabs(a class tab with text and icons) to tabbar and override paintEvent in tabbar to paint all tabs. Then you can add a timer to tab class to hide or display or toggle icons when needed.
                          QTabBar source code is here:
                          https://code.woboq.org/qt5/qtbase/src/widgets/widgets/qtabbar.cpp.html

                          SPlattenS Offline
                          SPlattenS Offline
                          SPlatten
                          wrote on last edited by
                          #25

                          @JoeCFD , thank you

                          1 Reply Last reply
                          0
                          • JoeCFDJ JoeCFD

                            @SPlatten I can explain the concept to you, but can not give you code. You create a tabbar class to inherit qtabbar and add it to qtabwidget. Define or add your tabs(a class tab with text and icons) to tabbar and override paintEvent in tabbar to paint all tabs. Then you can add a timer to tab class to hide or display or toggle icons when needed.
                            QTabBar source code is here:
                            https://code.woboq.org/qt5/qtbase/src/widgets/widgets/qtabbar.cpp.html

                            SPlattenS Offline
                            SPlattenS Offline
                            SPlatten
                            wrote on last edited by SPlatten
                            #26

                            @JoeCFD , hello, I'm trying to do this today, but not sure quite where to start. I have code already existing which I didn't write, the existing code uses a QTabWidget in the UI. Each tab is defined in the UI as QWidget.

                            Do I replace the QWidget with my own implementation? Is there a tutorial that could help me or guide me through this process ?

                            I'm getting confused by the online documentation for QTabWidget and QTabBar:

                            https://doc.qt.io/qt-6/qtabwidget.html
                            QTabWidget Class
                            The QTabWidget class provides a stack of tabbed widgets.

                            https://doc.qt.io/qt-6/qtabbar.html
                            QTabBar Class
                            The QTabBar class provides a tab bar, e.g. for use in tabbed dialogs.

                            I want to implement a tab where I can set the background colour according to my own logic.

                            I found this:
                            https://stackoverflow.com/questions/46137500/qt-tabwidget-each-tab-title-background-color

                            I am trying to tailor it to my problem....the issue I'm having now is that the tabs are already defined in the UI. How can I apply this logic to the tabs that are already defined in the UI ?

                            1 Reply Last reply
                            0
                            • SPlattenS Offline
                              SPlattenS Offline
                              SPlatten
                              wrote on last edited by
                              #27

                              @J-Hilk , @JonB , @JoeCFD , This is the current issue or at least one issue:

                              The UI contained an instance of QTabWidget. This was set-up to contain the following tabs:

                              &Overall
                              C&2
                              &CGU
                              &LMS
                              &PDLT
                              &NLA
                              P&GU
                              &HCU
                              &UPSD
                              &Sensors
                              

                              In the XML file these tabs were defined with the class as QWidget I have edited the XML file and changed instances of QTabWidget to TabWidget and the tabs from QWidget to TabBar which matches the names of the new implementation I am trying to use.

                              However I'm not sure why or what I need to do in order to transfer the tabs from the UI into the class I am using so I can use the colours that the replacement class is going to allow?

                              SPlattenS JonBJ 2 Replies Last reply
                              0
                              • SPlattenS SPlatten

                                @J-Hilk , @JonB , @JoeCFD , This is the current issue or at least one issue:

                                The UI contained an instance of QTabWidget. This was set-up to contain the following tabs:

                                &Overall
                                C&2
                                &CGU
                                &LMS
                                &PDLT
                                &NLA
                                P&GU
                                &HCU
                                &UPSD
                                &Sensors
                                

                                In the XML file these tabs were defined with the class as QWidget I have edited the XML file and changed instances of QTabWidget to TabWidget and the tabs from QWidget to TabBar which matches the names of the new implementation I am trying to use.

                                However I'm not sure why or what I need to do in order to transfer the tabs from the UI into the class I am using so I can use the colours that the replacement class is going to allow?

                                SPlattenS Offline
                                SPlattenS Offline
                                SPlatten
                                wrote on last edited by
                                #28

                                @J-Hilk , @JonB , @JoeCFD , a snippet from the UI file:

                                <widget class="TabWidget" name="tab_widget">
                                  <property name="font">
                                    <font>
                                      <pointsize>12</pointsize>
                                      <weight>75</weight>
                                      <bold>true</bold>
                                    </font>
                                  </property>
                                  <property name="styleSheet">
                                    <string notr="true"/>
                                  </property>
                                  <property name="currentIndx">
                                    <number>0</number>
                                  </property>
                                  <widget class="TabBar" nam="overall_tab">
                                    <property name="focusPolicy">
                                      <enum>Qt::TabFocus</enum>
                                    </property>
                                    <attribute name="title">
                                      <string>&amp;Overall</string>
                                    </attribute>
                                    ....
                                

                                I can see in my log output that the constructor for the TabBar is called for each instance of the TabBar in the UI file. Can I determine from the constructor call what the title attribute is ?

                                JonBJ 1 Reply Last reply
                                0
                                • SPlattenS SPlatten

                                  @J-Hilk , @JonB , @JoeCFD , a snippet from the UI file:

                                  <widget class="TabWidget" name="tab_widget">
                                    <property name="font">
                                      <font>
                                        <pointsize>12</pointsize>
                                        <weight>75</weight>
                                        <bold>true</bold>
                                      </font>
                                    </property>
                                    <property name="styleSheet">
                                      <string notr="true"/>
                                    </property>
                                    <property name="currentIndx">
                                      <number>0</number>
                                    </property>
                                    <widget class="TabBar" nam="overall_tab">
                                      <property name="focusPolicy">
                                        <enum>Qt::TabFocus</enum>
                                      </property>
                                      <attribute name="title">
                                        <string>&amp;Overall</string>
                                      </attribute>
                                      ....
                                  

                                  I can see in my log output that the constructor for the TabBar is called for each instance of the TabBar in the UI file. Can I determine from the constructor call what the title attribute is ?

                                  JonBJ Offline
                                  JonBJ Offline
                                  JonB
                                  wrote on last edited by JonB
                                  #29

                                  @SPlatten
                                  Constructor of what?

                                  As far as I can see code must call either QTabWidget::setTabText(int index, const QString &label), QTabWidget::addTab(QWidget *page, const QString &label) or QTabBar::setTabText(int index, const QString &text). These are all individual calls, there is no "constructor" which takes the tab text/title as a parameter. Nor are any of the methods virtual. I imagine an explicit call is made to one of these after whatever construction. So does that answer your question as "No"?

                                  Meanwhile you can also look in the uic-generated ui_....h file for the actual code used to execute what it reads from the .ui file, if that helps clarify.

                                  SPlattenS 1 Reply Last reply
                                  0
                                  • JonBJ JonB

                                    @SPlatten
                                    Constructor of what?

                                    As far as I can see code must call either QTabWidget::setTabText(int index, const QString &label), QTabWidget::addTab(QWidget *page, const QString &label) or QTabBar::setTabText(int index, const QString &text). These are all individual calls, there is no "constructor" which takes the tab text/title as a parameter. Nor are any of the methods virtual. I imagine an explicit call is made to one of these after whatever construction. So does that answer your question as "No"?

                                    Meanwhile you can also look in the uic-generated ui_....h file for the actual code used to execute what it reads from the .ui file, if that helps clarify.

                                    SPlattenS Offline
                                    SPlattenS Offline
                                    SPlatten
                                    wrote on last edited by
                                    #30

                                    @JonB , the default constructor of the TabBar is being called I assume when the UI file is parsed?

                                    class TabBar : public QTabBar {
                                    private:
                                        QHash<QString, QColor> colors_;
                                    
                                    protected:
                                        void paintEvent(QPaintEvent* evt) {
                                    ... 
                                        }
                                    
                                    public:
                                        TabBar(QWidget* parent = 0) : QTabBar(parent) {
                                            ...
                                        }
                                    ...
                                    }
                                    
                                    JonBJ 1 Reply Last reply
                                    0
                                    • SPlattenS SPlatten

                                      @JonB , the default constructor of the TabBar is being called I assume when the UI file is parsed?

                                      class TabBar : public QTabBar {
                                      private:
                                          QHash<QString, QColor> colors_;
                                      
                                      protected:
                                          void paintEvent(QPaintEvent* evt) {
                                      ... 
                                          }
                                      
                                      public:
                                          TabBar(QWidget* parent = 0) : QTabBar(parent) {
                                              ...
                                          }
                                      ...
                                      }
                                      
                                      JonBJ Offline
                                      JonBJ Offline
                                      JonB
                                      wrote on last edited by JonB
                                      #31

                                      @SPlatten
                                      Like I said, look in the ui_...h file?

                                      But I don't see that helps particularly. Doesn't the ui_...h show some explicit, separate call to one of the functions I pasted after the TabWidget/TabBar has been constructed?

                                      SPlattenS 1 Reply Last reply
                                      0
                                      • JonBJ JonB

                                        @SPlatten
                                        Like I said, look in the ui_...h file?

                                        But I don't see that helps particularly. Doesn't the ui_...h show some explicit, separate call to one of the functions I pasted after the TabWidget/TabBar has been constructed?

                                        SPlattenS Offline
                                        SPlattenS Offline
                                        SPlatten
                                        wrote on last edited by SPlatten
                                        #32

                                        @JonB , from ui_...h file:

                                        overall_tab = new TabBar();
                                        overall_tab->setObjectName(QString::fromUtf8("overall_tab"));
                                        

                                        Some where nearer the end of file in the function retranslateUi there is a call to:

                                        tab_widget->setTabText(tab_widget->indexOf(overall_tab), QApplication::translate("::wsStatusPage", "&Overall", 0, QApplication::UnicodeUTF8));
                                        

                                        Its all a bit fragmented...is there anything I can do to the UI file that will help me to identify the tab when the constructor is called?

                                        I'm reworking this code, as it isn't well written and doesn't follow the correct way of doing things, hopefully this will lead to a solution.

                                        JonBJ 1 Reply Last reply
                                        0
                                        • SPlattenS SPlatten

                                          @JonB , from ui_...h file:

                                          overall_tab = new TabBar();
                                          overall_tab->setObjectName(QString::fromUtf8("overall_tab"));
                                          

                                          Some where nearer the end of file in the function retranslateUi there is a call to:

                                          tab_widget->setTabText(tab_widget->indexOf(overall_tab), QApplication::translate("::wsStatusPage", "&Overall", 0, QApplication::UnicodeUTF8));
                                          

                                          Its all a bit fragmented...is there anything I can do to the UI file that will help me to identify the tab when the constructor is called?

                                          I'm reworking this code, as it isn't well written and doesn't follow the correct way of doing things, hopefully this will lead to a solution.

                                          JonBJ Offline
                                          JonBJ Offline
                                          JonB
                                          wrote on last edited by JonB
                                          #33

                                          @SPlatten said in QTabWidget, setting colour of tab itself ?:

                                          is there anything I can do to the UI file that will help me to identify the tab when the constructor is called?

                                          Nope. As you can see, the tab text is not set until that tab_widget->setTabText() is called, much later than construction. That's how it implements the instructions from the .ui file.

                                          At least in terms of the tab's text/title, which is what you say you want to know.

                                          And once again anyway (not that it helps): "the constructor" of what are you asking about? QTabWidget? QTabBar? Tabs are not even constructed until after both of these anyway.

                                          SPlattenS 1 Reply Last reply
                                          0

                                          • Login

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