Arduino Web Console (Part 1)

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.

My suggestion of using HTML served up by the Arduino and a little Javascript magic met with some scepticism. After getting home late I just couldn’t let it go and proceeded to investigate. I don’t think it is as difficult as it sounds…

Project Overview

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:

img_0230

The idea is to store the screen layout on the Arduino’s SD card in the form of HTML, various bitmaps and some Javascript. The Arduino will operate as a mini web server, serving up the HTML etc. as well as providing the sensor data. Rather than build pages and embed the sensor data I’m going to take the RESTful approach and make the server respond to sensor data requests as a separate operation.

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.

img_0231

Socket: a logical point-to-point connection between programs

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:

  1. You enter details into the location field. For example, http://192.168.1.177/index.html and press return.
  2. The browser separates this information into two pieces, the server IP address (192.168.1.177) and the  resource identifier (/index.html)
  3. The browser makes a socket connection to 192.168.1.177 (port 80). This connects it to the server program on the Arduino.
  4. The browser send an HTTP GET request for the resource /index.html (shown below)
  5. The server program receives the request and sends a response header followed by some hardcoded HTML

HTTP Request

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.

HTTP Response

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.

Summary

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.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s