javaprocessingcontrol-p5

Why is the comma in two text fields put at the same time without focusing?

How can I change conditions in code when comma is pressed? So that the comma does not appear simultaneously in two text boxes 1 and 2 when typing, but separately? The same thing happens with the limitation of characters in these text fields. How to split the processing of two text fields among themselves! Why is the comma placed without focusing text fields? Foto: enter image description here Complete code:

import controlP5.*;

ControlP5 cp5;
Textfield X9;
Textfield X10;

void setup() {
  size(700,400);
  
  PFont font = createFont("arial",20);
  
  cp5 = new ControlP5(this);
  
  X9 = cp5.addTextfield("1")
     .setPosition(20,100)
     .setSize(200,40);
     X9.setInputFilter(ControlP5.INTEGER)
     .setFont(font)
     .setAutoClear(false)
     .setColor(color(255,0,0))
     ;
                 
  X10 = cp5.addTextfield("2")
     .setPosition(20,170)
     .setSize(200,40);
     X10.setInputFilter(ControlP5.INTEGER)
     .setFont(createFont("arial",20))
     .setAutoClear(false)
     ;
     
  textFont(font);}
void draw() {
  background(0);
  fill(255);}
public void keyPressed(KeyEvent e) {
  if (e.getKey() == ','){
  X9.setText(X9.getText() + ',');}
  {
//  if(X10.getText().length()>=4) { X10.setText(X10.getText().substring(0, 3));}
  {
if (e.getKey() == ','){
  X10.setText(X10.getText() + ',');}
  {
 // if(X9.getText().length()>=4) { X9.setText(X9.getText().substring(0, 3));}
  }}}
}
Solution

  • Why is the comma placed without focusing text fields?

    Because you are using the global keyPressed() event. This condition: if (e.getKey() == ',') checks that the , key is pressed and it's redundant to check twice in your case. It's equivalent to this simpler/cleaner snippet:

    public void keyPressed(KeyEvent e) {
  if (key == ','){
    X9.setText(X9.getText() + ',');
    X10.setText(X10.getText() + ',');
  }
}

    There isn't any check if a field is focused or not.

    You probably meant something like this ?:

    public void keyPressed(KeyEvent e) {
  if (key == ',') {
    if (X9.isFocus()) {
      X9.setText(X9.getText() + ',');
    }
    if (X10.isFocus()) {
      X10.setText(X10.getText() + ',');
    }
  }
}

    Overall it's unclear what the main goal is. Perhaps there's a simpler way to achieve it ?

    Remeber that you can listen for individual controlP5 component events via void controlEvent(ControlEvent event). See Processing > Examples > Contributed Libraries > ControlP5 > controllers > ControlP5Textfield for a nice demo.

    Additionally I recommend formatting/keeping code tidy. It may be a quick throw-away sketch, but buiilding a good habbit will pay off as you'll spend way more time reading code than writing code. As your programs become larger and larger you'll want to make life easier for your future self :)

    Update Based on your comments here is a minimal sketch that should allow you control a floating point number between 7.4 and 16.8 and an integer number between 1800-1900:

    import controlP5.*;

ControlP5 cp5;

int serialInt = 1800;

float serialFloat = 7.4;

void setup() {
  size(300,300);
  noStroke();
  cp5 = new ControlP5(this);
  
  cp5.addNumberbox("serialInt")           // notice the component name matches the variable name: controlP5 links the two for you
     .setBroadcast(false)                 // disable events while we update value specific properties 
     .setPosition(100,100)                // screen location
     .setSize(100,20)                     // screen dimensions
     .setMultiplier(10)                   // set the sensitifity of the numberbox: each step is 10
     .setDirection(Controller.HORIZONTAL) // change the control direction to left/right
     .setRange(1800, 9000)                // set minimum, maximum value
     .setBroadcast(true)                  // enable events (after setting range)
     ;
  

  cp5.addNumberbox("serialFloat")
     .setBroadcast(false)                 // disable events while we update value specific properties
     .setPosition(100,140)                // screen location
     .setSize(100,20)                     // screen dimensions
     .setMultiplier(0.01)                 // set the sensitifity of the numberbox: each step is 0.01
     .setDirection(Controller.HORIZONTAL) // change the control direction to left/right
     .setRange(7.4,16.8)                  // set minimum, maximum value
     .setBroadcast(true)                  // enable events (after setting range)
     ;
  
}
void draw() {
  background(0);
}
// gets called whenever a component updates value
void controlEvent(ControlEvent event){
  println(event.getController().getName(),"changed value to",event.getValue(),"serialInt = ",serialInt,"serialFloat = ",serialFloat);
}

    Click and drag horizontally to change values. Notice a few helpful things that ControlP5 provides:

    Regarding data over serial:

    For example:

    void serialWriteWord(Serial port,int value){
  port.write(highByte(value));
  port.write(lowByte(value));
}

byte lowByte(int word){
  return (byte)(word & 0xff);
}

byte highByte(int word){
  return (byte)(word >> 8);
}

    The serial communication part is a totally separate issue (for another question)