Arduino Web Server LED Control

Obviously, to 99.9999% of people, the title of this post sounds really boring. However, there is a small minority of people who enjoy tinkering with electronics and the web and I am one of them.

I got my Arduino kit about 18 months ago, but other than following a few tutorials, I haven’t spent much time working on anything more interesting. Today, however, I sat with the intention of not getting up again until what I wanted to build had become a reality. Fortunately, a couple of hours later it was working.

The idea is simple: a publically accessible website through which an LED (but potentially any other device) situated within my house can be turned off or on.

Step 1: URL DNS and Internal Networking

The first thing I did was setup a new subdomain for my website, which I then altered the DNS settings of to point at my home IP address (I have a static IP). To complete the connection to the outside world I setup port forwarding on my router to open up port 80 (standard for websites) and connect to a specified IP address within my home network.

Step 2: Setup the Arduino

I plugged the Arduino ethernet shield into my router, and its USB into my laptop, and wired up an LED on pin 9. The ethernet shield makes use of pin 13, which renders useless the onboard LED which can be used for testing in situations such as this.

Step 3: Search for Something Similar and Ammend

I looked around and found a really helpful example of displaying an HTML page and retrieving POST data via an Arduino – this formed the basis for my code (below). The main alterations are:

Obviously you need to define an IP address which is appropriate to your networking
I’ve added an additional String variable called SET
And I’ve added a section which turns my yellow LED of or on, based on the POST data received.

Here’s the code:

/*
  Web Server
 A simple web server that shows the value of the analog input pins.
 using an Arduino Wiznet Ethernet shield.
 Circuit:
 * Ethernet shield attached to pins 10, 11, 12, 13
 * Analog inputs attached to pins A0 through A5 (optional)
 created 18 Dec 2009
 by David A. Mellis
 modified 9 Apr 2012
 by Tom Igoe
 */
#include 
#include 
int led = 9;
String POST = "";
String SET = "";
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,0,100);
// 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() {
 // Open serial communications and wait for port to open:
  Serial.begin(9600);
   while (!Serial) {
    ; // wait for serial port to connect. Needed for Leonardo only
  }
  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
  pinMode(led, OUTPUT);
}
void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  digitalWrite(led, HIGH);
  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();
        Serial.write(c);
        // 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) {
          // it is after the double cr-lf that the variables are
          // read another line!
          String POST = "";
          while(client.available())
          {
            c = client.read();
            // save the variables somewhere
            POST += c;
          }
          if(POST != "")
          {
            if(POST == "led=1"){
              SET = "on";
              Serial.println("on");
            }else{
              SET = "off";
              Serial.println("off");
            }
          }
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connnection: close");
          client.println();
          client.println("");
          client.println("Jack's Arudino");
          client.println("");
          client.println("");
          client.println("");
          client.println("<h1>Control Jack's LED</h1>"); 
          client.print("<form method="post">"); 
          client.print("<input onclick="\" this.form.submit()\""="" radio\""="" name="\" led\""="" value="\" 0\""="" checked="checked" type="\">Off");             
          client.print("<input onclick="\" this.form.submit()\""="" radio\""="" name="\" led\""="" value="\" 1\""="" checked="checked" type="\">On"); 
          client.print("</form>"); 
          client.println("");
          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();
    Serial.println("client disonnected");
  }
  if(SET == "on"){
    digitalWrite(led, HIGH);
  }else{
    digitalWrite(led, LOW);
  }
}

The Result

And here’s the result:

VIDEO NO LONGER AVAILABLE

You can see it for yourself at http://arduino.jackbarber.co.uk – provided that I’ve currently got it turned on and connected. However, there’s absolutely no way for you to know whether your control of the LED is working or not – you’ll just have to trust that it does – or get an Arduino and try it out for yourself!