How to View Table in Processing

roshani

Hi,

I want to view table in processing, which has row & colum.

How Can i create visual table in processing ?

Every second i will process some data & data will be update in table in real time.

How can i update data in table in real time ?

Thanks

Chrisir

http://forum.processing.org/two/discussion/comment/50667/#Comment_50667

roshani

Hi,

I would like to refine my question.

I just want to create table, as we see in excel. ( with row & col). You can say spreadsheet.

Where i can add data in fields in real time.

just like data base.

roshani

Here i found this link but i am new for java.

don't know how to use it with processing.

http://www.jitendrazaa.com/blog/java/create-excel-file-in-java-using-apache-poi-library/

akenaton

@roshani=== the link given by Chrisir gives you the answer to your first question (drawing a grid) as for the second one (populating it with data) you can use (from processing) Table() and a lot of methods for getting your values; then you have the choice: or you have some .csv, or you create it on runtime using your data input for creating the Table values. Of course there are a lot of methods & functions in excel that you cannot so easily get working; but i presume that you want only to display your values (strings or int or float...) in the grid.

roshani

yes, i want to display only string value in table.

i also read table() command & there is one example.

This example will create csv file with data. It does not show table in processing like this. Here is attached picture.

akenaton

@roshani:: i don't understand, your picture is too little and what is it??? - How have you get this?? from excel???

