{"id":1277,"date":"2013-11-07T17:20:09","date_gmt":"2013-11-07T17:20:09","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=1277"},"modified":"2019-04-02T10:23:38","modified_gmt":"2019-04-02T10:23:38","slug":"arduino-webserver-with-an-arduino-ethernet-shield","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/arduino-webserver-with-an-arduino-ethernet-shield\/","title":{"rendered":"Arduino &#8211; Webserver with an Arduino + Ethernet Shield"},"content":{"rendered":"<p>This project is all about using an Arduino with an Ethernet shield. I&#8217;ll be controlling one LED and a servo, but you can apply this method to control any electronic device you want. (such as DC motors, buzzers, relays, stepper motors, etc..)<!--more--><\/p>\n<p><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter  wp-image-1285\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/ethernet-thumbnail.jpg?resize=700%2C485&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"700\" height=\"485\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/ethernet-thumbnail.jpg?w=962&amp;quality=100&amp;strip=all&amp;ssl=1 962w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/ethernet-thumbnail.jpg?resize=300%2C207&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2>Introduction<\/h2>\n<p>The code provided when uploaded and connected to the internet it creates a webserver in your LAN and you simply use the IP to access that webserver through your browser. After that it shows a webpage similar to that one below. When you press the button &#8220;Turn On LED&#8221; your url will change \u00a0to: <strong>&#8220;http:\/\/192.168.1.178\/?button1on&#8221;<\/strong> the arduino will read that information and It turns the LED On.<\/p>\n<p>By default the IP is &#8220;192.168.1.178&#8221;. That also can be found on the arduino code provided.<\/p>\n<h2><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/Untitled.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"aligncenter wp-image-1278\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/Untitled.png?resize=349%2C306&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Untitled\" width=\"349\" height=\"306\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/Untitled.png?w=582&amp;quality=100&amp;strip=all&amp;ssl=1 582w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/Untitled.png?resize=300%2C262&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 349px) 100vw, 349px\" \/><\/a>Watch this video tutorial<\/h2>\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/2J4cx2gA7DQ?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h2>Parts Required<\/h2>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"wp-image-1283 aligncenter\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/3a1.jpg?resize=265%2C198&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"3a\" width=\"265\" height=\"198\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/3a1.jpg?resize=1024%2C764&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/3a1.jpg?resize=300%2C224&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/3a1.jpg?w=2400&amp;quality=100&amp;strip=all&amp;ssl=1 2400w\" sizes=\"(max-width: 265px) 100vw, 265px\" \/><\/p>\n<ul>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/compatible-arduino-uno-r3-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">Arduino UNO<\/a>\u00a0\u2013 read\u00a0<a href=\"https:\/\/makeradvisor.com\/best-arduino-starter-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">Best Arduino Starter Kits<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/ethernet-shield-w5100-arduino-shield\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x Ethernet Shield<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x 220 Ohm Resistor<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/3mm-5mm-leds-kit-storage-box\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x LED<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/micro-servo-motor-tool\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x Micro Servo Motor<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x Breadboard<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jumper Cables<\/a><\/li>\n<\/ul>\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n<h2>Schematics<\/h2>\n<p style=\"text-align: center;\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/Schematics.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1279\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/Schematics.png?resize=434%2C274&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"[Schematics]\" width=\"434\" height=\"274\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/Schematics.png?w=620&amp;quality=100&amp;strip=all&amp;ssl=1 620w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/Schematics.png?resize=300%2C189&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 434px) 100vw, 434px\" \/><\/a><\/p>\n<h2>Upload the code below<\/h2>\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*\n Created by Rui Santos\n Visit: http:\/\/randomnerdtutorials.com for more arduino projects\n\n Arduino with Ethernet Shield\n *\/\n\n#include &lt;SPI.h&gt;\n#include &lt;Ethernet.h&gt;\n#include &lt;Servo.h&gt; \nint led = 4;\nServo microservo; \nint pos = 0; \nbyte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };   \/\/physical mac address\nbyte ip[] = { 192, 168, 1, 178 };                      \/\/ ip in lan (that's what you need to use in your browser. (&quot;192.168.1.178&quot;)\nbyte gateway[] = { 192, 168, 1, 1 };                   \/\/ internet access via router\nbyte subnet[] = { 255, 255, 255, 0 };                  \/\/subnet mask\nEthernetServer server(80);                             \/\/server port     \nString readString;\n\nvoid setup() {\n \/\/ Open serial communications and wait for port to open:\n  Serial.begin(9600);\n   while (!Serial) {\n    ; \/\/ wait for serial port to connect. Needed for Leonardo only\n  }\n  pinMode(led, OUTPUT);\n  microservo.attach(7);\n  \/\/ start the Ethernet connection and the server:\n  Ethernet.begin(mac, ip, gateway, subnet);\n  server.begin();\n  Serial.print(&quot;server is at &quot;);\n  Serial.println(Ethernet.localIP());\n}\n\n\nvoid loop() {\n  \/\/ Create a client connection\n  EthernetClient client = server.available();\n  if (client) {\n    while (client.connected()) {   \n      if (client.available()) {\n        char c = client.read();\n     \n        \/\/read char by char HTTP request\n        if (readString.length() &lt; 100) {\n          \/\/store characters to string\n          readString += c;\n          \/\/Serial.print(c);\n         }\n\n         \/\/if HTTP request has ended\n         if (c == '\\n') {          \n           Serial.println(readString); \/\/print to serial monitor for debuging\n     \n           client.println(&quot;HTTP\/1.1 200 OK&quot;); \/\/send new page\n           client.println(&quot;Content-Type: text\/html&quot;);\n           client.println();     \n           client.println(&quot;&lt;HTML&gt;&quot;);\n           client.println(&quot;&lt;HEAD&gt;&quot;);\n           client.println(&quot;&lt;meta name='apple-mobile-web-app-capable' content='yes' \/&gt;&quot;);\n           client.println(&quot;&lt;meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' \/&gt;&quot;);\n           client.println(&quot;&lt;link rel='stylesheet' type='text\/css' href='http:\/\/randomnerdtutorials.com\/ethernetcss.css' \/&gt;&quot;);\n           client.println(&quot;&lt;TITLE&gt;Random Nerd Tutorials Project&lt;\/TITLE&gt;&quot;);\n           client.println(&quot;&lt;\/HEAD&gt;&quot;);\n           client.println(&quot;&lt;BODY&gt;&quot;);\n           client.println(&quot;&lt;H1&gt;Random Nerd Tutorials Project&lt;\/H1&gt;&quot;);\n           client.println(&quot;&lt;hr \/&gt;&quot;);\n           client.println(&quot;&lt;br \/&gt;&quot;);  \n           client.println(&quot;&lt;H2&gt;Arduino with Ethernet Shield&lt;\/H2&gt;&quot;);\n           client.println(&quot;&lt;br \/&gt;&quot;);  \n           client.println(&quot;&lt;a href=\\&quot;\/?button1on\\&quot;\\&quot;&gt;Turn On LED&lt;\/a&gt;&quot;);\n           client.println(&quot;&lt;a href=\\&quot;\/?button1off\\&quot;\\&quot;&gt;Turn Off LED&lt;\/a&gt;&lt;br \/&gt;&quot;);   \n           client.println(&quot;&lt;br \/&gt;&quot;);     \n           client.println(&quot;&lt;br \/&gt;&quot;); \n           client.println(&quot;&lt;a href=\\&quot;\/?button2on\\&quot;\\&quot;&gt;Rotate Left&lt;\/a&gt;&quot;);\n           client.println(&quot;&lt;a href=\\&quot;\/?button2off\\&quot;\\&quot;&gt;Rotate Right&lt;\/a&gt;&lt;br \/&gt;&quot;); \n           client.println(&quot;&lt;p&gt;Created by Rui Santos. Visit http:\/\/randomnerdtutorials.com for more projects!&lt;\/p&gt;&quot;);  \n           client.println(&quot;&lt;br \/&gt;&quot;); \n           client.println(&quot;&lt;\/BODY&gt;&quot;);\n           client.println(&quot;&lt;\/HTML&gt;&quot;);\n     \n           delay(1);\n           \/\/stopping client\n           client.stop();\n           \/\/controls the Arduino if you press the buttons\n           if (readString.indexOf(&quot;?button1on&quot;) &gt;0){\n               digitalWrite(led, HIGH);\n           }\n           if (readString.indexOf(&quot;?button1off&quot;) &gt;0){\n               digitalWrite(led, LOW);\n           }\n           if (readString.indexOf(&quot;?button2on&quot;) &gt;0){\n                for(pos = 0; pos &lt; 180; pos += 3)  \/\/ goes from 0 degrees to 180 degrees \n                {                                  \/\/ in steps of 1 degree \n                  microservo.write(pos);              \/\/ tell servo to go to position in variable 'pos' \n                  delay(15);                       \/\/ waits 15ms for the servo to reach the position \n                } \n           }\n           if (readString.indexOf(&quot;?button2off&quot;) &gt;0){\n                for(pos = 180; pos&gt;=1; pos-=3)     \/\/ goes from 180 degrees to 0 degrees \n                {                                \n                  microservo.write(pos);              \/\/ tell servo to go to position in variable 'pos' \n                  delay(15);                       \/\/ waits 15ms for the servo to reach the position \n                } \n           }\n            \/\/clearing string for next read\n            readString=&quot;&quot;;  \n           \n         }\n       }\n    }\n}\n}\n\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/Arduino_with_Ethernet_Shield.c\" target=\"_blank\">View raw code<\/a><\/p>\n<p><strong>Note:\u00a0<\/strong>If you try this project. You can only access that IP address from your home. This means you must be connected to the same router that you&#8217;re ethernet shield is connected to. That picture below is from me accessing my webserver with my iPad.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1304\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/a.jpg?resize=300%2C225&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"a\" width=\"300\" height=\"225\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/a.jpg?resize=300%2C225&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/a.jpg?resize=1024%2C768&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/a.jpg?w=2400&amp;quality=100&amp;strip=all&amp;ssl=1 2400w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Thanks for reading, you can contact me by leaving a comment. If you like this post probably you might like my next ones, so please support me by subscribing my blog and my\u00a0<a href=\"https:\/\/www.facebook.com\/RandomNerdTutorials?ref=hl\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Facebook Page.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This project is all about using an Arduino with an Ethernet shield. I&#8217;ll be controlling one LED and a servo, but you can apply this method to control any electronic &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Arduino &#8211; Webserver with an Arduino + Ethernet Shield\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/arduino-webserver-with-an-arduino-ethernet-shield\/#more-1277\" aria-label=\"Read more about Arduino &#8211; Webserver with an Arduino + Ethernet Shield\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":1285,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[303,2,267,264,10],"tags":[],"class_list":["post-1277","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-0-arduino","category-arduino","category-arduino-project","category-project","category-a-tutorials"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2013\/11\/ethernet-thumbnail.jpg?fit=962%2C666&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/1277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=1277"}],"version-history":[{"count":0,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/1277\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/1285"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=1277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=1277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=1277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}