Load and display Table in "textbox"

Hey Guys,

im struggling to load and display my .csv the right way. I have 4 columns, each with 10 words and I want to display each column in one textbox. (I found that textbox example here on the forums)
I know how to display the .csv but it won’t work when it comes to the textboxes, I always see just one word instead of all ten. here is the code im working on:

ArrayList<TextBox> textBoxes = new ArrayList<TextBox>();
float scrollSpeed = 10;
 PFont font;
 
//------------------
String [] word;
String [] word1;
Table table;
float yPos=100;
int i;
 
void setup()
{
  size(1280, 720, P2D);
  smooth();

  table = loadTable("01_11_biden.csv", "header");
  for (TableRow row : table.rows()) {
    String nomen = row.getString("Nomen");
    String adjectiv = row.getString("Adjektiv");
    nomen = nomen.toLowerCase();
    adjectiv = adjectiv.toLowerCase();
    word = splitTokens(nomen, "\n ");
    word1 = splitTokens(adjectiv, "\n ");
 
 //____how it works to display all ten words
 //   text(word[i], 100,yPos);
 //   text(word1[i], 100+100, yPos);
 //   yPos=yPos + 20;
     }

  TextBox textBox1 = new TextBox(20, 0, 200, height);

  textBox1 .setTextCol (color(0,0,0));
  textBox1 .setFont    (createFont("basiersquare-medium-webfont.ttf", 30));
  textBox1 .setMargin  (10, 10);
  textBox1 .text  = word[i];

TextBox textBox2 = new TextBox(220, 0, 200, height);
  textBox2 .setTextCol (color(0,0,0));
  textBox2 .setFont    (createFont("basiersquare-medium-webfont.ttf", 30));
  textBox2 .setMargin  (10, 10);
  textBox2 .text = word1[i];
  

  
  textBoxes.add(textBox1);
  textBoxes.add(textBox2);
  
 
  
}
 
void draw()
{
  background(255);
  for (TextBox textBox : textBoxes)
  {
    textBox.draw();
  }



}
 
void mouseWheel(MouseEvent event)
{
  for (TextBox textBox : textBoxes)
  {
    if (textBox.isInside(mouseX, mouseY))
    {
      textBox.scroll(event.getCount()*scrollSpeed/2);
    }
  }
}

 
public class TextBox
{
  public  String    text   = "";
  
  private PGraphics buffer   = new PGraphics();
  private PVector   pos      = new PVector();
  private PVector   size     = new PVector();
  private PVector   margin   = new PVector();
  private float     scroll   = 0;
  private color     backCol  = color(255,255,255,0);
  private color     edgeCol  = color(255,255,255,0);
  private color     textCol  = color(0);
  private PFont     font     = new PFont();
  
  public PVector getPos()  {return pos;}
  public PVector getSize() {return size;}
  
  public void setPos      (PVector pos)      {setPos(pos.x, pos.y);}
  public void setPos      (float x, float y) {pos.x = x; pos.y = y;}
  public void setMargin   (PVector margin)   {setMargin(margin.x, margin.y);}
  public void setMargin   (float w, float h) {margin.x = w; margin.y = h;}
  public void scroll      (float scroll)     {this.scroll = max(this.scroll+scroll, -300); this.scroll = min(this.scroll+scroll,+390);}  // Scroll cannot go below 0.
  public void setBackCol  (color c)          {this.backCol = c;}
  public void setEdgeCol  (color c)          {this.edgeCol = c;}
  public void setTextCol  (color c)          {this.textCol = c;}
  public void setFont     (PFont font)       {this.font = font;}
  
  public void draw()
  {
    buffer.beginDraw();
    {
      buffer.clear();
      buffer.background (backCol);
      buffer.stroke     (edgeCol);
      buffer.fill       (backCol);
      buffer.rect       (0, 0, buffer.width-1, buffer.height-1);  // Border.
      buffer.textFont   (font);
      buffer.fill       (textCol);
      buffer.textAlign  (LEFT, CENTER);
      buffer.text       (text, margin.x, margin.y-scroll, buffer.width-margin.x, buffer.height+scroll);
     
    }
    buffer.endDraw();
  
    image(buffer, pos.x, pos.y); 
  }
  
