I use AJAX web server on my ESP32 to display values I measure. The values consist of numbers in an array.
What is the best way to update those values? - If I am using too difficult one.
I am tring to make work this code, but I dont understand what is the problem, since this is a bit over my knowledge.
In Main.ino:
int variable[17][2] = {{14400,1000},{1500,10000},{0,0},{0,0},{0,0},{0,0},{0,0},{0,0},{0,0},{0,0},{0,0},{0,0},{0,0},{0,0},{0,0},{0,0}};
void handlevalues() {
for (int i=0; i<17; i++) {
String X = String(variable[i][0]);
server.send(200, "text/plane", (X[i]).toString() + "&" + X);
}
}
void setup() {
Serial.begin(115200);
IPAddress IP = WiFi.softAPIP();
server.on("/readValues", handlevalues);
server.begin();
}
void loop(){
server.handleClient();
}
In index.h:
const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<body>
<head>
<style>
tab-table, th, td {border: 1px solid black; border-collapse:collapse; text-
align: center;}
</style>
</head>
<body>
<table style="margin-top:20px; width:92.8%; margin-left:3.6%; ">
<tr>
<th style="height:45px; width:30%">Name</th>
<th style="height:45px; width:25%">X location</th>
<th style="height:45px; width:25%">Y location</th>
</tr>
<tr>
<td bgcolor="#D3D3D3" style="height:45px; width:30%">Location 1</td>
<td bgcolor="#D3D3D3" style="height:45px; width:25%"><span id="X0">N/A</span></td>
<td bgcolor="#D3D3D3" style="height:45px; width:25%"><span id="Y0">N/A</span></td>
</tr>
<tr>
<td style="height:45px; width:30%">Location 2</td>
<td style="height:45px; width:25%"><span id="X1">N/A</span></td>
<td style="height:45px; width:25%"><span id="Y1">N/A</span></td>
</tr>
</table>
</body>
<script>
setInterval(function(){ getData();},2000);
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let i=this.responseText.split("&")[0];
document.getElementById("X" + i).innerHTML = this.responseText.replace(i+"&","");
}
};
xhttp.open("GET", "readValues", true);
xhttp.send();
}
</script>
</body>
</html>
)=====";