Data and Timing Display

mslba

Hi all,

I would like to write a simple program that parses text data from a table and displays a row of text for a specified amount of time. Then I would like for that text to disappear and for the next row to appear for the same time interval.

I experimented with the Bubbles example to see how I would achieve that, but it seems that all the data that are in the table will appear with draw and whatever new bubbles are added through mousePressed will just be timed. I wouldn't like to use the mouse functionality so can anyone help me with achieving a redraw of my sketch so that one bubble appears at a time just based on seconds passed. Thank you, here's my code:

Table table;
Bubble[] bubbles;
void setup() {
  size(480, 360);
  loadData();
  frameRate(1);
}
void draw() {
  background(255);
 drawWords(frameCount);
}
void drawWords(int count){
  // add code year to draw some words based on the number given in 'count'
   for (int i = 0; i<bubbles.length; i++) {
    bubbles[i].display();

  }
}
void loadData() {
  // "header" indicates the file has header row. The size of the array 
  // is then determined by the number of rows in the table. 
  table = loadTable("data.csv", "header");
  bubbles = new Bubble[table.getRowCount()];
  for (int i = 0; i<table.getRowCount(); i++) {
    // Iterate over all the rows in a table.
    TableRow row = table.getRow(i);
   // Access the fields via their column name (or index).
    float x = row.getFloat("x");
    float y = row.getFloat("y");
    float d = row.getFloat("diameter");
    String n = row.getString("name");
    // Make a Bubble object out of the data from each row.
    bubbles[i] = new Bubble(x, y, d, n);
  }
}
void mousePressed() {
  // When the mouse is pressed, create a new row and set the values for each column of that row.
  TableRow row = table.addRow();
  row.setFloat("x", mouseX);
  row.setFloat("y", mouseY);
  row.setFloat("diameter", random(40, 80));
  row.setString("name", "Blah");
// If the table has more than 10 rows, delete the oldest row.
  // This writes the table back to the original CSV file
  // and reloads the file so that what's drawn matches.
  saveTable(table, "data/data.csv");
  loadData();
}
// This simple Bubble class draws a circle to the window 
// and displays a text label when the mouse hovers.
class Bubble {
  float x, y;
  float diameter;
  String name;
  boolean over = false;
  // Create the Bubble
  Bubble(float tempX, float tempY, float tempD, String s) {
    x = tempX;
    y = tempY;
    diameter = tempD;
    name = s;
  }
  // Checking if mouse is over the bubble
  void rollover(float px, float py) {
    float d = dist(px, py, x, y);
    if (d<diameter/2) {
      over = true; 
    } else {
      over = false;
    }
  }
  // Display the Bubble
  void display() {
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(x, y, diameter, diameter);
      fill(0);
      textAlign(CENTER);
      text(name, x, y+diameter/2+20);
  }
}
//Ends Here

koogs

edit post, highlight code, press crtl-o to format it

koogs

https://forum.processing.org/two/discussion/8084/how-do-i-display-a-message-for-a-few-seconds

kfrajer

Edit your post (gear icon in the top right corner of your post), select your code and hit ctrl+o to format your code. Make sure there is an empty line above and below your code.

Kf

mslba

Thank you, it's edited now.

Chrisir

drawWords receives count - give that as parameter to display and display only these with matching count??

Chrisir

Count gets incremented in line 10 every second - not sure you want this

Instead increase count only of mousePressed?

mslba

I am not interested in using mousePressed, I am interesting in drawing the data that is already included in the table, one at a time. Content of row 1 appears and stays on the screen for 5 sec. After the five seconds content of row 1+1 appears and stays on the screen for 5 sec and so on.

Chrisir

drawWords receives count - give that as parameter to display and display only these with matching count

mslba

Hi, thank you for your help! Sorry if I was unclear, I cleaned up my code so that it's more specific to my needs. I basically want one bubble to appear once for a set amount of time and then disappear for all of the rows on my table. I am not quite sure where to place count and if I should further define it. Here is a cleaner version of my code. Thanks again!