  public boolean isInside(PVector checkPos) {return isInside(checkPos.x, checkPos.y);}
  public boolean isInside(float checkPosX, float checkPosY)
  {
    boolean inWidth  = checkPosX > pos.x && checkPosX < pos.x+size.x;
    boolean inHeight = checkPosY > pos.y && checkPosY < pos.y+size.y;
    
    return inWidth && inHeight;
  }
  
  public TextBox(PVector size, PVector pos) {this(pos.x, pos.y, size.x, size.y);}
  public TextBox(float x, float y, float w, float h)
  {
    pos.x  = x; pos.y = y; size.x = w; size.y = h;
    buffer = createGraphics(floor(w), floor(h), P2D);
  }
}

as you may see when I call:

textBox1 .text = word[I];

it will display just one word in the textbox.

I feel like I need to find another way to write this line with the yPos cause when I call this (without the textboxes) I see all ten words I want to see

text(word[i], 100,yPos);
yPos=yPos + 20;

but I didn’t find any solution to do so.

I tried also to use this method to load the table, but it didnt really change anything:

String lines[] = loadStrings("01_11_biden.csv");
String [][] csv;
int csvWidth=0;
String[] prep;
//calculate max width of csv file
for (int i=0; i < lines.length; i++) {
  String [] chars=split(lines[i],',');
  if (chars.length>csvWidth){
    csvWidth=chars.length;
  }
}

//create csv array based on # of rows and columns in csv file
csv = new String [lines.length][csvWidth];

//parse values into 2d array
for (int i=0; i < lines.length; i++) {
  String [] temp = new String [lines.length];
  temp= split(lines[i], ',');
  for (int j=0; j < temp.length; j++){
   csv[i][j]=temp[j];
  }
}


prep = new String [lines.length];
for (int i=1; i < lines.length; i++) {
 if (csv[i][1] != null) {
   prep = split(csv[i][2], " ");
   println(prep);
  }
}

as above, the code is working but I don’t know how to use it in combination with the textbox I have

I feel like Im just missing one simple line of code. maybe an if statement or an for loop?
I already tried something like:

if (i < 0) {
yPos=yPos+20;
}

but thats not working. do you maybe know what im missing and can give me a hint to the right direction?

:slight_smile:

before this you need a for loop i over word

thank you for the response.

I played around with different for loops but I can’t get it to work.

I thought this would be the right way to do it:

  for (int i=0; i < word.length; i++){
println(word[i]);
   }

but it has no effect. it prints only one word.

what is interesting is that when I call printArray(word) after

it shows me every word. but like this:

[0] “president”
[0] “donaldtrump”
[0] “time”
[0] “family”
[0] “day”
[0] “health”
[0] “white”
[1] “house”
[0] “folk”
[0] “violence”
[0] “people”

It is unfortunate we don’t see your csv file content

Why do you go over the rows and then use split? Are there multiple nomens in one cell??

Anyway, when you use split and the printArray, it works. Hence yes.

(printArray has just this way of showing an array)

So in theory after split have a for-loop A to split over the word you have in word and in word1.
This for loop A must be INSIDE the

  for (TableRow row : table.rows()) {

section!!! So before " } ".

This for loop A must contain the definition of one (or two) textbox with add!

ah sorry, my csv is looking like this:

Präposition/Pronomen,Nomen,Verb,Adjektiv
the,president,be,past
to,donaldtrump,have,Existential
And,time,end,other
i,family,get,entire
we,Day,make,small
of,Health,Vote,Sick
it,White House,let,strong
in,Folk,need,Bad
you,violence,Promise,Political
our,people,give,Personal

good question, it is just one word within one cell.

gonna check it after lunch and give it a new try. thank you

Yeah.

And also when you look at printArray() output:

[0] “president”
[0] “donaldtrump”
[0] “time”
[0] “family”
[0] “day”

It shows word[] has only one entry ([0], always [0] not an increasing index) each time; the multiple lines are not from one printArray() but from multiple printArray() executions (from the for loop) but each has only one line.

The reason is that split is unnecessary, the cell contains only one word. Good.

So forget word and word1, just use the variables nomen and adjectiv directly.

No second for-loop A needed.

BUT place the entire textbox stuff INSIDE the for loop, before } please.

Regards,

Chrisir

1 Like

yes man it is working now! thank you for your help.
when I did what you said, all words were displayed - but on top of each other.
now I finally figured out how to split them into different lines. I brought back this line

and then changed the 0 here

with my int yPos and now its working :slight_smile:

1 Like