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

**URL:** https://discourse.processing.org/t/using-clear-in-cp5-to-begin-again-i-am-very-new/7724
**Category:** Libraries
**Created:** [January 22, 2019, 3:57am UTC](https://discourse.processing.org/t/using-clear-in-cp5-to-begin-again-i-am-very-new/7724 "2019-01-22T03:57:46Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![angelman](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@angelman](https://discourse.processing.org/u/angelman)
#### Post date: [January 22, 2019, 3:57am UTC](https://discourse.processing.org/t/using-clear-in-cp5-to-begin-again-i-am-very-new/7724/1 "2019-01-22T03:57:46Z")

</div>

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.

```auto
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);
}

```

---

<div class="post-metadata">

### Author: ![JackWitherell](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jackwitherell/32/3361_2.png) [@JackWitherell](https://discourse.processing.org/u/JackWitherell)
#### Post date: [January 22, 2019, 3:59am UTC](https://discourse.processing.org/t/using-clear-in-cp5-to-begin-again-i-am-very-new/7724/2 "2019-01-22T03:59:59Z")

</div>

please format your code with tildes

``` before and after your code

also this might be a better question for [the libraries](https://discourse.processing.org/c/processing/processing-libraries) board. This is for general programming questions and processing’s built in functionality.

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [January 22, 2019, 5:27am UTC](https://discourse.processing.org/t/using-clear-in-cp5-to-begin-again-i-am-very-new/7724/3 "2019-01-22T05:27:10Z")

</div>

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:

```auto
// 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/813d2e9ef9832b727abee5dc6296b8c413ed8eda.png)

---

<div class="post-metadata">

### Author: ![angelman](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@angelman](https://discourse.processing.org/u/angelman)
#### Post date: [January 22, 2019, 8:16am UTC](https://discourse.processing.org/t/using-clear-in-cp5-to-begin-again-i-am-very-new/7724/4 "2019-01-22T08:16:25Z")

</div>

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