# Puzzle with ControlP5
**URL:** https://discourse.processing.org/t/puzzle-with-controlp5/14643
**Category:** Libraries
**Created:** [October 13, 2019, 12:41am UTC](https://discourse.processing.org/t/puzzle-with-controlp5/14643 "2019-10-13T00:41:20Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@nimbinensis](https://discourse.processing.org/u/nimbinensis)
#### Post date: [October 13, 2019, 12:41am UTC](https://discourse.processing.org/t/puzzle-with-controlp5/14643/1 "2019-10-13T00:41:20Z")
Hello all.
I have a question about CP5 events.
Here’s small program:
```auto
import controlP5.*;
ControlP5 cp5;
boolean looping;
void setup() {
size(200, 200);
cp5 = new ControlP5(this);
cp5.addToggle("Click")
.setBroadcast(false)
.setValue(true)
.setColorLabel(0)
.setPosition(90, 90)
.setSize(20, 20)
.setBroadcast(true)
;
looping = true;
}
void draw() {
}
void Click(boolean theValue) {
println("looping = " + looping);
if (looping) {
looping = false;
noLoop();
} else {
looping = true;
loop();
}
}
The toggle button works fine. It changes state and colour properly. But when it's set to the off state a click anywhere on the sketch sets it back to the on state. I don't understand what's happening here.
Can anyone enlighten me?
```
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 13, 2019, 2:00am UTC](https://discourse.processing.org/t/puzzle-with-controlp5/14643/2 "2019-10-13T02:00:39Z")
one of the very confusing things about CP5 is
that the event is happening ONCE at startup
consider this for you initial settings.
* * *
for the click outside the button i have no explanation.
* * *
the CP5 function you seek looks more like a toggle switch
```auto
// _____________________________________ CP5 SWITCH
import controlP5.*;
ControlP5 cp5;
Toggle mySwitch;
void setup_cp5() {
cp5 = new ControlP5(this);
mySwitch = cp5.addToggle("toggle") // toggle : function to call on event
.setPosition(40,100)
.setSize(50,20)
.setValue(true)
.setLabel("_ switch _")
.setMode(ControlP5.SWITCH)
;
}
void toggle(boolean tStat) {
println("toggle event tStat: "+tStat);
if(tStat) col = color(0,200,0); // ON
else col = color(0,0,200); // OFF
// https://discourse.processing.org/t/puzzle-with-controlp5/14643
// if(tStat) loop();
// else noLoop();
}
// ___________________________________________________ main
color bg = color(200,200,0), col = color(0,200,0);
void setup() {
size(400,200);
setup_cp5();
}
void draw() {
background(bg);
fill(col);
ellipse(280,100,100,100);
}
// started with copy from PDE / File / Examples / ControlP5 / controllers / ControlP5toggle
```
* * *
now,
if you enable YOUR part of the code
about en / disable processing loop() you will see
that the color not change anymore ( because draw is disabled by noLoop() )
but the CP5 button still is usable ( because it is outside ?after? the draw )
so please tell us more what is the idea about that
`loop / noLoop`
thing you want to build?
as like this, it not makes much sense to me.
* * *
---
### Author:  [@nimbinensis](https://discourse.processing.org/u/nimbinensis)
#### Post date: [October 13, 2019, 2:23am UTC](https://discourse.processing.org/t/puzzle-with-controlp5/14643/3 "2019-10-13T02:23:31Z")
Thanks for your reply.
The thing I’m working on is a sketch to read data out of a csv file row by row and display it. The idea is that I have a set of toggles that enable or disable the display of parts of the data so I can focus on different parts of the data. the draw() routine displays each line as it comes out of the file. The looping idea is to be able to stop the display at a particular row.
The strange thing is that if the sketch is looping through the rows then the toggles work correctly and the display elements are turned off and on. But if the loop is stopped then any mouse down event somehow acts as a ControlEvent to the stop button and the loop starts up again. It’s as if the whole of the sketch is acting like a mouse down listener, but only when the loop is stopped.
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 13, 2019, 2:29am UTC](https://discourse.processing.org/t/puzzle-with-controlp5/14643/4 "2019-10-13T02:29:07Z")
> [@nimbinensis](#):
>
> to read data out of a csv file row by row
sorry, better new concept:
-a-
> **[loadTable() / Reference](https://processing.org/reference/loadTable_.html)**
>
> Reads the contents of a file or URL and creates a Table object with its values. If a file is specified, it must be located in the sketch's "data" folder. The filename parameter can also be a URL to a …
read the whole file to a table / see how powerful that is:
> **[Table / Reference](https://processing.org/reference/Table.html)**
>
> Table objects store data with multiple rows and columns, much like in a traditional spreadsheet. Tables can be generated from scratch, dynamically, or using data from an existing file. Tables c…
-b- now what you show on the canvas is a total different thing
make buttons for begin / back / next / last
and load the corresponding ROW to screen
-c- and not use noLoop() at all!
* * *
```auto
Table mytable;
TableRow one_row;
String scol, myfile = "data/table.csv"; // with column headers
int xpos, ypos, dx, line=0, crow, ccol;
void setup() {
size(200, 200);
mytable = loadTable(myfile, "header");
crow = mytable.getRowCount();
ccol = mytable.getColumnCount();
println("file: "+myfile+" rows: "+crow+" cols: "+ccol);
println("use: key [n] for next");
}
void draw() {
background(200, 200, 0);
draw_row(line);
}
void draw_row(int line) {
one_row = mytable.getRow(line);
scol = "Gallery ";
xpos = 10; ypos =20; dx = 60;
fill(0,0,200);
text(scol+'X',xpos,ypos); xpos += dx;
text(scol+'Y',xpos,ypos); xpos += dx;
text(scol+'Z',xpos,ypos);
xpos = 10; ypos += ypos;
text(nf(one_row.getFloat(scol+'X'),1,1),xpos,ypos); xpos += dx;
text(nf(one_row.getFloat(scol+'Y'),1,1),xpos,ypos); xpos += dx;
text(nf(one_row.getFloat(scol+'Z'),1,1),xpos,ypos);
}
void keyPressed() {
if (key == 'n') line++;
if (line >= crow ) line =0;
}
/*
data/table.csv content:
Gallery X,Gallery Y,Gallery Z,
11.0,12.0,13.0,
21.0,22.0,23.0,
*/
```
---
### Author:  [@nimbinensis](https://discourse.processing.org/u/nimbinensis)
#### Post date: [October 13, 2019, 2:36am UTC](https://discourse.processing.org/t/puzzle-with-controlp5/14643/5 "2019-10-13T02:36:55Z")
I didn’t describe my sketch very well. I’m reading the csv file as a table and parsing a row from the table each time the draw procedure fires up. I turn the data from the row into a series of lines that change length depending on the values in the row.
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 13, 2019, 2:41am UTC](https://discourse.processing.org/t/puzzle-with-controlp5/14643/6 "2019-10-13T02:41:51Z")
so you ( load from loaded table ) 60 row per sec and get a flickering screen and want stop that by noLoop();
same, don’t do that.
select a row ( by a index number… ) operated by your buttons ( or keyboard like i show above example ) and not by increment each draw loop.
---
### Author:  [@nimbinensis](https://discourse.processing.org/u/nimbinensis)
#### Post date: [October 13, 2019, 2:48am UTC](https://discourse.processing.org/t/puzzle-with-controlp5/14643/7 "2019-10-13T02:48:55Z")
Here’s what I’m doing in the draw() procedure:
```auto
void draw() {
float x, y;
background(0xff, 0xff, 0xff);
TableRow row = table.getRow(count++);
sliderController.setValue(count);
parseRow(row);
//
//Draw the data lines
//
strokeWeight(5);
for (int i = 0; i < FREQUENCY_NUMBER; i++) {
FrequencyEntry g = frequencyEntries[i];
if (g.isEnabled()) {
stroke(g.colour);
for (int j = 0; j < SENSOR_NUMBER; j++) {
if (g.sensorEntries[j].isEnabled()) {
x = g.sensorEntries[j].x * g.sensorEntries[j].scale;
y = g.sensorEntries[j].y * g.sensorEntries[j].scale;
line(x+CENTRE_X, y+CENTRE_Y, CENTRE_X, CENTRE_Y);
}
}
}
}
//
//Now draw in the small circle at the centre
//
strokeWeight(1);
fill(0xff, 0xff, 0xff);
stroke(0xff, 0xff, 0xff);
ellipse(CENTRE_X, CENTRE_Y, SMALL_RADIUS, SMALL_RADIUS);
//
//Now draw the scaling cirles
//
noFill();
stroke(0, 0, 0);
ellipse(CENTRE_X, CENTRE_Y, RADIUS, RADIUS);
ellipse(CENTRE_X, CENTRE_Y, RADIUS*2, RADIUS*2);
ellipse(CENTRE_X, CENTRE_Y, RADIUS*3, RADIUS*3);
//
//Finished?
//
if (count == maxRows) {
noLoop();
}
}
The parseRow procedure works out how to display the data. As you can see there's quite a bit of mucking around to make the display. But this all works fine. It's the behaviour of this stop/start toggle that's got me beat.
```
---
### Author:  [@nimbinensis](https://discourse.processing.org/u/nimbinensis)
#### Post date: [October 13, 2019, 2:59am UTC](https://discourse.processing.org/t/puzzle-with-controlp5/14643/8 "2019-10-13T02:59:56Z")
Actually, I just had a bit of a fiddle with the code and it turns out that I don’t need to use loop() and noLoop() at all. I just look at the looping flag in draw() and proceed from there.
Thankyou for your help.