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