--- you make your gui grid, number of cells depending of colomns && rows ---you create your .csv (or you have it && load() --- you add the values to the grid:: txt("", x, y)--- since there are a lot of get methods in Table() -- i have done that and it works without any problem

roshani

Dear Akenaton,

I have searched table() function in reference. I also look other function related with table.

But i could not find any function which will create gui grid in processing & then i can update data fields in it.

I also test table() function, they work but they will create excel file in background, excel file does not appear in gui grid format.

Thanks

akenaton

of course Table() does not create gui grid: you have to draw it by yourself & that is very easy. Then you get the values from your table and display them with text("myvalue", x, y). x & y = x & y coordinates of the cell where you want to display. If you have some array[] with all cells coordinates created when you have firstly made the grid all values can be displayed in order in a for loop.

         TableRow row = table.getRow(n); 
           String leTxt = row.getString(colonnes[z]);//colonnes = array for your columns
        txt(leTxt,x, y);// x& y from your coordinates array[] or array[][]

roshani

Dear Akenaton,

there is no option to scroll table, if we want to scroll down table.

Chrisir

Processing is low level

There is no excel ready build in

Your questions are quite vague.

Where do you get the data from? Csv? Hard drive? Format=?

Only int or string as well? How many rows and columns ?

How many chars per cell?

What functions do you need? Copy? Dropdown....?

Do you want to type in stuff with keyboard?

Do you need calculations?

Excel can do all sort of things

Write some code and show it....

Do you know oop / objects/ classes?

roshani

Dear Sir,

As you see in my 2nd post, i have provide this link.

http://www.jitendrazaa.com/blog/java/create-excel-file-in-java-using-apache-poi-library/

As you ask for OOP/ Objects/ classes

I know & understand it little bit.

For example controlP5 is basically class, where we can create multiple objects.

Class have its own variable & have function ( may be private or public) etc.

private function can not be called from outside but public functions may be called from outside.

http://www.cs.cf.ac.uk/Dave/HCI/HCI_Handout_CALLER/node167.html

http://java.about.com/od/Creating-Tables/ss/A-Simple-Table-Example-Java-Code-Program.htm

akenaton

@roshani:: scrolling (with vertical or horizontal bar) is not included in Table() of course; with processing i dont know if there is a library for that (perhaps controlP5???) - I see in reference for processing 3 an example for horizontal bar scrolling:: https://processing.org/examples/scrollbar.html; you can try with that. I never tryed, i cannot tell if it is ok for your problem... Anyway it s easy with java & swing: you create a JFrame instance, and add a vertical (or horizontal) scrollbar (see here :: docs.oracle.com/javase/7/docs/api/javax/swing/JScrollBar.html; basically that is the code which in used by your link (a-Simple_Table...); problem is, in this case, that you have to use java in order to create your grid gui and so on...

roshani

Dear Akenaton,

Thanks .

roshani

Dear Akenaton,

Here is class for creating gui table with scrollbar.

http://www.java2s.com/Tutorial/Java/0240__Swing/1000__JTable.htm

akenaton

@roshani::: yes, with Java of course; but you asked for processing and in this case you have to use chrisir code + Table() @&& tableRow() as i told you. As for adding scroll bars (you have also asked for!!!) you can do that with java && the class ScrollBar; as for processing, workaround-solution could be, with eclipse, to create your main class with java (JFrame && JPanel) and to transform your p5 code in another class extending PApplet. After that in the main code (where you create the jFrame && jPanel) you have only to create an instance for your applet class and to add it to the panel:: panel.add(myApplet);

Chrisir

Do you need scrolling vertically or horizontally or both?

With mouse or with keyboard?

akenaton

@ roshani && @ Chrisir=

let us suppose that you want both (horizontal && vertical) (why not???)

--- as for me (see post ) i have tried with https://processing.org/examples/scrollbar.html for horizontal and seen that it s not so complicated to "translate" it for vertical; yet the result is very ugly and not at all == to java and ui look & feel. That's why i prefer in this case use java.

Using your (chrisir) code for making the gui ( i have only modified some details in order that it could run with Table() && suppressed your color rect (which can be useful if selected... another story!!!!) i have coded some lines with java, which seems to me very less "headache" than the p5 code for some 2 stupids sliders...). You can see & try. What i think is that P5 has to make things java complicated more simple. In this case i dont think!!!! - Tell me...

CODE:

from chrisir (but of course adapted to java use!!! && roshani resquest....though this one is not evident!)

    PROCESSING:// class in eclipse


                        Color[] colors = new Color[25];
                            Table table; 
                            String[] mots = {"Lion", "panth", "ane", "cheval", "poiss","tab","sucre","sel","eau", "vert"};
                            String[] mots1 = {"anima", "mamm", "veget", "miner", "gaz", "bouc", "chevr", "sor","but", "con"};
                            String[] mots2 = {"sylv", "ameli", "phil", "flor", "tony", "paul","tom", "jeff","jen", "carl"};
                            String[] colonnes = {"name", "type", "nombre", "prenom", "âge"};
                            int[] chiffres= {22,34,56,75,43,120,001,59,200,12};
                            int[] chiffres1 = {45,32,48,78,58,76,230,42,14,17};
                            boolean ecrire = true;
                            //------------------------------------------------


                            public void setup() {

                              size(800, 660);
                              background(0);

                              table = new Table();

                              table.addColumn("name");// this can be made with a for loop //from an array but...
                              table.addColumn("type");
                               table.addColumn("nombre");
                                table.addColumn("prenom");
                                 table.addColumn("âge");

                                 for(int z = 0; z<mots.length; z++){
                                  TableRow newRow = table.addRow();
                                 newRow.setString("name", mots[z]);
                                newRow.setString("type", mots1[z]);
                               newRow.setInt("nombre", chiffres[z]);
                              newRow.setString("prenom", mots2[z]);
                             newRow.setInt("âge", chiffres1[z]);
                                 }

                                  saveTable(table, "data/new.csv");/// if you want!



                              for (int y=0; y < colors.length; y++) { 
                                colors[y]= new Color(255, y*9, 0,0);
                              }
                              // show it 
                              strokeWeight((float) 0.2);
                              showAGrid(38);
                              strokeWeight(1);


                            }


                        public  void draw() {
                             // here for runtime


                            }

                            //------------------------------------------------
                            // Tools 

                            void showAGrid(int xOffSet) {

                              // distance of the cells  
                              int distanceCell = 41;

                              // size of a cell  
                              int sizeCellX = 50;
                              int sizeCellY = 30;

                              int i=1;
                              int r = 0;

                              int xScreen=xOffSet;
                              int yScreen=28;


                              // one for-loop
                              for (int x=0; x < colors.length; x++) {

                                //fill(colors[x]);
                                stroke(255);
                                noFill();
                                /*rect(xScreen, yScreen, 
                                sizeCellX, sizeCellY);*/

                                fill(255);

                             if (ecrire){

                            calculeTexte(r,xScreen,yScreen);
                             }
                               // text(i, xScreen+3, yScreen+16);

                                // just move to the right 
                                xScreen = xScreen + distanceCell;


                                // after 5 times: new line
                                if ((x>0) && (i%5==0)) {
                                  xScreen=xOffSet;   // back to left side again
                                  yScreen=yScreen + distanceCell;
                                r = r+1;
                              ecrire=true;  //  new line/// in order to draw on screen
                                //println(r);
                                } // if
                             i++;
                            /* if(r<9){///hardcoded values, can (must) disappear
                                r++;
                             }*/
                              }

                            }

                            void  calculeTexte(int n, int xScreen, int yScreen){


                             for (int z= 0; z<colonnes.length; z++){
                               TableRow row = table.getRow(n);

                               String leTxt = row.getString(colonnes[z]);
                               textSize(14);

                            text(leTxt, xScreen , yScreen+16);

                             xScreen= xScreen+150;// depends of textWidth(leTxt); not to //hardcode!

                             }
                             ecrire = false;

                             } 

                            @Override
                            public void actionPerformed(ActionEvent e) {
                                // TODO Auto-generated method stub
            //for selecting or...

                            };

                        };

