Controlp5 Basic Example - Text Input Field

dockhands

I'm new to ControlP5 (and Processing), and want to allow the user to enter two strings (URLs) into a text field, which will then pass into a variable once a Submit button is pressed.

In my example below, I'd like to pass the "textInput_1" and "textInput_2"and pass it into a stored variable that I can user else where.

Thanks!

Code:

import controlP5.*;

ControlP5 cp5;

String textValue = "";

void setup() {
  size(700, 400);

  PFont font = createFont("arial", 20);

  cp5 = new ControlP5(this);

  cp5.addTextfield("textInput_1")
    .setPosition(20, 100)
      .setSize(200, 40)
        .setFont(font)
          .setFocus(true)
            .setColor(color(255, 0, 0))
              ;

  cp5.addTextfield("textInput_2")
    .setPosition(20, 170)
      .setSize(200, 40)
        .setFont(createFont("arial", 20))
          .setAutoClear(false)
            ;

  cp5.addBang("Submit")
    .setPosition(240, 170)
      .setSize(80, 40)
        .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
          ;    

  textFont(font);
  intro();
}



void intro () {

  background(0);
  fill(255);
  text(cp5.get(Textfield.class, "textInput_1").getText(), 360, 130);
  text(textValue, 360, 180);
}


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

void draw () {

}

void showInput () {

  //println(textInput_1) ; 
  // println(textInput_2) ; 
}

sojamo

Hi, since this is a contributed libraries related questions, could you move this thread over to 'Questions about Libraries'. The example below shows you how to transfer the content of your textfields into a String variable when the Submit button is pressed. Notice that the submit button and the function that handles the transfer have the same name which is then automatically detected and handled by controlP5.

import controlP5.*;

ControlP5 cp5;

String url1, url2;

void setup() {
  size(700, 400);
  cp5 = new ControlP5(this);
  cp5.addTextfield("textInput_1").setPosition(20, 100).setSize(200, 40).setAutoClear(false);
  cp5.addTextfield("textInput_2").setPosition(20, 170).setSize(200, 40).setAutoClear(false);
  cp5.addBang("Submit").setPosition(240, 170).setSize(80, 40);    

}


void draw () {
  background(0);
}

void Submit() {
  print("the following text was submitted :");
  url1 = cp5.get(Textfield.class,"textInput_1").getText();
  url2 = cp5.get(Textfield.class,"textInput_2").getText();
  print(" textInput 1 = " + url1);
  print(" textInput 2 = " + url2);
  println();
}

dockhands

Beauty! Works like a charm! Thanks.

I think someone else must have moved it to the appropriate section... as it is now in Libraries.

georgia

In your example, the text color is red. I've scoured the code and can't figure out where you set this color.