No worries, we are all here to learn.
You’re close to a working project.
You’re code is sending the same html every time an http request is received. As a result, the page will always refresh.
To allow for data to be displayed without refreshing the page, you will need to add some handling to determine the type of http request you are receiving.
A little background information before we proceed:
An GET Http Request looks like the following:
GET / HTTP/1.1
Host: 192.168.1.1
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.14) Gecko/2
009082707 Firefox/3.0.14
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Notice the first line:
GET / HTTP/1.1
This request is a request for the home page. When you receive this request, with nothing following the /, you will return the html for your home page.
However, if you receive a request like this:
GET /getvolts HTTP/1.1
You will return a formatted string, containing the data you wish to display.
This is acheived with a handler like this:
if (strstr(clientline, "GET / ") != 0) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println();
// print all the files, use a helper to keep it clean
client.println("<h2>Files:</h2>");
ListFiles(client, LS_SIZE);
} else if (strstr(clientline, "GET /") != 0) {
// this time no space after the /, so a sub-file!
char *filename;
filename = clientline + 5; // look after the "GET /" (5 chars)
// a little trick, look for the " HTTP/1.1" string and
// turn the first character of the substring into a 0 to clear it out.
(strstr(clientline, " HTTP"))[0] = 0;
// print the file we want
Serial.println(filename);
if (! file.open(&root, filename, O_READ)) {
client.println("HTTP/1.1 404 Not Found");
client.println("Content-Type: text/html");
client.println();
client.println("<h2>File Not Found!</h2>");
break;
}
Serial.println("Opened!");
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/plain");
client.println();
int16_t c;
while ((c = file.read()) > 0) {
// uncomment the serial to debug (slow!)
//Serial.print((char)c);
client.print((char)c);
}
file.close();
} else {
// everything else is a 404
client.println("HTTP/1.1 404 Not Found");
client.println("Content-Type: text/html");
client.println();
client.println("<h2>File Not Found!</h2>");
}
The tutorial explaining this code is found at http://www.ladyada.net/learn/arduino/ethfiles.html
By adapting this style of http request handling, you will be able to display real time data in your browser.
When a request for the home page is received, send the html for the homepage.
When a request for data is received, send the data.
Also, I would recommend reading this tutorial to store the html into the program memory to save on RAM.
http://www.arduino.cc/en/Reference/PROGMEM