Table table;
Bubble[] bubbles;
int count = 20;


void setup() {
  size(480, 360);
  loadData();
  frameRate(1);
}

void draw() {
 background(255);
 drawWords(frameCount);

}

void drawWords(int count){
  // add code here to draw some words based on the number given in 'count'
   for (int i = 0; i<bubbles.length; i++) {
    bubbles[i].display();

  }
}

void loadData() {
  // "header" indicates the file has header row. The size of the array 
  // is then determined by the number of rows in the table. 
  table = loadTable("data.csv", "header");
  bubbles = new Bubble[table.getRowCount()];


  for (int i = 0; i<table.getRowCount(); i++) {
    // Iterate over all the rows in a table.
    TableRow row = table.getRow(i);


    // Access the fields via their column name (or index).
    float x = row.getFloat("x");
    float y = row.getFloat("y");
    float d = row.getFloat("diameter");
    String n = row.getString("name");
    // Make a Bubble object out of the data from each row.
    bubbles[i] = new Bubble(x, y, d, n);
  }
}



// This simple Bubble class draws a circle to the window 
class Bubble {
  float x, y;
  float diameter;
  String name;

  // Create the Bubble
  Bubble(float tempX, float tempY, float tempD, String s) {
    x = tempX;
    y = tempY;
    diameter = tempD;
    name = s;
  }


  // Display the Bubble
  void display() {
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(x, y, diameter, diameter);
      fill(0);
      textAlign(CENTER);
      text(name, x, y+diameter/2+20);
  }
}

Chrisir

what would be a better name for bubble ir does the name fit ?

IN GENERAL a timer is done like startTime=millis();

if(millis()-startTime > duration)

  do something 

duration is an int with milli seconds: int duration=1000;

Chrisir

line 21

bubbles[i].display();

Idea:

put

   bubbles[count].display();

instead and get rid of the for loop.

When this works replace the call with frameCount in line 14 with a new variable myCount and increment it with the timer I posted above

mslba

Thank you Chrisir,

I think I was able to replace the for loop with the timer functionality that you suggested. And setting the count for display worked. However I wasn't sure how to handle things with the new MyCount variable you suggested. Tried different thing but didn't have any success. The bubbles do come up on the screen one at a time but it looks like the draw loop starts before my sketch was loaded it also looks like the canvas just stays white after there's no other lines populated with data. What is the best way to loop? Thanks again, I feel like I already understand a lot more!

Table table;
Bubble[] bubbles;
int count = 20;
int time;


void setup() {
  size(480, 360);
  loadData();
  frameRate(1);
  time = millis();


}

void draw() {
  background(255);
 drawWords(frameCount);

}

void drawWords(int count){
  // add code year to draw some words based on the number given in 'count'
   //for (int i = 0; i<bubbles.length; i++)
if (millis() - time > count)
   {
    bubbles[count].display();
  }
}

void loadData() {
  // "header" indicates the file has header row. The size of the array 
  // is then determined by the number of rows in the table. 
  table = loadTable("data.csv", "header");
  bubbles = new Bubble[table.getRowCount()];


  for (int i = 0; i<table.getRowCount(); i++) {
    // Iterate over all the rows in a table.
    TableRow row = table.getRow(i);


    // Access the fields via their column name (or index).
    float x = row.getFloat("x");
    float y = row.getFloat("y");
    float d = row.getFloat("diameter");
    String n = row.getString("name");
    // Make a Bubble object out of the data from each row.
    bubbles[i] = new Bubble(x, y, d, n);
  }
}


// This simple Bubble class draws a circle to the window 
// and displays a text label when the mouse hovers.
class Bubble {
  float x, y;
  float diameter;
  String name;

  boolean over = false;

  // Create the Bubble
  Bubble(float tempX, float tempY, float tempD, String s) {
    x = tempX;
    y = tempY;
    diameter = tempD;
    name = s;
  }



