Using Clear in CP5 to begin again. (I am very new)

Processing Libraries
1

This is my sketch. The idea is to take a 6 digit number entry and display as a color bar the colors according to the numbers. I have 2 queries. Why is there a white bar at the beginning, and how to clear the display and the entry to begin again without running the sketch again.

import controlP5.*;

ControlP5 cp5;
/* create an array of colors 0-9.

it take   up to 6 figure number convert to string */

//int num = (int)(Math.random() * 1000000);
int num;
int potency;
int l = 6;

int[]numbers = new int[l];
color[] colornum = new color[l];

String inputText;

boolean keyPressed = false;

//color colors = new color[10];
// holds the colors needed for drawing
// color number correspondences

//red
color color0 = color(255,0,0);
//orange (102,255,255)
color color1 = color(255,128,0);
//yellow(255,255,0)
color color2 = color(255,255,0);
//green (0,255,0)
color color3 = color(0,255,0);
//blue(0.255,255)
color color4 = color(0,255,255);
//indigo(0,0,255)
color color5 = color(0,0,255);
//violet(127,0.255)
color color6 = color(127,0,255);
//pink(255,0,255)
color color7 = color(255,0,255);
//magneta(255.0,127)
color color8 = color(255,0,127);
//silver (128,128,128)
color color9 = color(128,128,128);
  
  color[] colors = {
  color0, color1, color2, color3, color4, color5, color6, color7, color8, color9
};


void setup(){
  size(200,200);
  background(255);


//numbers to digits.
convert();


cp5 = new ControlP5(this);
  cp5.addTextfield("Enter 6 digits")
  .setPosition(0, 10)
  .setSize(200,30)
  .setAutoClear(false) 
  .setFont(createFont("times",14));
  //.setColor(255);
 cp5.getController("Enter 6 digits").getCaptionLabel().setColor(color(148,0,211) );
 //cp5.getController("Enter Number").getCaptionLabel().setSize(14).setColor(255);

  
  
  cp5.addBang("clear")
     .setPosition(130,10)
     .setSize(60,20)
     .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
     ;  
  
  
    }

  


void draw(){
  //access array elements
//convert(); 
inputText = cp5.get(Textfield.class,"Enter 6 digits").getText();
text(inputText,50,70);


if (keyPressed == true){
   for (int i = 0; i < l; i++){ 
    int n = numbers[i];
 colornum[i] = colors[n];
 //println(n + "  "+ colors[n]);
 }
int sw =30;
background(255);
 for (int i = 0; i < l; i++){
   //potency = alpha,transparency 0-255
 stroke(colornum[i]);
 println(colornum);
 strokeWeight(sw);
 line((i+1)*sw, 30, (i+1)*sw  , 200); 

 }
  cp5.getController("Enter 6 digits").getCaptionLabel().setSize(1);
 noLoop();
}

}
 
 
 
 void convert(){
   

int pow; 
int i;

 
 for (i = 1;  i <l+1; i++) { pow = int(pow(10, l-i));
 numbers[i-1] = num/pow%10;   
 //println(i); 
 //println(pow);
 };
 //println(i);

// you could continue this pattern for 4,5,6 digit numbers
// dont need to print you could then use the new int values man other ways
println(numbers);
 }
 void keyPressed() { 
    if (keyCode == ENTER){
       num =  int(inputText);
       println(num);
       convert();
    keyPressed = true;

 }

 }
 
 public void clear() {
  cp5.get(Textfield.class,"Enter 6 digits").clear();
   inputText= null;
  //cp5.getController("Enter Number").getCaptionLabel().setSize(14);
 }
 
 void controlEvent(ControlEvent theEvent) {
  if(theEvent.isAssignableFrom(Textfield.class)) {
    println("controlEvent: accessing a string from controller '"
            +theEvent.getName()+"': "
            +theEvent.getStringValue()
            );
  }
}


public void input(String theText) {
  // automatically receives results from controller input
  println("a textfield event for controller 'input' : "+theText);
}
2

please format your code with tildes

