Resizing a ControlP5 text field

Processing Libraries
1

My goal is simply to be able to resize a ControlP5 text field when the window is resized.

import controlP5.*;
ControlP5 cp5;

void setup(){
size(1080, 640);
    background(197,217,227);
    surface.setResizable(true);

    cp5 = new ControlP5(this);
    
    cp5.addTextfield("pyrolysisChamberFanRPMControl")
       .setPosition(30 + width / 16, 2 * (width / 6) + 30 + (width / 60))
       .setSize(width / 8, width / 60)
       .setFont(font)
        //.hide()
       .setCaptionLabel("Pyrolysis Chamber Fan Control")
       .setColor(color(255, 2, 141))
       .setColorBackground(color(167,187,207))
       .setColorCaptionLabel(color(255, 2, 141))
       .setColorActive(color(107,157,167))
       ;

}

void draw(){
 cp5.get(Textfield.class,"pyrolysisChamberFanRPMControl")
       .setPosition(30 + width / 16, 2 * (width / 6) + 30 + (width / 60))
       .setSize(width / 8, width / 60)
       .updateSize()
       ;
}

This code excerpt properly resizes the text box to where I want it to go, however, (1) I can no longer click inside the box and enter a value. And (2) if I force the ability to enter a value with setFocus() the entered value does not scale. In other words, the font for both the entered value and the label text remains the same size as it was with the original window size.

Thanks,
Hawk

2

Hi Hawk,

When I load your code I am able to resize and enter the TextField after resizing. So, I am not sure what exactly is going on on your end with respect to that.

In terms of scaling the text size I don’t use ControlP5, so I an not familiar with the attributes. I didn’t find a text or font size attribute in the docs after a quick scan. Perhaps, someone with more experience using the library can provide a solution. However, I am wondering if a work around could be to recreate the font in your draw loop? This doesn’t seem like the proper solution and I am not sure what the load is if you have a lot of TextFields or other GUI elements.

Here is an example using your original code. I added the background to the draw loop to test the ability to enter and get the value as I re-print it above the TextField. Also, there was no font set in the original code so swap that with your desired font.

import controlP5.*;

ControlP5 cp5;
PFont font;

void setup() {
size(1080, 640);
    background(197,217,227);
    
    // desired font here
    font = createFont("arial", 8);
    
    surface.setResizable(true);

    cp5 = new ControlP5(this);
    
    cp5.addTextfield("pyrolysisChamberFanRPMControl")
       .setPosition(30 + width / 16, 2 * (width / 6) + 30 + (width / 60))
       .setSize(width / 8, width / 60)
       .setFont(font)
        //.hide()
       .setCaptionLabel("Pyrolysis Chamber Fan Control")
       .setColor(color(255, 2, 141))
       .setColorBackground(color(167,187,207))
       .setColorCaptionLabel(color(255, 2, 141))
       .setColorActive(color(107,157,167))
       ;
}

void draw() {
  background(197,217,227);
  
  // map fontSize as desired
  float fontSize = int(map(width, 1000, 1400, 6, 17));
  
  // bound check
  if(fontSize < 6) fontSize = 6;
  if(fontSize > 17) fontSize = 17;
  
  // update font
  font = createFont("arial", fontSize);
  
  // update TextField
  cp5.get(Textfield.class,"pyrolysisChamberFanRPMControl")
    .setPosition(30 + width / 16, 2 * (width / 6) + 30 + (width / 60))
    .setSize(width / 8, width / 60)
    .updateSize()
    .setFont(font);
  ;
  
  // get TextField input and display
  String FanRPMString = cp5.get(Textfield.class,"pyrolysisChamberFanRPMControl").getText();
  textSize(fontSize);
  text(FanRPMString,
       30 + width / 16, 
       2 * (width / 6) + (width / 60) + (width / 60));   
}

I hope that is a temporary work around. If not, please share more about your issue.

3

This is very strange. And I guess an issue with my machine? If I load your code exactly as you pasted it, I can not reenter the text field after a resize. However, there is a qualifier to that. It seems that it is only when I make the window wider than about 1700 pixels that it stops working for me. As long as I stay smaller than that everything is fine. But of course, I need to go wider than that.

I’ll try other processing versions to see if this is a weird bug in 3.5.4, but I am using code that processing 4 can’t run because of a bug so I can’t just change even if it works. I’ll also see if I can use a text field from another library, and just use it instead. But if I figure anything out I’ll let you know.

4

That is very odd. Another thing to consider is whether you need a TextField in the first place. If you are setting RPM perhaps using a slider might be easier as you can set limits and you don’t have to check for valid input. It is also far easier to create a your slider class than a TextField. I’ve created a couple custom sliders for some of my projects if you need help.

1 Like
5

Update, I got it to resize correctly, and be able to have an input in the text box by putting the resizing code in an if statement in the draw loop that only activates once when the window is resized.

However, I didn’t even consider using something other than a text box, and I love the idea of sliders! I will DM you @ASHER if I need help with that. Thank you for the idea!!!