The slider of cp5 library is not responsive

Processing Electronics (Arduino, etc.)
1

hello everyone
i am using cp5 library to get and represent json data “sensors values” from arduino and from the processing program i want to send to parameters to arduino “percentage and frequency”, i am using two sliders but they are not responsive and don’t work at all, can anybody tell me what is my mistake.

here is the code of processing:

import controlP5.*;
import processing.serial.*;

Serial port;
ControlP5 cp5;

String dataline;
int sV0=0;
int sV1=0;

Textarea myTextarea1;
Textarea myTextarea2;
Textarea myTextarea3;
Textarea myTextarea4;

JSONObject json;



void setup(){
size(300,250);

printArray(Serial.list());
port= new Serial(this,"COM3",9600);

cp5 = new ControlP5(this);

myTextarea1 = cp5.addTextarea("txt1")
                  .setPosition(25,25)
                  .setSize(200,200)
                  .setFont(createFont("arial",12))
                  .setLineHeight(14)
                  .setColor(color(128))
                  .setColorBackground(color(255,100))
                  .setColorForeground(color(255,100));
myTextarea1.setText("Current Led 1:");

myTextarea2 = cp5.addTextarea("txt2")
                  .setPosition(25,50)
                  .setSize(200,200)
                  .setFont(createFont("arial",12))
                  .setLineHeight(14)
                  .setColor(color(128))
                  .setColorBackground(color(255,100))
                  .setColorForeground(color(255,100));
myTextarea2.setText("Current Led 2:");

myTextarea3 = cp5.addTextarea("txt3")
                  .setPosition(110,25)
                  .setSize(200,200)
                  .setFont(createFont("arial",12))
                  .setLineHeight(14)
                  .setColor(color(128))
                  .setColorBackground(color(255,100))
                  .setColorForeground(color(255,100));
myTextarea3.setText(sV0+"");

myTextarea4 = cp5.addTextarea("txt4")
                  .setPosition(110,50)
                  .setSize(200,200)
                  .setFont(createFont("arial",12))
                  .setLineHeight(14)
                  .setColor(color(128))
                  .setColorBackground(color(255,100))
                  .setColorForeground(color(255,100));
myTextarea4.setText(sV1+"");

//////////sliders
cp5.addSlider("percente")
     .setRange(0,100)
     .setValue(100)
     .setPosition(50,100)
     .setSize(200,30);
     
cp5.addSlider("frequency")
     .setRange(1,250)
     .setValue(250)
     .setPosition(50,150)
     .setSize(200,30);

}


void draw(){
background(255,255,255);

fill(0,0,0);
textSize(20);
text("PWM Controller",90,20);


fill(0,0,0);
textSize(14);
text("Duty cycle",110,90);

fill(0,0,0);
textSize(14);
text("Frequency",110,145);

println(cp5.getValue("percente"));

if(port.available()>0){
dataline = port.readStringUntil('\n');
  if ( dataline != null ) {
            println( dataline );
            
            try {
                json = JSONObject.parse( dataline );
                sV0 = json.getInt( "sV0" );
                sV1 = json.getInt( "sV1" );
            } 
            catch ( Exception e ) {
                e.printStackTrace();
            }
  }
}
   myTextarea3.setText(sV0+"");
   myTextarea4.setText(sV1+"");  
   
   
}
1 Like
2

Please go back and edit your post. Select your code and hit the </> button. This ensures your code is not processed as markdown in the forum and formats it here for easy readability.

Kf

1 Like
3

Hello and welcome to the Processing forum,

Please format your code:
https://discourse.processing.org/faq#format-your-code

:slight_smile:

1 Like
4

For reference, here is the CP% Slider docs: http://www.sojamo.de/libraries/controlP5/reference/controlP5/Slider.html

The problem is that you have test areas too big. Try this:

  myTextarea3 = cp5.addTextarea("txt3")
    .setPosition(110, 25)
    .setSize(200, 20)   //<-----CHANGE
    .setFont(createFont("arial", 12))
    .setLineHeight(14)
    .setColor(color(128))
    .setColorBackground(color(255, 100))
    .setColorForeground(color(255, 100));
  myTextarea3.setText(sV0+"");

Keep in mind to provide working code independent of your Arduino as this issue is with CP5 and not with your serial or Arduino code. It makes troubleshooting so much easier.

For the record, here below is the code I used for troubleshooting.

Kf

import controlP5.*;



ControlP5 cp5;

String dataline;
int sV0=0;
int sV1=0;

Textarea myTextarea1;
Textarea myTextarea2;
Textarea myTextarea3;
Textarea myTextarea4;

JSONObject json;



void setup() {
  size(300, 250);
  cp5 = new ControlP5(this);

  myTextarea1 = cp5.addTextarea("txt1")
    .setPosition(25, 25)
    .setSize(200, 20)
    .setFont(createFont("arial", 12))
    .setLineHeight(14)
    .setColor(color(128))
    .setColorBackground(color(255, 100))
    .setColorForeground(color(255, 100));
  myTextarea1.setText("Current Led 1:");

  myTextarea2 = cp5.addTextarea("txt2")
    .setPosition(25, 50)
    .setSize(200, 20)
    .setFont(createFont("arial", 12))
    .setLineHeight(14)
    .setColor(color(128))
    .setColorBackground(color(255, 100))
    .setColorForeground(color(255, 100));
  myTextarea2.setText("Current Led 2:");

  myTextarea3 = cp5.addTextarea("txt3")
    .setPosition(110, 25)
    .setSize(200, 20)
    .setFont(createFont("arial", 12))
    .setLineHeight(14)
    .setColor(color(128))
    .setColorBackground(color(255, 100))
    .setColorForeground(color(255, 100));
  myTextarea3.setText(sV0+"");

  myTextarea4 = cp5.addTextarea("txt4")
    .setPosition(110, 50)
    .setSize(200, 20)
    .setFont(createFont("arial", 12))
    .setLineHeight(14)
    .setColor(color(128))
    .setColorBackground(color(255, 100))
    .setColorForeground(color(255, 100));
  myTextarea4.setText(sV1+"");

  //////////sliders
  cp5.addSlider("percente")
    .setRange(0, 100)
    .setValue(100)
    .setPosition(50, 100)
    .setSize(200, 30);

  cp5.addSlider("frequency")
    .setRange(1, 250)
    .setValue(250)
    .setPosition(50, 150)
    .setSize(200, 30);
    
    //noLoop();
}

void percente(float val){
println("%",val);
}

void frequency(float val){
println("freq",val);
}

void draw() {
  background(255, 255, 255);

  fill(0, 0, 0);
  textSize(20);
  text("PWM Controller", 90, 20);


  fill(0, 0, 0);
  textSize(14);
  text("Duty cycle", 110, 90);

  fill(0, 0, 0);
  textSize(14);
  text("Frequency", 110, 145);

  if(frameCount%300==0) println(cp5.getValue("percente"));



  dataline="{ \"sV0\": 100,\"sV1\": 9999}";
  if ( dataline != null ) {
    println( dataline );

    try {
      json = parseJSONObject( dataline );
      println(json);
      sV0 = json.getInt( "sV0" );
      sV1 = json.getInt( "sV1" );
    } 
    catch ( Exception e ) {
      e.printStackTrace();
    }
  }

  myTextarea3.setText(sV0+"");
  myTextarea4.setText(sV1+"");
}
1 Like