Text box

edited September 2014 in Questions about Code

Hello everyone, I am working on a project where the user needs to input text into several different text boxes. I made this code for a couple of text box, but would like to be able to move the text cursor with the arrow keys to edit the text. Is there any way to do this? I have already tried to use ControlP5 but this is a multi view application, so that library will not work. I have also searched the internet and have found NOTHING.

int currentString = 0;
String current = "";
String art1T = "";
String art1B = "";
String art2T = "";
String art2B = "";

color art1Tc= 150;
color art1Bc= 150;
color art2Tc= 150;
color art2Bc= 150;

int art1Tp;
int art1Bp;
int art2Tp;
int art2Bp;
void setup(){
  size(1000,700);
  background(200);
}

void draw() {
  float art1Tp = textWidth (art1T);
    float art1Bp = textWidth (art1B);
    float art2Tp = textWidth (art2T);
    float art2Bp = textWidth (art2B);
   stroke(100);
    if (mouseX >= 250 && mouseX <= 900 && 
    mouseY >= 50 && mouseY <= 80) {
      if(mousePressed){
        currentString = 1;
        current = art1T;
      }
    }
    fill(art1Tc);
    rect(250,50,650,30,10);

    if (mouseX >= 250 && mouseX <= 900 && 
    mouseY >= 100 && mouseY <= 220) {
      if(mousePressed){
        currentString = 2;
        current = art1B;
      }
    }
    fill(art1Bc);
    rect(250,100,650,120,10);

    if (mouseX >= 250 && mouseX <= 900 && 
    mouseY >= 240 && mouseY <= 270) {
      if(mousePressed){
        currentString = 3;
        current = art2T;
      }
    }
    fill(art2Tc);
    rect(250,240,650,30,10);


    if (mouseX >= 250 && mouseX <= 900 && 
    mouseY >= 290 && mouseY <= 410) {
      if(mousePressed){
        currentString = 4;
        current = art2B;
      }
    }
    fill(art2Bc);
    rect(250,290,650,120,10);

    fill(0);
    stroke(0);


    if(currentString == 1){
      line(art1Tp+260, 55, art1Tp+260, 75);
      art1T = current;
      art1Tc= 250;
      art1Bc= 150;
      art2Tc= 150;
      art2Bc= 150;
    }else if(currentString == 2){
      line(art1Bp+260, 105, art1Bp+260, 125);
      art1B = current;
      art1Tc= 150;
      art1Bc= 250;
      art2Tc= 150;
      art2Bc= 150;
    }else if(currentString == 3){
      line(art2Tp+260, 245, art2Tp+260, 265);
      art2T = current;
      art1Tc =150;
      art1Bc =150;
      art2Tc =250;
      art2Bc =150;
      }else if(currentString == 4) {
      line(art2Bp+260, 295, art2Bp+260, 315);
      art2B = current;
      art1Tc =150;
      art1Bc =150;
      art2Tc =150;
      art2Bc =250;
      }



    text("Article 1 title",250,45);
    text(art1T, 260, 70);
    text("Article 1 body",250,95);
    text(art1B, 260, 120);
    text("Article 2 title",250,235);
    text(art2T,260,260);
    text("Article 2 body",250,285);
    text(art2B,260,310);
    }

    void keyPressed() {
  if (keyCode == BACKSPACE) {
    if (current.length() > 0) {
      current = current.substring(0, current.length()-1);
    }
  } else if (keyCode != SHIFT && keyCode != CONTROL && keyCode != ALT) {
    current = current + key;
  }
}

-Thanks in advance, RywesTech.

www.RywesTech.com

