In my previous post I showed how fast it was to bring the Rabbit Web Server into the project.  Of course, I could just be a terrible liar so here is video showing the Wi-Fi web server in action.

It’s a Plain-Jane web page but we can always add a style sheet later to beautify it.

One of the reasons why the Rabbit is so compelling as an embedded computer is that with all the different work we are doing with motors and sensor tuning adding an interactive web server is quick and painless.

Here are the preliminary goals:

• Wi-Fi connectivity
• Web Server
• Use Asynchronous JavaScript and XML (AJAX) to display Rover data in real-time

Here is what we need to make this happen:

• A web page
• An XML file
• A C program to run on the rover

The Gratuitous Self-Plug

If you are concerned about the nitty-gritty of how this all works and want to try it yourself, take a look at my Rabbit-Geek’s AJAX Workbook.  It has step-by-step instructions, examples, and code you can use on your own.

Rabbit-Geek Workbook for the Web, RabbitWeb, JavaScript, and AJAX

The rest of the article will be a big picture explanation of how this works.

Easy Wi-Fi

You can configure all the Wi-Fi network settings in the compiler or the code.  In this case, I have configured everything in the compiler like this:

This configuration looks harder than it actually is.   In the TCP_CONFIG.LIB file that comes with the compiler you will find a series of Wi-FI templates for each type of encryption.  I just copied the configuration from the file into this compiler window and then tweaked it for my specific network.

(For the hackers out there, I have foiled your attempts by obscuring my Wi-Fi network password with the Red Rectangle of Redaction. )

Time to Configure Wi-Fi = 5 minutes or less

The Web Server

Assuming for a moment that we have the web page and XML file ready, let’s look at how the Rabbit devices implement a web server.  Fortunately, by adding less than 40 lines of code to our program I can add an interactive web server with AJAX.

Here is the C code:

As you can see it isn’t too scary looking.  After the web server is initialized you just spin in the loop on the http_handler function which is non-blocking and typically returns in about 1 millisecond or less.

Time Creating a C File = Approximately 20 minutes

The Amazing Mutating XML File

The XML file is the easiest piece and while my XML might offend a real web developer, I’m an embedded engineer and it works.

Here is the XML file before it is served:

The only weird looking part of the XML file is the strange “<z? echo ($Rover_Data) ?>“.  When the web server receives a request for the XML file it will strip this RabbitWeb code out and replace it with the value of the Rover_Data string variable from my embedded controller.

For example, if the Rover_Data variable held the string “Scooby Doo” the final served XML file would be updated.

Here is the served XML file when Rover_Data = “Scooby Doo”:

If the web server gets a new request from the file and the Rover_Data string variable has changed, the XML file will also be updated before it is served to the browser.  That’s easy dynamic data for your web page.

Time Creating an XML File = Less than 5 minutes

The HTML page with special AJAX kung-fu

The web page may be a bit intimidating but all it really does is:

1. Use the JavaScript to figure out which browser you are using

2. If your browser supports it, get a copy of the XML file from the server and use it to get the data

3. Put that data on the web page every 500 milliseconds.

Here is the HTML file:

Click to read the code

I just copied this from some of my Workbook samples.

Time Editing the HTML File = About 5 minutes

How Long Did That Take?

Total Time to Add the Web Server = Less than an hour

(It took me longer to write this blog post.