[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:
    }
  }
}
1 Like

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.

1 Like

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.

1 Like

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

1 Like