radio-buttonprocessingcontrol-p5

controlP5: matrix/ 2D array for multiple RadioButton results


I'm trying to query a user to select from 4 or more sets of radio buttons where there are 5 buttons in each set (Processing 2+). Where I'm having trouble is taking the array created by selecting from each set of buttons and getting it to fill columns in a matrix where the elements can be queried and the 2D array can be printed and ultimately written as csv or tab txt file.

import controlP5.*;
ControlP5 controlP5;

RadioButton c0;
RadioButton c1;
RadioButton c2;
RadioButton c3;

int cols = 5;
int rows = 4;
int[][] myArray = new int[cols][rows];

void setup() {
  size(600,650);
controlP5 = new ControlP5(this);
  c0 = controlP5.addRadioButton("ch0",60,60)
               .setSize(20,20)
               .setItemsPerRow(5)
               .setSpacingColumn(50)               
               .addItem("c03", 1)
               .addItem("c04", 2)
               .addItem("c05", 3)
               .addItem("c0AM", 4)
               .addItem("c0AF", 5)
               ;
  c1 = controlP5.addRadioButton("ch1",60,80)
               .setSize(20,20)
               .setItemsPerRow(5)
               .setSpacingColumn(50)
               .addItem("c13", 1)
               .addItem("c14", 2)
               .addItem("c15", 3)
               .addItem("c1AM", 4)
               .addItem("c1AF", 5)
               ;  
  c2 = controlP5.addRadioButton("ch2",60,100)
               .setSize(20,20)
               .setItemsPerRow(5)
               .setSpacingColumn(50)
               .addItem("c23", 1)
               .addItem("c24", 2)
               .addItem("c25", 3)
               .addItem("c2AM", 4)
               .addItem("c2AF", 5)

               ;  
  c3 = controlP5.addRadioButton("ch3",60,120)
               .setSize(20,20)
               .setItemsPerRow(5)
               .setSpacingColumn(50)        
               .addItem("c33", 1)
               .addItem("c34", 2)
               .addItem("c35", 3)
               .addItem("c3AM", 4)
               .addItem("c3AF", 5)

               ;
}

void draw() {
background(0);
}

void controlEvent(ControlEvent theEvent) {
  if(theEvent.isGroup() && theEvent.name().equals("ch0") || theEvent.name().equals("ch0") ||       theEvent.name().equals("ch2") || theEvent.name().equals("ch3")){
   println(theEvent.name());
   println(theEvent.arrayValue());
   //float t=float(theEvent.arrayValue());
   //int[][] = { {float getGroup(),float[] getArrayValue()}, {3,2,1,0}, {3,5,6,1}, {3,8,3,4} };
//int cols = 4;
//int rows = 5;
//int[][] myArray = new int[cols][rows];

// Two nested loops allow us to visit every spot in a 2D array.   
// For every column I, visit every row J.
//for (int i = 0; i < cols; i++) {
// for (int j = 0; j < rows; j++) {
//myArray[i][j] = float(theEvent.arrayValue);
  }
} 

Solution

  • You were mixing different things together. Also you don't need to check whole array and store this information. Just update clicked button. Here is new version of your controlEvent

    void controlEvent(ControlEvent theEvent) {
    
      int cols = 4;
      int rows = 5;
      int[][] myArray = new int[cols][rows];      
    
      switch(theEvent.getId()){
        case 0:
          myArray[0][(int)theEvent.value()-1] = 1;
          break;
        case 1:
          myArray[1][(int)theEvent.value()-1] = 1;
          break;
        case 2:
          myArray[2][(int)theEvent.value()-1] = 1;
          break;
        case 3:
          myArray[3][(int)theEvent.value()-1] = 1;
          break;
      }  
      println("==== " + theEvent.getId() + " ===");
      println(myArray[theEvent.getId()]);
    }
    

    To do this simple switch you need to add ID parameter to all your radio buttons like this:

      c3 = controlP5.addRadioButton("ch3", 60, 120)
      .setId(3)
        .setSize(20, 20)
         ...
    

    I don't know how exactly you want use this array so my implementation use it as local variable so it will be deleted every time this event is called but this could be avoided by declaring array as global variable and then deleting only updated column.