loading
I build a small webside running on the arduino with ethernet I/O using HTML and a little bit of css.
When sending a HTTP request the script reads the request and gets a command from it.
You don't need internet, only a working network and a computer of smartphone connected to the same network.

Step 1: The Parts

Parts: 1 arduino, 1 ethernet shield, or a Sparkfun Pro Ethernet (not for sale anymore....) 1 LED connected to digital pin 9 and GND, 1 network-cable working network

Step 2: The Circuit

easy:
just plug the led (+) into the digitale pin 9 and the short one to GND.
And connect the arduino to the network with a networkcable.

Step 3: The Code

just upload this code to the arduino:

/* IPhone controlled LED

Turns on and off a LED connected to a digital pin, via a computer or
IPhone (or even a android device) without using internet.

combined examples:
Examples > Ethernet > Webserver and Examples > Digital > BlinkWithoutDelay

The circuit:
* LED attached from pin 9 to ground.
* EthernetShield using pins 10,11,12,13.

created mar 2013
by Floris
floris (at) deboktor.nl

This example code is in the public domain.
*/

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

byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,30,178); //choose a IPadress so you can easily find it on your computer
EthernetServer server(80);

String currentLine = "";
char Command[100];
int page = 2;
int prevpage = page;
long previousMillis = 0;
long interval = 500;
int ledState = LOW;
boolean PageUpdated = false;
int LedPin = 9;

void setup() {
  pinMode(LedPin, OUTPUT);
  currentLine.reserve(256);
  Ethernet.begin(mac, ip);
  server.begin();
  digitalWrite(LedPin,LOW);
}

void loop() {
  EthernetClient client = server.available();
  if (client) {
    boolean currentLineIsBlank = true;
    boolean ValidCommand = false;
    int i = 0;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        currentLine += c;
        if (!ValidCommand){
          Command[i] = c;
          i++;
        }
        if (c == '\n') {
          currentLine = "";
        }
        if ( currentLine.endsWith("HTTP/1.1")) { //line format is like: GET /?s=1 HTTP/1.1 or GET /favicon.ico HTTP/1.1
          ValidCommand = true;
          if (Command[5]-'?'==0){ //if the 5th karakter is ?
            if (Command[6]-'s'==0){ //then a s
              prevpage = page; //to prevent giving a strange command
              page = Command[8]-'0';//after the ?= is the actual command
              if(page!=1 && page !=2 && page!=3){ //1 = on, 2 = of, 3 = flashing
                page = prevpage;
              }
              PageUpdated = false;
            }
          }
        }

        if (c == '\n' && currentLineIsBlank) {
          delay(10);
          client.print("<!DOCTYPE HTML>\n");
          client.print("<HTML>\n<HEAD>\n");
          client.print("<TITLE>led-online</TITLE>\n");
          client.print("<meta name='viewport' content='user-scalable=yes, width=device-width'>");
          client.print("<style type='text/css'>\n");
          client.print("body {\n background-color: white; \n color: #222; \n font-family: Helvetica; \n margin: 0; \n padding: 0\n }\n");
          client.print("div#button_On {\n background-color: blue; \n border-bottom: 1px solid #666; \n color: #222; \n display: block; \n font-color: black; \n font-size: 14px; \n font-weight: bold; \n padding: 10px 0; \n text-align: center; \n text-decoration: none\n }\n\n");
          client.print("div#button_Off {\n background-color: #ccc; \n border-bottom: 1px solid #666; \n color: #222; \n display: block; \n font-color: black; \n font-size: 14px; \n font-weight: bold; \n padding: 10px 0; \n text-align: center; \n text-decoration: none\n }\n\n");
          client.print("a {\n text-decoration: none;\n }");
          client.print("\n </style>\n");
          if ((page!=0)&&(!PageUpdated)){//1 sec after a command refresh the page
            client.print("<META HTTP-EQUIV='refresh' CONTENT='1; URL=/'>\n");
            PageUpdated = true;
          }
          else{ //normally once everyy 10 sec a page update
            client.print("<META HTTP-EQUIV='refresh' CONTENT='10; URL=/'>\n");
          }
          client.print("</HEAD>\n");
          client.print("<BODY>\n\n");
          client.print("<a href='/?s=1'>\n");
          if (page==1){
            client.print("<div id='button_On'>");
          }
          else{
            client.print("<div id='button_Off'>");
          }
          client.print("LED ON");
          client.print("</div>\n");         
          client.print("</a>\n");
          client.print("<a href='/?s=2'>\n");
          if (page==2){
            client.print("<div id='button_On'>");
          }
          else{
            client.print("<div id='button_Off'>");
          }
          client.print("LED OFF");
          client.print("</div>\n");
          client.print("</a>\n");
          client.print("<a href='/?s=3'>\n");
          if (page==3){
            client.print("<div id='button_On'>");
          }
          else{
            client.print("<div id='button_Off'>");
          }
          client.print("LED FLASHING");
          client.print("</div>\n");
          client.print("</a>\n");

          break;
        }
        if (c == '\n') {
          currentLineIsBlank = true;
        }
        else if (c != '\r') {
          currentLineIsBlank = false;
        }
      }
    }
    delay(1);
    client.stop();
  }
  switch (page){
  case 1:
    digitalWrite(LedPin,HIGH);
    break;
  case 2:
    digitalWrite(LedPin,LOW);
    break;
  case 3:
    digitalWrite(LedPin, ledState);
    if(millis() - previousMillis > interval) {
      previousMillis = millis();  
      if (ledState == LOW)
        ledState = HIGH;
      else
        ledState = LOW;
    }
    break;
  }
}