///JAVA:::: (launched from eclipse)

import java.awt.Dimension;
import java.awt.ScrollPane;
import javax.swing.*;

    public class TableRow extends JPanel {
        private static final long serialVersionUID = 1L;

            public static void main(String[] args) {


                // all this to put in a method called from main but...)



           //For the frame:::

JFrame.setDefaultLookAndFeelDecorated(true);
                final JFrame frame = new JFrame("TableRow+scrollbars");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setSize(800,700);// could be applet.getWidth() && getHeight()

// for the pannel:::

                JPanel panel = new JPanel();

// for the applet::::

                final MyApplet applet = new MyApplet();
                applet.init();

//adding stuff
               panel.add(applet);
 //setting Scroll // NOT WORKING = JScrollPAne; working ScrollPane (awt)

                ScrollPane scrollPane = new ScrollPane(ScrollPane.SCROLLBARS_ALWAYS);
               scrollPane.setPreferredSize(new Dimension(450,350));

//adding stuff
               scrollPane.add(panel);
               frame.getContentPane().add(scrollPane);


frame.pack();

frame.setLocationRelativeTo(null);//middle
                frame.setVisible(true);

        }

}

Chrisir

small version for processing, not sure whether it's different from yours.

you have to replace the loadString with a table (see above)

Chrisir ;-)

// 

// enter your file here:
// String lines[] = loadStrings("........txt");
String lines[] = { 
  "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,324,23,234,324,23,234,324,Minnesota", 
  "2,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,dffe", 
  "3,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,miss", 
  "4,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Minneap", 
  "5,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Test", 
  "6,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,wow", 
  "7,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Minnesota2", 
  "8,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,apolao", 
  "9,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Minnesota", 
  "10,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,dffe", 
  "11,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,miss", 
  "12,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Minneap", 
  "13,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Test", 
  "14,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,wow", 
  "15,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Minnesota2", 
  "16,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,apolao", 
  "17,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Minnesota", 
  "18,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,dffe", 
  "19,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,miss", 
  "20,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Minneap", 
  "21,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Test", 
  "22,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,wow", 
  "23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Minnesota2", 
  "24,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,apolao", 
  "25,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Minnesota", 
  "26,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,dffe", 
  "27,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,miss", 
  "28,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Minneap", 
  "29,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Test", 
  "30,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,wow", 
  "31,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,Minnesota2", 
  "32,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,23,234,324,apolao"
};

// const 
final int cellHeight = 20;
//
// the max numbers of the grid 
int gridX;
int gridY;

// the minimal Width for all Column
final int minWidthColumn = 43; 

// the space between the columns (the distance/gap between the columns)
final int spaceBetweenColumns = 10;  

// for srolling 
int startX = 0; // startx and starty represent the scrolling
int startY = 0;

// the grid is made of cells 
Cell[][]grid;

// ----------------------------------------------------------

void setup() {
  size (800, 700);
  background(111);
  textSize(12);
  //
  // how many rows and columns do we have? gridx and gridy.
  gridY = lines.length;
  String [] listTemp = split ( lines[0], "," );
  gridX = listTemp.length;
  listTemp = null;  // not in use anymore

  // make the grid  
  makeTheGrid();
} // func 

void draw () {
  //
  background(111);

  // show the Excel grid 
  showGrid();

  // status bar at bottom 
  fill(44);
  noStroke();
  stroke(0); 
  rect(0, height-20, width, 20);
  fill(255);  
  text("Use cursor to scroll. H to reset.", 12, height-5);
  //
} // func 

// ------------------------------------------------------------

