Puzzle with ControlP5

Processing Libraries
1

Hello all.

I have a question about CP5 events.

Here’s small program:

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?
1 Like
2

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

//_____________________________________ 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.

1 Like
3

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.

1 Like
4

sorry, better new concept:
-a-

read the whole file to a table / see how powerful that is:

-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!

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,

*/
1 Like
5

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.

6

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.

7

Here’s what I’m doing in the draw() procedure:

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.
1 Like
8

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.

2 Likes