Step 4: Finally

go the the IP adres asigned in the code on a smartphone or computer connected to the same network as the arduino.

a 3 button page will appear.
Just click on one of the buttons and see whats happening......
<p>This is good.<br>I have been searching some application references in which WIZnet solution is applied, and found your project using Ethernet Shield.<br>In the Ethernet Shield WIZnet's W5100 chip is embedded.<br>If you are O.K. I'd like to post this article in WIZnet Museum (http://wiznetmuseum.com) for others.</p>
mr floris<br> this is the section of your code<br> <br> if (c == '\n' &amp;&amp; currentLineIsBlank) {<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; delay(10);<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; client.print(&quot;&lt;!DOCTYPE HTML&gt;\n&quot;);<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; client.print(&quot;&lt;HTML&gt;\n&lt;HEAD&gt;\n&quot;);<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; client.print(&quot;&lt;TITLE&gt;fpoels iPhone Controlled LED wo computer or internet&lt;/TITLE&gt;\n&quot;);<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; client.print(&quot;&lt;meta name='viewport' content='user-scalable=yes, width=device-width'&gt;&quot;);<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; client.print(&quot;&lt;style type='text/css'&gt;\n&quot;);<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; client.print(&quot;body {\n background-color: white; \n color: #222; \n font-family: Helvetica; \n margin: 0; \n padding: 0\n }\n&quot;);<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if( led_ == OFF_ ){<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; client.print(&quot;div#button_On&nbsp; {\n background-color: lime; \n border-bottom: 1px solid #666; \n color: #222; \n display: block; \n font-color: black; \n font-size: 42px; \n font-weight: bold; \n padding: 32px 0; \n text-align: center; \n text-decoration: none\n }\n\n&quot;);<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; client.print(&quot;div#button_Off {\n background-color: black; \n border-bottom: 1px solid #666; \n color: #222; \n display: block; \n font-color: lime;&nbsp; \n font-size: 42px; \n font-weight: bold; \n padding: 32px 0; \n text-align: center; \n text-decoration: none\n }\n\n&quot;);<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if( led_ == ON_ ){<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; client.print(&quot;div#button_On&nbsp; {\n background-color: red; \n border-bottom: 1px solid #666; \n color: #222; \n display: block; \n font-color: black; \n font-size: 42px; \n font-weight: bold; \n padding: 32px 0; \n text-align: center; \n text-decoration: none\n }\n\n&quot;);<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; client.print(&quot;div#button_Off {\n background-color: black; \n border-bottom: 1px solid #666; \n color: #222; \n display: block; \n font-color: red;&nbsp; \n font-size: 42px; \n font-weight: bold; \n padding: 32px 0; \n text-align: center; \n text-decoration: none\n }\n\n&quot;);<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; client.print(&quot;a {\n text-decoration: none;\n }&quot;);<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; client.print(&quot;\n &lt;/style&gt;\n&quot;);<br> <br> create this effect when button_Off&nbsp; =&gt;&nbsp;&nbsp; ON (black letter lime background) &nbsp; when is button_On&nbsp; =&gt;&nbsp;&nbsp;&nbsp;&nbsp; ON &nbsp;(lime letter black background)<br> and<br> create this effect when button_Off&nbsp; =&gt;&nbsp;&nbsp; OFF&nbsp;(black letter red background)&nbsp;&nbsp; when is button_On&nbsp; =&gt;&nbsp;&nbsp;&nbsp;&nbsp; OFF&nbsp;(red letter black background)<br> <br> it is all on the &quot;div#button_Off &nbsp;line - again if i change the colors back to #ccc and black IT WORKS - if o modify IT DOESNOT&nbsp;<br> <br> another piece of info i have a iphone 3S with OS 4.2.1<br> <br> this is weird....
mr floris - i finally got your fabulous example working - i do not have any knowledge at all of any of this and would like to modify the code so when the button is off has different color - i changed the value from #ccc to black and the code does not run at all - changed it back to #ccc and it does run - what would make that to happend ?
Strange....<br>Did you use 'black' or '#000' ?<br>Should work both but you never know.

About This Instructable

2,921views

41favorites

License:

More by fpoels:2 wire 2 button Remote Arduino Iphone controlled led without a computer or internet 
Add instructable to: