# ControlP5 addTab: How to implement tab navigation through pictures?

**URL:** <https://discourse.processing.org/t/controlp5-addtab-how-to-implement-tab-navigation-through-pictures/40537>\
**Category:** Libraries\
**Created:** [January 10, 2023, 9:30am UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-implement-tab-navigation-through-pictures/40537 "2023-01-10T09:30:16Z")\
**Posts on this page:** 2\
**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:** [January 10, 2023, 9:30am UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-implement-tab-navigation-through-pictures/40537/1 "2023-01-10T09:30:16Z")

</div>

Good afternoon, I seem to have succeeded in replacing the tabs with pictures, but there is a problem, I deliberately let the pictures go down to show that the tabs are not clickable through them! How else can you get around this trick?

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

```auto
import controlP5.*;

ControlP5 cp5;

int _numRows = 1;
int _numCols = 5;

PImage[] img;
int myColorBackground = color(128);
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)).moveTo("global").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.jpg");
  img[3] = loadImage("img3.png");
  img[4] = loadImage("img4.jpg");
  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(0, 25, 40, 40, 1, 0);
  PFont p = createFont("Times New Roman", 18);
  ControlFont font=new
  ControlFont(p);
  cp5.setFont(font);
  
  cp5.addTab("2")
    .setColorBackground(color(0, 160, 100))
    .setColorLabel(color(255))
    .setColorActive(color(255, 128, 0));

  cp5.addTab("3")
    .setColorBackground(color(0, 160, 100))
    .setColorLabel(color(255))
    .setColorActive(color(255, 128, 0));

  cp5.addTab("4")
    .setColorBackground(color(0, 160, 100))
    .setColorLabel(color(255))
    .setColorActive(color(255, 128, 0));

  cp5.addTab("5")
    .setColorBackground(color(0, 160, 100))
    .setColorLabel(color(255))
    .setColorActive(color(255, 128, 0));

  cp5.getTab("default")
    .activateEvent(true)
    .setLabel("1")
    .setWidth(37)
    .setHeight(37)
    .setId(1);

  cp5.getTab("2")
    .activateEvent(true)
    .setWidth(37)
    .setHeight(37)
    .setId(2);

  cp5.getTab("3")
    .activateEvent(true)
    .setWidth(37)
    .setHeight(37)
    .setId(3);
    
  cp5.getTab("4")
    .activateEvent(true)
    .setWidth(37)
    .setHeight(37)
    .setId(4);

  cp5.getTab("5")
    .activateEvent(true)
    .setWidth(37)
    .setHeight(37)
    .setId(5);
    
    cp5.addTextlabel("A")
    .setText("test 1")
    .setFont(createFont("Times New Roman", 20))
    .setColor(color(0xffffff00))
    .setPosition(214, 135);
    
    cp5.addTextlabel("B")
    .setText("test 2")
    .setPosition(314, 165)
    .setFont(createFont("Times New Roman", 20))
    .setColor(color(0xffffff00));
   
    cp5.getController("B").moveTo("2");
    
    cp5.addTextlabel("C")
    .setText("test 3")
    .setPosition(214, 185)
    .setFont(createFont("Times New Roman", 20))
    .setColor(color(0xffffff00));
  
    cp5.getController("C").moveTo("3");
    
     cp5.addTextlabel("D")
    .setText("test 4")
    .setPosition(214, 195)
    .setFont(createFont("Times New Roman", 20))
    .setColor(color(0xffffff00));
    
    cp5.getController("D").moveTo("4");
    
     cp5.addTextlabel("E")
    .setText("test 5")
    .setPosition(214, 205)
    .setFont(createFont("Times New Roman", 20))
    .setColor(color(0xffffff00));

   cp5.getController("E").moveTo("5");
    
}

void draw() {
   background(myColorBackground);
}
void controlEvent(ControlEvent theControlEvent) {
  if (theControlEvent.isTab()) {
    println("got an event from tab : "+theControlEvent.getTab().getName()+" with id "+theControlEvent.getTab().getId());
  }
}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [January 15, 2023, 8:00am UTC](https://discourse.processing.org/t/controlp5-addtab-how-to-implement-tab-navigation-through-pictures/40537/2 "2023-01-15T08:00:53Z")

</div>

Hi @Vadimkuzmin,

First please check for your other question if it was solved by the [answer](https://discourse.processing.org/t/how-can-you-move-tabs/40520/5) an eventually mark it as such.

For this please look at the provided ButtonBar example for ControlP5.

Cheers  
— mnse