  // Display the Bubble
  void display() {
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(x, y, diameter, diameter);
      fill(0);
      textAlign(CENTER);
      text(name, x, y+diameter/2+20);
  }
}

Chrisir

before setup

int myCount;

in draw:

drawWords(myCount);

if(millis.....

myCount++;

in drawWords just the display line, line 27, no if

Chrisir

when there are no lines left, it stops.

you can reset it by saying mycount = 0;

mslba

Ok I tried this and it seems that frameRate is still controlling the timing, as opposed to count. Timing only controls how much the first bubble stays on the screen. I tried reseting myCount in different spots but no luck:

Table table;
Bubble[] bubbles;
int count = 2000;
int time;
int myCount;


void setup() {
  size(480, 360);
  loadData();
  frameRate(1);
  time = millis();


}

void draw() {
  background(255);
 drawWords(myCount);
 if (millis() - time > count) {
   myCount++;
 }

}

void drawWords(int count){
  // add code year to draw some words based on the number given in 'count'
    bubbles[count].display();
}

void loadData() {
  // "header" indicates the file has header row. The size of the array 
  // is then determined by the number of rows in the table. 
  table = loadTable("data.csv", "header");
  bubbles = new Bubble[table.getRowCount()];


  for (int i = 0; i<table.getRowCount(); i++) {
    // Iterate over all the rows in a table.
    TableRow row = table.getRow(i);


    // Access the fields via their column name (or index).
    float x = row.getFloat("x");
    float y = row.getFloat("y");
    float d = row.getFloat("diameter");
    String n = row.getString("name");
    // Make a Bubble object out of the data from each row.
    bubbles[i] = new Bubble(x, y, d, n);
  }
}


// This simple Bubble class draws a circle to the window 
// and displays a text label when the mouse hovers.
class Bubble {
  float x, y;
  float diameter;
  String name;

  boolean over = false;

  // Create the Bubble
  Bubble(float tempX, float tempY, float tempD, String s) {
    x = tempX;
    y = tempY;
    diameter = tempD;
    name = s;
  }



  // Display the Bubble
  void display() {
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(x, y, diameter, diameter);
      fill(0);
      textAlign(CENTER);
      text(name, x, y+diameter/2+20);
  }
}

Chrisir

You need line 12 also after line 21 obviously

We need to reset the time for the interval

Chrisir

And reset mycount when it's > bubbles.size()

count in line 20 is misleading better name it duration

Now we can improve it.... bubbles could start at random intervals, and really rise on the screen from bottom to top and also have different speeds and x-positions... 3-5 bubbles are visible simultaneously.....

Chrisir

// shows a Table line by line slowly

/*

 example table

 x,y,diameter,name
 112,122,22,Boy 
 212,222,32,Girl 
 312,322,12,Fred


 */

Bubble[] bubbles;

int time;
int myCount;

void setup() {
  size(480, 360);
  loadData();
  // frameRate(1);
  time = millis();
}

void draw() {

  int duration = 2000; // in millis 

  background(255);
  drawWords(myCount);

  // if duration time has passed 
  if (millis() - time > duration) {
    // go on
    myCount++;
    time=millis();
    // Let it loop: 
    if (myCount>=bubbles.length) {
      myCount=0;
    }
  }
}

void drawWords(int count) {
  // add code year to draw some words based 
  // on the number given in 'count'
  bubbles[count].display();
}

void loadData() {

  Table table;

  // "header" indicates the file has header row. The size of the array 
  // is then determined by the number of rows in the table.

  table = loadTable("data.csv", "header");

  //table = loadTable(testTable); 

  bubbles = new Bubble[table.getRowCount()];


  for (int i = 0; i<table.getRowCount(); i++) {
    // Iterate over all the rows in a table.
    TableRow row = table.getRow(i);


    // Access the fields via their column name (or index).
    float x = row.getFloat("x");
    float y = row.getFloat("y");
    float d = row.getFloat("diameter");
    String n = row.getString("name");
    // Make a Bubble object out of the data from each row.
    bubbles[i] = new Bubble(x, y, d, n);
  }
}

// ========================================================================

// This simple Bubble class draws a circle to the window 
// and displays a text label (when the mouse hovers).
class Bubble {

  float x, y;
  float diameter;
  String name;

  boolean over = false;

  // Create the Bubble
  Bubble(float tempX, float tempY, 
    float tempD, 
    String s) {
    x = tempX;
    y = tempY;
    diameter = tempD;
    name = s;
  }

  // Display the Bubble
  void display() {
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(x, y, diameter, diameter);
    fill(0);
    textAlign(CENTER);
    text(name, x, y+diameter/2+20);
  }
}//class
//

mslba

Thank you so much Chrisir, this is a lot of help with understanding how to time all these functions and calling the to the appropriate place. Thank you again!

Chrisir

great!

mslba

Hi, I unfortunately have to use processing 1.5.1 because that's all my mac mini can handle. So, I am working with some of Ben Fry's old examples from visualizing data and have included that Table class to my sketch, but unfortunately some functions like TableRow are not available. I am trying to modify the code but running into some issues. This attempt brings up the error "The field Component.name is not visible"

Table table;
Bubble[] bubbles;
int time;
int myCount;
import geomerative.*;
import ddf.minim.*;
Minim mySound; //CREATE A NEW SOUND OBJECT
AudioInput in;
RFont font;



void setup() {
  size(1920, 1080);
  smooth();
  RG.init(this); 
  font = new RFont("FreeSans.ttf", 42, CENTER);
  mySound = new Minim(this);
  in = mySound.getLineIn(Minim.STEREO,512);
  loadData();
  //frameRate(1);
  time = millis();


}

void draw() {
  int duration = 6500;
  background(0);
  translate(width/2, height/2);
 drawWords(myCount);
 if (millis() - time > duration) {
   myCount++;
   time = millis();
    if (myCount>=bubbles.length) {
      myCount=0;
    }
 }
 float soundLevel = (0.2*in.mix.level()); //GET OUR AUDIO IN LEVEL
  RCommand.setSegmentLength(soundLevel*1000);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);


}

