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)
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved Unsolved General and Desktop
19 Posts 4 Posters 39.7k 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.
  • ManiRonM ManiRon

    @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

    jsulmJ Offline
    jsulmJ Offline
    jsulm
    Lifetime Qt Champion
    wrote on last edited by
    #4

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

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

    ManiRonM 1 Reply Last reply
    0
    • jsulmJ jsulm

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

      ManiRonM Offline
      ManiRonM Offline
      ManiRon
      wrote on last edited by ManiRon
      #5

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

      jsulmJ 1 Reply Last reply
      0
      • ManiRonM ManiRon

        @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.HilkJ Offline
        J.HilkJ Offline
        J.Hilk
        Moderators
        wrote on 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.

        ManiRonM 1 Reply Last reply
        2
        • ManiRonM ManiRon

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

          jsulmJ Offline
          jsulmJ Offline
          jsulm
          Lifetime Qt Champion
          wrote on 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 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;
            

            }

            ManiRonM 1 Reply Last reply
            0
            • A anil_arise

              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;
              

              }

              ManiRonM Offline
              ManiRonM Offline
              ManiRon
              wrote on 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

              jsulmJ A 2 Replies Last reply
              0
              • ManiRonM ManiRon

                @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

                jsulmJ Offline
                jsulmJ Offline
                jsulm
                Lifetime Qt Champion
                wrote on last edited by
                #10

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

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

                ManiRonM 1 Reply Last reply
                0
                • jsulmJ jsulm

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

                  ManiRonM Offline
                  ManiRonM Offline
                  ManiRon
                  wrote on last edited by
                  #11

                  @jsulm

                  yes sir Thanks its working

                  1 Reply Last reply
                  0
                  • ManiRonM ManiRon

                    @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 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.HilkJ J.Hilk

                      @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

                      ManiRonM Offline
                      ManiRonM Offline
                      ManiRon
                      wrote on 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.HilkJ 1 Reply Last reply
                      0
                      • ManiRonM ManiRon

                        @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.HilkJ Offline
                        J.HilkJ Offline
                        J.Hilk
                        Moderators
                        wrote on 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.

                        ManiRonM 2 Replies Last reply
                        0
                        • J.HilkJ J.Hilk

                          @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);
                          
                          ManiRonM Offline
                          ManiRonM Offline
                          ManiRon
                          wrote on 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.HilkJ 1 Reply Last reply
                          0
                          • J.HilkJ J.Hilk

                            @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);
                            
                            ManiRonM Offline
                            ManiRonM Offline
                            ManiRon
                            wrote on 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
                            • ManiRonM ManiRon

                              @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.HilkJ Offline
                              J.HilkJ Offline
                              J.Hilk
                              Moderators
                              wrote on 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.

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

                                @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();
                                
                                ManiRonM Offline
                                ManiRonM Offline
                                ManiRon
                                wrote on 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.HilkJ 1 Reply Last reply
                                0
                                • ManiRonM ManiRon

                                  @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.HilkJ Offline
                                  J.HilkJ Offline
                                  J.Hilk
                                  Moderators
                                  wrote on 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

                                  • Login

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