Quickie Web Server to display A0-A5 on a web page.

I thought I would share a cludge I put together to read all the analog pins and then output them to a browser page. I made this to make it easier to read multiple analog signals and to easily display them without the use of an LCD (which I only have a 16x2).

This uses the ethernet shield to set up a port 80 web page. Its curently configured to use DHCP but its easy to mod the code to a fixed IP. I modded and stripped down the example baromenter read script. The output page lists all 6 analog inputs in numeric as well as a bargraph next to it for an easy visual representation of the inputs.

/*
  Analog Sensor Display
 This script estabilishes a simple HTML server on port 80.
 When hit with a browser, it will display the analog readings
 of all 6 Analog ports.
 
 The page sends a refresh meta tag so the page will continually refresh.
 
 Adapted from the BarometricPressureWebServer Example Script
 
 Circuit:
 Any sensors properly wired to A0-A5 
 
 created Jun 3 2012
 by Mike Audleman
 
 */

#include <Ethernet.h>
// the sensor communicates using SPI, so include the library:
#include <SPI.h>


// assign a MAC address for the ethernet controller.
// fill in your address here:
byte mac[] = { 
  0x31, 0x13, 0x31, 0x13, 0x31, 0x13 };
// Going to use DHCP so don't set all the IPs
// assign an IP address for the controller:
//IPAddress ip(192,168,1,20);
//IPAddress gateway(192,168,1,1);	
//IPAddress subnet(255, 255, 255, 0);


// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(80);



void setup() {
  // start the SPI library:
  SPI.begin();
  Serial.begin(9600);

  // start the Ethernet connection and the server:
  Ethernet.begin(mac);

  Serial.print("My IP address: ");
  for (byte thisByte = 0; thisByte < 4; thisByte++) {
    // print the value of each byte of the IP address:
    Serial.print(Ethernet.localIP()[thisByte], DEC);
    Serial.print("."); 
  }
  Serial.println();

  server.begin();

  // startup delay:
  delay(1000);

}

void loop() { 

  // listen for incoming Ethernet connections:
  listenForEthernetClients();
}


void listenForEthernetClients() {
  String outString;
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("Got a client");

    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        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();

          // Send header and title
          client.println("<html><head>");
          client.println("<meta http-equiv='refresh' content='0'> ");
          client.println("<title>Arduino Analog Read</title></head><body>");

          // Send the reading of each of the 6 analog ports.
          for (int  i = 0; i <=  5; i++) {
            int PortRead = analogRead( i );
            client.print("<table border=0><tbody><tr>");
            client.print("<th width=10>A" + String(i) +"</th>");
            client.print("<td width=30 align=right>" + String(PortRead) + "</td>" );
            client.print("<td width=" + String(PortRead/2) + " BGCOLOR=black></td>");
            client.println("</tr></tbody></table>
");
          }

          // Send the footer
          client.println("</body></html>");


          break;
        }
        if (c == '\n') {
          // you're starting a new line
          currentLineIsBlank = true;
        } 
        else if (c != '\r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
  }
}

If you don't set the IPs, upload the sketch and start the serial monitor. It will display the IP address of the board. Copy that and drop it in your browser URL bar on your PC. Poof, you got an instant analog read page that refreshes constantly.

I am attaching a screenshot of Firefox displaying the page.

Enjoy.
Wolfie
[edit] Correct typo in the meta tag for double quotes. Replaced with single quotes.

You seem to be intending this:

          client.println("<meta http-equiv=""refresh"" content=""0""> ");

to send:

\n

but that code is equivalent to:

          client.println("<meta http-equiv="   "refresh"   " content="   "0"   "> ");

which is equivalent to:

          client.println("<meta http-equiv=refresh content=0> ");

because adjacent string constants act as a single string constant.

If you want to embed quote marks in a string constant, use the backslash:

          client.println("<meta http-equiv=\"refresh\" content=\"0\"> ");

Luckily, HTML doesn't often mind if parameter values are not quoted.

Luckily, HTML doesn't often mind if parameter values are not quoted.

In html I think the ' can be used to replace " to avoid escaping the ".

Yes, both of you are correct. Sorry. Used to Javascript and VB where you can double up quotes to escape them. Will edit the post to correct.

I made the below some time back with a counter to see how reliable the server code is, and over a number of days the page refreshed over ~150k times without failing.

/ zoomkat meta refresh server test code
// arduino IDE 1.0
// for W5100 ethernet shield
// the IP address will be dependent on your local network/router
// port 80 is default for HTTP, but can be changed as needed
// use IP address like http://192.168.1.102:84 in your brouser
// or http://zoomkat.no-ip.com:84 with dynamic IP service
// use the \ slash to escape the " in the html
// meta refresh set for 2 seconds

#include <SPI.h>
#include <Ethernet.h>

int x=0; //set refresh counter to 0
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,102); // ip in lan
EthernetServer server(84); //server is using port 84

void setup()
{
  // start the server
  Ethernet.begin(mac, ip);
  server.begin();
}

void loop()
{
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
     while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // see if HTTP request has ended with blank line
        if (c == '\n') {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          
          //meta-refresh page every 2 seconds
          x=x+1; //page upload counter
          client.println("<HTML>");
          client.print("<HEAD>");
          client.print("<meta http-equiv=\"refresh\" content=\"2\">");
          client.print("<TITLE />Zoomkat's meta-refresh test</title>");
          client.print("</head>");
          client.println("<BODY>");
          client.print("Zoomkat's meta-refresh test IDE 1.0");
          client.println("
");
                    
          client.print("page refresh number ");
          client.println(x); //current refresh count
          client.println("
");
          client.println("
");
          
          client.print("Zoomkat's arduino analog input values:");
          client.println("
");
          client.println("
");
          
          // output the value of each analog input pin
          for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
            client.print("analog input ");
            client.print(analogChannel);
            client.print(" is ");
            client.print(analogRead(analogChannel));
            client.println("
");
            }
           break;
          client.println("</BODY>");
          client.println("</HTML>");
         }
        }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
  }
}