SD card web page - update from mcu

Hi everybody,

Currently I am working on web server with Arudino Uno and Ethernet Shiled and I would like to adapt web page and code from tutorial with wep page stored on SD card in that way that I can send some calculated values by mcu to update fields on web page.
For example in,

<!DOCTYPE html>
<html>
    <head>
        <title>Data logger Web Page</title>
    </head>
    <body>
        <h1>Data logger Web Page </h1>
        <img src="pic.jpg" />
        <p> Relative humidity:[b] 00.00[/b] [% RH]</p>
    <p> Temperature: [b]00.00[/b] [ C]</p>
  </body>
</html>

instead of values 00.00 for temperature and relative humidity to add values obtained from sensors.

Any suggestions?

Thanks in advance.

Any suggestions?

Go for it. You don't need our permission. It's your project. Do it your way.

If the main text of the page is going to be stored in a file and you want something in th ebody of the file to be dynamic then you have several approaches available.

You can modify the data read from the file before you send it out. In effect you would end up making your own (very crude) ASP/JSP implementation. This would be easy enough to knock together for a proof-of-concept but doesn’t seem like a very good way forward.

You could modify your page to include some standard named entities at the top of the page (and have your sketch print those out to the client before sending the body of the page) and refer to those entities in the text of the page. This is better but still crude.

You could modify your page to include additional resources such as Javascript fragments that define and update variables holding your dynamic values. The fragments would be read from your web server using separate HTTP requests that only provide the data (in whatever format you chose). This leads towards your data being published via a web service, and would be my preferred approach. It enables you to use AJAX approaches to fetch and update the displayed values. If you wanted, you could adopt a standard AJAX framework such as jQuery to take care of the client-side stuff for you.

Bottom is a basic way to get dynamic data into a web page. The below has a little more “polished” look.

http://startingelectronics.com/tutorials/arduino/ethernet-shield-web-server-tutorial/SD-card-gauge/

// 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("&nbsp;&nbsp;<a href='http://192.168.1.102:84/datastart' target='DataBox' title=''yy''>META-REFRESH</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/data' target='DataBox' title=''xx''>SINGLE-STOP</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<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="";
        }
      }
    }
  }
}

zoomkat: Bottom is a basic way to get dynamic data into a web page.

Yes, if you hard-code the web page in your sketch then including dynamic values in it is trivial. But here, the page is held on an SD card.

PeterH:

zoomkat: Bottom is a basic way to get dynamic data into a web page.

Yes, if you hard-code the web page in your sketch then including dynamic values in it is trivial. But here, the page is held on an SD card.

Then put the main page on the SD card and just dynamically generate what populates the frame pages.