Flexible Card Request

[finchamp]

Hello guys,
A few ideas for some features that would be really helpful to me:

1. An empty card that accepts HTML contents as updates.
2. A "card" which groups together existing cards by accepting two uint8_t "index" values as arguments - the index of the first card in the group and the index of the last. This would be huge for organizing more complex projects.
3. In lieu of the blank HTML card, any way to change or at least disable the icon on the generic card.
4. Any way to add my own CSS to the page, which would obviously solve point 3 and allow for work-arounds for the other requests.

If you want to point me in the right direction, I could see if this was within my ability to provide some code for review. Thanks!

[giordinosavignano]

Yes, yes! This will be very much a great help for me. There is any plan for moving forward with this feature?

[inF1704]

I would also like to see a way to change card icons and maybe some kind of subtabs or a better way to divide, organize, or clearly separate areas within a tab

[mathieucarbou]

Me too!
I have the pro version and I am thinking for now about adding a card which will act as a divider (taking the full line length) with a title and subtitle.

[finchamp]

Pro user here as well, and I understand if these features need to remain Pro-only. Currently, I'm using checkboxes to show/hide extra cards, and employing tabs to the fullest of their potential, but my project is still looking a bit untidy. Any one of these options could kick it up to a high degree of polish. I'm using this in a substantial (for me) commercial product, and it really is a fantastic tool -- I really appreciate all the work Mathieu and Ayush have put into it.

I have plenty of experience with HTML and CSS, but little to none with Svelte and even JS broadly. So large parts of the source are outside my areas of expertise. I would expect that any of these new card types would require adding to the compressed page HTML, and to the Svelte files (in addition to the obvious cpp class constructors and methods). I would be willing to contribute, but would need some guidance on the JS side, unfortunately.

[finchamp]

Mathieu, regarding your idea of a divider card with headings: I think this could work well incorporating my suggestion #2. The way I have envisioned this working (with two card indices as arguments) would be to simply add the opening div before the first indexed card, and the closing /div after the last indexed card. That way, the background/border style can simply wrap all of the cards in between the two indices (inclusive of the first and last cards).

With headings, that would allow very simple (as far as the developer is concerned) grouping of other cards under a single heading/subheading. That makes for a very intuitive/tidy under experience, where the end-user comprehends items in relation to each other, according to the Law of Common Region.

[mathieucarbou]

I've finally made my separator card based on the status card.

It fits my need because I need to have a title, a little description for the section, and eventually a status icon to tell the user if there is an error, warning or all is ok regarding the content in the section.

Screenshots from the benchmark app:

[finchamp]

I've finally made my separator card based on the status card.

Very nice! Would you be willing to send me the files you modified, or walk me through your changes?

[mathieucarbou]

Very nice! Would you be willing to send me the files you modified, or walk me through your changes?

I would have walked you through the changes (cannot send the files as per the license), but the problem is that this work is based on ESP-DASH Pro v5 codebase (ref: #246) which is not released yet (only @ayushsharma82 has access to and can release - I've just shared all these improvements with him).

The way to write components is different in v5.

[ayushsharma82]

Hi @finchamp & @mathieucarbou ,

I appreciate the feature requests but please note that ESP-DASH Pro is not an open-source project. All implementations must go through the review process & testing before final release.

I’ll suggest anyone interested to wait for the official release where I implement features & bug fixes proposed by mathieu, along with revamped UI.

[finchamp]

this work is based on ESP-DASH Pro v5 codebase (ref: #246) which is not released yet (only @ayushsharma82 has access to and can release - I've just shared all these improvements with him).

The way to write components is different in v5.

Ah, that's very helpful information. Well, then, I'm looking forward to v5! Again, my experience is primarily in C++14/17, so if I can contribute, let me know. If you need proof of my licensure, I can provide that privately.

ESP-DASH Pro is not an open-source project. All implementations must go through the review process & testing before final release.

Thanks, I fully understand. I have no intention of publishing files from my Pro installation, even modified. I understand that this would likely be better discussed on the Pro/v5 branch, but I understand that that access is privileged.

If I can be of assistance, let me know. Otherwise, I will watch for the release of v5 and go from there.

[inF1704]

But you really don´t need V5 for a separator. I´ve managed to use a generic card as a separator. Only downside is, that I would like to change or disable icons. A separator card without an icon or a simple "-" would be nice.

PS: @mathieucarbou Why is your overview tab icon a house?

[finchamp]

I´ve managed to use a generic card as a separator.

Thanks for sharing your approach. I've done something similar, using buttons to show/hide a number of related cards. Due to the size of my project, it's just too visually cluttered to use simple status/separator cards, which is why I didn't request them in my original post.

My interest in Mathieu's modifications was primarily to better understand the workflow of the tool, and how I might attempt to implement some slightly more robust grouping/style to my project. Since that is changing with v5, I am not pursuing it any further for now. Although I wouldn't mind knowing how to remove the icon from a status card without using CSS hacks.

[mathieucarbou]

PS: @mathieucarbou Why is your overview tab icon a house?

Good question! I never customised it... Oh wait! I am running the latest pro version: is it possible that you did not download the latest zip file ?