Text position on screen

Processing Beginners
1

Here’s the code I had to use to get text placed in a 30 x 22 rectangle. From the documentation I expected th using the diagonal coordinates of the rectangle to properly place the text, but it was WAY off. I had to multiply the coordinates by 2 and then fudge it a bit to get things to line up. There are over 50 of these controls all over the screen. Thankfully it worked for all of them. I’m using v4.2. Is this a problem with this beta version? If so I’ll replace it with v3.

{
    fill(green);
    rect (lever[i][xPos], lever[i][yPos], 30, 22);
    fill(black);
  }
  text(leverID[i],lever[i][xPos]*2+8, lever[i][yPos]*2-18,lever[i][xPos]*2+30, lever[i][yPos]*2-22);
2

Hello,

I have not have any issues aligning text.

Take a look a the reference:

There may be something on the Related section that will help you align your text:

image

:)

3

@hacketet. It would be nice if you could post a runnable example. In the meantime and for whatever it’s worth, the following example may do something similar to what you are trying to achieve.

/*
 Creates a grid of push buttons from a generic Button class array.
 Syntax: btn[id] = new Button( x, y, w, h, "title", bkgrndColor, txtColor); 
 ID is taken from position in array.
*/

final int _btnGridX = 40;
final int _btnGridY = 60;
final int _btnW = 120;
final int _btnH = 60;

color BLUE = color(64,124,188);
color LTGRAY = color(185,180,180);
color YELLOW = color(245,250,13);
color RED = color(255,0,0);
color BLACK = color(0,0,0);
color WHITE = color(255,255,255);
 
Button[] btn;

class Button {
  float x, y, w, h;
  String title;
  color bkgrnd;
  color txtColor;
  
 // Constructor
 Button(int xpos, int ypos, float wt, float ht, String titleStr, color background, color foreground) {
   x = xpos;
   y = ypos;
   w = wt;
   h = ht;
   title = titleStr;
   bkgrnd = background;
   txtColor = foreground;
 }
 
 void display(){
   fill(bkgrnd); // background color
   noStroke();
   rect(x, y, w, h, 15); // rounded rect
   fill(txtColor); // text color
   textSize(42);
   textAlign(CENTER, CENTER);
   text(title, x, y, w, h);
 }
 
 void press(int id){
   println("btn id = ", id);
 } 
}

void btnGrid() {
  int left = 0;
  int top = 0;
  int vg = 30; // Space between cols (vert.gutter)
  int hg = 30; // Space between rows (horz.gutter)
  int rows = 5; 
  int cols = 5;
  int id = 0;
  
  btn = new Button[rows*cols]; // creates button array
  for (int k = 0; k < cols; k++) {
    for (int j = 0; j < rows; j++) {
      left = _btnGridX + j * (_btnW + vg);
      top = _btnGridY + k * (_btnH + hg);      
      btn[id] = new Button(left, top, _btnW, _btnH, str(id), LTGRAY, BLACK);
      id++;
    }
  } 
}

void setup() {
  size(800,600);
  background(BLUE);
  btnGrid();
}

void draw() {
 for (int i = 0; i < btn.length; i++) {
  btn[i].display();
 }
}

void mousePressed() {
 for (int i = 0; i < btn.length; i++) {
  if((mouseX >= btn[i].x) && (mouseX <= btn[i].x + _btnW) && (mouseY >= btn[i].y) && (mouseY <= btn[i].y + _btnH)) {
   btn[i].press(i);
  }
 }  
}
1 Like
4

Hello,

The text aligns where I expect it to with this modification to your code:

void setup()
  {
  size(150, 150, P2D);  
  int lxp = 50;
  int lyp = 50;
  
  fill(0, 255, 0);
  rect (lxp, lyp, 30, 22);
  
  fill(0);
  //text( "Lever 0", 
  //      lxp*2+8, lyp*2-18,
  //      lxp*2+30,lyp*2-22);
        
  textAlign(CENTER, CENTER);      
  text( "Lever 0", 
        lxp*1, lyp*1,
        30, 22);
  }

image

:)

5

@glv . Good point; textAlign() is a big help.