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
<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,885views

41favorites

License:

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