``` before and after your code

also this might be a better question for the libraries board. This is for general programming questions and processing’s built in functionality.

3

i hope you not mind me messing with your code,

  • i did disable lots of lines ( // )
    after understand / agree you can clean up later
  • regarding your question: [CLEAR] button overlapped textinput field
    so CP5 internal mouse over confused,
    making textinput field smaller worked
  • you start from a library example but not tell us, and deleted the header,
    so finding a working version costs time.
  • i think from that example are 2 input text fields you confused them,
    so i reverted the naming back
  • also i shortened the color array def.
  • and disabled printing from DRAW
  • and disabled the label for the input field
  • the color_num job i moved into the controlEvent function!
  • also changed from line to rect

ok, just take a look and try it to get the ideas:

// https://discourse.processing.org/t/using-clear-in-cp5-to-begin-again-i-am-very-new/7724

import controlP5.*;

ControlP5 cp5;
/* create an array of colors 0-9.
 
 it take up to 6 figure number convert to string */

//int num = (int)(Math.random() * 1000000);
int num;
int potency;
int l = 6;

int[]numbers = new int[l];
color[] colornum = new color[l];
color[] colors = {
  color(255, 0, 0), 
  color(255, 128, 0), 
  color(255, 255, 0), 
  color(0, 255, 0), 
  color(0, 255, 255), 
  color(0, 0, 255), 
  color(127, 0, 255), 
  color(255, 0, 255), 
  color(255, 0, 127), 
  color(128, 128, 128)
};


//String inputText;
String textValue = "";

//boolean keyPressed = false;

//color colors = new color[10];
// holds the colors needed for drawing
// color number correspondences

//red
//color color0 = color(255, 0, 0);

//orange (102,255,255)
//color color1 = color(255, 128, 0);
//yellow(255,255,0)
//color color2 = color(255, 255, 0);
//green (0,255,0)
//color color3 = color(0, 255, 0);
//blue(0.255,255)
//color color4 = color(0, 255, 255);
//indigo(0,0,255)
//color color5 = color(0, 0, 255);
//violet(127,0.255)
//color color6 = color(127, 0, 255);
//pink(255,0,255)
//color color7 = color(255, 0, 255);
//magneta(255.0,127)
//color color8 = color(255, 0, 127);
//silver (128,128,128)
//color color9 = color(128, 128, 128);

//color[] colors = {
//  color0, color1, color2, color3, color4, color5, color6, color7, color8, color9
//};

void setup() {
  size(300, 200);
  background(255);

  //numbers to digits.
  convert();

  cp5 = new ControlP5(this);
  cp5.addTextfield("textValue")
    .setPosition(0, 10)
    .setSize(129, 20)                      // no overlapping with CLEAR field!
    .setAutoClear(false)
    .setFont(createFont("times", 14))
    .setLabel("")   ;
  //.setColor(255);
  //cp5.getController("Enter 6 digits").getCaptionLabel().setColor(color(148, 0, 211) );
  //cp5.getController(“Enter Number”).getCaptionLabel().setSize(14).setColor(255);

  cp5.addBang("clear")
    .setPosition(130, 10)
    .setSize(60, 20)
    .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
    ;
}
void draw() {
  //access array elements
  //convert();
  //  textValue = cp5.get(Textfield.class, "textValue").getText();
  //  text(textValue, 50, 70);

  //  if (keyPressed == true) {
  for (int i = 0; i < l; i++) {
    int n = numbers[i];
    colornum[i] = colors[n];
    //println(n + " "+ colors[n]);
  }
  //int sw =30;
  int sw = width/l;
  background(255);
  for (int i = 0; i < l; i++) {
    //potency = alpha,transparency 0-255
    //stroke(colornum[i]);
    //println(colornum);
    //strokeWeight(sw);
    //line((i+1)*sw, 30, (i+1)*sw, 200);
    fill(colornum[i]);
    rect(i*sw, 40, sw, 160);
  }
  //cp5.getController("textValue").getCaptionLabel().setSize(1);
  //noLoop();
  //  }
}

void convert() {

  int pow;
  //  int i;

  for (int i = 1; i <l+1; i++) { 
    pow = int(pow(10, l-i));
    numbers[i-1] = num/pow%10;
    //println(i);
    //println(pow);
  };
  //println(i);

  // you could continue this pattern for 4,5,6 digit numbers
  // dont need to print you could then use the new int values man other ways
  //println(numbers);
}
//void keyPressed() {
//  if (keyCode == ENTER) {
//    num = int(textValue);
//    println(num);
//    convert();
//    keyPressed = true;
//  }
//}

public void clear() {
  cp5.get(Textfield.class, "textValue").clear();
  //  inputText= null;
  //cp5.getController(“Enter Number”).getCaptionLabel().setSize(14);
}

void controlEvent(ControlEvent theEvent) {
  if (theEvent.isAssignableFrom(Textfield.class)) {
    println("controlEvent: accessing a string from controller '"
      +theEvent.getName()+"’: "
      +theEvent.getStringValue()
      );
    num = int(textValue);
    //println(num);
    convert();
  }
}

//public void input(String theText) {
// automatically receives results from controller input
//  println("a textfield event for controller ‘input’ : "+theText);
//}

looks now like this:
2019-01-22_12-33-06_snap

4

thank you. You make it look simple. and very quick . You must be a wiz.