# A grid of control p5 toggle buttons

**URL:** <https://discourse.processing.org/t/a-grid-of-control-p5-toggle-buttons/16172>\
**Category:** Libraries\
**Created:** [December 6, 2019, 6:00am UTC](https://discourse.processing.org/t/a-grid-of-control-p5-toggle-buttons/16172 "2019-12-06T06:00:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pandl](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pandl](https://discourse.processing.org/u/pandl)\
**Post date:** [December 6, 2019, 6:00am UTC](https://discourse.processing.org/t/a-grid-of-control-p5-toggle-buttons/16172/1 "2019-12-06T06:00:40Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 6, 2019, 6:14am UTC](https://discourse.processing.org/t/a-grid-of-control-p5-toggle-buttons/16172/2 "2019-12-06T06:14:09Z")

</div>

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

* * *

or make your own array of buttons:

```auto
/* 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:

```auto
/* 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

```auto
/* 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() );
}

```

---

<div class="post-metadata">

**Author:** ![pandl](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pandl](https://discourse.processing.org/u/pandl)\
**Post date:** [December 6, 2019, 6:30am UTC](https://discourse.processing.org/t/a-grid-of-control-p5-toggle-buttons/16172/3 "2019-12-06T06:30:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 6, 2019, 6:34am UTC](https://discourse.processing.org/t/a-grid-of-control-p5-toggle-buttons/16172/4 "2019-12-06T06:34:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pandl](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pandl](https://discourse.processing.org/u/pandl)\
**Post date:** [December 6, 2019, 6:41am UTC](https://discourse.processing.org/t/a-grid-of-control-p5-toggle-buttons/16172/5 "2019-12-06T06:41:54Z")

</div>

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…