How to build tables

[knopserl]

would it be possible to get a table control? Or at least an example for someone not being a HTML or Javascript expert?

what I wanted to do is e.g. scann for connect sensors on an I2C bus and list the found sensors in a table and allow to configure them with 3 parameter in the table by selecting them and e.g. have an edit button in the table.

Anything else, I like very much, so I would not switch to pure HTML/CSS or change to another library.

[Ian Gray]

What you ask is quite complex. Displaying a table is easy, just set the text of a Label control to the HTML of what you want. Something like:

ESPUI.addControl(ControlType::Label, "A table", "<table><tr><th>Name</th><th>Number</th></tr><tr><td>Bill</td><td>03656219873</td></tr></table>", ControlColor::Turquoise, Control::noParent, 0);

However the edit button you talk about would require a way to include arbitrary Javascript libraries alongside the main interface page, which would need to us have a way to compile in all of this stuff into the memory of the ESP. And you'd probably have to write that Javascript library yourself.

What about instead, display the sensors you've found in a table, and then dynamically create controls to configure each one?

If the three parameters are all the same for each, add three text boxes and dynamically create the options in a drop down box to select which one you are dealing with.

I have a project which searches for lighting controllers on my network and dynamically creates a tab for each one. There is that option as well.

[knopserl]

What you ask is quite complex. Displaying a table is easy, just set the text of a Label control to the HTML of what you want. Something like:

ESPUI.addControl(ControlType::Label, "A table", "<table><tr><th>Name</th><th>Number</th></tr><tr><td>Bill</td><td>03656219873</td></tr></table>", ControlColor::Turquoise, Control::noParent, 0);

However the edit button you talk about would require a way to include arbitrary Javascript libraries alongside the main interface page, which would need to us have a way to compile in all of this stuff into the memory of the ESP. And you'd probably have to write that Javascript library yourself.

What about instead, display the sensors you've found in a table, and then dynamically create controls to configure each one?

If the three parameters are all the same for each, add three text boxes and dynamically create the options in a drop down box to select which one you are dealing with.

I have a project which searches for lighting controllers on my network and dynamically creates a tab for each one. There is that option as well.

thanks a lot for your reply and hints.
If the edit button in the table is the tricky part, I would leave it away, I just need to mark a line of the found sensors and create a form for that to edit it (I anyway have done this form), but I would need the table of the scanned sensors.
So if I take the Label control for the table just for display, how can I address the rows and column and how to mark a row and pass it to the callback?? Do you have further hints for that?
Would you be so kind and share the lightning controller project, or at least the relevant part of it? BTW I've also developed a light controller for moving heads (DMX fixures) in C# for Windows but I also plan to do it with an ESP32.
Are you from Vienna`? I was also born in Vienna and lived there for 17 years ;-)

[Ian Gray]

So I'd still create the table for output only, but actually select the sensor to modify using an option dropdown:

uint16_t select1 = ESPUI.addControl( ControlType::Select, "Select Title", "Initial Value", ControlColor::Alizarin, tab1, &selectExample );
ESPUI.begin();

// Later on in your code, detect the sensors however you do it
// Then add options for each one
for (auto& sensor : detectedSensors().items()) {
    ESPUI.addControl(ControlType::Option, sensor.name(), sensor.name(), ControlColor::Alizarin, select1);
}
//And refresh the UI
ESPUI.jsonReload(); 

Then create a callback called selectExample() and use that to handle when the user has selected a sensor. Something like that. The lighting thing just does the same with creating a tab instead of an option.

No, I'm UK-based :)