Multiple textfields using controlP5 library and how to remove them

Processing Libraries
1

In the code I wrote here I am giving the number of textfields(max 18) as an input and when I press the button generate the number of textfields appear. The problem is that when I retype a number on the input textfield I want the previous textfields to disappear and remain only as many textfields as typed in the input textfield last time. Things look to work ok when the first time I type a number and the next time I type a larger number, but the opposite is not working. I am a begginer and I would be very grateful for your help.

import controlP5.*;

ControlP5 cp5;

Textfield textfield;
Textfield textfields;
Button button1;
int boxes=0;
String input ="";

void setup() {
  size(800, 800);
  PFont font = createFont("arial", 16);

  cp5 = new ControlP5(this);

  textfield=cp5.addTextfield("input");
  textfield.setPosition(50, 80)
    .setSize(100, 40)
    .setFont(font)
    .setColor(color(255))
    .setColorCursor(color(255))
    .setAutoClear(false)
    ;

  button1=cp5.addButton("generate");
  button1.setPosition(180, 85)
    .setSize(80, 30)
    .setLabel("generate")
    ;
}

void draw() {
  background(0, 151, 156);
  boxes = int(cp5.get(Textfield.class, "input").getText());
}

public void generate() {
  for (int i=1; i<boxes+1; i++) {
    cp5.remove("target"+i);
  }
  input = cp5.get(Textfield.class, "input").getText();
  boxes=int(input);


  if (boxes<=9) {
    for (int i=1; i<boxes+1; i++) {
      textfields = cp5.addTextfield("target"+i);
      textfields.setPosition(50, 150+(i-1)*70)
        .setSize(40, 40)
        .setId(i)
        ;
    }
  } else if (boxes>9 && boxes<=18) {
    for (int i=1; i<10; i++) {
      textfields = cp5.addTextfield("target"+i);
      textfields.setPosition(50, 150+(i-1)*70)
        .setSize(40, 40)
        .setId(i)
        ;
    }
    for (int i=10; i<boxes+1; i++) {
      textfields = cp5.addTextfield("target"+i);
      textfields.setPosition(120, 150+(i-10)*70)
        .setSize(40, 40)
        .setId(i)
        ;
    }
  }
  textfield.clear();
}
2

Hi John:

I did this for my students for removing a cp5 field or button.

hope it helps

Gord

The basic comands

to hide a button:
cp5.get(Bang.class, “MakeTable”).setVisible(false);
where “MakeTable” is the name of your button object
The above code goes in the METHOD for the BUTTON that you will want to hide when it is clicked

to hide a text field:
cp5.get(Textfield.class, “endField”).setVisible(false);
where “endField” is the name of your text field
IF THE BUTTON DISMISSING LINE HIDES THE BUTTON IMMEDIATELY, TRY THIS:
Some sample code:

// Note: cp5 compiles and executes BEFORE setup()
// so if you are assigning the starting value to hideBtn in the global area before setu() your if statement must be >1
// if you are assigning the starting value to hidBtn in setup() your if statement must be >0
PFont font;
import controlP5.*; // load the controlP5 functionality into your project
ControlP5 cp5; // create a controlP5 object for this project
int hideBtn=0;


void setup() {
  size(700, 200);
  font = createFont("arial", 20);
  createGUI(); // calls the method to creates the text field(s) and the button(s)
  textFont(font);
 println("in setup");
// hideBtn = 0;
}
void draw() {
  println(hideBtn);
  background(0);
  fill(255);
  if (hideBtn >0) {
   println("PlayAgain execute a second time.");
   cp5.get(Bang.class, "PlayAgain").setVisible(false);
   cp5.get(Bang.class, "Quit").setVisible(false);
   hideBtn=0;
  }
delay(500);
}
public void PlayAgain() {// code to execute when you want to play again
                         // it executes AT LEAST ONCE when you run the program
  println("playAgain called");
  hideBtn ++; // when this variable reaches 2 the btns will dismiss
 
}
public void Quit() {
  println("Quit called");
}
public void createGUI() { // create the fields and buttons
  cp5 = new ControlP5(this); // create an instance of the controlP5 object for this program


  cp5.addBang("PlayAgain")// creates button called 'MakeTable'
    .setPosition(200, 50)
    .setSize(150, 30)
    .setValue(0)
    .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
    ;
  cp5.addBang("Quit")// creates button called 'MakeTable'
    .setPosition(500, 50)
    .setSize(150, 30)
    .setValue(0)
    .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
    ;
}
1 Like
3

Please to format your code, check this post: Forum: specify code language

Kf