Using controlp5 widgets from within a class in Processing

Question

I'm building an interface using Processing and controlp5 for an Arduino with some sensors attached to it. I want to have many sensors, so I am trying to build the interface in a modular fashion so that I can just instantiate as many control panels as I have sensors, and update all the panels at once when my hardware sends a telemetry packet.

I have made something that kind of works and draws the widgets, but it appears that my callback functions are not being triggered - for example, when one of the buttons in the code below is pressed, the corresponding serial printout does not happen. Also, the println(channelOne.currentGain); in the main sketch always prints 0, no matter what the gain slider is doing.

I don't do much Java, so I am sure that I am missing something basic here about how the class and its variables are declared, any pointers on how to set this up correctly would be much appreciated!

Here is my main program:

import processing.core.PApplet;

SensorChannel channelOne;

void setup()
{
  size(800, 450);
  smooth();

  channelOne = new SensorChannel(this, 30, 30);
}

void draw()
{
  background(0);

  println(channelOne.currentGain);
  delay(20);
}

And here is the class definition for a SensorChannel:

import processing.core.PApplet;
import controlP5.*;

class SensorChannel {
  PApplet app;
  ControlP5 cp5;

  //Moving line graph
  Chart chart;

  //CheckBox buttons;
  boolean triggered;
  boolean manualOverride;
  boolean calibrateBaseline;
  boolean calibrateGain;
  boolean calibrateTrigger;
  boolean selfControl;

  //Sliders
  int currentGain;
  int currentBalance;
  int currentReading;
  int currentTrigger;

  SensorChannel(PApplet papp, int x, int y)
  {

    app = papp;
    cp5 = new ControlP5(papp);

    println("hello!");

    //Line graph
    chart = cp5.addChart("sensorChart")
    .setPosition(x+0, y+0)
    .setSize(306, 220)
    .setRange(0, 1024)
    .setView(Chart.LINE) // use Chart.LINE, Chart.PIE, Chart.AREA, Chart.BAR_CENTERED
    .setStrokeWeight(1.5)
    .setColorCaptionLabel(color(40))
    ;

    chart.addDataSet("sensorReading");
    chart.setData("sensorReading", new float[100]);
    chart.setColors("sensorReading", color(240));

    chart.addDataSet("sensorReading");
    chart.setData("sensorReading", new float[100]);
    chart.setColors("sensorReading", color(140));

    //Reading (10bits)
    //Trigger point (10bits)

    //Balancing digipot setting (1 byte)
    cp5.addSlider("currentBalance")
    .setLabel("Balance Pot")
    .setPosition(x+0,y+284)
    .setSize(306,20)
    .setRange(0,255)
    ;
    //Gain setting (1 byte)
    cp5.addSlider("currentGain")
    .setLabel("Gain")
    .setPosition(x+0,y+263)
    .setSize(306,20)
    .setRange(0,255)
    ;

    //Current Sensor Reading (1 byte)
    cp5.addSlider("currentReading")
    .setLabel("Sensor Reading")
    .setPosition(x+0,y+221)
    .setSize(306,20)
    .setRange(0,255)
    ;

    //Trigger Point (1 byte)
    cp5.addSlider("currentTrigger")
    .setLabel("Trigger Point")
    .setPosition(x+0,y+242)
    .setSize(306,20)
    .setRange(0,255)
    ;

    //Misc. Settings Toggles
    cp5.addToggle("triggered")
    .setLabel("Trigger")
    .setPosition(x+0,y+305)
    .setSize(50,20)
    ;

    cp5.addToggle("manualOverride")
    .setLabel("Override")
    .setPosition(x+51,y+305)
    .setSize(50,20)
    ;

    cp5.addToggle("calibrateBaseline")
    .setLabel("C. Baseline")
    .setPosition(x+102,y+305)
    .setSize(50,20)
    ;

    cp5.addToggle("calibrateGain")
    .setLabel("C. Gain")
    .setPosition(x+153,y+305)
    .setSize(50,20)
    ;

    cp5.addToggle("calibrateTrigger")
    .setLabel("C. Trig")
    .setPosition(x+204,y+305)
    .setSize(50,20)
    ;

    cp5.addToggle("selfControl")
    .setLabel("S. Control")
    .setPosition(x+255,y+305)
    .setSize(50,20)
    ;

  }

  void triggered(boolean theFlag)
  {
    println("Trigger status: " + theFlag);
  }

  void manualOverride(boolean theFlag)
  {
    println("Manual Override status: " + theFlag);
  }

  void calibrateBaseline(boolean theFlag)
  {
    println("Calibrate Baseline status: " + theFlag);
  }

  void calibrateGain(boolean theFlag)
  {
    println("Calibrate Gain status: " + theFlag);
  }

