How do I create a table inside p5 space?
link : https://codepen.io/anon/pen/bNJeLO
Like the picture above, I want to create a slide table.
Is there any way to make a slide table in p5 space?
How do I create a table inside p5 space?
link : https://codepen.io/anon/pen/bNJeLO
Like the picture above, I want to create a slide table.
Is there any way to make a slide table in p5 space?
p5js is just js embedded in an html page with css. you can just skip the canvas stuff and use only the html and css if you want to achieve what is in your linked sketch. something like this if you mean you want to create a table within the canvas thatâs a different story.
Yes. In the method of the first post, you cannot put a graph in âp5-canvasâ.
If so, the best way is
link: Tables with arrays, sort - OpenProcessing
Is there no choice but to create the table as the source code internally?
JS can programmatically access both HTMLElement <tags>
& CSS styles.
Or even programmatically create them & then attach them to the webpage.
In order to access any HTMLElement within a webpage we can call p5js function select().
For example, const tableElem = select('table');
would find the 1st <table>
tag & return it wrapped up as a p5.Element datatype object.
In order to create & attach them to the root of the webpage we can call createElement().
For example, var tableRow = createElement('tr');
would create a <tr>
tag wrapped up as a p5.Element datatype object.
We can also move any Element to another 1 via p5.Element methods parent() & child().
For example, tableRow.parent(tableElem);
would move the <tr>
tag referred by variable tableRow into the <table>
tag referred by variable tableElem.
Another example, tableRow.child(createElement('td', 'Apple')).child(createElement('td', 'Red')).child(createElement('td', 'These are red.'));
would create & place 3 <td>
tags inside the <tr>
tag referred by variable tableRow.
link : p5.js Web Editor
Dear GoToLoop
I made it based on what you said.
Thank you.
In conclusion, can it be said that it cannot be put in âp5-createCanvasâ?
here is a processing / Java example
// class with tools
ToolsForTable tools = new ToolsForTable();
// 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, "Road (establishing the longest road: 2 victory points)", "1x", "1x", "", "", "", "0" );
tResources = tools.tableAddData ( tResources, "Settlement. Players with a settlement adjacent to a hex containing the number just rolled receive one card of the corresponding resource.", "1x", "1x", "1x", "1x", "", "1" );
tResources = tools.tableAddData ( tResources, "City (which must replace existing settlement). Cities produce two cards of the corresponding resource.", "", "", "", "2x", "3x", "2");
String textDevelopmentCard =
"Development Card - Three types of development cards include cards worth one victory point; "
+"knight cards, which allow the player to move the robber as if they had rolled a 7 (but without the remove-half rule); "
+"and a third set of cards which allow the player one of three abilities when played.";
tResources = tools.tableAddData ( tResources, textDevelopmentCard,
"", "", "1x", "1x", "1x", "?" );
// ------------------------------
}
void draw() {
background(0);
tools.showTable(tResources,
22, 52);
fill(tools.WHITE);
text("The Settlers of Catan - Building Costs",
22, 27);
text("Place the mouse over a word to show full text in the Status Bar",
22, height/2-110);
}
//===============================================================================
// Tools collection
class ToolsForTable {
// 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)) {
statusBar(row.getString(i2));
}//if
// vertical line
stroke(WHITE);
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_;
}//func
void statusBar(String textStatus) {
fill(GRAY);
noStroke();
rect(0, height-32,
width, 33);
fill(WHITE);
text (textStatus,
3, height-12);
}//func
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
//
p5js draws inside a <canvas>
tag, which is an HTMLCanvasElement:
Theoretically you could position() a <table>
tag over the p5jsâ <canvas>
tag by style() it transparent.
Or you could completely hide() the <table>
tag & parse its internal tags in order to draw those content using text() & line(), just like your OpenProcessing sketch did by reading data from a CSV file.
Dear Chrisir
Thank you for answer.
I am currently using it like this:
However, I was wondering if there is any way to create a table internally.
If you look at what you said, it is confirmed that it is made through internal coding.
thank you for the reply.
This is the answer I want.
I solved it because of you. thank you.
link : p5.js Web Editor
my source : p5.js Web Editor
ref source : HTML í
ě´ë¸ tbody ě¤íŹëĄ¤ ě ěŠ - ě íěí¤
I want to put data inside âtbodyâ.
However, I donât know how to put it in âtbodyâ with the âchildâ function.
Do you have any way? Or should it be seen as a limitation of âp5â?
Your line tableRow.child(createElement('tr'));
is creating a <tr>
tag & moving it inside your <thead>
tag.
However the other tags <th>
& <td>
gotta move inside a <tr>
tag, not <thead>
or <tbody>
!
And also both <thead>
& <tbody>
tags need to go inside a <table>
tag:
'use strict';
var tbody;
function setup() {
noCanvas();
const table = createElement('table').class('scrolltbody').position(10, 100);
createElement('tr')
.parent(createElement('thead').parent(table))
.child(createElement('th', '#'))
.child(createElement('th', 'NAME'))
.child(createElement('th', 'ID'));
tbody = createElement('tbody').parent(table);
for (var i = 0; i < 20; addNewTableRow(tbody, ++i));
}
function addNewTableRow(tableBody, index = '') {
return createElement('tr')
.parent(tableBody)
.child(createElement('td', '' + index))
.child(createElement('td', 'name' + index))
.child(createElement('td', 'id' + index));
}
Now I understand.
thank you.
You are an angel.