controlp5 jumping between controlls

edited December 2015 in Library Questions

Hi there,

I am trying to figure out how could I switch (jump) between two different controlls (textfields) using controlp5 library. The expected result should be same as in browser when You want to jump between text fields using 'TAB' button. I've tried to set up an textField as 'active', but cant figure out how to do it properly.

tl.dr:

After I type anything in 'input_1' I want to press TAB or ENTER to start typing in 'input_2' field. Needed help.

import controlP5.*;

ControlP5 cp5;

void setup() {
  size(350, 300);
  GenerateGUI();
}

void draw() {
  background(#353534);
}

void GenerateGUI() {

  cp5 = new ControlP5(this);

  //"Nazwa Kontrahenta"
  cp5.addTextfield("input_1")
    .setPosition(20, 40)
    .setSize(200, 40)
    .setFocus(false)
    .setAutoClear(false)
    .setColor(color(#353534))
    .setColorBackground(color(#FFE236))
    ;

  cp5.addTextfield("input_2")
    .setPosition(20, 100)
    .setSize(200, 40)
    .setAutoClear(true)
    .setColor(color(#353534))
    .setColorBackground(color(#FFE236))
    ;

}

I would appreciate any help :)

Answers

  • Answer ✓

    ok. I figured it out by myself.

    If anyone is interested - bellow You can find a code that 'jumps' between textFields as explained above. Additional problem that occured was setting the clicked textField as active. I've also figured this out.

    import controlP5.*;
    
    ControlP5 cp5;
    
    int i=1;
    int isize=i;
    int temp;
    
    void setup() {
      size(350, 300);
      GenerateGUI();
      i=1;
    }
    
    void draw() {
      background(#353534);
    }
    
    void GenerateGUI() {
    
      cp5 = new ControlP5(this);
    
      cp5.addTextfield("input_" + i)
        .setPosition(20, 40)
        .setSize(200, 40)
        .setFocus(false)
        .setAutoClear(false)
        .setColor(color(#353534))
        .setColorBackground(color(#FFE236))
        ;
      i++;
    
      cp5.addTextfield("input_" + i)
        .setPosition(20, 100)
        .setSize(200, 40)
        .setAutoClear(false)
        .setColor(color(#353534))
        .setColorBackground(color(#FFE236))
        ;
      i++;
    
      cp5.addTextfield("input_" + i)
        .setPosition(20, 160)
        .setSize(200, 40)
        .setAutoClear(false)
        .setColor(color(#353534))
        .setColorBackground(color(#FFE236))
        ;
      i++;
    
      cp5.addTextfield("input_" + i)
        .setPosition(20, 220)
        .setSize(200, 40)
        .setAutoClear(false)
        .setColor(color(#353534))
        .setColorBackground(color(#FFE236))
        ;
      isize=i;
    }
    
    void keyPressed() {
      if (key == ENTER || key == TAB) {
    
        //
        for (temp = 1; temp == isize; temp++) {
          println("temp: " + temp);
          Textfield tfTemp = (Textfield) cp5.getController("input_"+temp); 
          if (tfTemp.isFocus() == true) {
            i=temp;
            println(temp);
          }
        }
    
        Textfield tf1 = (Textfield) cp5.getController("input_"+i);
        if (i==isize) {
          i=1;
        } else {
          i++;
        }
    
        Textfield tf0 = (Textfield) cp5.getController("input_" + i);
    
        tf1.setFocus(false);
        tf0.setFocus(true);
        println("ACTIVE: input_" + i);
      }
    }
    
    void mouseClicked() {
    
      for (int b = 0; b < isize+1; b = b+1) {
        //println("Checking if input_" + b " controll is pressed.") ;
        if (cp5.isMouseOver(cp5.getController("input_" + b)) == true ) {
          i=b;
          println("ACTIVE: input_" + i);
        }
      }
    }
    
Sign In or Register to comment.