controlP5 Toggle button

philspitler

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

amnon

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?

philspitler

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() {}

amnon

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);
}

philspitler

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

amnon

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.

philspitler

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

chespi

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

philspitler

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)

      ;

chespi

Thanks philspitler! it helps