controlP5 Toggle button

edited January 2017 in Library Questions

Hi, I have 10 buttons in a UI and it all works great, the issue I have is that I want the active button to remain highlighted

I added the .setSwitch(true) to each button which acts like a toggle but the issues that when I click another button, the first button still stay highlighted.

How can I have a selected state?

Any idea?

Thanks.

Phil

Answers

  • Your problem description seems a bit self-contradictory, so it's unclear what you want exactly. You first description of what you want (active buttons highlighted) is actually the default behavior. So what is the problem?

    Could you give a small, runnable code example in which you show how the actual behavior differs from the intended behavior?

  • Hi, Here is some code that shows the problem.

    Thanks

    Phil

    import controlP5.*;
    
    Button myButton1;
    Button myButton2;
    Button myButton3;
    Button myButton4;
    Button myButton5;
    Button myButton6;
    Button myButton7;
    
    ControlP5 cp5;
    
    void setup() {
    
    size(800   ,1280 );
      background(0);
    
        cp5 = new ControlP5(this); // 
    
    
        frameRate(24);
    
    
    
         myButton1 = cp5.addButton("alloff")
    
          .setCaptionLabel("All Off")
         .setValue(0)
         .setPosition(100,250)
         .setSize(500,60)
          .setSwitch(true)
          ;
    
          myButton2 = cp5.addButton("grad")
    
          .setCaptionLabel("Color Grad")
         .setValue(0)
         .setPosition(100,350)
         .setSize(500,60)
          .setSwitch(true)
          ;
    
        myButton3 = cp5.addButton("testpattern")
    
          .setCaptionLabel("Test Pattern")
         .setValue(0)
         .setPosition(100,450)
         .setSize(500,60)
          .setSwitch(true)
          ;
    
      myButton4 = cp5.addButton("colorwipe")
      .setCaptionLabel("Color Wipe")
         .setValue(0)
         .setPosition(100,550)
         .setSize(500,60)
          .setSwitch(true)
         ;
    
         myButton5 = cp5.addButton("orange")
      .setCaptionLabel("Orange Blossom")
         .setValue(0)
         .setPosition(100,650)
         .setSize(500,60)
          .setSwitch(true)
         ;
    
    
    
         myButton6 = cp5.addButton("rustySwirl")
          .setCaptionLabel("Embers")
         .setValue(0)
         .setPosition(100,750)
         .setSize(500,60)
          .setSwitch(true)
         ;
    
        myButton7 = cp5.addButton("psych")
          .setCaptionLabel("psychedelic blue")
         .setValue(0)
         .setPosition(100,850)
         .setSize(500,60)
          .setSwitch(true)
         ;
    
    }
    
         void draw() {}
    
  • The problem is that none of these are actually a Toggle, they are all of the Button class! If you want highlighted buttons, then you should actually use the Toggle class and addToggle() method. In addition, you (then) need to use the setState() method instead of setSwitch() method. Also, I would advise to use a background() call in draw().

    Adapted Code

    import controlP5.*;
    
    Toggle myButton1;
    Toggle myButton2;
    Toggle myButton3;
    Toggle myButton4;
    Toggle myButton5;
    Toggle myButton6;
    Toggle myButton7;
    
    ControlP5 cp5;
    
    void setup() {
      size(800, 1000 );
      background(0);
    
      cp5 = new ControlP5(this); //
    
      myButton1 = cp5.addToggle("alloff")
        .setCaptionLabel("All Off")
        .setValue(0)
        .setPosition(100, 250)
        .setSize(500, 60)
        .setState(true);
    
      myButton2 = cp5.addToggle("grad")
        .setCaptionLabel("Color Grad")
        .setValue(0)
        .setPosition(100, 350)
        .setSize(500, 60)
        .setState(true);
    
      myButton3 = cp5.addToggle("testpattern")
        .setCaptionLabel("Test Pattern")
        .setValue(0)
        .setPosition(100, 450)
        .setSize(500, 60)
        .setState(true);
    
      myButton4 = cp5.addToggle("colorwipe")
        .setCaptionLabel("Color Wipe")
        .setValue(0)
        .setPosition(100, 550)
        .setSize(500, 60)
        .setState(true);
    
      myButton5 = cp5.addToggle("orange")
        .setCaptionLabel("Orange Blossom")
        .setValue(0)
        .setPosition(100, 650)
        .setSize(500, 60)
        .setState(true);
    
      myButton6 = cp5.addToggle("rustySwirl")
        .setCaptionLabel("Embers")
        .setValue(0)
        .setPosition(100, 750)
        .setSize(500, 60)
        .setState(true);
    
      myButton7 = cp5.addToggle("psych")
        .setCaptionLabel("psychedelic blue")
        .setValue(0)
        .setPosition(100, 850)
        .setSize(500, 60)
        .setState(true);
    }
    
    void draw() {
      background(0);
    }
    
  • Thanks, that code still isn't doing what I want. I only want one button to ever be selected, this part of a video jukebox and the button is switching which video is playing.

    If select the first button, I want all others to be unselected and then if I select the 2nd button it will need to unselect the first.

    The buttons themselves are working, just not the hilights.

    Thanks.

    Phil

  • Answer ✓

    What you decribe now sounds more like a RadioButton with multiple items. See the ControlP5's RadioButton example.

    Also, why didn't you mention this in your first two posts then? In the future please try to describe clearly what you actually want to achieve in the opening post. That way it will be much easier for people to understand your intentions and help you accordingly.

    Also, there are many examples and possibilities in the ControlP5 library. I suggest checking them out to see what kind of controllers are possible.

  • Thanks. I thought I had explained. My bad.

    I did look through the examples but didn't see one with radio buttons that has multiple items. I'll take another look.

    Thanks for the pointers.

    Phil

  • 2 years latter, Hi Philspitler! Did you find the best way to do what u want?

    I'm looking for the same buttons behaviour, and I want to use img buttons. Any suggestions?

    Thanks

  • Hi Chespi,

    I did get it to work, this is how my setup went:

    Hope this helps.

    Phil

     myButton1 = cp5.addButton("alloff")
    
          .setCaptionLabel("All Off")
           .setValue(0)
           .setPosition(100,250+Yoffset)
           .setSize(500,60)
    
          ;
    
          myButton2 = cp5.addButton("grad")
    
          .setCaptionLabel("Color Grad")
           .setValue(0)
           .setPosition(100,350+Yoffset)
           .setSize(500,60)
    
          ;
    
          myButton3 = cp5.addButton("buddah")
    
          .setCaptionLabel("Pink Buddah")
           .setValue(0)
           .setPosition(100,450+Yoffset)
           .setSize(500,60)
    
          ;
    
  • Thanks philspitler! it helps

Sign In or Register to comment.