Placing sketch values into a table

[ac1176]

Hello Hieromon,

Thanks for the hard work you've put into your AutoConnect library. I've been using it to create a 4G SMS alert system for a security alarm panel based on an ESP32, with a user interface built using the AutoConnect menu structure.

I'd like to be able to print out some useful status data from the SMS module to the web interface (such as 4G signal strength, the 4G network name, the current date etc) and present the results in a HTML table, something like this:

I've been able to construct the table based on the example shown in your documentation regarding the use of ACElements to place styled HTML tags, but I'm not sure how to make the values in the right hand column link to sketch values, such that when the page is loaded it "pulls" the values out of the sketch and substitutes them in each of the cells.

Is there a way to link a value from the sketch to one of the <td></td> cells such that it updates to show the value on page load? I understand how to make an ACText value property take on a value used in the sketch such that it appears on a web page. But forcing a sketch value to appear within one cell of a table doesn't seem to be obvious to me, as each cell in the table does not have an explicit ACText value to link from the sketch.

Thanks!

[ac1176]

Rather than trying to describe the whole <table> in one single ACElement definition, I can split HTML table into multiple ACElements. At the point at which the sketch variable needs to be appear in the relevant table cell, the ACElement <td> statement is cut short and an ACText is inserted with a blank value. After the ACText has been defined the rest of the HTML table in the next ACElement. Rinse and repeat until the whole table is built up:

ACElement (table_r1, "<table><tr><td>Modem response:</td><td>");
ACText (table_r1dat, "");
ACElement(table_r2, "</td></tr><tr><td>Signal strength:</td><td>");
ACText (table_r2dat, "");
ACElement (table_r3, "</td></tr><tr><td>SIM card:</td><td>");
ACText (table_r3dat, "");
ACElement (table_r4, "</td></tr><td>Network:</td><td>");
ACText (table_r4dat, "");
ACElement (table_r5, "</td></tr><tr><td>Date/time:</td><td>");
ACText (table_r5dat, "");
ACElement (table_end, "</td></tr></table>");

...

AutoConnectAux dialler_status("/dialler_status", "Dialler Status", true, {
  table_r1,
  table_r1dat,
  table_r2,
  table_r2dat,
  table_r3,
  table_r3dat,
  table_r4,
  table_r4dat,
  table_r5,
  table_r5dat,
  table_end
});

...

String diallerStats(AutoConnectAux& diallerStatPage, PageArgument& args){
  diallerStatPage["table_r1dat"].value = modemResponse;
  diallerStatPage["table_r2dat"].value = sigStrength;
  diallerStatPage["table_r3dat"].value = simCard;
  diallerStatPage["table_r4dat"].value = netStat;
  diallerStatPage["table_r5dat"].value = dateReformat;
  return String("");
}

void setup() {
...
  Portal.on("/dialler_status", diallerStats);
}

etc...

Clunky, but appears to work OK. If there's a neater solution I'd be keen to see it.

[Hieromon]

@ac1176 Thank you for using AutoConnect.
In fact, an implementation by your approach is the most useful way with current AutoConnect capabilities.
I recommend writing it a little more simply using the format parameter of AutoConnectText.

ACElement (table_begin, "<table>");
ACText (table_r1dat, "", "", "<tr><td>Modem response:</td><td>%s</td></tr>");
ACText (table_r2dat, "", "", "<tr><td>Signal strength:</td><td>%s</td></tr>");
ACText (table_r3dat, "", "", "<tr><td>SIM card:</td><td>%s</td></tr>");
ACText (table_r4dat, "", "", "<tr><td>Network:</td><td>%s</td></tr>");
ACText (table_r5dat, "", "", "<tr><td>Date/time:</td><td>%s</td></tr>");
ACElement (table_end, "</table>");

AutoConnectAux dialler_status("/dialler_status", "Dialler Status", true, {
  table_begin,
  table_r1dat,
  table_r2dat,
  table_r3dat,
  table_r4dat,
  table_r5dat,
  table_end
});

Note:
Up to AutoConnect v1.2.3, there is a problem that the layout of AutoConnectText may be corrupted. Please use AutoConnect v1.3.0 or later. Its RC version has already been staged on the development branch and will be released soon.

[ac1176]

Very neat, thanks for the tip and suggestions!