Web page display

hello , can any one help me how to read data from ADC of ARDUINO and display it on web page through the Ethernet protocol. thanks,

What have you tried so far?

A possible way.

//zoomkat 12-3-15
//simple button GET with iframe code
//open serial monitor to see what the arduino receives
//use the ' instead of " in html ilnes
//address will look like http://192.168.1.102:84/ when submited
//for use with W5100 based ethernet shields

#include <SPI.h>
#include <Ethernet.h>
const int analogInPin0 = A0;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //ethernet shield 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
String readString;

//////////////////////

void setup(){

  pinMode(4, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();

  //enable serial data print
  Serial.begin(9600);
  Serial.println("server test button and box"); // so I can keep track of what is loaded
}

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string
          readString += c;
          //Serial.print(c);
        }

        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString); //print to serial monitor for debuging

            //now output HTML data header
          if(readString.indexOf('?') >=0) { //don't send new page
            client.println("HTTP/1.1 204 Zoomkat\r\n\r\n");
          }
          else if(readString.indexOf("data") >=0)
          {
            client.print("<HTML><HEAD>");
            client.print("
analog input0 is: ");
            client.print(analogRead(analogInPin0));
            client.println("
</BODY></HTML>");
          }
          else {
            client.println("HTTP/1.1 200 OK"); //send new page
            client.println("Content-Type: text/html");
            client.println();

            client.println("<HTML>");
            client.println("<HEAD>");
            client.println("<TITLE>Arduino GET test page</TITLE>");
            client.println("</HEAD>");
            client.println("<BODY>");

            client.println("<H1>Zoomkat's simple Arduino button</H1>");

            client.println("<a href='/?on1' target='inlineframe'>ON</a>");
            client.println("<a href='/?off' target='inlineframe'>OFF</a>");
            client.println("<a href='/data' target='DataBox'>DATA</a>
");
            
            client.print("<iframe src='/data' width='350' height='250' name='DataBox'>");
            client.print("</iframe>");

            client.println("<IFRAME name=inlineframe style='display:none'>");         
            client.println("</IFRAME>");

            client.println("</BODY>");
            client.println("</HTML>");
          }

          delay(1);
          //stopping client
          client.stop();

          ///////////////////// control arduino pin
          if(readString.indexOf("on1") >0)//checks for on
          {
            digitalWrite(4, HIGH);    // set pin 4 high
            Serial.println("Led On");
          }
          if(readString.indexOf("off") >0)//checks for off
          {
            digitalWrite(4, LOW);    // set pin 4 low
            Serial.println("Led Off");
          }

          //clearing string for next read
          readString="";

        }
      }
    }
  }
}

Are you planning on hosting the website from the Arduino itself or on a server?

If you are hosting the website from a server then you can set up a page that will take a POST or even a simple REST command from the Arduino (over ethernet shield) to update a value on the website.

Arduino reads ADC --> ethernet post/REST to server --> Server stores value in DB --> Serves web page

This way you can get real world data with a powerful web server.

But if you want it all in one package, simple website served from the Arduino then zoomkat's solution looks great.

hello Nick Gammon, I want for example reading data from serial port and then display it on web page i tried to take the data but i can't display it on web page. thanks,