A grid of control p5 toggle buttons

Processing Libraries
1

Thank you for reading this.

I’m trying to created a grid of control P5 toggle buttons and I’m also trying to discover how I can tell which button has been pressed.

This piece of code creates two buttons and I was thinking that they would be named something like “toggle[i]”.

for (int i = 0; i < 2; i++)
{
cp5 = new ControlP5(this);

// create a toggle
cp5.addToggle("toggle")
  .setPosition(i * 80, 100)
  .setSize(50, 20)
  ;

}

I’ve searched the Internet looking for an answer or an example but all that I’ve is someone else asking a similar question which wasn’t resolved.

So, how do I create a grid (for this example a one dimensional array) of functioning buttons?

1 Like
2

you might look into
PDE / File / Examples / Contriburted Libraries / Control P5 / controllers / ControlP5buttonBar

or make your own array of buttons:

/* ControlP5 Button */

import controlP5.*;

ControlP5 cp5;
Button[] btns = new Button[5];

void setup() {
  size(400, 600);
  cp5 = new ControlP5(this);
  for ( int i = 0; i < 5; i++ ) {
    btns[i] = cp5.addButton( "click"+str(i) )
      .setValue(i)
      .setPosition(100, 20+30*i)
      .setSize(200, 19) ;
  }
}

void draw() {
  background(200, 200, 0);
}

public void controlEvent(ControlEvent theEvent) {
  println(theEvent.getController().getName());
}

public void click0(int theValue) {
  println("a button event from click0: "+theValue);
}

a auto GRID version:

/* ControlP5 Button GRID */
import controlP5.*;

int xg = 10, yg = xg, wg = 70, hg = wg, offg =5, grid = 5, many = grid*grid;  // GRID DESIGN
ControlP5 cp5;
Button[] btns = new Button[many];

void setup() {
  size(400, 400);
  cp5 = new ControlP5(this);
  for ( int i = 0; i < many; i++ ) {
    int bx = xg+(i%grid)*( wg+offg);
    int by = yg+(floor(i/grid))*(hg+offg);
    btns[i] = cp5.addButton( "click"+str(i) )
      .setValue(i)
      .setPosition(bx,by)
      .setSize(wg,hg) ;
  }
}

void draw() {
  background(200, 200, 0);
}

public void controlEvent(ControlEvent theEvent) {
  println(theEvent.getController().getName());
}

public void click0(int theValue) {
  println("a button event from click0: "+theValue);
}

for TOGGLE might also look into
PDE / File / Examples / Contriburted Libraries / Control P5 / controllers / ControlP5toggle

still can use Button like

/* ControlP5 Button GRID / TOGGLE type*/
import controlP5.*;
ControlP5 cp5;

int xg = 10, yg = xg, wg = 70, hg = wg, offg =5, grid = 5, many = grid*grid;  // GRID DESIGN
Button[] btns = new Button[many];

void setup() {
  size(400, 400);
  cp5 = new ControlP5(this);
  for ( int i = 0; i < many; i++ ) {
    int bx = xg+(i%grid)*( wg+offg);
    int by = yg+(floor(i/grid))*(hg+offg);
    btns[i] = cp5.addButton( "click_"+str(i) )
      .setSwitch(true)
      //.setOff()
      .setColorForeground(color(200, 0, 200)) // mouse over
      .setColorActive(color(0, 200, 0))       // clicked ON
      .setId(i) 
      .setPosition(bx, by)
      .setSize(wg, hg) ;
  }
}

void draw() {
  background(200, 200, 0);
}

public void controlEvent(ControlEvent theEvent) {
  String name = theEvent.getController().getName();  
  int btn = theEvent.getController().getId();
  println(name , btn , btns[btn].isOn() );
}

void keyPressed() {
  if ( key == 'a' ) printAll();
}

void printAll() {
  println("print btns if ON ");
  for ( int i = 0; i < many; i++ )  if ( btns[i].isOn() ) println(i, btns[i].isOn() );
}
1 Like
3

Thank you once again kll for answering my question with an excellent example.

Actually, I had created a Sudoku solving programme around twenty years ago with C++ and the QT library which used a two dimensional array of edit boxes. However, I’ve forgotten how I did it and I don’t have the old files with me. The memory fades with time.

2 Likes
4

if you do that grid with text “edit boxes” in processing again
( and not use CP5 or G4P )
show me.

5

It wasn’t with Processing, it was C++ and the QT library. I also created a Sudoku solver for the Rasberry Pi using Python and Tkinter, but I don’t have my Raspberry Pi with me either. You’ve jogged my memory with your example and I should be able to make some headway now…