1

Attempt at making a UI Library

Hi there, I am making a UI Library as I had some free time
I've added a button which functions
Then I tried to add a Text Box, for which I needed to add a blinking cursor
The cursor animates properly but the problem is that the position of the cursor is not correct
I have not changed the Size, Font, Alignment or anything of the text but still the cursor renders far ahead of where it's supposed to
This is the code to render the cursor
line(x + textWidth(val), y + 2, x + textWidth(val), y + textAscent() + 2);
I've heard somewhere that padding is already included in the textWidth function... due to which i have not added +2 to the x and w value, val is a string that's updated everytime the user presses a key on the keyboard
The y values work ok for now... There are no error messages too
I've tried looking online but none of the solutions work for me

Before Typing Text
After Typing Text

HAXBABA
  • 11
  • 2
  • those boxes in the textbox are there because I have not handled what the program must do in case the key variable is not a letter... but I can add that easily... i have also made sure there are no spaces in the string – HAXBABA Jan 31 '22 at 07:01
  • When does your blinking coursor go if you type just a single letter? What is the value of textWidth(val)? – feedy Jan 31 '22 at 09:25
  • Perhaps you keep summing up your `val` instead of resetting it with the correct current value every time a new letter is typed? If that's not the issue please provide a bit more code and we will figure it out. – feedy Jan 31 '22 at 09:35
  • It appeared as if every letter had equal width – HAXBABA Feb 01 '22 at 03:54
  • Also I don't think it was being summed up as the values were not being stored or added to another variable but instead were used directly in the line() function – HAXBABA Feb 01 '22 at 03:55

1 Answers1

1

Having a quick look, my opinion is Processing's text facilties need a bit of love, as you can see here and here (and the commented code as well). The F2XD renderer seems to handle this a bit better;

Looking at the images, there might be some special unicode characters not properly displayed and the font is variable with.

If you're willing to compromise with a basic proof of concept you could get something off the ground by sticking to a monospaced font such as Courier New: it produces more predictable results (and using FX2D helps):

float x = 5;
float y = 15;
String val = "Hello";

void setup(){
  size(300, 60, FX2D);
  fill(0, 192, 0);
  strokeWeight(3);
  textFont(createFont("Courier New", 16));
}

void draw(){
  background(0);
  text(val, x, y + textAscent());
  stroke(0, sin(frameCount * 0.15) * 128, 0);
  line(x + textWidth(val), y + 2, x + textWidth(val), y + textAscent() + 2);
}

void keyPressed(){
  if(keyCode == DELETE || keyCode == BACKSPACE){
    if(val.length() >= 1) val = val.substring(0, val.length() - 1);
  }
  if(key >= '0' && key <= 'z'){
    val += key;
  }
  if(key == ' '){
    val += ' ';
  }
}

Another option might be using JavaFX mostly to manually handle text then rendering those text components into Processing's FX2D Canvas. (This may be more verbose.)

George Profenza
  • 50,687
  • 19
  • 144
  • 218
  • 1
    This actually worked. I didn't have to change the renderer, only needed to change the font but I don't fully understand why changing the font worked though. Can someone explain? – HAXBABA Feb 01 '22 at 03:56
  • "Looking at the images, there might be some special unicode characters not properly displayed and the font is variable with." That is a mistake by my side as I have not handled what the code must do incase the user presses Utility keys such as the windows button, CTRL button, Shift button, Alt button, etc. – HAXBABA Feb 01 '22 at 04:01
  • @HAXBABA In my example I didn't change to font to something arbitrary, but Courier New, which is a monospaced font: the width of each character is the same (this is important). My hunch is with other fonts where the width of characters differs, depending on the font and renderer the `textWidth()` calculation might not be very precise and errors could accumulate one character at a time (e.g. error is less noticeable with a short text string). This probably doesn't take into account more advanced font features like ligatures for example. I hope this clarification helps. – George Profenza Feb 01 '22 at 09:24