# How to coloring controlP5 item with different color?

**URL:** <https://discourse.processing.org/t/how-to-coloring-controlp5-item-with-different-color/23098>\
**Category:** Libraries\
**Created:** [August 7, 2020, 3:42am UTC](https://discourse.processing.org/t/how-to-coloring-controlp5-item-with-different-color/23098 "2020-08-07T03:42:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rai](https://avatars.discourse-cdn.com/v4/letter/r/67e7ee/32.png) [@Rai](https://discourse.processing.org/u/Rai)\
**Post date:** [August 7, 2020, 3:42am UTC](https://discourse.processing.org/t/how-to-coloring-controlp5-item-with-different-color/23098/1 "2020-08-07T03:42:49Z")

</div>

```auto
import controlP5.*;
ControlP5 cp5;

CheckBox Checkcomponent;
Textlabel labelInfo;

void setup() {
  size(640, 480);

  cp5 = new ControlP5(this);
  Checkcomponent = cp5.addCheckBox("checkBox")
    .setPosition(105, 60)
    .setSize(20, 20)
    .setItemsPerRow(1)
    .setSpacingRow(20)
    .setColorBackground(color(0,255,0))
    .addItem("Large letter", 0)
    .setColorLabel(color(255,255,0))
    .addItem("Green letter", 1);

  labelInfo = cp5.addLabel("LabelOption")
    .setPosition(100, 200)
    .setFont(createFont("Batang", 20))
    .setText("Look at me");
}
void draw() {
  background(150, 150, 150);
}
public void controlEvent(ControlEvent theEvent) {
  String nameComponent = theEvent.getName();
    if (nameComponent== "checkBox")    
  { 
    float checkResults[] = Checkcomponent.getArrayValue();
    if (checkResults[0] == 1)
      labelInfo.setFont(createFont("Batang", 40));
    else
      labelInfo.setFont(createFont("Batang", 20));
    if (checkResults[1] == 1)
      labelInfo.setColor(color(0,255,0));
    else
      labelInfo.setColor(color(255, 255, 255));
  }
}

```

how to coloring “Large letter” and “Green letter” with different color ?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 7, 2020, 2:22pm UTC](https://discourse.processing.org/t/how-to-coloring-controlp5-item-with-different-color/23098/2 "2020-08-07T14:22:15Z")

</div>

Hello,

Create 2 buttons:

```auto
import controlP5.*;
ControlP5 b1, b2;

CheckBox Checkcomponent;
Textlabel labelInfo;

void setup() 
  {
  size(500, 200);

  b1 = new ControlP5(this);
  Checkcomponent = b1.addCheckBox("checkBox")
  // b1 properties go here
    
  b2 = new ControlP5(this);
  Checkcomponent = b2.addCheckBox("checkBox")
  //b2 properties go here
  }

```

And each button can have its own properties.

References:  
[http://www.sojamo.de/libraries/controlP5/](http://www.sojamo.de/libraries/controlP5/)

I do not use CP5 and this was an intuitive approach to answering this with the code you provided.

Lots of cool stuff in the references to peruse and glean through.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d0ef3503aea00c04cf13b38110141fe3d4bbb612.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Rai](https://avatars.discourse-cdn.com/v4/letter/r/67e7ee/32.png) [@Rai](https://discourse.processing.org/u/Rai)\
**Post date:** [August 8, 2020, 9:47pm UTC](https://discourse.processing.org/t/how-to-coloring-controlp5-item-with-different-color/23098/3 "2020-08-08T21:47:08Z")

</div>

but your code must make new component,  
how to color items in different colors in 1 component ?

---

<div class="post-metadata">

**Author:** ![Rai](https://avatars.discourse-cdn.com/v4/letter/r/67e7ee/32.png) [@Rai](https://discourse.processing.org/u/Rai)\
**Post date:** [August 8, 2020, 11:37pm UTC](https://discourse.processing.org/t/how-to-coloring-controlp5-item-with-different-color/23098/4 "2020-08-08T23:37:43Z")

</div>

i got it

```auto
import controlP5.*;
ControlP5 cp5;

CheckBox Checkcomponent;
Textlabel labelInfo;

void setup() {
  size(640, 480);

  cp5 = new ControlP5(this);
  Checkcomponent = cp5.addCheckBox("checkBox")
    .setPosition(105, 60)
    .setSize(20, 20)
    .setItemsPerRow(1)
    .setSpacingRow(20)
    .setColorBackground(color(0, 255, 0))
    .addItem("Large letter", 0)
    .addItem("Green letter", 1);

  labelInfo = cp5.addLabel("LabelOption")
    .setPosition(100, 200)
    .setFont(createFont("Batang", 20))
    .setText("Look at me");
  Checkcomponent.getItem(0).setColorLabel(color(255, 255, 0)).setFont(createFont("Batang", 20));
  Checkcomponent.getItem(1).setColorLabel(color(0, 255, 255)).setFont(createFont("Verdana", 20));
}
void draw() {
  background(150, 150, 150);
}
public void controlEvent(ControlEvent theEvent) {
  String nameComponent = theEvent.getName();
  if (nameComponent== "checkBox")    
  { 
    float checkResults[] = Checkcomponent.getArrayValue();
    if (checkResults[0] == 1)
      labelInfo.setFont(createFont("Batang", 40));
    else
      labelInfo.setFont(createFont("Batang", 20));
    if (checkResults[1] == 1)
      labelInfo.setColor(color(0, 255, 0));
    else
      labelInfo.setColor(color(255, 255, 255));
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 8, 2020, 11:55pm UTC](https://discourse.processing.org/t/how-to-coloring-controlp5-item-with-different-color/23098/5 "2020-08-08T23:55:10Z")

</div>

Hello,

> [@Rai](#):
>
> i got it

You really should set your answer as the solution.

Good work!

`:)`