Sending temperature to webpage

Hello everyone,

I'm working on a project where i can measure the temperature and send this to a nice webpage. This webpage will contain a nice interface which can show the real time temperature on the arduino. Unfortunately i have a really lack of knowledge of HTML and it's really hard for me to finish this school project. I hope you guys can help me out the current situation.

Currently i'm able to send a .htm webpage to the IP of the arduino and view this webpage with a nice interface. Now i'm trying to get real life temperature off the arduino and my brother helped me out to code the HTML website. This is what it looks like atm:

192.168.0.103 --> When i type this, the webpage appears. The code i wrote is to get the temperature from another .htm server, like 192.168.0.103/temp.htm

This is what i'm using atm:

    EthernetClient client = server.available();
    if (client) {
      Serial.println("new client");
      // an http request ends with a blank line
      boolean currentLineIsBlank = true;
      while (client.connected()) {
        if (client.available()) {
          char c = client.read();
          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("Host: 192.169.0.103/index.htm");
            client.println("Connection: close");  // the connection will be closed after completion of the response
            client.println();
            webFile = SD.open("index.php");        // open web page file
            if (webFile) {
              while (webFile.available()) {
                client.write(webFile.read()); // send web page to client
              }
              webFile.close();
            webFile = SD.open("index.php");        // open web page file

Now i want to open a second page with 192.168.0.103/temp.htm to show the index.htm can request the temperature from that page. Does anyone know how to do this?

There are some topics in forum sharing this great tutorial:

Maybe can help you with what you want.

I'm working on a project where i can measure the temperature and send this to a nice webpage.

You can not "send data to a web page". A web page is something that a browser displays. If the Arduino is a server, it can serve up a web page whose content is the temperature (possibly among other things).

If the Arduino is a client, it can send data to a server, as part of a GET request. The server can store the data somewhere where other code can get at is, such as in a RDBMS.

Currently i'm able to send a .htm webpage to the IP of the arduino and view this webpage with a nice interface.

No, you can't. You can NOT send a htm page to an IP address. That is NOT what a browser does.

           // client.println("Host: 192.169.0.103/index.htm");

If your brother thought that was a host NAME or IP, he's an idiot.

Now i want to open a second page with 192.168.0.103/temp.htm to show the index.htm can request the temperature from that page. Does anyone know how to do this?

Not really sure what you are talking about, but you can embed a web page in a frame inside of the main web page. Bekow is some server test code with embedded pages.

// 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="";
        }
      }
    }
  }
}

PaulS:
You can not "send data to a web page". A web page is something that a browser displays. If the Arduino is a server, it can serve up a web page whose content is the temperature (possibly among other things).

If the Arduino is a client, it can send data to a server, as part of a GET request. The server can store the data somewhere where other code can get at is, such as in a RDBMS.
No, you can't. You can NOT send a htm page to an IP address. That is NOT what a browser does.

           // client.println("Host: 192.169.0.103/index.htm");

If your brother thought that was a host NAME or IP, he's an idiot.

I just tried out the last piece myself just to see what would happen. I just asked for some help because of my lack of knowledge, there is absolutely no reason to talk about my brother like that.

Anyway, i found out i can use ThingSpeak to show graphs etc. which i will use from now on.