ControlP5, How to set the maximum number of characters in a Text Field?

I would like to allow a user to insert a maximum of 10 characters in the text field…
Been looking and cannot find any option for that. Researched online, found nothing.
Thank you for your help.

Hi @jhsa

Looking into the documentation I didn’t find any way to limit the number of input characters in the text field. However, I found the following discussion, which you could also come across:

https://forum.processing.org/two/discussion/11864/textfield-in-cp5.html

Following the discussion I implemented the following code, check if it works!

import controlP5.*;

ControlP5 cp5;

String textValue = "";

void setup() {
  size(700,400);
  
  PFont font = createFont("arial",20);
  
  cp5 = new ControlP5(this);
  
  cp5.addTextfield("input")
     .setPosition(20,100)
     .setSize(200,40)
     .setFont(font)
     .setFocus(true)
     .setColor(color(255,0,0))
     ;
  textFont(font);
}

void draw() {
  background(0);
  fill(255);
  text(cp5.get(Textfield.class,"input").getText(), 360,130);
  text(textValue, 360,180);
  
  text("char counter = " + count, 370,170);
}


int count = 0;
void keyTyped(){
  if(cp5.get(Textfield.class,"input").isActive()){
    if(key == BACKSPACE || key == DELETE){
      count--;
      
    } else count ++;
    if(count < 0) count = 0;
    
    if(count > 10){
      String textString = cp5.get(Textfield.class,"input").getText();
      cp5.get(Textfield.class,"input").setText(textString.substring(0,10));
      count--;
    }
  }
}

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

Best regards,

1 Like

Hi,Thank you. It works, but it gives an error and crashes if I hit enter and try to write again.

If I reset the counter to zero as shown below, I can hit enter without errors, but if I keep typing and hitting Enter, I will still have the error at some point, although not every time I do it.
The error is:
“StringIndexOutOfBoundsException:”

public void input(String theText) {
  // automatically receives results from controller input
  println("a textfield event for controller 'input' : "+theText);
  count = 0;
}

@MiguelSanches

Thanks!

This will work nicely for a project I am working on.

I got it working for the maximum positive integer input:

My final version has lots of error checking for my needs.
I just shared the bare minimum to show my approach to this.

Before “Enter”:

image

After “Enter”:

image

:)

1 Like

Hi @jhsa,

I guess you can do something like this:

import controlP5.*;

ControlP5 cp5;

String textValue = "";

void setup() {
  size(700,400);
  
  PFont font = createFont("arial",20);
  
  cp5 = new ControlP5(this);
  
  cp5.addTextfield("input")
     .setPosition(20,100)
     .setSize(200,40)
     .setFont(font)
     .setFocus(true)
     .setColor(color(255,0,0))
     ;
  textFont(font);
}

void draw() {
  background(0);
  fill(255);
  text(cp5.get(Textfield.class,"input").getText(), 360,130);
  text(textValue, 360,180);
  
  text("char counter = " + count, 370,170);
}


int count = 0;
void keyTyped(){
  if(cp5.get(Textfield.class,"input").isActive()){
    if(key == ENTER){
      count = 0;
      cp5.get(Textfield.class,"input").clear(); 
    } else if(key == BACKSPACE || key == DELETE){
      count--;
    } else count ++;
    
    if(count < 0) count = 0;
    else if(count > 10){
      String textString = cp5.get(Textfield.class,"input").getText();
      cp5.get(Textfield.class,"input").setText(textString.substring(0,10));
      count--;
    }
  }
}

Basically if you type ENTER, then the counter resets and clears the text field

Hope it helps!

1 Like

Hi, thank you for hanging in there. I am sure this topic will help a lot of people because there isn’t much info online about how to do this.
I have tried your latest suggestion with the “Enter” key, but I am getting the same error after cycling the text field a few times. What would cause this error? Please see photo. Thanks

Hi @jhsa,

I tested the code that I have sent you and didn’t get the error thrown. If you can’t post the full code I can’t test to find the error. Can you reproduce it in a simpler code?
Maybe just try having the textfield and see if it still happens?
The logic for the error is simple. If it is entering the in the substring that throws the error is because the counter is becoming higher than 10 despite the string not having 10 characters. So, something is off.

Best regards!

1 Like

It also happens with your code as you can see in the picture. The error appears to be trigger more often when I use the key combination “SHIFT” + " * ". Not very easy to make it happen.
Some extra info. I am on Windows 7.
I am using Processing 4.
I could post my code, but no way to post a PDE file here, which is not good considering that this is a “Processing” forum. Perhaps the Administrators could allow “.pde” extensions as well? It would make life easier for everybody. Just my 2 cents :slight_smile:
And thank you so much.

I will take a look and let you know tomorrow perhaps!

Thank You so much Miguel…

@jhsa

but no way to post a PDE file here

This is a .pde file; not sure I understand the posting problem?

color BLUE = color(64,124,188);
    
void setup() {
  fullScreen();
  orientation(LANDSCAPE);
  background(BLUE);
}

void draw() {
  
}

As far as I understand, that is some text you inserted in the text box, not a file that you uploaded.
And the problem is that there is a character limit on every post.
My full code has already more than 5 or 6 thousand lines all together. How many posts would I have to make to post the full code then? :wink:

It’s just a simple copy/paste into source code block created by three grave accent characters above and below the code. Hit ‘select all’ in your .pde file then copy/paste the selected text in between the grave accent characters; it’s how we format code in this forum. When your code is posted here there will be a little copy icon in the top right corner so that the folks trying to help you can try to reproduce the problem on their systems. Better yet condense the problem into a simple demo which shows the problem and post that; that way we don’t have to sift through all five to six thousand lines of code.

I tried before and it won’t fit. Too many characters.
And how do you make a demo if for example all code is related? Not that easy. It would be easy to just upload the whole thing.

And I mentioned the full code because most of the people here ask for it… Just like a few posts above.
So yes, in my humble opinion, we should be able to upload .PDE files.
It is up to the admins to allow that of course.

If you just must post all of the code then another option would be to put the project up on DropBox or Github and post a link.

1 Like

Hi @jhsa,

So I think the problem had to do with keyCoded keys, like TAB, SHIFT and special characters like ~, where combo keys are used.
Thus, I decided to change the approach as follows:

int count = 0;
void keyTyped(){
  if(cp5.get(Textfield.class,"input").isActive()){
    String textString = cp5.get(Textfield.class,"input").getText();
    count = textString.length();
    if(count > 10){
      cp5.get(Textfield.class,"input").setText(textString.substring(0,10));
    }
  }
}

Basically, every time you type a key, get the string, count its length and just write the substring if the length is higher than the desired value of 10.

Test it and I hope it works!
Best regards

PS: if there are special characters that you don’t want the user to be able to use I would suggest you to look into regex (regular expressions) :wink:

3 Likes

This approach seems to work. At least, I still didn’t see any error after trying quite hard to make it happen.
Also for integrating this code on my code, I guess I could simplify it and drop the “count” variable by using “if(textString.length() > 10) {” instead?

Yes, there are some special characters that the device does not recognize. Would you please point me to some documentation or examples? Thank you.

Thank you again and all the best…

Also for integrating this code on my code, I guess I could simplify it and drop the “count” variable by using “if(textString.length() > 10) {” instead?

Yes you can do it like that if you want to

Yes, there are some special characters that the device does not recognize. Would you please point me to some documentation or examples? Thank you.

Here are a few, but you can and should search for more until you are confident

All the best !

1 Like

Thank you so much for your time. Really appreciated.

1 Like