void makeTheGrid() {

  // make grid 
  grid = new Cell[gridX+1][gridY+1];  

  // loop
  for (int i = 0; i < lines.length; i++) {
    String [] list2 = split ( lines[i], "," );
    for (int i2 = 0; i2 < list2.length; i2++) {
      grid[i2] [i] = new Cell ( 
      list2[i2], 
      i2 * (width/gridX) + 12, i *  (cellHeight+11)+12, 
      color (0), color (251, 255, 31), color(255) );
    }
  }

  // now we need to do some measurements and correct 
  // some values of the grid

  // measure max width of each column 
  float [] widthOfColumns = new float [gridX+1];
  //   
  for (int i = 0; i < lines.length; i++) {
    String [] list2 = split ( lines[i], "," );
    if (gridX != list2.length) {
      println ("####### different numbers of columns encountered #########################");
    }
    for (int i2 = 0; i2 < list2.length; i2++) {
      // find the longest text 
      if (widthOfColumns[i2] < textWidth(list2[i2])+14) 
        widthOfColumns[i2] = textWidth(list2[i2])+14;
    }
  }

  // assign the width from above to the columns cells
  for (int j = 0; j<gridY; j++) {
    for (int i = 0; i<gridX; i++) {
      // make sure all columns are at least minWidthColumn wide
      widthOfColumns[i] = max (widthOfColumns[i], minWidthColumn); 
      grid[i][j].w = widthOfColumns[i];
      grid[i][j].h = cellHeight;
    }
  }

  // assign the x values to cells. 
  int xCount = 21;
  for (int i = 0; i<gridX; i++) {
    for (int j = 0; j<gridY; j++) {
      grid[i][j].x = xCount;
    }
    xCount += widthOfColumns[i] + spaceBetweenColumns;
  }
}

void showGrid() {
  //  show the Excel grid 
  // 
  //  traditional way for the grid (no scrolling)  
  //  for (int i = 0; i < gridY; i++) {
  //    for (int i2 = 0; i2 < gridX; i2++) {
  //      grid[i2][i].display();
  //    }
  //  }
  //
  // new way for the grid (scrolling)
  // startx and starty represent the scrolling
  int k=0;
  // the outer for loop (y, rows)
  for (int i = startY; i < gridY; i++) {
    // numbers on the left side 
    fill(255);
    text(i, 3, k*(cellHeight+11)+29);
    // the inner for loop (x)
    for (int i2 = startX; i2 < gridX; i2++) {
      // displaying the cell with an offsetx and offsety 
      grid[i2][i].display2(
      -1 * int(grid[startX][i].x)+22, 
      -startY*(cellHeight+11));
    }// for
    k++;
  }// for
}// func 

// ----------------------------------------------------------------------

void keyPressed() {
  //
  if (keyCode==UP) {
    startY --;
  } else if (keyCode==DOWN) {
    startY ++;
    //---
  } else if (keyCode==LEFT) {
    startX --;
  } else if (keyCode==RIGHT) {
    startX ++;
  } 
  //---
  // Home / reset 
  else if (keyCode=='h'||keyCode=='H') {
    startX = 0;
    startY = 0;
  }
  //--------------------------
  // boundaries 
  if (startX<0)
    startX=0;
  if (startY<0)
    startY=0;
} // func 

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

class Cell {
  //
  float x;  // pos 
  float y;

  float w;  // size
  float h;
  // 
  color colCellFillRect;  // color rect fill  
  color colCellStroke;    // color rect outline
  color colCellFillText;  // color text
  //
  String textCell = "";   // content 
  //
  // constr 
  Cell ( String text_, 
  float x_, float y_, 
  color cf_, color cs_, color ct_ ) {
    textCell = text_;
    x        = x_;
    y        = y_;
    colCellFillRect = cf_;
    colCellStroke   = cs_;
    colCellFillText = ct_;
  } // constr 

  void display () {
    // uses fixed Pos
    // (no scrolling)
    // not in use 
    fill(colCellFillRect);
    stroke(colCellStroke);
    rect(x, y, w, h);
    //
    fill(colCellFillText);
    text ( textCell, x+5, y+3, w, h );
  }

  void display2 ( int offsetX, int offsetY  ) {
    // uses fixed Pos PLUS offsetX and offsetY
    // for scrolling
    fill(colCellFillRect);
    stroke(colCellStroke);
    rect(x+offsetX, y+offsetY, 
    w, h);
    //
    fill(colCellFillText);
    text ( textCell, 
    x+5+offsetX, y+3+offsetY, 
    w, h );
  }
  //
}

//