how to reset the value of Textfield in controlP5? or I want to reset the shape

Question

I am trying to create an app that draws shapes using processing. I'm about to reach my goal. However, the reset button does not work as expected.

In my code, the text field disappears instead of the shape disappearing.

What I want to do is that the shape disappears when I press the reset button. I want to erase the contents of TextField or erase the shape.

import controlP5.*;

ControlP5 cp5;
Button bt0;
Textarea ta0;
Textfield tf0;
Textfield tf1;
DropdownList dl0;

String[]items ={"circle", "square"};

void setup() {
  size(500, 650);
  cp5 = new ControlP5(this);

  bt0 = cp5.addButton("bt0");
  bt0.setPosition(360, 500);
  bt0.setSize(120, 30);
  bt0.setFont(createFont("SansSerif", 20));
  bt0.setLabel("Clear");
  bt0.setColorCaptionLabel(#000000);
  bt0.setColorBackground(#dddddd);

  //TextField
  tf0 = cp5.addTextfield("tf0");
  tf0.setPosition(20, 500);
  tf0.setSize(100, 30);
  tf0.setFont(createFont("SansSerif", 20));
  tf0.setLabel("X");
  tf0.setColorCaptionLabel(#000000);
  tf0.setColor(#000000);
  tf0.setColorBackground(#ffffff);

  tf1 = cp5.addTextfield("tf1");
  tf1.setPosition(130, 500);
  tf1.setSize(100, 30);
  tf1.setFont(createFont("SansSerif", 20));
  tf1.setLabel("Y");
  tf1.setColorCaptionLabel(#000000);
  tf1.setColor(#000000);
  tf1.setColorBackground(#ffffff);

  dl0 = cp5.addDropdownList("dl0");
  dl0.setPosition(250, 500);
  dl0.setSize(100, 200);
  dl0.setBarHeight(35);
  dl0.setItemHeight(35);
  dl0.setFont(createFont("SansSerif", 20));
  dl0.setLabel("shape select");
  dl0.setColorCaptionLabel(#000000);
  dl0.setColorValue(#000000);
  dl0.setColorBackground(#FFFFFF);
  dl0.addItems(items);
  dl0.setValue(-1);
  dl0.close();
}

void draw() {

  int value = int(dl0.getValue());
  background(#AAAAAA);

  if ((value >=0)&&(value < items.length)) {
    fill(#FFFFFF);
    stroke(1);
    if (items[value] == "circle") {
      x = int(tf0.getText());
      y = int(tf1.getText());
      ellipse(x, y, 100, 100);
    } else if (items[value] == "square") {
      x = int(tf0.getText());
      y = int(tf1.getText());
      rect(x, y, 100, 100);
    }
  }
}

// clear button clicked
void bt0() {
////textField remove..!  I want to erase the contents of TextField and erase the shape
  //cp5.get("tf0").remove();　
  //cp5.get("tf1").remove();
}

Answer 1

You set the value of a CP5 TextField by using the setText method. You could set them both to 0 or an empty string to "reset" them.

Since you draw the shape based on the value of the dropdown control you'll need to reset that as well, otherwise you'll just be drawing the selected shape at 0,0 (since those are the new values of the textfields).

Something like this should work:

void bt0() {
  // clear the textfields
  tf0.setText("");
  tf1.setText("");

  // clear the value of the dropdown and reset the label
  dl0.setValue(-1);
  dl0.setLabel("shape select");
}