My HTML pages are storaged in SD-Card. This webserver code is just forwarding htmls from sd to browser.
Now, I want that some HTML pages should show datas from arduino. For example for my home automation it should show which relays are toggled on, and which temperature I have in my room.
The problem: HTML is passive. Normally it will be used PHP or something like that, but Arduino is to weak to operate a PHP-Server. Someone know a solution ?
I don't want build HTML commands into arduino code, because its get too long and it's not easy for someone who can only change html pages, but not understanding arduino code.
I don't want build HTML commands into arduino code, because its get too long and it's not easy for someone who can only change html pages, but not understanding arduino code.
You can load the main html page from the SD card, and use embedded frames to display specific data. Below is some simple iframe code. The below link might also be of interest.
// zoomkat's meta refresh data frame test page 5/25/13
// use http://192.168.1.102:84 in your brouser for main page
// http://192.168.1.102:84/data static data page
// http://192.168.1.102:84/datastart meta refresh data page
// for use with W5100 based ethernet shields
// set the refresh rate to 0 for fastest update
// use STOP for single data updates
#include <SPI.h>
#include <Ethernet.h>
const int analogInPin0 = A0;
const int analogInPin1 = A1;
const int analogInPin2 = A2;
const int analogInPin3 = A3;
const int analogInPin4 = A4;
const int analogInPin5 = A5;
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // arduino ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port
unsigned long int x=0; //set refresh counter to 0
String readString;
//////////////////////
void setup(){
Serial.begin(9600);
// disable SD SPI if memory card in the uSD slot
pinMode(4,OUTPUT);
digitalWrite(4,HIGH);
Ethernet.begin(mac, ip, gateway, gateway, subnet);
server.begin();
Serial.println("meta refresh data frame test 5/25/13"); // so I can keep track of what is loaded
}
void loop(){
EthernetClient client = server.available();
if (client) {
while (client.connected()) {
if (client.available()) {
char c = client.read();
if (readString.length() < 100) {
readString += c;
}
//check if HTTP request has ended
if (c == '\n') {
//check get atring received
Serial.println(readString);
//output HTML data header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println();
//generate data page
if(readString.indexOf("data") >0) { //checks for "data" page
x=x+1; //page upload counter
client.print("<HTML><HEAD>");
//meta-refresh page every 1 seconds if "datastart" page
if(readString.indexOf("datastart") >0) client.print("<meta http-equiv='refresh' content='1'>");
//meta-refresh 0 for fast data
if(readString.indexOf("datafast") >0) client.print("<meta http-equiv='refresh' content='0'>");
client.print("<title>Zoomkat's meta-refresh test</title></head><BODY>
");
client.print("page refresh number: ");
client.print(x); //current refresh count
client.print("
");
//output the value of each analog input pin
client.print("analog input0 is: ");
client.print(analogRead(analogInPin0));
client.print("
analog input1 is: ");
client.print(analogRead(analogInPin1));
client.print("
analog input2 is: ");
client.print(analogRead(analogInPin2));
client.print("
analog input3 is: ");
client.print(analogRead(analogInPin3));
client.print("
analog input4 is: ");
client.print(analogRead(analogInPin4));
client.print("
analog input5 is: ");
client.print(analogRead(analogInPin5));
client.println("
</BODY></HTML>");
}
//generate main page with iframe
else
{
client.print("<HTML><HEAD><TITLE>Zoomkat's frame refresh test</TITLE></HEAD>");
client.print("Zoomkat's Arduino frame meta refresh test 5/25/13");
client.print("
Arduino analog input data frame:
");
client.print(" <a href='http://192.168.1.102:84/datastart' target='DataBox' title=''yy''>META-REFRESH</a>");
client.print(" <a href='http://192.168.1.102:84/data' target='DataBox' title=''xx''>SINGLE-STOP</a>");
client.print(" <a href='http://192.168.1.102:84/datafast' target='DataBox' title=''zz''>FAST-DATA</a>
");
client.print("<iframe src='http://192.168.1.102:84/data' width='350' height='250' name='DataBox'>");
client.print("</iframe>
</HTML>");
}
delay(1);
//stopping client
client.stop();
//clearing string for next read
readString="";
}
}
}
}
}
If you upgrade to an Arduino Mega you would have plenty of memory to generate dynamic html web pages.
Have a look at my Arduino website at http://www.2wg.co.nz/ - all the web pages are dynamically generated within the many procedures within the application - no html is stored on the SD card. I have over 13,000 lines of code.
The full source code for my application is available to downoad - you can compare each web page's Arduino code against the html source that arrives in your browser to see how everything is working.
It really isn't very hard to do the "make a page of html" in the Arduino.
All the "stuff" for making it a webserver is the same, whether the web page comes from a static file on the SD card or not.
I've just realised that, as ever, it is more complex than what you are asking for, but if you skip over the bits about changing an OUTPUT from the Arduino over the internet, what you want is in all of the various tutorials at...
They show you, for some old ethernet controllers, and for the ones we have available today, how to set up an Arduino to display in a webpage what it sees on a sensor. (You can leave the other stuff it, it will do no harm, even if you don't attach the controlled outputs to anything.)