# Creating an additional input window

**URL:** <https://discourse.processing.org/t/creating-an-additional-input-window/25982>\
**Category:** Coding Questions\
**Created:** [December 5, 2020, 8:34pm UTC](https://discourse.processing.org/t/creating-an-additional-input-window/25982 "2020-12-05T20:34:41Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 5, 2020, 8:34pm UTC](https://discourse.processing.org/t/creating-an-additional-input-window/25982/1 "2020-12-05T20:34:41Z")

</div>

Hi,  
I’ve gone insane trying to create constant input windows. I’ve been trying to create ways to enter inputs into the program.

My question is, how to create a program, which can open a new window whenever a specific function is called and serves as an input window. Whenever the text is too big for a window, the window expands.

(for example, the input “aaabbb” has window width 100, but input “dogs are the best animals” has width ~300 (width a minimum width and height (like 200x100).

whenever you press “ENTER” key unless the input is blank, it will put the input into a variable and close the extra window

 ![processingForumExtraInputWindows](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/275ffe297ecd6dfef361f911ac5c494bf961a7cd.png)

Please help me if you can : )

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 6, 2020, 3:59pm UTC](https://discourse.processing.org/t/creating-an-additional-input-window/25982/2 "2020-12-06T15:59:24Z")

</div>

Hi,

Have you seen this example to create multiple windows? You go into `File > Examples... > Demos > Tests > MultipleWindows`

There’s also those threads :

- [https://forum.processing.org/two/discussion/12272/multiple-windows-with-processing-3](https://forum.processing.org/two/discussion/12272/multiple-windows-with-processing-3)

- [https://forum.processing.org/two/discussion/20882/very-basic-question-how-to-create-an-input-text-box](https://forum.processing.org/two/discussion/20882/very-basic-question-how-to-create-an-input-text-box)

- [https://forum.processing.org/two/discussion/4764/how-to-make-a-popup-window](https://forum.processing.org/two/discussion/4764/how-to-make-a-popup-window)

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 6, 2020, 5:10pm UTC](https://discourse.processing.org/t/creating-an-additional-input-window/25982/3 "2020-12-06T17:10:28Z")

</div>

I have created the new program, the only question is how to implement it

```auto
String input = "";
int buffer = 20, minWidth = 200;
String acceptableInput = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ0123456789.,-+ !?<>()'$%&/[]#{}~=:;" + char('"');

void setup() {
  size(200,100);
  textAlign(3,3);
  surface.setResizable(true);
}

void draw() {
  background(0);
  fill(255);
  text(input,width/2,height/2);
  textSize(20);
  text("Input:",width/2,height/4);
}

void keyPressed() {
  if(key == ENTER) {
    input = "";
  } else if (key == BACKSPACE) {
    String newInput = "";
    for(int i = 0; i < input.length()-1; i++) {
      newInput += input.charAt(i);
    }
    input = newInput;
  } else {
    for(int i = 0; i < acceptableInput.length(); i++) {
      if(key == acceptableInput.charAt(i)) {
        input += key;
      }
    }
  }
  resizeWindow();
}

void resizeWindow() {
  float setWidth = textWidth(input) + 2*buffer;
  setWidth = ((setWidth > minWidth)? setWidth : minWidth);
  surface.setSize(floor(setWidth),height);
}

```

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 6, 2020, 9:18pm UTC](https://discourse.processing.org/t/creating-an-additional-input-window/25982/4 "2020-12-06T21:18:52Z")

</div>

I just created a far better version of the input window (still don’t know how to do the extra window thing)

```auto
String input = "";
int buffer = 20, minWidth = 200, cursorLocation = 0;
String acceptableInput = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ0123456789.,-+ !?<>()'$%&/[]#{}~=:;" + char('"');

void setup() {
  size(200,100);
  textAlign(3,3);
  surface.setResizable(true);
}

void draw() {
  background(0);
  fill(255);
  text(input,width/2,height/2);
  textSize(20);
  text("Input:",width/2,height/4);
  stroke(255,0,0);
  line(width/2-textWidth(input)/2+textWidth(getShorterString(input,cursorLocation)), height/2 - 10, width/2-textWidth(input)/2+textWidth(getShorterString(input,cursorLocation)), height/2+10);
}

void keyPressed() {
  if(key == ENTER) {
    cursorLocation = 0;
    println(input);
    input = "";
  } else if (key == BACKSPACE) {
    String prefix = getShorterString(input,cursorLocation-1);
    String suffix = getAfterText(input,cursorLocation);
    input = prefix+suffix;
    cursorLocation= ((cursorLocation < 0)? 0 : cursorLocation-1);
  } else if(key == DELETE) {
    String prefix = getShorterString(input,cursorLocation);
    String suffix = getAfterText(input,cursorLocation+1);
    input = prefix+suffix;
  } else {
    for(int i = 0; i < acceptableInput.length(); i++) {
      if(key == acceptableInput.charAt(i)) {
        String prefix = getShorterString(input,cursorLocation), suffix = getAfterText(input,cursorLocation);
        input += key;
        input = (prefix + key + suffix);
        cursorLocation+=1;
      }
    }
  }
  if(keyCode == LEFT) {
    cursorLocation = ((cursorLocation < 1)? 0 : cursorLocation - 1);
  } else if(keyCode == RIGHT) {
    cursorLocation = ((cursorLocation > input.length()-1)? input.length() : cursorLocation + 1);
  }
  resizeWindow();
  if(input.length() > 4) {
  }
  
}

void mousePressed() {
  float beginTextX = width/2 - textWidth(input)/2;
  for(int i = 0; i < input.length()+1; i++) {
    if(mouseX > textWidth(getShorterString(input,i-1)) + beginTextX && mouseX < textWidth(getShorterString(input,i)) + beginTextX) {
      cursorLocation = i-1;
    }
  }
}

String getShorterString(String text, int len) {
  String newText = "";
  if(len < 0) {
    return("");
  }
  for(int i = 0; i < len && i <= text.length(); i++) {
    newText += text.charAt(i);
  }
  return(newText);
}

String getAfterText(String text, int begin) {
  if(begin < 0 || begin > text.length()) {
    return("");
  }
  String newText = "";
  for(int i = begin; i < text.length(); i++) {
    newText+= text.charAt(i);
  }
  return(newText);
}

void resizeWindow() {
  float setWidth = textWidth(input) + 2*buffer;
  setWidth = ((setWidth > minWidth)? setWidth : minWidth);
  surface.setSize(floor(setWidth),height);
}

```

edit:  
Features:

- Can enter letters from the “acceptableInput” string
- Can use arrow keys (LEFT and RIGHT) or click on the text to edit text
- Can use BACKSPACE / DELETE to remove letters
- ENTER to erase input and print it into console
- flexible interface

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 6, 2020, 9:30pm UTC](https://discourse.processing.org/t/creating-an-additional-input-window/25982/5 "2020-12-06T21:30:44Z")

</div>

version with a blinking curser

```auto
String input = "";
int buffer = 20, minWidth = 200, cursorLocation = 0;
String acceptableInput = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ0123456789.,-+ !?<>()'$%&/[]#{}~=:;" + char('"');

void setup() {
  size(200,100);
  textAlign(3,3);
  surface.setResizable(true);
}

void draw() {
  background(0);
  fill(255);
  text(input,width/2,height/2);
  textSize(20);
  text("Input:",width/2,height/4);
  stroke( ((second()%2 == 0)? color(255,0,0,255) : color(255,0,0,0)));
  line(width/2-textWidth(input)/2+textWidth(getShorterString(input,cursorLocation)), height/2 - 10, width/2-textWidth(input)/2+textWidth(getShorterString(input,cursorLocation)), height/2+10);
}

void keyPressed() {
  if(key == ENTER) {
    cursorLocation = 0;
    println(input);
    input = "";
  } else if (key == BACKSPACE) {
    String prefix = getShorterString(input,cursorLocation-1);
    String suffix = getAfterText(input,cursorLocation);
    input = prefix+suffix;
    cursorLocation= ((cursorLocation < 0)? 0 : cursorLocation-1);
  } else if(key == DELETE) {
    String prefix = getShorterString(input,cursorLocation);
    String suffix = getAfterText(input,cursorLocation+1);
    input = prefix+suffix;
  } else {
    for(int i = 0; i < acceptableInput.length(); i++) {
      if(key == acceptableInput.charAt(i)) {
        String prefix = getShorterString(input,cursorLocation), suffix = getAfterText(input,cursorLocation);
        input += key;
        input = (prefix + key + suffix);
        cursorLocation+=1;
      }
    }
  }
  if(keyCode == LEFT) {
    cursorLocation = ((cursorLocation < 1)? 0 : cursorLocation - 1);
  } else if(keyCode == RIGHT) {
    cursorLocation = ((cursorLocation > input.length()-1)? input.length() : cursorLocation + 1);
  }
  resizeWindow();
  if(input.length() > 4) {
  }
  
}

void mousePressed() {
  float beginTextX = width/2 - textWidth(input)/2;
  for(int i = 0; i < input.length()+1; i++) {
    if(mouseX > textWidth(getShorterString(input,i-1)) + beginTextX && mouseX < textWidth(getShorterString(input,i)) + beginTextX) {
      cursorLocation = i-1;
    }
  }
}

String getShorterString(String text, int len) {
  String newText = "";
  if(len < 0) {
    return("");
  }
  for(int i = 0; i < len && i <= text.length(); i++) {
    newText += text.charAt(i);
  }
  return(newText);
}

String getAfterText(String text, int begin) {
  if(begin < 0 || begin > text.length()) {
    return("");
  }
  String newText = "";
  for(int i = begin; i < text.length(); i++) {
    newText+= text.charAt(i);
  }
  return(newText);
}

void resizeWindow() {
  float setWidth = textWidth(input) + 2*buffer;
  setWidth = ((setWidth > minWidth)? setWidth : minWidth);
  surface.setSize(floor(setWidth),height);
}

```

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 6, 2020, 9:41pm UTC](https://discourse.processing.org/t/creating-an-additional-input-window/25982/6 "2020-12-06T21:41:01Z")

</div>

version with blinker on while typing

```auto
String input = "";
int buffer = 20, minWidth = 200, cursorLocation = 0, lastInput = 0, resumeBlinkAfter = 300;
String acceptableInput = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ0123456789.,-+ !?<>()'$%&/[]#{}~=:;" + char('"');

void setup() {
  size(200,100);
  textAlign(3,3);
  surface.setResizable(true);
}

void draw() {
  background(0);
  fill(255);
  text(input,width/2,height/2);
  textSize(20);
  text("Input:",width/2,height/4);
  stroke( ((second()%2 == 0 || lastInput + resumeBlinkAfter > millis())? color(255,0,0,255) : color(255,0,0,0)));
  line(width/2-textWidth(input)/2+textWidth(getShorterString(input,cursorLocation)), height/2 - 10, width/2-textWidth(input)/2+textWidth(getShorterString(input,cursorLocation)), height/2+10);
}

void keyPressed() {
  if(key == ENTER) {
    cursorLocation = 0;
    println(input);
    input = "";
  } else if (key == BACKSPACE) {
    String prefix = getShorterString(input,cursorLocation-1);
    String suffix = getAfterText(input,cursorLocation);
    input = prefix+suffix;
    cursorLocation= ((cursorLocation < 0)? 0 : cursorLocation-1);
  } else if(key == DELETE) {
    String prefix = getShorterString(input,cursorLocation);
    String suffix = getAfterText(input,cursorLocation+1);
    input = prefix+suffix;
  } else {
    for(int i = 0; i < acceptableInput.length(); i++) {
      if(key == acceptableInput.charAt(i)) {
        String prefix = getShorterString(input,cursorLocation), suffix = getAfterText(input,cursorLocation);
        input += key;
        input = (prefix + key + suffix);
        cursorLocation+=1;
        lastInput = millis();
      }
    }
  }
  if(keyCode == LEFT) {
    cursorLocation = ((cursorLocation < 1)? 0 : cursorLocation - 1);
  } else if(keyCode == RIGHT) {
    cursorLocation = ((cursorLocation > input.length()-1)? input.length() : cursorLocation + 1);
  }
  resizeWindow();
  if(input.length() > 4) {
  }
  
}

void mousePressed() {
  float beginTextX = width/2 - textWidth(input)/2;
  for(int i = 0; i < input.length()+1; i++) {
    if(mouseX > textWidth(getShorterString(input,i-1)) + beginTextX && mouseX < textWidth(getShorterString(input,i)) + beginTextX) {
      cursorLocation = i-1;
    }
  }
}

String getShorterString(String text, int len) {
  String newText = "";
  if(len < 0) {
    return("");
  }
  for(int i = 0; i < len && i <= text.length(); i++) {
    newText += text.charAt(i);
  }
  return(newText);
}

String getAfterText(String text, int begin) {
  if(begin < 0 || begin > text.length()) {
    return("");
  }
  String newText = "";
  for(int i = begin; i < text.length(); i++) {
    newText+= text.charAt(i);
  }
  return(newText);
}

void resizeWindow() {
  float setWidth = textWidth(input) + 2*buffer;
  setWidth = ((setWidth > minWidth)? setWidth : minWidth);
  surface.setSize(floor(setWidth),height);
}

```

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 7, 2020, 1:27pm UTC](https://discourse.processing.org/t/creating-an-additional-input-window/25982/7 "2020-12-07T13:27:14Z")

</div>

I do understand, however, I don’t know how to set surface.setResizable(true) on the extra window. I am also curious how to open and close the extra window at will. And does that mean that I can create extra void key/mousePressed?

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 7, 2020, 6:57pm UTC](https://discourse.processing.org/t/creating-an-additional-input-window/25982/8 "2020-12-07T18:57:48Z")

</div>

I started making the actual console. I am planning to separate the two into 2 separate windows. (Btw the extra text input window will not be a part of my new program, it will just be a very useful tool in the future)

I am trying to create a two window program, where the original window is the console like program and the extra window is the display for the console.

Here is the code! Enjoy the few features I have implemented so far (most of them are buggy so keep that in mind)

```auto
ArrayList<String> commands = new ArrayList<String>();
ArrayList<String> entries = new ArrayList<String>();
String acceptableInput = "abcdefghijklmnopqrstuvwxyz 0123456789/-", input = "";
int entryID = 0, copying = 0;

void setup() {
  size(600,600);
  textAlign(3,3);
}

void draw() {
  background(0);
  for(int i = 0; i < commands.size(); i++) {
    executeCommand(commands.get(i));
  }
  fill(0,255,0,50);
  rect(width/2-textWidth( (input+char('|')*2))/2, height/2-10, textWidth( (input+char('|')*2)), 20);
  fill(255);
  text(input+"|", width/2,height/2);
}

void keyPressed() {
  for(int i = 0; i < acceptableInput.length(); i++) {
    if(key == acceptableInput.charAt(i)) {
      input += key;
    }
  }
  if(key == ENTER && input.length() > 0) {
    if(input.charAt(0) == '/') {
      String finalCommand = "";
      for(int i = 1; i < input.length(); i++) {
        finalCommand += input.charAt(i);
      }
      commands.add(new String(finalCommand));
    } else if(input.charAt(0) == '-') {
      eraseCommand(input);
    }
    entries.add(new String(input));
    entryID +=1;
    copying = entryID;
    input = "";
    printArray(commands);
    printArray(entries);
  } else if(key == BACKSPACE) {
    String newString = "";
    for(int i = 0; i < input.length()-1; i++) {
      newString+=input.charAt(i);
    }
    input = newString;
  } else if(keyCode == DOWN) {
    if(entries.size() > 0) {
      copying += 1;
      if(entries.size() > copying) {
        input = entries.get(copying);
      } else {
        copying = -1;
      }
    }
  } else if(keyCode == UP) {
    if(entries.size() > 0) {
      copying -=1;
      if(copying >= 0) {
        input = entries.get(copying);
      } else {
        copying = entries.size();
      }
    }
  }
}

void executeCommand(String command) {
  String segments[] = split(command,' ');
  int seg = segments.length;
  if(segments[0].equals("draw")) {
    if(segments[1].equals("circle") && seg == 5) {
      int x = int(segments[2]), y = int(segments[3]), r = int(segments[4]);
      circle(x,y,r);
    } else if(segments[1].equals("rect") || segments[1].equals("rectangle") && seg == 6) {
      int x = int(segments[2]), y = int(segments[3]), w = int(segments[4]), h = int(segments[5]);
      rect(x,y,w,h);
    }
  } else if(segments[0].equals("console")) {
    if(segments[1].equals("erase") && seg == 3) {
      if(segments[2].equals("entries")) {
        for(int i = 0; i < entries.size(); i++) {
          entries.remove(i);
        }
        printArray(commands);
        printArray(entries);
      } else if(segments[2].equals("commands")) {
        for(int i = 0; i < commands.size(); i++) {
          commands.remove(i);
        }
        printArray(commands);
        printArray(entries);
      } if(segments[2].equals("all")) {
        for(int i = 0; i < entries.size(); i++) {
          entries.remove(i);
        }
        for(int i = 0; i < commands.size(); i++) {
          commands.remove(i);
        }
        printArray(commands);
        printArray(entries);
      }
    }
  }
}
void eraseCommand(String command) {
  String modifiedCommand = "";
  for(int i = 1; i < command.length(); i++) {
    modifiedCommand += command.charAt(i);
  }
  if(commands.contains(modifiedCommand)) {
    commands.remove(modifiedCommand);
  }
}

```

If you find any bugs please tell me.

Features:

- commands (use the ‘/’ as the first character)  
- /draw circle x y r  
- /draw rect (or rectangle) x y w h  
- console erase (entries/commands/all)
- random text
  - just type it normally

- command removal
  - type the command you would like to remove and replace the ‘/’ with ‘-’

- can use Arrow UP/DOWN to copy previous entries

edit: I had some issues with the .eraseAll, so please help me : P