search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.47k stars 3.29k forks source link

A way to create HTML tables. #5154

Open Brahvim opened 3 years ago

Brahvim commented 3 years ago

How would this new feature help increase access to p5.js?

Most appropriate sub-area of p5.js?

New feature details:

Basically, this is a request for something which would insert a table element in the HTML file, to help with making tables; one would be saved from the hassle of typing every tag to make an HTML table, and it would ALSO be possible to make tables generate with data that was generated procedurally instead of being hardcoded into the HTML, etc.

welcome[bot] commented 3 years ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

Prateek93a commented 3 years ago

@Brahvim This might be helpful : https://p5js.org/reference/#/p5.Table

Brahvim commented 3 years ago

@Brahvim This might be helpful : https://p5js.org/reference/#/p5.Table

Wait, but does it work with HTML? Because what I requested was for it to work like a DOM element.

The reference page itself does not mention that it is a DOM element anywhere. (Unless I misread!)

Thank you for the information though! :D!

Prateek93a commented 3 years ago

Oh ok, I misread your request and thought you were asking for tables feature in p5 sketch. Thanks for the clarification!

outofambit commented 3 years ago

Hey @Brahvim, thanks for filing this request! Did you have any thoughts on how would this new feature help increase access to p5.js? This seems like an interesting idea (and the DOM module is one of my favorite parts of p5.js!) but I'm having trouble connecting this idea to our focus on access. What do you think?

Brahvim commented 3 years ago

Hey @Brahvim, thanks for filing this request! Did you have any thoughts on how would this new feature help increase access to p5.js? This seems like an interesting idea (and the DOM module is one of my favorite parts of p5.js!) but I'm having trouble connecting this idea to our focus on access. What do you think?

Uh-oh!~ I am sorry, I don't think it does so in any way. Thank you for addressing that!

micuat commented 3 years ago

@outofambit just a thought but can this be helpful for listing descriptions for screen readers? In fact the current implementation of describeElement generates a table in a naive way, but this could be wrapped by createTable if that is implemented as part of dom library https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js#L174

Brahvim commented 3 years ago

@outofambit just a thought but can this be helpful for listing descriptions for screen readers? In fact the current implementation of describeElement generates a table in a naive way, but this could be wrapped by createTable if that is implemented as part of dom library https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js#L174

Good idea, thank you!

Brahvim commented 3 years ago

I recently found out about the p5 saveTable() method. Maybe it is possible to generate an HTML table with it and add that to the HTML file? I think that is possible too. Might not need to keep this issue open if that is possible to do.

micuat commented 3 years ago

@Brahvim it's close but not exactly what you want - it's for outputting a file instead of DOM https://github.com/processing/p5.js/blob/374acfb44588bfd565c54d61264df197d798d121/src/io/files.js#L1747-L1782

Brahvim commented 3 years ago

@micuat Yes, I know that, and that's what I said - since this generates markup for a table, why not find/implement a way to insert that code into the index.html file? Given an id attribute, it'll then be very easy to apply style information, etc.

micuat commented 3 years ago

@Brahvim I get your point but it sounds a bit like hotglue / adhoc solution to me. If this is going to be implemented, I think it's fair to make a new "class" like TableElement to manage it because the existing solutions for describeElement and saveTable are specific to output a table and, for example, you cannot simply add a row/column/cell.

There is also a problem with p5.createElement("td") that the performance is not optimal for a big table (the OP says >2000, but I see huge performance drop even with ~200) https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/11

But again, we need to justify if this is needed from the perspective of accessibility (otherwise we end up adding every possible feature to p5.js). You can always use other libraries to generate a table.

Brahvim commented 3 years ago

@Brahvim I get your point but it sounds a bit like hotglue / adhoc solution to me. If this is going to be implemented, I think it's fair to make a new "class" like TableElement to manage it because the existing solutions for describeElement and saveTable are specific to output a table and, for example, you cannot simply add a row/column/cell.

There is also a problem with p5.createElement("td") that the performance is not optimal for a big table (the OP says >2000, but I see huge performance drop even with ~200) https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/11

But again, we need to justify if this is needed from the perspective of accessibility (otherwise we end up adding every possible feature to p5.js). You can always use other libraries to generate a table.

I see. Should probably leave it up to the developers of p5 now...?