Set item's color in ButtonBar (controlp5)

Processing Libraries
1

Hi everyone!

I am making a GUI with ControlP5 and want to make 16 buttons that each represent a color. I could just make 16 buttons, but I thought it might be nicer to do with buttonbar (or maybe checkbox). Now I want to change the color of the items. When printed, the items also show they contain a color-values, but I don’t know how to change those color values.

This is what printing the item returns:

{view=controlP5.ButtonBar$1@79d7845d, color=bg (0,45,90), fg (0,116,217), active (0,170,255), captionlabel (255,255,255), valuelabel (255,255,255), name=a, text=a, value=0, selected=false}

I tried this in the buttonbar example:

CColor red = new CColor(); // router
red.setActive(color(255, 255, 255));
red.setBackground(color(255, 255, 0));
red.setForeground(color(255, 250, 50));
ButtonBar b = cp5.addButtonBar(“bar”)
.addItem(“a”," ");
println(b.getItem(“a”));
b.changeItem(“a”,“color”,red);
b.changeItem(“a”,“text”,“red”);

And some different terms etc for “color” to see if any of those correlated to the data stored in the items. Changing the “text” does work. Anybody that can help me out with this?

Thanks!

1 Like
2

Hi @TimoLejeune ,

Have you tried any of these methods? I believe this what you need. Not sure on which color you are trying to change but give it a try and check the cp5 examples

controlP5.Controller : ButtonBar setColorActive(int)
controlP5.Controller : ButtonBar setColorBackground(int)
controlP5.Controller : ButtonBar setColorCaptionLabel(int)
controlP5.Controller : ButtonBar setColorForeground(int)

1 Like
3

Hi Miguel,

Thanks for your reply! Yes I tried those, but they change the color for the entire button bar, and not for it’s individual items.

For the moment I just made an set of buttons with a for loop. If anyone still has some suggestions, I’m keen to hear them :slight_smile:

4

Hi @TimoLejeune,

I am not sure if I have understood what you are trying to do. Are you trying to change the colors of the buttons, or change the color of an object according to the color assigned to a button on the button bar, like below?

import controlP5.*;

ControlP5 cp5;


color[] colors = {
  #04B404, 
  #0040FF, 
  #FF0000, 
  #FF8000, 
  #AC58FA,
};

color backgroundColor = color(220);
void setup() {
  size(400, 400);
  cp5 = new ControlP5(this);

  ButtonBar b = cp5.addButtonBar("bar")
    .setPosition(0, 0)
    .setSize(400, 20)
    .addItems(split("Green Blue Red Orange Purple", " "))
    ;
}

void bar(int n) {
  println("bar clicked, item-value:", n);
  backgroundColor = colors[n];
}

void draw() {
  background(backgroundColor);
}

Can you post the full code? It will be easier for me or anyone else to help you that way.

1 Like