Electronics Wednesday at Make, Hack, Void got off to a flying start this year with several people, both old and new, hanging out at the space, chewing the fat. It was good to see you all back, fresh and ready for another year of creative company. David has got himself a new 3D printer, Steve was wrecking a Compaq ML750 (loosing some ketchup in the process) and I some how managed to talk myself into starting yet another project.
Jack, a seasoned UAV builder, wants to build a user interface to format and display the data being produced from sensors attached to an Arduino. We discussed using Java, C# and Python but I wouldn’t describe any of these as an easy way to put together a simple graphical console.
Freetronics make a handy Arduino clone, the EtherTen. They’ve combined an Arduino Uno with an Ethernet port and microSD socket on a single board. I’ve think I’ve finally found the right project for it. My idea looks like this:
Arduino make this pretty easy to get started. An simple web server is supplied as part of the Ethernet library examples. All I had to do was change the IP address and download. Worked first time!
HyperText Transfer Protocol (HTTP)
HTTP has revolutionised the world. It’s quite amazing that something so important is so simple in its implementation. That’s probably why it took off.
To understand HTTP you first need to understand the concept of a socket. Sockets provide a point-to-point connection between programs running on same or different machines. In our case we will be using a socket to connect the workstation’s browser (Safari) to the web server program running on the Arduino. The fact that the connections are over Ethernet can be ignored. The socket allows two parallel byte flows, one transmit, one receive, to pass between the pair. Bytes transmitted by one computer will pop out the other other end in sequence and vice versa.
HTTP sends specially formatted text (the request) as bytes over the socket. The web server reads the request bytes and processes the information (fields). In most cases it will write a response header to the socket and then follow it up with the contents of the requested file. A file transfer with some added text wrapping.
This is what happens when you use your browser:
- You enter details into the location field. For example, http://192.168.1.177/index.html and press return.
- The browser separates this information into two pieces, the server IP address (192.168.1.177) and the resource identifier (/index.html)
- The browser makes a socket connection to 192.168.1.177 (port 80). This connects it to the server program on the Arduino.
- The browser send an HTTP GET request for the resource /index.html (shown below)
- The server program receives the request and sends a response header followed by some hardcoded HTML
GET /index.html HTTP/1.1 Host: 192.168.1.177 Accept-Encoding: gzip, deflate Connection: keep-alive Upgrade-Insecure-Requests: 1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/602.3.12 (KHTML, like Gecko) Version/10.0.2 Safari/602.3.12 Referer: http://192.168.1.177/ Cache-Control: max-age=0 Accept-Language: en-us
The request runs over multiple lines, the first being the most important. A GET request is a file transfer from server to browser. The file to transfer is named after the word GET (/index.html). The lines following provide more information about the browser, the kind of response it is looking for and things about the user such as desired language (English). This allows the server to tailor its response.
The server knows the request is complete when it encounters an empty line i.e. 2 carriage return/linefeed characters in a row.
The Arduino sends backs something like this:
HTTP/1.1 200 OK Content-Type: text/html Connection: close <!DOCTYPE HTML> <html> analog input 0 is 254 ... </html>
Note the blank line between the header and HTML. This is how the browser knows where the response header ends and the file portion begins.
The browser takes the HTML portion and displays it in its main window area, using information from the HTML tags to pick visual items like font, font size, colour etc.
That’s probably enough for one article. I recommend reading through the Arduino example code whilst matching the narrative above up with the program steps. Hypertext really is that simple.
Next time I’ll walk through how to modify the example program to get it serving files off the SD card, rather than hardcoded strings.