CSV data to a web table

Hi,

I am stuck with my “working” code, where I upload an array of measured values to web using ajax. I figured out that the only way without multiplying http requests is putting all of the values into one long string and than take it apart in the html code.

It is a bit too long and I believe that it can be shorted. Also, I will be later on trying to add a download button, which should download the table in csv or something, so maybe, it could use this same string?

Thank you for any ideas. :smiley:

Note: The code here works. I am only wondering if there could be improvements + the download

The main .ino code:

int strdporadi = 1;  // This is what value is being currently measured and updates wich code for measuring, which I did not include

int strd[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}};  // 2D array which I want to upload (example values)

void handleRoot() {
 String s = MAIN_page; 
 server.send(200, "text/html", s); 
}

void handlevalues() {
    server.send(200, "text/plane", String(strd[0][0]) + "," + String(strd[0][1]) + "," + String(strd[1][0]) + "," + String(strd[1][1]) + "," + String(strd[2][0]) + "," + String(strd[2][1]) + "," + String(strd[3][0]) + "," + String(strd[3][1]) + "," + String(strd[4][0]) + "," + String(strd[4][1]) + "," + String(strd[5][0]) + "," + String(strd[5][1]) + "," + String(strd[6][0]) + "," + String(strd[6][1]) + "," + String(strd[7][0]) + "," + String(strd[7][1]) + "," + String(strd[8][0]) + "," + String(strd[8][1]) + "," + String(strd[9][0]) + "," + String(strd[9][1]) + "," + String(strd[10][0]) + "," + String(strd[10][1]) + "," + String(strd[11][0]) + "," + String(strd[11][1]) + "," + String(strd[12][0]) + "," + String(strd[12][1]) + "," + String(strd[13][0]) + "," + String(strd[13][1]) + "," + String(strd[14][0]) + "," + String(strd[14][1]) + "," + String(strd[15][0]) + "," + String(strd[15][1]) + "," + String(strd[16][0]) + "," + String(strd[16][1]));
}

void setup() {
  Serial.begin(115200);

  // Server
  WiFi.mode(WIFI_AP); 
  WiFi.softAP(ssid, password);

  Serial.print("Connecting to ");
  Serial.println(ssid);    
  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP); 
  server.on("/", handleRoot);      
  server.on("/readValues", handlevalues);
 
  server.begin();                  
  Serial.println("HTTP server started");
}

void loop(){
   server.handleClient(); 
}

Index.h which is called to load html page

const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<body>
<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) {
          document.getElementById("X0").innerHTML = this.responseText.split(",")[0];
          document.getElementById("Y0").innerHTML = this.responseText.split(",")[1];
          document.getElementById("X1").innerHTML = this.responseText.split(",")[2];
          document.getElementById("Y1").innerHTML = this.responseText.split(",")[3];
          document.getElementById("X2").innerHTML = this.responseText.split(",")[4];
          document.getElementById("Y2").innerHTML = this.responseText.split(",")[5];
          document.getElementById("X3").innerHTML = this.responseText.split(",")[6];
          document.getElementById("Y3").innerHTML = this.responseText.split(",")[7];
          document.getElementById("X4").innerHTML = this.responseText.split(",")[8];
          document.getElementById("Y4").innerHTML = this.responseText.split(",")[9];
          document.getElementById("X5").innerHTML = this.responseText.split(",")[10];
          document.getElementById("Y5").innerHTML = this.responseText.split(",")[11];
          document.getElementById("X6").innerHTML = this.responseText.split(",")[12];
          document.getElementById("Y6").innerHTML = this.responseText.split(",")[13];
          document.getElementById("X7").innerHTML = this.responseText.split(",")[14];
          document.getElementById("Y7").innerHTML = this.responseText.split(",")[15];
          document.getElementById("X8").innerHTML = this.responseText.split(",")[16];
          document.getElementById("Y8").innerHTML = this.responseText.split(",")[17];
          document.getElementById("X9").innerHTML = this.responseText.split(",")[18];
          document.getElementById("Y9").innerHTML = this.responseText.split(",")[19];
          document.getElementById("X10").innerHTML = this.responseText.split(",")[20];
          document.getElementById("Y10").innerHTML = this.responseText.split(",")[21];
          document.getElementById("X11").innerHTML = this.responseText.split(",")[22];
          document.getElementById("Y11").innerHTML = this.responseText.split(",")[23];
          document.getElementById("X12").innerHTML = this.responseText.split(",")[24];
          document.getElementById("Y12").innerHTML = this.responseText.split(",")[25];
          document.getElementById("X13").innerHTML = this.responseText.split(",")[26];
          document.getElementById("Y13").innerHTML = this.responseText.split(",")[27];
          document.getElementById("X14").innerHTML = this.responseText.split(",")[28];
          document.getElementById("Y14").innerHTML = this.responseText.split(",")[29];
          document.getElementById("X15").innerHTML = this.responseText.split(",")[30];
          document.getElementById("Y15").innerHTML = this.responseText.split(",")[31];
          document.getElementById("X16").innerHTML = this.responseText.split(",")[32];
          document.getElementById("Y16").innerHTML = this.responseText.split(",")[33];
        }
      };
    xhttp.open("GET", "readValues", true);
    xhttp.send();
  }
  
  </script>
  </body>
  </html>
  )=====";
server.send(200, "text/plane", String(strd[0][0]) + "," + String(strd[0][1]) + "," + String(strd[1][0]) + "," + String(strd[1][1]) + "," + String(strd[2][0]) + "," + String(strd[2][1]) + "," + String(strd[3][0]) + "," + String(strd[3][1]) + "," + String(strd[4][0]) + "," + String(strd[4][1]) + "," + String(strd[5][0]) + "," + String(strd[5][1]) + "," + String(strd[6][0]) + "," + String(strd[6][1]) + "," + String(strd[7][0]) + "," + String(strd[7][1]) + "," + String(strd[8][0]) + "," + String(strd[8][1]) + "," + String(strd[9][0]) + "," + String(strd[9][1]) + "," + String(strd[10][0]) + "," + String(strd[10][1]) + "," + String(strd[11][0]) + "," + String(strd[11][1]) + "," + String(strd[12][0]) + "," + String(strd[12][1]) + "," + String(strd[13][0]) + "," + String(strd[13][1]) + "," + String(strd[14][0]) + "," + String(strd[14][1]) + "," + String(strd[15][0]) + "," + String(strd[15][1]) + "," + String(strd[16][0]) + "," + String(strd[16][1]));

A couple of nested for loops would be neater, don’t you think ?