What 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 Test
For this test, assemble the following
- Arduino Uno R3
- Ethernet Shield SD R3
- PC or notebook with Ethernet port.
- Ethernet cable
- USB cable
- 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.
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.
- 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 Request
HTTP 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.
- (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 Off
Assemble the following circuit.
Let see interesting part of the code before we move forward.
- 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.
- (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.
- 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.
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.