  void calibrateTrigger(boolean theFlag)
  {
    println("Calibrate Trigger status: " + theFlag);
  }

  void selfControl(boolean theFlag)
  {
    println("Self Control status: " + theFlag);
  }

}

score 2 · Answer 1 · answered Dec 01 '16 at 11:06

There are few things that can be improved:

no need to call delay(). draw() gets called about 60 times a second, but you can easily (and cleanly) control using frameRate() (e.g. framerate(50);)
You are instantiating cp5 inside SensorChannel. Perhaps you can create a single ControlP5 instance in the main sketch and pass a reference to SensorChannel (re-using the instance for multiple future channels)

There are multiple ways to tap into values. You should have a look at Examples > Contributed Libraries > ControlP5 > use

One way that should be straight forward would be using Controller's plugTo() method. You pass an object to plug the controller to and as long as that object has a property of the same name as the controller it will set it's values:

import controlP5.*;

SensorChannel channelOne;
ControlP5 cp5;

void setup()
{
  size(800, 450);
  smooth();
  cp5 = new ControlP5(this);
  channelOne = new SensorChannel(this,cp5, 30, 30);
}

void draw()
{
  background(0);

  text("currentGain:"+channelOne.currentGain,10,15);
}

class SensorChannel{
  PApplet app;
  ControlP5 cp5;

  //Moving line graph
  Chart chart;

  //CheckBox buttons;
  boolean triggered;
  boolean manualOverride;
  boolean calibrateBaseline;
  boolean calibrateGain;
  boolean calibrateTrigger;
  boolean selfControl;

  //Sliders
  int currentGain;
  int currentBalance;
  int currentReading;
  int currentTrigger;

  SensorChannel(PApplet papp, ControlP5 cp5,int x, int y)
  {

    app = papp;
    this.cp5 = cp5;

    println("hello!");

    //Line graph
    chart = cp5.addChart("sensorChart")
    .setPosition(x+0, y+0)
    .setSize(306, 220)
    .setRange(0, 1024)
    .setView(Chart.LINE) // use Chart.LINE, Chart.PIE, Chart.AREA, Chart.BAR_CENTERED
    .setStrokeWeight(1.5)
    .setColorCaptionLabel(color(40));

    chart.addDataSet("sensorReading");
    chart.setData("sensorReading", new float[100]);
    chart.setColors("sensorReading", color(240));

    chart.addDataSet("sensorReading");
    chart.setData("sensorReading", new float[100]);
    chart.setColors("sensorReading", color(140));

    //Reading (10bits)
    //Trigger point (10bits)

    //Balancing digipot setting (1 byte)
    cp5.addSlider("currentBalance")
    .setLabel("Balance Pot")
    .setPosition(x+0,y+284)
    .setSize(306,20)
    .setRange(0,255)
    .plugTo(this)
    ;
    //Gain setting (1 byte)
    cp5.addSlider("currentGain")
    .setLabel("Gain")
    .setPosition(x+0,y+263)
    .setSize(306,20)
    .setRange(0,255)
    .plugTo(this);
    ;

    //Current Sensor Reading (1 byte)
    cp5.addSlider("currentReading")
    .setLabel("Sensor Reading")
    .setPosition(x+0,y+221)
    .setSize(306,20)
    .setRange(0,255)
    .plugTo(this)
    ;

    //Trigger Point (1 byte)
    cp5.addSlider("currentTrigger")
    .setLabel("Trigger Point")
    .setPosition(x+0,y+242)
    .setSize(306,20)
    .setRange(0,255)
    .plugTo(this)
    ;

    //Misc. Settings Toggles
    cp5.addToggle("triggered")
    .setLabel("Trigger")
    .setPosition(x+0,y+305)
    .setSize(50,20)
    .plugTo(this)
    ;

    cp5.addToggle("manualOverride")
    .setLabel("Override")
    .setPosition(x+51,y+305)
    .setSize(50,20)
    .plugTo(this)
    ;

    cp5.addToggle("calibrateBaseline")
    .setLabel("C. Baseline")
    .setPosition(x+102,y+305)
    .setSize(50,20)
    .plugTo(this)
    ;

    cp5.addToggle("calibrateGain")
    .setLabel("C. Gain")
    .setPosition(x+153,y+305)
    .setSize(50,20)
    .plugTo(this)
    ;

    cp5.addToggle("calibrateTrigger")
    .setLabel("C. Trig")
    .setPosition(x+204,y+305)
    .setSize(50,20)
    .plugTo(this)
    ;

    cp5.addToggle("selfControl")
    .setLabel("S. Control")
    .setPosition(x+255,y+305)
    .setSize(50,20)
    .plugTo(this)
    ;

  }

}

This is one suggestion. Feel free to explore the other ControlP5 examples on controller events and values.

Using controlp5 widgets from within a class in Processing

1 Answers1