# ControlP5 addTab: How to replace text with an icon?

**URL:** <https://discourse.processing.org/t/controlp5-addtab-how-to-replace-text-with-an-icon/40353>\
**Category:** Libraries\
**Created:** [December 29, 2022, 6:50am UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-replace-text-with-an-icon/40353 "2022-12-29T06:50:45Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vadimkuzmin](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@Vadimkuzmin](https://discourse.processing.org/u/Vadimkuzmin)\
**Post date:** [December 29, 2022, 6:50am UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-replace-text-with-an-icon/40353/1 "2022-12-29T06:50:45Z")

</div>

Good afternoon, I tried to replace the menu switches in the header with pictures, icons, but I don’t know how to do it, help!

 ![P21229-104308](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/b/7bc8ba033efb7540810e831490c4aaee9ffa75bc.jpeg)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 30, 2022, 6:19am UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-replace-text-with-an-icon/40353/2 "2022-12-30T06:19:12Z")

</div>

As far as I am aware, the ControlP5 Tab control does not support adding an image or a graphic. My advice would be to use a row of buttons in lieu of the tab control. ControlP5 Button controls do support adding an image.

---

<div class="post-metadata">

**Author:** ![Vadimkuzmin](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@Vadimkuzmin](https://discourse.processing.org/u/Vadimkuzmin)\
**Post date:** [December 30, 2022, 6:27am UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-replace-text-with-an-icon/40353/3 "2022-12-30T06:27:43Z")

</div>

I already thought about it, but I was looking for solutions in this particular plan, maybe there is one with dancing with a tambourine.

---

<div class="post-metadata">

**Author:** ![Vadimkuzmin](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@Vadimkuzmin](https://discourse.processing.org/u/Vadimkuzmin)\
**Post date:** [December 30, 2022, 7:30am UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-replace-text-with-an-icon/40353/4 "2022-12-30T07:30:56Z")

</div>

How can addbutton split windows? Do something like here?

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 30, 2022, 7:54am UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-replace-text-with-an-icon/40353/5 "2022-12-30T07:54:06Z")

</div>

`How can addbutton split windows? Do something like here?`

I’m not sure I understand what you mean. Are you looking for something like this button bar?

 ![btnBar](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/f/bfaaf45425a6a5cf02cebc11985630563d69454e.png)

---

<div class="post-metadata">

**Author:** ![Vadimkuzmin](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@Vadimkuzmin](https://discourse.processing.org/u/Vadimkuzmin)\
**Post date:** [December 30, 2022, 1:57pm UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-replace-text-with-an-icon/40353/6 "2022-12-30T13:57:59Z")

</div>

Yes, the current tab switching should work with displaying different data on each tab! How can this be done with your example?

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 30, 2022, 2:54pm UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-replace-text-with-an-icon/40353/7 "2022-12-30T14:54:24Z")

</div>

The buttonBar only has one cp5 button as far as I can tell. Therefore, I don’t think it will work either for what you want to do. The following is code for a cp5 button grid as well as a straight Processing button grid:

```auto

int _numRows = 2;
int _numCols = 6;

PGraphics[] pg;
PImage[] img;

int id = 0;

Button[] btn;

class Button {
  float x, y, w, h;
  // Constructor
  Button(float xpos, float ypos, float wide, float ht) {
    x = xpos;
    y = ypos;
    w = wide;
    h = ht;
  }

  void display(int id) {
    rect(x, y, w, h);
    image(img[id], x + 20, y + 20);
  }
}

void btnGrid(int left, int top, int w, int h, int vg, int hg) {
  for (int k = 0; k < _numRows; k++) {
    for (int j = 0; j < _numCols; j++) {
      int x = left + j*(w+vg);
      int y = top + k*(h+hg);
      stroke(255);
      fill(118);
      btn[id] = new Button(x, y, w, h);
      id++;
    }
  }
}

void setup() {
  size(600, 400);
  btn = new Button[_numRows*_numCols];
  background(0, 0, 245);
  btnGrid(0, 0, 75, 75, 0, 0);
  smooth();
  pg = new PGraphics[_numRows*_numCols];
  img = new PImage[_numRows*_numCols];
  for (int i = 0; i < (_numRows*_numCols); i++) {
    pg[i] = createGraphics(200, 200);
    pg[i].beginDraw();
    pg[i].stroke(0);
    pg[i].strokeWeight(4.0);
    pg[i].fill(random(255), random(255), random(255));
    pg[i].triangle(20, 20, 20, 180, 180, 100);
    pg[i].endDraw();
    pg[i].save("arrow" + str(i)+ ".png");
    img[i] = loadImage("arrow" + str(i)+ ".png");
    img[i].resize(40, 0);
  }
}

void draw() {
  for (int i = 0; i < btn.length; i++) {
    btn[i].display(i);
  }
}

void mousePressed() {
  for (int i = 0; i < btn.length; i++) {
    if ((mouseX >= btn[i].x) && (mouseX <= btn[i].x + btn[i].w) && (mouseY >= btn[i].y) && (mouseY <= btn[i].y + btn[i].h)) {
      println("btn id = ", i);
    }
  }
}

```

 ![btnGrid](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/2/e2cabc2afb624635b0ad1f3151d4e30718871fe7.png)

You would have to supply your own image array to put on the buttons.

**ControlP5ButtonGrid**

```auto
import controlP5.*;

ControlP5 cp5;

int _numRows = 1;
int _numCols = 4;

PImage[] img;

int id = 0;

void cp5BtnGrid(int left, int top, int w, int h, int vg, int hg) {
  for (int k = 0; k < _numRows; k++) {
    for (int j = 0; j < _numCols; j++) {
      int x = left + j*(w+vg);
      int y = top + k*(h+hg);
      String name = "btn" + str(id);    
      cp5.addButton(name).setValue(random(255)).setPosition(x,y).setSize(w,h).setImage(img[id]) ;
      id++;
    }
  }
}

void loadImages(){
  img[0] = loadImage("img0.png");
  img[1] = loadImage("img1.png");
  img[2] = loadImage("img2.png");
  img[3] = loadImage("img3.png");
  for (int i = 0; i < (_numRows*_numCols); i++) {
    // REM next line out to run without images
    img[i].resize(40, 0);
  }
}

void setup() {
  size(600, 400);
  background(209);
  cp5 = new ControlP5(this);
  img = new PImage[_numRows*_numCols];
  loadImages();
  cp5BtnGrid(5, 5, 50, 50, 0, 0);
}

void draw() {
}

public void controlEvent(ControlEvent theEvent) {
  println(theEvent.getController().getName());  
}

public void btn0(int theValue) {
  println("button event from btn0 : " + "value = " + theValue); 
}

public void btn1(int theValue) {
  println("button event from btn1 : " + "value = " + theValue); 
}

```

REM out _img[i].resize(40, 0);_ if you try to run it without adding your own images.

---

<div class="post-metadata">

**Author:** ![Vadimkuzmin](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@Vadimkuzmin](https://discourse.processing.org/u/Vadimkuzmin)\
**Post date:** [December 31, 2022, 7:08am UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-replace-text-with-an-icon/40353/8 "2022-12-31T07:08:24Z")

</div>

Thank you, I will check your example if it solves my problem, I will definitely let you know

[image]

---

<div class="post-metadata">

**Author:** ![Vadimkuzmin](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@Vadimkuzmin](https://discourse.processing.org/u/Vadimkuzmin)\
**Post date:** [January 9, 2023, 11:08am UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-replace-text-with-an-icon/40353/9 "2023-01-09T11:08:10Z")

</div>

Perhaps I know another solution, but how to move the tabs?

> <https://stackoverflow.com/questions/75056200/how-can-you-move-tabs>