IntroductionWhat is the fastest way to test the Ethernet Shield? We will look into that in this article. As well as exploring a little bit of serving HTML and basic information about HTTP protocol.
A Quick TestFor this test, assemble the following - Arduino Uno R3
- Ethernet Shield SD R3
- PC or notebook with Ethernet port.
- Ethernet cable
- USB cable
TroubleshootingNote that, direct Ethernet connection usually require a loop back Ethernet cable. Have not tested this, but it is possible to connect both PC and Ethernet Shield to a router. Since modern router do not care and auto detect normal cable and loop back cablesdfadf.
- The Uno is going to be connected to PC using USB cable. Stack Ethernet Shield on top of Uno.
- Connect Ethernet Shield to PC Ethernet port using Ethernet cable. At this point the link is not yet fully operational since IP need to be set on both PC and shield.
- Open up Arduino IDE. It is good idea to double check that the board and serial port is correctly set in the Tool menu.
- Load webserver sketch example. Navigate the following menu to do so. File>>Examples>>Ethernet>>WebServer
- Look for the following code which set the Ethernet Shield IP. Change the IP if required, for instance if there is an IP conflict.
IPAddress ip(192,168,1, 177); PC and Ethernet Shield
need to be in the same subnet to be able to communicate. In windows, open up command prompt and use ipconfig command to check this. Note that usually there are more than one network interfaces. Look for "Local Area Connection" or some such. - As in IP setting for Ethernet, the IP for PC should start with 192.168.1.x. If not, change the IP. In my case it is set to 192.168.1.178.
- Double check using ping command in command prompt. Should be able to ping the Ethernet shield IP successfully.
- Go back to Arduino IDE where the WebServer example sketch is loaded and upload the sketch.
- Open up browser and browse to the Ethernet shield IP. Simply type the IP in browser address box and press enter. You should see the following result.
analog input 0 is xxx
analog input 1 is xxx
analog input 2 is xxx
analog input 3 is xxx
analog input 4 is xxx
analog input 5 is xxx - Read the WebServer sketch code to understand what is going on. In short, the sketch (which is the server) respond to browser (which is the client) HTTP request by sending HTML page. The HTML page content is generated by reading analog input pins value (which are floating values since we do not do anything with it).
Understanding The Code
Peeking at client HTTP RequestHTTP is a topic worth a book by itself. However the following reference should give some basic idea.
To gain better understanding, let's modify the sample code so that we can have a peek into HTTP request sent by browser.
We are going to use Arduino IDE Serial Monitor functionality to achieve this.
void setup() { Serial.begin(9600); // 1<--- open up serial port connection to PC
//SNIP
void loop() { // listen for incoming clients EthernetClient client = server.available(); if (client) { // an http request ends with a blank line boolean currentLineIsBlank = true; while (client.connected()) { if (client.available()) { char c = client.read(); Serial.print(c); // 2<--- Send every character read to serial port
//SNIP
- (1) Add Serial object into the setup part of the code.
- (2) Send every character read to serial port
- Save and upload the code,
- After upload is completed open up Serial Monitor window in Arduino IDE (Menu Tools >> Serial Monitor)
- Refresh browser and observe HTTP request displayed in Serial Monitor. Should see the following screenshot or Serial Monitor window.
Turning LED On and OffAssemble the following circuit.
Let see interesting part of the code before we move forward. 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();
// 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("<br />"); }
- This is the part where HTML content is dynamically generated and sent back to the client. The first 3 line actually generate http header while the rest of the code loop through all analog port to read their value. This short example does not really observe proper HTML structure (note the missing <header> and <body> tag). But it do the work. This article will continue in that spirit and it is up tp the reader to properly include this in their consideration.
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();
if (digitalRead(8)){ // 1<-- Display LED status client.print(" LED is ON"); }else{ client.print(" LED is OFF"); } client.println("<br />");
// 2<-- Create a form
client.print("<FORM action=\"http://192.168.1.177/\" >"); client.print("<P> <INPUT type=\"radio\" name=\"status\" value=\"1\">ON"); client.print("<P> <INPUT type=\"radio\" name=\"status\" value=\"0\">OFF"); client.print("<P> <INPUT type=\"submit\" value=\"Submit\"> </FORM>"); break; }
- (1) Let's modify the code. Start by totally deleting the for loop. Instead, we will read digital pin 8 and display the value as ON or OFF in the browser.
- (2) Next add HTML code to generate a form with two
ON/OFF radio input and a submit button.
- Save and upload the code. Refresh the browser and the result should look as on the right.
void setup() { Serial.begin(9600); // open up serial port connection to PC pinMode(8, OUTPUT); // 1<--- Set digital pin 8 as output
//SNIP
void loop() { // listen for incoming clients EthernetClient client = server.available(); if (client) { // an http request ends with a blank line boolean currentLineIsBlank = true; String buffer = ""; // 2<--- Declare the buffer variable while (client.connected()) { if (client.available()) { char c = client.read(); buffer+=c; // 3<--- Assign to the buffer
//Snip
if (c == '\n') { // you're starting a new line currentLineIsBlank = true; Serial.print(c); // Send every character read to serial port buffer=""; // 4<--- Clear the buffer at end of line } else if (c == '\r') { if(buffer.indexOf("GET /?status=1")>=0) digitalWrite(8,HIGH); // 5<--- Catch ON status and set LED if(buffer.indexOf("GET /?status=0")>=0) digitalWrite(8,LOW); // 6<--- Catch OFF status and set LED } else{ // you've gotten a character on the current line currentLineIsBlank = false; }
- Now we have the user interface needed to turn on and off something. However clicking the submit button will not do anything yet. Code need to be written to process the HTTP request and then set digital pin 8 to high or low.
- (1) First of all we need to set digital pin 8 as output pin. Do this in setup.
- (2) The sample code read a character one by one. We need a buffer to hold this char. So declare the buffer as an empty string.
- (3) After each character is read, simply append it to the end of string buffer.
- (4) Clear the string when there is new line.
- (5) & (6) This is where we check status input. Simply look for "GET /?status=1" or "GET /?status=0" in each line of HTTP request.
- Now is a good time to refresh the browser and test the UI again. Selecting the status and clicking submit button should result to LED turning on or off.
Update (20120818):
Chris from Charm City Networks expand on this write up to create an awesome
Interesting read and a good next step after going through with above tutorial.
| 
