[cp5] ControlP5 buttons over each others on different page, problem to differenciate them

When I click on “Changer” button, I want to change page, that works.
But problem is that I create new buttons and I need them to be the exact same position than those from previous pages but still they need to be distinguished when clicked.

On log I see that when I click for example “Deployer” button, it detects both “Deployer” and “Retracter” buttons pushed, that’s huge problem. I’ve tried many different ways. I created cp5_1 class, selected buttons by adress, name or Id but still problem. I use .remove(), .hide() but nonetheless… problem.

Also, I tried not storing buttons in variables (bA, bB etc) to see difference but there isn’t.
Maybe a way to get it working is checking both page Id (“curentPage”) & button Id so if it is same button detected but different page I can make my code react accordingly but wouldn’t be fav option.

Otherwise, if you guys know how to link Phone to Processing via OTG cable I’m highly interested, I only found io.inventit library but seems depreciated don’t know on which Android mode, Processing version to run it and how to configure properly.

Feedback much appreciated.

import controlP5.*;
import processing.serial.*;

Serial mySerial;
ControlP5 cp5;
Button bA, bB, bC, bD, bE, bF, bG, bH;

int currentPage;

String myString = null;
int nl = 10;

int Red = color(255, 0, 0);//rouge
int Green = color(0,255,0);//vert
int colors[] = {100, 100, 100, 100};

String status[] = {"Inconnu","Inconnu", "Inconnu", "Inconnu"};
String titles[] = {"Poteaux", "Tribunes", "Terrain", "Smartgrid"};

//String menu[] = {"Accueil", "Retor
String buttons[] = {"Deployer", "Retracter", "Changer", "Rafraichir"};
String buttons_1[] = {"Basket-ball", "Handball" , "Football", "Volley-ball"};

void setup() {
  
  size(640,240);
  
  //password check with controlP5
  
  /*String myPort = Serial.list()[1];//A FAIRE, msg d'erreur
  mySerial = new Serial(this, myPort, 9600);//initialize connexion
  */
  gui();//boot gui
}

void draw(){
  
  /*while(mySerial.available() > 0){
    char inByte = mySerial.readChar();
    print(inByte);
    
    if(inByte == '0'){
      status[0] = "RAS";
      colors[0] = Green;
    }
  
    else if(inByte == '1'){
      status[0] = "Danger";
      colors[0] = Red;
    }
  }*/
}

void menu(){
  int xCoordinate = 1;
  int sectionNumber = 1;
  
  line(0, height * .8, width, height * .8);
  
  while(sectionNumber<5 & xCoordinate<8){
  
    switch(sectionNumber)
    {
      case 0:
      cp5 = new ControlP5(this);
      bA = cp5.addButton(buttons[sectionNumber]).setPosition(width * (xCoordinate)/8, height * 0.4);
      break;
      
      case 1:
      cp5 = new ControlP5(this);
      bB = cp5.addButton(buttons[sectionNumber]).setPosition(width * (xCoordinate)/8, height * 0.4);
      break;
  
      case 2:
      cp5 = new ControlP5(this);
      bC = cp5.addButton(buttons[sectionNumber]).setPosition(width * (xCoordinate)/8, height * 0.4);
      break;
      
      case 3:
      cp5 = new ControlP5(this);
      bD = cp5.addButton(buttons[sectionNumber]).setPosition(width * (xCoordinate)/8, height * 0.4);
      break;
    }
    
    sectionNumber++;
    xCoordinate += 2;
  }//for each section, creates 4 buttons
  
}