void drawWords(int duration){
  // add code year to draw some words based on the number given in 'count'
    bubbles[duration].display();
}

void loadData() {
  // "header" indicates the file has header row. The size of the array 
  // is then determined by the number of rows in the table. 
  table = new Table("data2.csv");
  bubbles = new Bubble[table.getRowCount()];


  for (int i = 0; i<table.getRowCount(); i++) {
    // Iterate over all the rows in a table.
    //TableRow row = table.getRow(i); 


    // Access the fields via their column name (or index).
    //float x = row.getFloat("x");
    //float y = row.getFloat("y");
    //float d = row.getFloat("diameter");
    String n = table.getRowName(name);
    // Make a Bubble object out of the data from each row.
    bubbles[i] = new Bubble(n);
  }
}


// This simple Bubble class draws a circle to the window 
// and displays a text label when the mouse hovers.
class Bubble {
  //float x, y;
  //float diameter;
  String name;


  // Create the Bubble
  Bubble(String s) {
    //x = tempX;
    //y = tempY;
    //diameter = tempD;
    name = s;
  }



  // Display the Bubble
  void display() {
    stroke(255);
    //strokeWeight(1);
    noFill();
    //ellipse(x, y, diameter, diameter);
      //fill(255);
      textAlign(LEFT);
      RGroup myGoup = font.toGroup(name); 
      RPoint[] myPoints = myGoup.getPoints();
       beginShape(TRIANGLE_STRIP);
  for (int i=0; i<myPoints.length; i++) {

    vertex(myPoints[i].x, myPoints[i].y);
  }
  endShape();
  }
}

mslba

I actually was able to solve this. On line 58 and line 69 replaced 'i' with row and line 67 now is: 'String n = table.getString(row, 0);'. Apparently there was an issue with accessing rows by their name. Thank you!

Chrisir

ok, great!