# Load and display Table in "textbox"

**URL:** <https://discourse.processing.org/t/load-and-display-table-in-textbox/26305>\
**Category:** Coding Questions\
**Created:** [December 16, 2020, 5:18pm UTC](https://discourse.processing.org/t/load-and-display-table-in-textbox/26305 "2020-12-16T17:18:48Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hannes](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@hannes](https://discourse.processing.org/u/hannes)\
**Post date:** [December 16, 2020, 5:18pm UTC](https://discourse.processing.org/t/load-and-display-table-in-textbox/26305/1 "2020-12-16T17:18:48Z")

</div>

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:

```auto
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:

```auto
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?

🙂

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 16, 2020, 5:28pm UTC](https://discourse.processing.org/t/load-and-display-table-in-textbox/26305/2 "2020-12-16T17:28:36Z")

</div>

> [@hannes](#):
>
> ```auto
> TextBox textBox1 = new TextBox(20, 0, 200, height);
> 
> ```

before this you need a for loop i over word

---

<div class="post-metadata">

**Author:** ![hannes](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@hannes](https://discourse.processing.org/u/hannes)\
**Post date:** [December 17, 2020, 12:40pm UTC](https://discourse.processing.org/t/load-and-display-table-in-textbox/26305/3 "2020-12-17T12:40:37Z")

</div>

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:

```auto
  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

> [@hannes](#):
>
> ```auto
> word = splitTokens(nomen, "\n ");
> word1 = splitTokens(adjectiv, "\n ");
> 
> ```

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”

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 17, 2020, 12:57pm UTC](https://discourse.processing.org/t/load-and-display-table-in-textbox/26305/4 "2020-12-17T12:57:54Z")

</div>

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

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

```

section!!! So before " } ".

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

---

<div class="post-metadata">

**Author:** ![hannes](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@hannes](https://discourse.processing.org/u/hannes)\
**Post date:** [December 17, 2020, 1:03pm UTC](https://discourse.processing.org/t/load-and-display-table-in-textbox/26305/5 "2020-12-17T13:03:43Z")

</div>

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

> [@Chrisir](#):
>
> Why do you go over the rows and then use split? Are there multiple nomens in one cell??

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

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 17, 2020, 1:55pm UTC](https://discourse.processing.org/t/load-and-display-table-in-textbox/26305/6 "2020-12-17T13:55:20Z")

</div>

> [@hannes](#):
>
> but it has no effect. it prints only one word.

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

---

<div class="post-metadata">

**Author:** ![hannes](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@hannes](https://discourse.processing.org/u/hannes)\
**Post date:** [December 17, 2020, 3:12pm UTC](https://discourse.processing.org/t/load-and-display-table-in-textbox/26305/7 "2020-12-17T15:12:46Z")

</div>

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

> [@hannes](#):
>
> `// yPos=yPos + 20;`

and then changed the 0 here

> [@hannes](#):
>
> `TextBox textBox1 = new TextBox(20, 0, 200, height);`

with my int yPos and now its working 🙂