Answers

  • Have you tried G4P? What do you mean with multi-view? Will there be more windows generated by the program?

  • int state = 0;
    String s="";
    
    void setup() {
      size(220, 220);
    }
    
    void draw() {
      if (state==0) {
        background(0);
        fill(255);
        text("Type \"start\" to start!", 20, 20);
        fill(255, 255, 0);
        text(s, 20, 50);
      }
      if (state==1) {
        background(0);
        fill((millis()+100)%255, (millis()+200)%255, millis()%255);
        ellipse(mouseX, mouseY, 20, 20);
      }
    }
    
    void keyPressed() {
      if (state==0) {
        if (key>='a'&&key<='z') {
          s+=key;
        }
        if (key==ENTER||key==RETURN) {
          if (s.equals("start")) {
            state = 1;
          }
          s="";
        }
      }
    }
    
    void mousePressed(){
      if(state==1){
        state=0;
      }
    }
    

    Try this. I asked that question some time ago, but making text boxes is not really possible in processing. This works though.

    You can also try this too:

    // the states of the program like start 
    // screen / pause screen / enter name screen
    // we start by giving the states names 
    final int stateReadName = 0; // const 
    final int statePlayGame = 1;
    int state = stateReadName;   // current 
    
    String playerName="";
    
    void setup() {
      size(220, 220);
    }
    
    void draw() {
      if (state==stateReadName) {
        background(0);
        fill(255);
        text("Type your name and press enter:", 20, 20);
        fill(255, 255, 0);
        text(playerName, 20, 50);
      }
      else if (state==statePlayGame) {
        background(0);
        fill((millis()+100)%255, (millis()+200)%255, millis()%255);
        ellipse(mouseX, mouseY, 20, 20);
        fill (255);
        text (playerName + " is playing.", 10, 12);
      }
    }
    
    void keyPressed() {
      if (state==stateReadName) {
        // what key was it?   ---
        if ( (key>='a'&&key<='z') || ( key >= 'A'&&key<='Z')) {
          playerName+=key; // add this key to our name
        } // Letter 
        else if (key==ENTER||key==RETURN) {
          // go on to game
          state=statePlayGame;
          println ("Thank you, "+playerName+".");
        } // ENTER
        else if (key==BACKSPACE) {
          if (playerName.length()>0) {
            playerName=playerName.substring(0, playerName.length()-1);
          }
        } // BACKSPACE
        else { 
          println ("Unknow key "+ key);
        } // else
        // end of check for keys ---
      } // if state
    }
    
    void mousePressed() {
      // return to enter name
      if (state==statePlayGame) {
        state=stateReadName;
      }
    }
    //
    

    Hope they help!

  • Oh... Sorry. You already know that I think. And no, not with processing (unless if you download this library) can you do it. So download this first:

    http://sourceforge.net/projects/projms/

    Try it! It could help with your project. I don't know how to use it, but the person who gave it to me- Ater, probably does.

  • edited September 2014

    Both ControlP5 and G4P support applications with multiple windows but only in JavaMode look at the examples that come with the libraries.

    The G4P textfield control also supports copy and pasting of text, horizontal scrollbar, tab-to-textfield capabilities, have a look at the text edit control example.

    EDIT I think I have made a mistake in thinking the OP wanted multiple windows, I now think he might be looking for something to work in Javascript mode which rules out G4P

  • Hey there guy's, thanks for all of the help and suggestions. I just found out what I need. All that it was, was to create a second setup in the draw() by using a boolean, and put the G4P code in there, and voila! >:D<

    -Thanks, RywesTech

    www.rywestech.com

  • Heheh glad you got it!

  • All that it was, was to create a second setup in the draw() by using a boolean, and put the G4P code in there

    Obviously it works because you have tried it but this does not sound right to me.

    In most applications using G4P all the controls are created in the setup() method which is called once at the beginning. Although it is possible to create G4P controls inside draw it is not recommended. Of course I could have got hold of the wrong end of the stick.

  • edited September 2014

    Yes it does work actually, if you would like to see my current version you can see the source here. (click on the "create new" button one you have the program running) The reason is obvious why I don't want the text boxes in setup() because it would show them on the main menu.

    Oh and is there any way I could make the boxes disappear?

    -Thanks, RywesTech

    www.rywestech.com

  • edited September 2014

    hello,

    I would recommend to have a sub function for each view

    void displayView1(){
    

    etc.

    then your draw would be short and better readable - use

    switch(view) { 
    

    here btw.

    then (as has been said), it is wise to do the definiton of art1Tb only once in setup() and then just hide and show it when needed. To instantiate it is rather time consuming on the CPU, so it's a job for setup()

    ;-)

  • edited September 2014

    Yes it does work actually

    Ok I see that you are using the tbStart variable to prevent the text box being recreated every frame. I would do as Chrisir said create it in setup and make in invisible, then in the view1 code make it visible at the beginning and then invisible at the end. That way you don't need the tbStart variable, you won't need the if conditional statement and there is no risk of multiple instantiations due to any logic errors that might be introduced while developing your sketch.

    Also Chrisir's suggestion of having separate functions for each view and using the switch statement in draw to call the correct view is excellent and I strongly recommend that you do that, not only for the reason given but it makes it easier to delevop each view independently and much easier to add additional views.

  • edited September 2014

    you can also have a separate mousePressed function to handle those mouse inputs in one place

    here you need to use the views as well (switch(view) { )

    I post an example where the view is called state (and the states have names)

    //
    // states
    final int stateGame  = 0; // consts
    final int statePause = 1;
    int state = stateGame;    // current 
    
    // -------------------------------------------------
    
    void setup() {
      // init (runs only once)
      size(800, 600);
    } // func 
    
    void draw() { 
      // runs on and on 
    
      switch (state) {
    
      case stateGame: 
        // Game
        handleStateGame();
        break; 
    
      case statePause:
        // Pause
        handleStatePause(); 
        break;
    
      default:
        // error
        println("Error number 939; unknown state : " 
          + state
          + ".");
        exit();
        break;
      } // switch
      //
    } // func 
    
    // functions for states - called from draw() 
    
    void handleStateGame() {
      // Game
      background(11);
      fill(244, 3, 3); // red 
      text ("This is the Game....", 210, 313);
    
      //
      noStroke();
      fill(255, 2, 2) ;
      rect(100, 100, 100, 100);
      fill(255, 2, 255) ;
      rect(300, 100, 100, 100);
    } // func 
    
    void handleStatePause() {
      // Pause
      background(255);
      fill(244, 3, 3); // red 
      text ("Pause....  " 
        + "   ...   ", 210, 313);
    
      text ("Hit p to start Game", 210, 385);
    } // func 
    
    // ----------------------------------------
    // keyboard input 
    
    void keyPressed() {
    
      switch (state) {
    
      case stateGame: 
        // Game
        keyPressedForStateGame();
        break; 
    
      case statePause:
        // Pause
        keyPressedForStatePause(); 
        break;
    
      default:
        // error
        println("Error number 1039; unknown state : " 
          + state 
          + ".");
        exit();
        break;
      } // switch
    } // func 
    
    // ----
    
    void keyPressedForStateGame() { 
      if (key == CODED) 
      {
        if (keyCode == UP) {
          //
        } 
        else if (keyCode == DOWN) {
          //
        }
    
        if (keyCode == LEFT) {
          //
        } 
        else if (keyCode == RIGHT) {
          //
        }
        else {
          // do nothing
        } // else
      } //  if (key == CODED) {
      else 
      {
        // not CODED ---------------------- 
        if (key == 'p') {
          // Pause 
          state = statePause;
        }
        else {
          // do nothing
        } // else
      } // else not CODED
    } // func
    
    void keyPressedForStatePause() { 
      if (key == CODED) 
      {
        if (keyCode == UP) {
          //
        } 
        else if (keyCode == DOWN) {
          // none
        }
    
        if (keyCode == LEFT) {
          //
        } 
        else if (keyCode == RIGHT) {
          //
        }
        else {
          // do nothing
        } // else
      } //  if (key == CODED) {
      else 
      {
        // not CODED ---------------------- 
        if (key == 'p') {
          //
          state = stateGame;
        }
        else {
          // do nothing
        } // else
      } // else not CODED
    } // func
    
    // -------------------------------------------------------
    // Mouse input
    
    void mousePressed() {
      //
      switch (state) {
    
      case stateGame: 
        // Game
        mousePressedForStateGame();
        break; 
    
      case statePause:
        // Pause
        mousePressedForStatePause(); 
        break;
    
      default:
        // error
        println("Error number 1139; unknown state : " 
          + state 
          + ".");
        exit();
        break;
      } // switch
    } // func 
    
    void mousePressedForStateGame() {
      //
      color c1 = get(mouseX, mouseY);
      if (c1 == color(255, 2, 2)) {
        println ("left");
        text ("left", 13, 13);
      }
      else if (c1 == color(255, 2, 255)) {
        println ("right");
        text ("right", 13, 13);
      }
      //
    } // func 
    
    void mousePressedForStatePause() {
      //
    } // func 
    // =========================================
    
  • Ok, I am working on making the new view code, but how do I make the text boxes invisible and visible?

    -RywesTech

    rywestech.com

  • Answer ✓

    art1Tb.setVisible(false);

    and

    art1Tb.setVisible(true);

Sign In or Register to comment.