I am looking for the best way to format a table that contains general notes on the data as well as the data itself. for example, the data could have typical column headers and each row would have corresponding entries. However, the notes could be text sentences, and could only occupy one row. I am trying to avoid a clumsy orgainization
Thanks
approach 1
approach 2
approach 3
Similar with mouse over
using the text() command with 5 parameters cuts longer text off
on mouse over, the complete text is shown
// class with tools
Tools tools = new Tools();
// the table
Table tResources;
void setup() {
size(1600, 660);
background(tools.WHITE);
// setting up table (column names / headlines)
tResources = tools.newTable("Item", "brick", "wood", "sheep", "wheat", "ore", "points");
// adding data (must match headlines)
tResources = tools.tableAddData ( tResources, "Street", "1x", "1x", "", "", "", "0" );
tResources = tools.tableAddData ( tResources, "Settlement", "1x", "1x", "1x", "1x", "", "1" );
tResources = tools.tableAddData ( tResources, "City", "", "", "", "2x", "3x", "2");
tResources = tools.tableAddData ( tResources, "Dev Card mn,m,m,mn, eewewrrew ooppopopoi pooopopoo ölööölöllökölk ,m.m..,.,m,m..,m", "", "", "1x", "1x", "1x", "?" );
// ------------------------------
}
void draw() {
background(0);
tools.showTable(tResources,
22, 22);
fill(tools.WHITE);
text("use mouse over to show full text",
22, height/2-110);
}
//===============================================================================
// Tools collection
class Tools {
// class not like a car class Car for an object but a collection of tools.
final color RED = color(255, 0, 0);
final color GREEN = color(0, 255, 0);
final color BLUE = color(0, 0, 255);
final color WHITE = color(255);
final color BLACK = color(0);
final color GRAY = color(255/2);
boolean cursorSignShowFlag=false;
// ----------------------------------------------------------------
void showTable(Table tableBtn,
int x, int y) {
int factorX=78; // column width
// rect
stroke(WHITE);
noFill();
rect( x, y,
tableBtn.getColumnCount()*78-6, (tableBtn.getRowCount()+1) * 22 + 10 );
// headline
showTableHeadline(tableBtn, x+6, y+19, factorX);
// horizontal line
stroke(WHITE);
line( x+2, y+5+19,
6+x+(tableBtn.getColumnCount())*factorX-13, y+5+19);
// grid
// loop over rows (y)
for (int i=0; i<tableBtn.getRowCount(); i++) {
// current data row
TableRow row = tableBtn.getRow(i);
// loop over columns in that row (i2 is for x)
for (int i2=0; i2<tableBtn.getColumnCount(); i2++) {
fill(WHITE);
text(row.getString(i2),
i2*factorX+x+6, 25+ i * 22 +y+8,
factorX-8, 15);
if (mouseInside(i2*factorX+x+6, 25+ i * 22 +y+8,
factorX-8, 15)) {
text (row.getString(i2),
20, height-22);
}//if
// vertical line
line( i2*factorX+x, +y,
i2*factorX+x, tableBtn.getRowCount() * 22 + y + 31);
}//for
}//for
}// method
boolean mouseInside( float x_, float y_,
float w_, float h_) {
return mouseX>x_ &&
mouseX<x_+w_ &&
mouseY>y_ &&
mouseY<y_+h_;
}
void showTableHeadline(Table tableBtn,
int x, int y,
int factorX) {
// headline for table
TableRow row0 = tableBtn.getRow(0);
for (int i=0; i<tableBtn.getColumnCount(); i++) {
// headline
fill(GREEN);
text(row0.getColumnTitle(i),
i*factorX+x, y-2);
}
}//method
// ---
// make table
Table newTable (String... listColumnNames) {
Table newT = new Table();
// make columns
for (String s1 : listColumnNames) {
newT.addColumn(s1);
}
return newT;
}//method
Table tableAddData( Table table1, String... data1 ) {
// add rows with data
TableRow newRow = table1.addRow();
// add rows with data
int i=0;
for (String s1 : data1) {
newRow.setString(newRow.getColumnTitle(i), s1);
i++;
}
return table1;
}//method
// ---
void printlnTable(Table tableBtn) {
// rect
stroke(WHITE);
noFill();
println("------------------------------------");
// headline
printlnTableHeadline(tableBtn);
// grid
// loop over rows (y)
for (int i=0; i<tableBtn.getRowCount(); i++) {
// current data row
TableRow row = tableBtn.getRow(i);
// loop over columns in that row (i2 is for x)
String s1="";
for (int i2=0; i2<tableBtn.getColumnCount(); i2++) {
s1+=" "+row.getString(i2);
//
}//for
println(s1);
}//for
println("===========================================");
//
} // method
void printlnTableHeadline(Table tableBtn ) {
// headline for table
TableRow row0 = tableBtn.getRow(0);
for (int i=0; i<tableBtn.getColumnCount(); i++) {
// headline
print(" "+row0.getColumnTitle(i));
}
println("");
}//method
// ------------------------------------------------------------------
String cursorSign() {
// blinking cursor sign | for Input Box
if (frameCount % 13 == 0)
cursorSignShowFlag= ! cursorSignShowFlag;
if (cursorSignShowFlag)
return"|";
else return"";
}//method
//
}//class
//
Thanks. I thought of another approach after seeing your’s and Chrisir’s replies. The notes that I was thinking of, were setup parameters for the process that provided the data in the table. In this case, i could just add rows above the data that contained the name of the parameter and its value.
Column headers could be made compatible with both the data and the parameter information.
One of the parameters should be the table row of the beginning of the data. This provides an index for subsequent processing of the data
i think about that from the view of data files,
and to be open / not restricted / regarding columns and rows
best would be to have 2 CSV files with same structure.
one with the data, one with the notes for each data cell.
this version not have the edit function like @Chrisir
or my editgrid ( see my picture approach 3 )
// TABLE_NOTE
/* need test files
data/data.csv
________________________
head1,head2,head3
1a,1b,1c
2a,2b,2c
________________________
data/data_note,csv
________________________
head1p,head2p,head3p
1ap,1bp,1cp
2ap,2bp,2cp
________________________
*/
Table data, data_note;
String data_fn = "data/data.csv", data_note_fn = "data/data_note.csv";
int dc = 60, dx = 10, dr =20;
float posx, posy;
void setup() {
size(500, 500);
noFill();
stroke(0, 300, 200);
data = loadTable(data_fn, "header");
data_note = loadTable(data_note_fn, "header");
}
void draw() {
background(80, 80, 0);
for (int c =0; c < data.getColumnCount(); c++) text(data.getColumnTitle(c), dx+c*dc, dr);
for (int r = 0; r < data.getRowCount(); r++) for (int c =0; c < data.getColumnCount(); c++) {
text(data.getString(r, c), dx+c*dc, (r+2)*dr);
show_note(r, c);
}
}
void show_note(int row, int col) {
posx = dx+col*dc;
posy = (row+1)*dr;
if (mouseX > posx && mouseX < posx + dc && mouseY > posy && mouseY < posy+dr) { // MOUSE OVER
rect(posx, posy, dc, dr); // rect for cell select
rect(10, height-25, width-20, 22); // rect for note filed
text(data_note.getString(row, col), 15, height-8); // note for selected cell
}
}
for a very basic look ( no rectangles… ) a snappy version
Table data, data_note;
String data_fn = "data/data.csv", data_note_fn = "data/data_note.csv";
int dc = 60, dx = 10, dr =20, posx, posy;
void setup() {
size(500, 500);
data = loadTable(data_fn, "header");
data_note = loadTable(data_note_fn, "header");
}
void draw() {
background(80, 80, 0);
for (int c =0; c < data.getColumnCount(); c++) text(data.getColumnTitle(c), dx+c*dc, dr); // data Column Header
for (int r = 0; r < data.getRowCount(); r++) for (int c =0; c < data.getColumnCount(); c++) { // data
posx = dx+c*dc;
posy = (r+1)*dr;
text(data.getString(r, c), posx, dr + posy); // data cell content
if (mouseX > posx && mouseX < posx + dc && mouseY > posy && mouseY < posy+dr) text(data_note.getString(r, c), 15, height-8); // note for selected cell
}
}
This is elegant and facilitates pinpointing notes to specific cell. Best for multi users of same data.
My application is more personal and, I find it simpler to export the CSV file to a spreadsheet such as numbers. In Numbers (I’m on a Mac), I can view the information as well as use all of the charting, statistical, etc functions to process my data. Furthermore, I can directly insert these charts into my word processor for reports. In this case, I would prefer to have all the setup information as well as the data on the same CSV file.
Thank you for your inputs, they have been helpful.
you described your setup/layout of your special table with nested comments and One of the parameters being the table row of the beginning of the data
have you done this already? Can you share it?
I have not done this yet, I am still in the planning stages. However, I am now driven to go beyond my current method of collecting the data in an array and manually processing it. When I have working code, I will most certainly share it.
sorry, i not get that comment
what does that mean ( i only play Windows and Raspbian OS )
i expect any spreadsheet program to be able to import/export CSV files.
while the delimiter ( tsv … ) can even be language dependent
( i learned CSV as “;” separated )
As a result of this discussion, I have decided to create two independent CSV files, one for the data and the other for the notes. Each of these files will have it’s own structure. I will subsequently import these two files into a spreadsheet template specifically formatted to process the information in these files.
Thanks for the discussion
I think this is a good idea.
If you had it all in one table and you want to have a String description/ comment/ explanation for the first column but the first column would otherwise be of type float that is hard to handle.
With 2 csv you are better off.
Are you planning to do it in numbers or in processing?
The CSV files will be created in Processing where the program for my project that I am collecting data on resides. I will do all of the data processing in my Numbers spreadsheet.
When I double-click on these CSV files in my data folder, they automatically open as separate Numbers files. It is just a matter of dragging and dropping them into my final spreadsheet template, to complete the process.
In this code, you referred to the parameter (String…list ColumnNames) in one way, and used it in your for loop as (String s1 : listColumnNames). I don’t fully understand the syntax. ls the first use another way of saying, stringList? and if so, why don’t you have to declare it as such?
Or, is it another way of saying {" string1", “string2”…} like filling in a string array.
That ellipsis is the syntax for variable arguments (varargs). For your purposes (String... listColumnNames) is the same as (String[] listColumnNames).
The “…” form handles being passed a single string or no strings – that is, a variable number of arguments (0, 1, 2 or more) and it can also be called with strings separated by commas, as well as pre-packed into an array. Here is a discussion if you are curious:
It is not related to StringList. StringList is a class – String… gives a varargs interface to String[] , a primitive array of Strings
Very recently I’ve made 2 functions using the variadic ellipses ... parameter: 