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 to create a toggle button(on/off button)

how to create a toggle button(on/off button)

Scheduled Pinned Locked Moved Unsolved General and Desktop
19 Posts 4 Posters 38.9k 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.
  • M Offline
    M Offline
    ManiRon
    wrote on 29 Oct 2018, 04:49 last edited by
    #1

    I want to create a button when it is pressed once its color should be changed to green and again if i press the button the button should br changed to red . I mean toggle . How to do this ?

    J 1 Reply Last reply 29 Oct 2018, 05:33
    0
    • M ManiRon
      29 Oct 2018, 04:49

      I want to create a button when it is pressed once its color should be changed to green and again if i press the button the button should br changed to red . I mean toggle . How to do this ?

      J Online
      J Online
      jsulm
      Lifetime Qt Champion
      wrote on 29 Oct 2018, 05:33 last edited by
      #2

      @ManiRon You can use http://doc.qt.io/qt-5/stylesheet-syntax.html for that

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

      M 1 Reply Last reply 29 Oct 2018, 05:52
      0
      • J jsulm
        29 Oct 2018, 05:33

        @ManiRon You can use http://doc.qt.io/qt-5/stylesheet-syntax.html for that

        M Offline
        M Offline
        ManiRon
        wrote on 29 Oct 2018, 05:52 last edited by
        #3

        @jsulm yes sir i am using that only but how i can detect the press of the button . I mean for the first press i want o show one color and for the next press i want to show one color and the color combination is same . for each press i want to change the color

        J J 2 Replies Last reply 29 Oct 2018, 05:53
        0
        • M ManiRon
          29 Oct 2018, 05:52

          @jsulm yes sir i am using that only but how i can detect the press of the button . I mean for the first press i want o show one color and for the next press i want to show one color and the color combination is same . for each press i want to change the color

          J Online
          J Online
          jsulm
          Lifetime Qt Champion
          wrote on 29 Oct 2018, 05:53 last edited by
          #4

          @ManiRon http://doc.qt.io/qt-5/qabstractbutton.html#clicked

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

          M 1 Reply Last reply 29 Oct 2018, 06:02
          0
          • J jsulm
            29 Oct 2018, 05:53

            @ManiRon http://doc.qt.io/qt-5/qabstractbutton.html#clicked

            M Offline
            M Offline
            ManiRon
            wrote on 29 Oct 2018, 06:02 last edited by ManiRon
            #5

            @jsulm but how to use them sir, any example would be helpful

            J 1 Reply Last reply 29 Oct 2018, 06:04
            0
            • M ManiRon
              29 Oct 2018, 05:52

              @jsulm yes sir i am using that only but how i can detect the press of the button . I mean for the first press i want o show one color and for the next press i want to show one color and the color combination is same . for each press i want to change the color

              J Online
              J Online
              J.Hilk
              Moderators
              wrote on 29 Oct 2018, 06:03 last edited by J.Hilk
              #6

              @ManiRon said in how to create a toggle button(on/off button):

              @jsulm yes sir i am using that

              I doubt you use it to it's full potential. No need to set a new Stylesheet each time the button is pressed.

              myButton->setCheckable(true);
              myButton->setStyleSheet("
                  QPushButton{background-color:green;}
                  QPushButton:checked{background-color:red;}"
              );
              
              

              not checked -> Green color
              checked -> Red color each click a different color


              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.

              M 1 Reply Last reply 29 Oct 2018, 06:25
              2
              • M ManiRon
                29 Oct 2018, 06:02

                @jsulm but how to use them sir, any example would be helpful

                J Online
                J Online
                jsulm
                Lifetime Qt Champion
                wrote on 29 Oct 2018, 06:04 last edited by
                #7

                @ManiRon Please learn how to use signals/slots: http://doc.qt.io/qt-5/signalsandslots.html

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

                1 Reply Last reply
                0
                • A Offline
                  A Offline
                  anil_arise
                  wrote on 29 Oct 2018, 06:06 last edited by
                  #8

                  this example help you..

                  bool clicked= false;
                  QPushButton *Button=new QPushButton;
                  connect(Button,SIGNAL(clicked(),this,SLOT(on_Button_clicked());

                  on_Button_clicked()
                  {
                  if(!clicked)
                  {
                  Button->setStyleSheet("background-color:yellow;");

                  }
                  else
                  {
                      Button->setStyleSheet("background-color:green;");
                  
                  }
                  
                  clicked=!clicked;
                  

                  }

                  M 1 Reply Last reply 29 Oct 2018, 06:09
                  0
                  • A anil_arise
                    29 Oct 2018, 06:06

                    this example help you..

                    bool clicked= false;
                    QPushButton *Button=new QPushButton;
                    connect(Button,SIGNAL(clicked(),this,SLOT(on_Button_clicked());

                    on_Button_clicked()
                    {
                    if(!clicked)
                    {
                    Button->setStyleSheet("background-color:yellow;");

                    }
                    else
                    {
                        Button->setStyleSheet("background-color:green;");
                    
                    }
                    
                    clicked=!clicked;
                    

                    }

                    M Offline
                    M Offline
                    ManiRon
                    wrote on 29 Oct 2018, 06:09 last edited by ManiRon
                    #9

                    @anil_arise

                    yes sir,

                    But i am going to use nearly 35 buttons and every time based on the press each button the color should be changed

                    J A 2 Replies Last reply 29 Oct 2018, 06:15
                    0
                    • M ManiRon
                      29 Oct 2018, 06:09

                      @anil_arise

                      yes sir,

                      But i am going to use nearly 35 buttons and every time based on the press each button the color should be changed

                      J Online
                      J Online
                      jsulm
                      Lifetime Qt Champion
                      wrote on 29 Oct 2018, 06:15 last edited by
                      #10

                      @ManiRon Please read what @J-Hilk wrote...

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

                      M 1 Reply Last reply 29 Oct 2018, 06:20
                      0
                      • J jsulm
                        29 Oct 2018, 06:15

                        @ManiRon Please read what @J-Hilk wrote...

                        M Offline
                        M Offline
                        ManiRon
                        wrote on 29 Oct 2018, 06:20 last edited by
                        #11

                        @jsulm

                        yes sir Thanks its working

                        1 Reply Last reply
                        0
                        • M ManiRon
                          29 Oct 2018, 06:09

                          @anil_arise

                          yes sir,

                          But i am going to use nearly 35 buttons and every time based on the press each button the color should be changed

                          A Offline
                          A Offline
                          anil_arise
                          wrote on 29 Oct 2018, 06:23 last edited by anil_arise
                          #12

                          @ManiRon
                          you can use same SLOT for each and every 35 buttons..

                          connect(Button1,SIGNAL(clicked(),this,SLOT(on_Button_clicked());
                          .
                          .
                          connect(Button35,SIGNAL(clicked(),this,SLOT(on_Button_clicked());

                          this is better help @J-Hilk

                          1 Reply Last reply
                          0
                          • J J.Hilk
                            29 Oct 2018, 06:03

                            @ManiRon said in how to create a toggle button(on/off button):

                            @jsulm yes sir i am using that

                            I doubt you use it to it's full potential. No need to set a new Stylesheet each time the button is pressed.

                            myButton->setCheckable(true);
                            myButton->setStyleSheet("
                                QPushButton{background-color:green;}
                                QPushButton:checked{background-color:red;}"
                            );
                            
                            

                            not checked -> Green color
                            checked -> Red color each click a different color

                            M Offline
                            M Offline
                            ManiRon
                            wrote on 29 Oct 2018, 06:25 last edited by ManiRon
                            #13

                            @J.Hilk

                            Dear sir,

                            I used what u have specified and it worked but now my concern is the color it appears like the below image0_1540794233666_RTO.jpg

                            I want is as a full red0_1540794303121_RTO1.jpg something like this

                            J 1 Reply Last reply 29 Oct 2018, 06:27
                            0
                            • M ManiRon
                              29 Oct 2018, 06:25

                              @J.Hilk

                              Dear sir,

                              I used what u have specified and it worked but now my concern is the color it appears like the below image0_1540794233666_RTO.jpg

                              I want is as a full red0_1540794303121_RTO1.jpg something like this

                              J Online
                              J Online
                              J.Hilk
                              Moderators
                              wrote on 29 Oct 2018, 06:27 last edited by
                              #14

                              @ManiRon instead of the predfined color naming convention, you can also use rgb values to customize it:

                              for example:

                              background-color:rgb(87,117,131);
                              

                              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.

                              M 2 Replies Last reply 29 Oct 2018, 06:29
                              0
                              • J J.Hilk
                                29 Oct 2018, 06:27

                                @ManiRon instead of the predfined color naming convention, you can also use rgb values to customize it:

                                for example:

                                background-color:rgb(87,117,131);
                                
                                M Offline
                                M Offline
                                ManiRon
                                wrote on 29 Oct 2018, 06:29 last edited by ManiRon
                                #15

                                @J.Hilk i tried it but the red color alone remains the same as i mention in the previous comment maybe its based on the checked selection i think so.

                                Actually I absorbed one thing . When i click the button once it changes to green but next time when i press the button it changes to how i mention in my previous comment and when i keep it pressed without releasing the color is0_1540794665691_RTO1.jpg is like the image

                                J 1 Reply Last reply 29 Oct 2018, 06:42
                                0
                                • J J.Hilk
                                  29 Oct 2018, 06:27

                                  @ManiRon instead of the predfined color naming convention, you can also use rgb values to customize it:

                                  for example:

                                  background-color:rgb(87,117,131);
                                  
                                  M Offline
                                  M Offline
                                  ManiRon
                                  wrote on 29 Oct 2018, 06:42 last edited by ManiRon
                                  #16

                                  @J.Hilk

                                  I did something like this sir

                                  ui->pushButton_34->setCheckable(true);

                                  if(ui->pushButton_34->isChecked())
                                  {
                                      ui->pushButton_34->setStyleSheet("background-color: rgb(170, 0, 0)");
                                      ui->pushButton_34->setCheckable(false);
                                  }
                                  else
                                  {
                                      ui->pushButton_34->setStyleSheet("background-color: rgb(0, 170, 0)");
                                  }
                                  

                                  is it a correct way . I was able to bring it out.

                                  1 Reply Last reply
                                  0
                                  • M ManiRon
                                    29 Oct 2018, 06:29

                                    @J.Hilk i tried it but the red color alone remains the same as i mention in the previous comment maybe its based on the checked selection i think so.

                                    Actually I absorbed one thing . When i click the button once it changes to green but next time when i press the button it changes to how i mention in my previous comment and when i keep it pressed without releasing the color is0_1540794665691_RTO1.jpg is like the image

                                    J Online
                                    J Online
                                    J.Hilk
                                    Moderators
                                    wrote on 29 Oct 2018, 06:42 last edited by J.Hilk
                                    #17

                                    @ManiRon
                                    I believe, that is the focus rectangle that is overlaying the Pushbutton in a semi transparent way.
                                    add the following to your stylesheet:

                                    QPushButton:focus{border:none; }
                                    
                                    QPushButton *btn = new QPushButton();
                                    
                                        btn->setCheckable(true);
                                        btn->setStyleSheet("QPushButton{background-color:red;} \
                                                           QPushButton:checked{background-color:green;} \
                                                           QPushButton:focus{border:none; }");
                                        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.

                                    M 1 Reply Last reply 29 Oct 2018, 06:45
                                    0
                                    • J J.Hilk
                                      29 Oct 2018, 06:42

                                      @ManiRon
                                      I believe, that is the focus rectangle that is overlaying the Pushbutton in a semi transparent way.
                                      add the following to your stylesheet:

                                      QPushButton:focus{border:none; }
                                      
                                      QPushButton *btn = new QPushButton();
                                      
                                          btn->setCheckable(true);
                                          btn->setStyleSheet("QPushButton{background-color:red;} \
                                                             QPushButton:checked{background-color:green;} \
                                                             QPushButton:focus{border:none; }");
                                          btn->show();
                                      
                                      M Offline
                                      M Offline
                                      ManiRon
                                      wrote on 29 Oct 2018, 06:45 last edited by ManiRon
                                      #18

                                      @J.Hilk

                                      that also worked sir, but i want the border and i tried some thing like this

                                      if(ui->pushButton_34->isChecked())
                                      {
                                      ui->pushButton_34->setStyleSheet("background-color: rgb(170, 0, 0)");
                                      ui->pushButton_34->setCheckable(false);
                                      }
                                      else
                                      {

                                          ui->pushButton_34->setStyleSheet("background-color: rgb(0, 170, 0)");
                                      
                                      
                                      }
                                      

                                      is it a correct way ?

                                      J 1 Reply Last reply 29 Oct 2018, 06:50
                                      0
                                      • M ManiRon
                                        29 Oct 2018, 06:45

                                        @J.Hilk

                                        that also worked sir, but i want the border and i tried some thing like this

                                        if(ui->pushButton_34->isChecked())
                                        {
                                        ui->pushButton_34->setStyleSheet("background-color: rgb(170, 0, 0)");
                                        ui->pushButton_34->setCheckable(false);
                                        }
                                        else
                                        {

                                            ui->pushButton_34->setStyleSheet("background-color: rgb(0, 170, 0)");
                                        
                                        
                                        }
                                        

                                        is it a correct way ?

                                        J Online
                                        J Online
                                        J.Hilk
                                        Moderators
                                        wrote on 29 Oct 2018, 06:50 last edited by
                                        #19

                                        @ManiRon please read the docu @jsulm linked. To learn more about stylsheet and it's syntax.

                                        focus{border:none;} does not mean your Qpushbutton can't not have a custom border!

                                        Applying a new Stylesheet each time you click the button is, in my opinion, the worst way you could implement what you want to do.

                                        But if it works for you, and you're fine with it, who am I to judge?


                                        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
                                        4

                                        4/19

                                        29 Oct 2018, 05:53

                                        topic:navigator.unread, 15
                                        • Login

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