New Line Text Input

Programming Questions

mentecode

in Programming Questions • 6 months ago

Hello all.

I'm trying to make a text input, and when it reaches a certain border, I want the program to make a new line.

Here's the problem: Every time the program reaches the border, at first it does what it was told to do, but then it does some unnecessary things. It just makes a new line, and the text hasn't even reached the border.
I knew this was because of the textWidth() method I used. I made some changes, and it still acts up.

Here's some demo code:

String msg = "";
int l = 500;
void setup() {
size(600, 400);
}
void draw() {
background(210);
display();
}
void keyPressed() {
if (textWidth(msg) >= l) {
msg += "\n";
l += 500;
}
if (key != CODED && key != BACKSPACE) {
msg += key;
}
else if (key == BACKSPACE && msg.length() > 0) {
msg = msg.substring(0, msg.length()-1);
}
}
void display() {
fill(255);
rect(10, 10, width - 20, height - 150);
fill(0);
text("Type a message here: ", 15, 25);
text(msg, 15, 45);
}

Can someone point me on the right path?

- MenteCode.

Replies(12)

PhiLho

Re: New Line Text Input

6 months ago

I don't know if textWidth() takes in account correctly the newlines.
Perhaps you should manage the width of each line segment separately. Perhaps split() along the newline, and compute the textWidth() of the latest line.

Demonstration:

String msg = "";
int MAX = 500;
int len = MAX; // Avoid one letter variable names, particularly with l which is ambiguous (I? l? 1?)
void setup() {
size(600, 400);
}
void draw() {
background(210);
display();
}
void keyPressed() {
if (textWidth(msg) >= len) {
msg += "\n";
len += MAX;
}
if (key != CODED && key != BACKSPACE) {
msg += key;
}
else if (key == BACKSPACE && msg.length() > 0) {
msg = msg.substring(0, msg.length()-1);
}
}
void display() {
fill(255);
stroke(0);
rect(10, 10, width - 20, height - 150);
stroke(#FF0000);
line(MAX, 10, MAX, height - 140);
fill(0);
text("Type a message here: ", 15, 25);
text(msg, 15, 45);
text(textWidth(msg), 15, height - 20);
}

mentecode

Re: Re: New Line Text Input

6 months ago

How do I make the program split the string at the defined position? (The split() function asks for a character in the string).

Thanks,

- MenteCode.

v.k.

Re: New Line Text Input

6 months ago

String has a lot of methods not in Processing reference. But in fact PhiLho already split the msg adding a "/n" (newline) at right position. So you don't need any kind of substring() method. Testing PhiLho's code i found though that textWidth() counts the width of the longest line in a block of text, so it was only working for the first line. I made a tweak using a tempLine string to be measured... May not be the best solution but works ;)

here:

String msg = "";
String tempLine = "";
int MAX = 500;
int len = MAX; // Avoid one letter variable names, particularly with l which is ambiguous (I? l? 1?)
void setup() {
size(600, 400);
}
void draw() {
background(210);
display();
}
void keyPressed() {
if (textWidth(tempLine) >= len) {
tempLine = "";
msg += "\n";
}
if (key != CODED && key != BACKSPACE) {
msg += key;
tempLine += key;
// for debug
println ("msg: " + msg);
println ("tem: " + tempLine);
}
else if (key == BACKSPACE && msg.length() > 0) {
msg = msg.substring(0, msg.length()-1);
}
}
void display() {
fill(255);
stroke(0);
rect(10, 10, width - 20, height - 150);
stroke(#FF0000);
line(MAX, 10, MAX, height - 140);
fill(0);
text("Type a message here: ", 15, 25);
text(msg, 15, 45);
text(textWidth(msg), 15, height - 20);
}

mentecode

Re: Re: New Line Text Input

6 months ago

Very clever.

But it is definitely not the best solution. If you type the uppercase W on one line, then type the lowercase w on the next, you'll see a drastic difference between the two lines. Maybe a function charWidth() might work. (I'm aware that charWidth() doesn't exist). Does a function like that exists?

- MenteCode.

v.k.

Re: New Line Text Input

6 months ago

textWidth(string.charAt(index)) ???

But i did not understand really what you meant.

mentecode

Re: Re: New Line Text Input

6 months ago

I meant that each letter has a width, a maybe a function that would measure the width of each letter could be used in this case, to make sure things don't go wrong. Each line, unless you type the same leter over and over, will be of a different length, and that's no what is required.

- MenteCode

v.k.

Re: New Line Text Input

6 months ago

Well, but this is inherent to characters, isn't it? I mean you can't split a char to keep the size of the line. Either you put it in or not. As an example look the text in the forum. What you can do is test the char to be added (you can use textWidth(string.cahrAt(index)) for this) to choose put it in this or next line, or change font size of this particular char (or even the whole line) to keep them really aligned. Also you will need to deal with words. Are you going to split them? Accordingly to grammar? Add a dash? Or leave a word that don't fit to next line, leaving a huge blank in previous line? I have messed with this once to display tweets, I can paste the code if you like (as i remember it was working fine...) But I don't know if it will help cause it has a lot of extracting Twitter entities stuff in it, and no keyboard input. And as you have seen, my code may not be a very good reference :)

