Text not aliging properly

Programming Questions

solrrt

in Programming Questions • 1 year ago

Hey folks, this is a continuation on the question I posted about in this thread: https://forum.processing.org/topic/scaling-line-graphs-with-high-numbers

I take some names and some numbers and draw a horizontal line graph which scales to the window size based on the numbers in my input file.

Here is the code:

Copy code

// Drawing line graphs of some counts
// http://forum.processing.org/topic/scaling-line-graphs-with-high-numbers

// Variables
String[] lines;
int index = 0;
int size_index = 0;
int i = 0;
int liner = 20;
int maxline = 0;
int x1 = 0;
int y1 = 0;
int x2 = 0;
int y2 = 0;
int maxValue; // ADDED: The highest value
int incrementor = 11;

PFont f;

// Setup runs once
void setup() {
//frame.setResizable(true);
background(46, 38, 33);
stroke(190, 232, 224);
lines = loadStrings("rar2.csv");                                                      // Load the csv file which contains the counts
f = loadFont("SansSerif.plain-8.vlw");                                               // Load a font to display the names next to the graph

for (i = 0; i < lines.length; i++) {
    String[] pieces = split(lines[size_index], ',');
    int x = int(pieces[1]); // MODIFIED: You have the x and the y flipped!
    int y = int(pieces[0]);
    if (y > maxline) {
      maxline = y;
    } else {
      maxline = maxline;
    }
    size_index = size_index + 1;

    maxValue = max(maxValue, x); // ADDED: Find the maximum value
}
// Multiplying lines.length by incrementor because of the iteration on the index spacer later in draw()
size(800,(liner+(lines.length * incrementor)+liner)); // MODIFIED: Changed width to allow for scaling
}
// Draw runs continuously
void draw() {
if (index < lines.length) {
    // Split the input file by comma
    String[] pieces = split(lines[index], ',');

    // Variables to set line length and spacing
    // Starting at 120 pixels to the right to give room for the text
    x1 = 120;
    y1 = liner;
    x2 = int(pieces[1]);
    y2 = liner;

    // Increase line thickness to 4
    strokeWeight(8);
    // Set the cap to the end of lines be square
    strokeCap(SQUARE);
    // Set the font and size
    textFont(f,8);
    // Try to align the text properly
    textAlign(CENTER + 10);

    float scaledX = map(x2,0,maxValue,0,width - x1 * 2); // ADDED: Scale the width of the bar
    text(pieces[0], 8,y1);
    line(x1,y1,(x1+scaledX),y2); // MODIFIED: Use scaled value

    // Iterate the line count
    index = index + 1;

    // Increment the liner value by the incrementor, this is the spacing between lines
    liner = liner + incrementor;
} //saveFrame("output-###.png");
}

Here is my input:

Copy code

@ADSADS,2460225
KLA,2921603
ROTAN,3418750
APOELSA,591698
OPERITA,666518
AMC,627883
WOLF,18232624
PUNIT,3503566
CAREFUL,1653507
EGNIAM,104519
HIDDEN,4902406
AUTOMATICS,9738550
LOGICIAN,35221
COMMUNICATE,2237519
SIMPLE,103325
RADI,7115731
SANYON,2485201
ABC,132269
SIGHT,581637
WAY,2464450
SATALITE,633541
FENCE,719014
MOBILITY,305930
COMPUTER,82480
NAUTICAL,360000
NASLA,102026
GBRT,545517
ZAF,659613
ENGINE,6056455
MOUNTAIN,28919859
CARS,1269193
NEXT,406710
PLAIN,13164255
CABLE,90758326
EIGHTY,759857
PLEXIGLASS,316268
RUBA,28379282
CAVA,795682
EL,5280059
MARROW,125486
PORTO,2003336
ZAPATO,192702
NINTH,245905
TEMPLE,1213813
TRACKS,3059460
FOUNDTAIN,1604006
MAYAN,51617
GONDALLA,853676
FLYING,1132444
FLAME,544598
CORNER,1385715
STONE,2170664
SKY,303394
LINE,110943
CHICAGO,93642

The problem is that the text name is very slightly off center with the line that draws beside it, example image linked here: http://farm9.staticflickr.com/8283/7652417516_082a498bc7_o.png

The names appear to be just a few pixels higher than the lines being drawn and I'm not entirely certain how to get them to match up nice and clean, any advice?

Replies(3)

calsign

Re: Text not aliging properly

1 year ago

The first thing that I noticed, which stood out... this line:

Copy code

textAlign(CENTER + 10);

You are assigning the text alignment to be... center plus ten. Since CENTER is a constant integer value, you are actually adding ten to whatever this is (you can find that it is 3 by printing it)... in addition, you are only using one parameter, and CENTER is rather generic as to what this is... something like this would look a bit better:

Copy code

textAlign(LEFT, CENTER);

Next... often, the text simply doesn't line up. I normally resort to the (slightly messy) approach which involves simply adding a fixed number of pixels to the height of each line. It takes some trial and error, but, eventually, you'll get a visual that is slightly more pleasing to the eye.

PhiLho

Re: Text not aliging properly

1 year ago

And perhaps using textDescent() to compute the offset might help.

solrrt

Re: Text not aliging properly

1 year ago

Thanks calsign, it looks like (LEFT, CENTER) did the trick.

Top Reply