How do I create a table inside p5 space?

GWAK · February 19, 2022, 2:15am

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?

hotfooted · February 19, 2022, 10:06am

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.

GWAK · February 19, 2022, 10:48am

@hotfooted
@GoToLoop

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?

GoToLoop · February 19, 2022, 12:11pm

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.

GWAK · February 19, 2022, 12:23pm

@GoToLoop

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’?

Chrisir · February 19, 2022, 12:25pm

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
//

GoToLoop · February 19, 2022, 12:37pm

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.

GWAK · February 19, 2022, 12:39pm

@Chrisir

Dear Chrisir

Thank you for answer.
I am currently using it like this:

Set one image as background.
Output the text in the corresponding position for each image.

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.

GWAK · February 19, 2022, 12:45pm

@GoToLoop

thank you for the reply.
This is the answer I want.
I solved it because of you. thank you.
link : p5.js Web Editor

GWAK · February 19, 2022, 1:44pm

@GoToLoop

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’?

GoToLoop · February 19, 2022, 3:41pm

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));
}

GWAK · February 19, 2022, 4:15pm

Now I understand.
thank you.
You are an angel.

Topic		Replies	Views
Displaying a p5.Table in an HTML table outside the canvas Gallery	0	512	March 14, 2021
Creating and Populating a Table From Scratch Coding Questions	11	2845	July 12, 2019
Table javascript p5.js Coding Questions	0	275	February 27, 2020
P5 Canvas and HTML Libraries	2	533	April 7, 2021
P5.dom.js 'createElement' function not able to set properties? Coding Questions	4	1624	October 6, 2018

How do I create a table inside p5 space?

Related topics