mentecode

Re: Re: New Line Text Input

6 months ago

I get the feeling that because all of my questions are scattered, you're not getting it.
Well, let's make this simpler.

I'm sure you know that I want to be able to type as many characters as I want to, and once a line passes the exact 500th pixel, regardless of the character typed, make a new line to give room for more words.

In detail, when I say "regardless of the character typed", I say that I don't want the line to go on longer than it's expected to.

Hope this makes sense.

- MenteCode.

v.k.

Re: New Line Text Input

6 months ago

Well if it's ok that the line is shorter, you just need to adjust the test to decide if the next char is to be added. Did i make any sense? :)

mentecode

Re: Re: New Line Text Input

6 months ago

Yes, that makes sense,

I'll try that when I get back to the keyboard.

- MenteCode.

v.k.

Re: New Line Text Input

6 months ago

I just remember of an sketch from Calsign dealing with text box, it may inspire you. I can't find the thread, but i have a copy of it:

* Multiline Text Box

* 2012 William Smith

* aka calsign

* Implementation requires mousePressed(), mouseDragged(),

* mouseReleased(), and keyPressed() to call their respective

* functions in the class. This class has been extracted from one of my

* ongoing projects and is in no way complete, although it features

* numerous ideas that may be of use to beginners in this area.

* Text box supports basic text input, multiple lines, lines returning when

* becoming too long (TODO), selection, and copy + paste.

MultilineTextBox textBox;

void setup() {

size(600, 600);

textBox = new MultilineTextBox("Your Text", 50, 50, 500, 500);

}

void draw() {

textBox.update();

textBox.display();

}

void mousePressed() {

textBox.updatePress();

}

void mouseDragged() {

textBox.updateDrag();

}

void mouseReleased() {

textBox.updateRelease();

}

void keyPressed() {

textBox.updateKeys();

}