void gui(){
  
  currentPage = 0;
  
  int xCoordinate = 1;
  int sectionNumber = 1;
  
  float titleSize = height * .075;
  
  background(177);//background default color
  
  menu();
  
  while(sectionNumber<4){
    line(width/4 * sectionNumber, 0, width/4 * sectionNumber, height * .8);//height gauche
    sectionNumber++;
  }//separate 4 sections with 3 lines
  
  textSize(titleSize);
  textAlign(CENTER);
  
  sectionNumber = 0;
  
  fill(255);
  
  while(sectionNumber<5 & xCoordinate<8){
    text(titles[sectionNumber], width * (xCoordinate)/8, height * .1);
    sectionNumber++;
    xCoordinate += 2;
  }//display titles in their section
  
  sectionNumber = 0;
  xCoordinate = 1;
  
  while(sectionNumber<5 & xCoordinate<8){
    rectMode(CENTER);
    fill(colors[sectionNumber]);
    rect(width * (xCoordinate)/8, height * .22, width/5, height * .11);
    fill(0);
    text(status[sectionNumber], width * (xCoordinate)/8, height * .25);
    sectionNumber++;
    xCoordinate += 2;
  }//display status depending on data sent by sensors
  
  sectionNumber = 0;
  xCoordinate = 1;
  
  while(sectionNumber<5 & xCoordinate<8){
  
    switch(sectionNumber)
    {
      case 0:
      cp5 = new ControlP5(this);
      bA = cp5.addButton(buttons[sectionNumber]).setPosition(width * (xCoordinate)/8, height * 0.4).setId(0);
      break;
      
      case 1:
      cp5 = new ControlP5(this);
      bB = cp5.addButton(buttons[sectionNumber]).setPosition(width * (xCoordinate)/8, height * 0.4).setId(1);
      break;
  
      case 2:
      cp5 = new ControlP5(this);
      bC = cp5.addButton(buttons[sectionNumber]).setPosition(width * (xCoordinate)/8, height * 0.4).setId(2);
      break;
      
      case 3:
      cp5 = new ControlP5(this);
      bD = cp5.addButton(buttons[sectionNumber]).setPosition(width * (xCoordinate)/8, height * 0.4).setId(3);
      break;
    }//creates each section's button
    
    sectionNumber++;
    xCoordinate += 2;
  }

  
  sectionNumber=0;
  xCoordinate = 1;
  
  while(sectionNumber<5 & xCoordinate<8){
    rectMode(CENTER);
    fill(0);
    rect(width * (xCoordinate)/8, height * 0.6, width/5, height * .11);
    fill(0);
    text(status[sectionNumber], width * (xCoordinate)/8, height * .25);
    sectionNumber++;
    xCoordinate += 2;
  }//some kind of debugging
}

void gui_1(){
  
  currentPage = 1;
  
  int xCoordinate = 1;
  int sectionNumber = 1;
  
  while(sectionNumber<4){
    line(width/4 * sectionNumber, 0, width/4 * sectionNumber, height);
    sectionNumber++;
  }
  
  sectionNumber = 0;
  xCoordinate = 1;
  
  while(sectionNumber<5 & xCoordinate<8){
  
    switch(sectionNumber)
    {
      case 0:
      cp5 = new ControlP5(this);
      bE = cp5.addButton(buttons_1[sectionNumber]).setPosition(width * (xCoordinate)/8, height * 0.4).setId(4);
      break;
      
      case 1:
      cp5 = new ControlP5(this);
      bF = cp5.addButton(buttons_1[sectionNumber]).setPosition(width * (xCoordinate)/8, height * 0.4).setId(5);
      break;
  
      case 2:
      cp5 = new ControlP5(this);
      bG = cp5.addButton(buttons_1[sectionNumber]).setPosition(width * (xCoordinate)/8, height * 0.4).setId(6);
      break;
      
      case 3:
      cp5 = new ControlP5(this);
      bH = cp5.addButton(buttons_1[sectionNumber]).setPosition(width * (xCoordinate)/8, height * 0.4).setId(7);
      break;
    }
    
    sectionNumber++;
    xCoordinate += 2;
  }
  
}

void controlEvent(CallbackEvent event){
  if (event.getAction() == ControlP5.ACTION_CLICK) {
    println(event.getController().getName());
    switch(event.getController().getId()) {
      
      case 0:
      colors[0] = Green;
      status[0] = "RAS";
      gui();
      break;
      
      case 1:
      colors[1] = Red;
      status[1] = "Danger";
      gui();
      break;
      
      case 2:
      background(177);
      bA.hide();
      bB.hide();
      bC.hide();
      bD.hide();
      
      gui_1();
      break;
      
      case 3:
      println("Button  Pressed");
      break;
      
      case 4:
      println("Button A Pressed");
      break;
      
      case 5:
      println("Button B Pressed");
      break;
      
      case 6:
      println("Button C Pressed"); 
      break;
      
      case 7:
      println("Button D Pressed");
      break;
      
      default:
    }
  }
}

Just from a quick glance at your sketch:

shouldn’t you call gui from draw()? I don’t know

Then your problem: i think you work with different pages. On each page you have buttons and they are sometimes at the same position. So they both fire. Bad.

Solution: say something that checks not all buttons but only the buttons for the current page. So like switch (currentPage) around the checking of your buttons.

Alternatively make a list of the buttons of each page and when a button fires only act when it’s in the list for the current page.

Yeah I get your point, it’s a solution but first it will still detect 2 entry when only 1 button pushed and secondly normally I shouldn’t need to create another variable (currentPage), is there another way ? I feel like it’s cp5 glitch… I mean I’ve tried several methods different IDs etc, should work. If not I’ll put solved, thx. Not huge bug but I’m perfectionnist lol.

You can use ControllerGroup for this. For example, Tab is one way to switch ControllerGroups – but you can also use them to define sets of Controls manually if you wish.

http://www.sojamo.com/libraries/controlP5/reference/controlP5/Tab.html