analogRead() value to separate html document

Projects Programming
1

I have an Arduino Uno connected to a Ethernet shield, and I've used it to display analog values on a web page.
Now I use a micro SD card on the ethernet shield to fetch a separate html file from it, and sending that
file to the client as the web page - which leads to my question:
Is there an easy way to write the analog values to the html tags in this separate html file? In stead of writing the html structure with client.print() in the Arduino IDE.

So my html file looks like this:

<!doctype html>
<html lang="en">
 <head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 <!-- css-bootstrap -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" type="text/css" />

 <title>Arduino</title>
 <style type="text/css">

 * { box-sizing: border-box; }
 
 .container { padding-top: 2em; }
 
 h1 { margin-bottom: 2em; }
 
 .card-text-top {
 padding: 3em 0em;
 font-size: 2em;
 font-weight: bolder;
 }

 </style>
 </head>

 <body>
 <div class="container">
 
 <h1 class="text-center">Arduino</h1>

 
 <div class="row justify-content-md-center">
 <div class="card" style="width: 18rem;">
  <div class="card-text-top text-center border-bottom">
 Value og analog pin...
  </div>
  <div class="card-body">
 <h5 class="card-title text-center">Analog value</h5>
 <p class="card-text text-center">Status...</p>
  </div>
 </div>
 </div>
 
 </div>

 <script type="text/javascript">
 
 </script>
 </body>
</html>

So far, my code for the Arduino looks like this:

#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>

// MAC address from Ethernet shield
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 0, 0, 58); // IP address
EthernetServer server(80);  // server at port 80

File webFile;

void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for debugging
    
    // initialize SD card
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        return;    // init failed
    }
    Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
    if (!SD.exists("index.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;  // can't find index file
    }
    Serial.println("SUCCESS - Found index.htm file.");
}

void loop()
{
    EthernetClient client = server.available();

    if (client) { 
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
              
                char c = client.read(); // read 1 byte (character) from client
                Serial.write(c);
                
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    client.println("Refresh: 5");
                    client.println();

                    // send web page
                    webFile = SD.open("index.htm");        // open web page file
                    if (webFile) {
                        while(webFile.available()) {
                            client.write(webFile.read()); // send web page to client
                        }
                        webFile.close();
                    }

                    // output the value of each analog input pin
                    // Display these values in to an html tag?
                    for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
                      int sensorReading = analogRead(analogChannel);
                      client.print("Analog input ");
                      client.print(analogChannel);
                      client.print(" is ");
                      client.print(sensorReading);
                   
                    }
                    
                    break;
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
        client.stop(); // close the connection
    } // end if (client)
}
2

Haven't examined your code fully, I might be wrong but it look like you serve the HTML file on the memory card and then serve the variables.

That wouldn't be right since the variables need to be in the BODY of the HTML and not sent to the browser after the tag.

It would make sense to do as you appear and insert the variables into the HTML as its read from the memory card. Maybe have the HTML split into two parts so you send 1st part, then the variables then the remaining HTML.

I guess you could also update the stored HTML on the memory card with the new readings at intervals or immediately a HTTP request was made and then the file on the memory card could be served in one go with the latest values. Depends how long it takes to read and update and if that can be done before the requested timeout.