Text box

RywesTech

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

colouredmirrorball

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

TechWiz777

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!

TechWiz777

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.

quark

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

RywesTech

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

TechWiz777

Heheh glad you got it!

quark

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.

RywesTech

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

Chrisir

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()

;-)

quark

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.

Chrisir

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 
// =========================================

RywesTech

Ok, I am working on making the new view code, but how do I make the text boxes invisible and visible?

-RywesTech

rywestech.com

quark

art1Tb.setVisible(false);

and

art1Tb.setVisible(true);