class MultilineTextBox {

String prompt;

String[] text;

int xpos;

int ypos;

boolean alreadyPressed;

boolean selecting;

int xpos2;

int ypos2;

PVector loc;

float WIDTH;

float HEIGHT;

boolean inverseBackground;

boolean hasFocus;

boolean hasInputFocus;

int lastPress = -500;

MultilineTextBox(String prompt, float x, float y, float w, float h) {

WIDTH = w;

HEIGHT = h;

this.prompt = prompt;

text = new String[1];

text[0] = "";

ypos = 0;

xpos = 0;

loc = new PVector(x, y);

}

MultilineTextBox(String prompt, float x, float y, float w, float h, boolean inverseBackground) {

WIDTH = w;

HEIGHT = h;

this.prompt = prompt;

text = new String[1];

text[0] = "";

ypos = 0;

xpos = 0;

loc = new PVector(x, y);

this.inverseBackground = inverseBackground;

}

void update() {}

void updatePress() {

if(mousePressed) {

if(mouseX > loc.x && mouseX < loc.x + WIDTH && mouseY > loc.y && mouseY < loc.y + HEIGHT) {

hasFocus = true;

hasInputFocus = true;

testPos();

alreadyPressed = true;

} else {

hasFocus = (text.length <= 1 && text[0].length() <= 0 ? false : true);

hasInputFocus = false;

if(!alreadyPressed) selecting = false;

}

void updateDrag() {

if(mouseX > loc.x && mouseX < loc.x + WIDTH && mouseY > loc.y && mouseY < loc.y + HEIGHT) testPos();

else if(selecting) testPos();

}

void updateRelease() {

alreadyPressed = false;

}

void updateKeys() {

if(keyPressed) {

if(key == CODED) {

if(millis() - lastPress > 0) {

if(keyCode == LEFT) {

if(xpos <= 0 && ypos > 0) {

ypos --;

xpos = text[ypos].length();

} else xpos = constrain(xpos - 1, 0, text[ypos].length());

}

if(keyCode == RIGHT) {

if(xpos >= text[ypos].length() && ypos < text.length - 1) {

ypos ++;

xpos = 0;

} else xpos = constrain(xpos + 1, 0, text[ypos].length());

}

if(keyCode == UP && ypos > 0) {

ypos --;

xpos = constrain(xpos, 0, text[ypos].length());

}

if(keyCode == DOWN && ypos < text.length - 1) {

ypos ++;

xpos = constrain(xpos, 0, text[ypos].length());

}

if(keyCode == KeyEvent.VK_HOME) xpos = 0;

if(keyCode == KeyEvent.VK_END) xpos = text[ypos].length();

if(!(keyCode == SHIFT)) {

ypos2 = ypos;

xpos2 = xpos;

}

lastPress = millis();

}

} else {

switch(key) {

case ESC:

case TAB:

break;

case ENTER:

case RETURN:

newline();

break;

case BACKSPACE:

case DELETE:

if(selecting && (ypos != ypos2 || xpos != xpos2)) {

int minypos = min(ypos, ypos2);

int maxypos = max(ypos, ypos2);

int minxpos;

int maxxpos;

if(minypos == maxypos) {

minxpos = min(xpos, xpos2);

maxxpos = max(xpos, xpos2);

} else {

minxpos = (minypos == ypos ? xpos : xpos2);

maxxpos = (maxypos == ypos ? xpos : xpos2);

}

if(minypos == maxypos) text[ypos] = text[ypos].substring(0, minxpos) + text[ypos].substring(maxxpos, text[ypos].length());

else {

String combine = text[minypos].substring(0, minxpos) + text[maxypos].substring(maxxpos, text[maxypos].length());

String[] pre = append(subset(text, 0, minypos), combine);

text = concat(pre, subset(text, maxypos + 1, text.length - (maxypos + 1)));

}

ypos = minypos;

xpos = minxpos;

ypos2 = ypos;

xpos2 = xpos;

selecting = false;

lastPress = millis();

} else {

if(millis() - lastPress > 0 && xpos > 0) {

text[ypos] = text[ypos].substring(0, xpos - 1) + text[ypos].substring(xpos, text[ypos].length());

xpos --;

xpos2 = xpos;

lastPress = millis();

} else if(ypos > 0 && xpos == 0) {

int over = text[ypos - 1].length();

String combine = text[ypos - 1] + text[ypos];

String[] pre = append(subset(text, 0, ypos - 1), combine);

text = concat(pre, subset(text, ypos + 1, text.length - (ypos + 1)));

ypos --;

xpos = over;

ypos2 = ypos;

xpos2 = xpos;

}

break;

default:

if(selecting && (ypos != ypos2 || xpos != xpos2)) {

int minypos = min(ypos, ypos2);

int maxypos = max(ypos, ypos2);

int minxpos;

int maxxpos;

if(minypos == maxypos) {

minxpos = min(xpos, xpos2);

maxxpos = max(xpos, xpos2);

} else {

minxpos = (minypos == ypos ? xpos : xpos2);

maxxpos = (maxypos == ypos ? xpos : xpos2);

}

if(millis() - lastPress > 0) {

if(minypos == maxypos) text[ypos] = text[ypos].substring(0, minxpos) + key + text[ypos].substring(maxxpos, text[ypos].length());

else {

String combine = text[minypos].substring(0, minxpos) + key + text[maxypos].substring(maxxpos, text[maxypos].length());

String[] pre = append(subset(text, 0, minypos), combine);

text = concat(pre, subset(text, maxypos + 1, text.length - (maxypos + 1)));

}

ypos = minypos;

xpos = minxpos + 1;

ypos2 = ypos;

xpos2 = xpos;

selecting = false;

lastPress = millis();

}

} else {

if(millis() - lastPress > 0 && textWidth(text[ypos].substring(0, xpos) + key + text[ypos].substring(xpos, text[ypos].length())) < WIDTH - 8) {

text[ypos] = text[ypos].substring(0, xpos) + key + text[ypos].substring(xpos, text[ypos].length());

xpos ++;

xpos2 = xpos;

lastPress = millis();

}

break;

}

void newline() {

String after = text[ypos].substring(xpos, text[ypos].length());

text[ypos] = text[ypos].substring(0, xpos);

text = splice(text, after, ypos + 1);

ypos ++;

xpos = 0;

ypos2 = ypos;

xpos2 = xpos;

}

void testPos() {

if(alreadyPressed) {

selecting = true;

ypos2 = int(constrain((mouseY - loc.y) / 12.0, 0, text.length - 1));

for(int i = 0; i < text[ypos2].length(); i ++) {

if(mouseX - loc.x - 4 <= textWidth(text[ypos2].substring(0, i)) + textWidth(text[ypos2].charAt(i)) / 2) {

xpos2 = i;

return;

}

xpos2 = text[ypos].length();

} else {

selecting = false;

ypos = int(constrain((mouseY - loc.y) / 12.0, 0, text.length - 1));

for(int i = 0; i < text[ypos].length(); i ++) {

if(mouseX - loc.x - 4 <= textWidth(text[ypos].substring(0, i)) + textWidth(text[ypos].charAt(i)) / 2) {

xpos = i;

return;

}

xpos = text[ypos].length();

}

void display() {

if(inverseBackground) fill(0);

else fill(255);

stroke(0);

if(hasInputFocus) strokeWeight(2);

else strokeWeight(1);

rectMode(CORNER);

rect(loc.x, loc.y, WIDTH, HEIGHT);

textSize(12);

textAlign(LEFT, TOP);

if(hasFocus) fill(0);

else fill(102);

if(hasFocus) {

for(int i = 0; i < text.length; i ++)

text(text[i], loc.x + 4, loc.y + 2 + i * 12);

} else text(prompt, loc.x + 4, loc.y + 2);

ypos = constrain(ypos, 0, text.length);

ypos2 = constrain(ypos2, 0, text.length);

xpos = constrain(xpos, 0, text[ypos].length());

xpos2 = constrain(xpos2, 0, text[ypos2].length());

if(selecting && (xpos != xpos2 || ypos != ypos2)) {

fill(162, 234, 255, 102);

noStroke();

int minypos = min(ypos, ypos2);

int maxypos = max(ypos, ypos2);

int minxpos;

int maxxpos;

if(minypos == maxypos) {

minxpos = min(xpos, xpos2);

maxxpos = max(xpos, xpos2);

} else {

minxpos = (minypos == ypos ? xpos : xpos2);

maxxpos = (maxypos == ypos ? xpos : xpos2);

}

if(minypos == maxypos) rect(loc.x + 4 + textWidth(text[minypos].substring(0, minxpos)), loc.y + 4 + minypos * 12, textWidth(text[maxypos].substring(0, maxxpos)) - textWidth(text[maxypos].substring(0, minxpos)), 12);

else {

for(int y = minypos; y <= maxypos; y ++) {

for(int x = 0; x < text[y].length(); x ++) {

if((y == minypos ? x >= minxpos : true) && (y == maxypos ? x < maxxpos : true)) rect(loc.x + 4 + textWidth(text[y].substring(0, x)), loc.y + 4 + y * 12, textWidth(text[y].charAt(x)), 12);

}

if(text[y].length() <= 0) rect(loc.x + 4, loc.y + 4 + y * 12, textWidth(" ") / 2, 12);

}

} else if(hasInputFocus && millis() / 300 % 2 == 1) line(loc.x + 4 + textWidth(text[ypos].substring(0, xpos)), loc.y + 4 + ypos * 12, (loc.x + 4 + textWidth(text[ypos].substring(0, xpos))), loc.y + 16 + ypos * 12);

}

String[] getText() {

return text;

}

void setText(String toSet) {

String[] output = new String[0];

int last = -1;

for(int i = 0; i < toSet.length(); i ++) {

if(toSet.charAt(i) == '\n') {

output = append(output, toSet.substring(last + 1, i));

last = i;

}

output = append(output, toSet.substring(last + 1, toSet.length()));

text = output;

}

String consolidate() {

String toReturn = "";

for(int i = 0; i < text.length; i ++) {

toReturn += text[i];

if(i < text.length - 1) toReturn += "\n";

}

return toReturn;

}

mentecode

Re: Re: New Line Text Input

6 months ago

Could this code be simplified to the void newLine() part?

I really don't know what is what in this code.

Thanks,

MenteCode.

Top Reply