ControlP5 addTab: How to implement tab navigation through pictures?

Processing Libraries
1

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
primer1920×1080 203 KB 

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

Hi @Vadimkuzmin,

First please check for your other question if it was solved by the answer an eventually mark it as such.

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

Cheers
— mnse