Step Nine: The Front End - Flot, Bootstrap and Templates

To start, we'll use the below 'hello world' example of flot:



As you can see, this example creates two flot objects for Temperature and Humidity. We can use the Google App Engine templating engine to populate the flot data - we'll do this in the example below:



Here, you can see that we iterate through the list of weather entries backwards to account for query selecting entries by date desc (newest first). For flot, we want to plot the points with newest last. Additionally, there is some funky-time handling present because Flot accepts time in ms.

To re-iterate, notice how the format of entries is stored in Google App Engine in a way that makes it super-simple to use with Flot. This is certainly not the most useful format for the data, but works and keeps within the free quota limits (a requirement for this project).

Step Eight: Finalizing Google App Engine (Backend) Logic

Now that we have a crash course in how we can leverage Google App Engine and understand what kind of request the Arduino will be making, we can finalize the App Engine code.

Using the two previous posts, we can assemble the final main.py using the blocks of logic from the previous post. The complete file looks like this (see previous posts additional comments):





Hopefully you have some understanding of the Django-like templating engine App Engine supports. There is an excellent hello-world tutorial in Google's official docs.

Next we'll visualize the data using a javascript based graphing library Flot!

Step Seven: Getting the Arduino Code Together

In this post, we'll finalize the code used with the Arduino.


As introduced in the previous post, we can easily use Google App Engine as a free datastore for this project.


The next step is getting the Arduino Temperature/Humidity Sensor, 7-Segment display and Ethernet Shield into one sketch, receiving a basic response from App Engine.

In order to do this we will:
1) Combine the previous sketches
2) Make app engine respond with the Temperature / Humidity included in the request.


Let's get started.


On the app-engine front, we'll simply want to make a request handler to respond with status code 200, and show the result in a header (for debugging purposes).

That request handler can be as simple as:



Stitching the three sketches together yields something like the following (read through the comments for specifics!):



Running this sketch yields the following output:


A few Notes:
-Most of the above sketch is comments / case handling for 3rd party libraries.
-If your sketch seems to hang on "connecting to server..." try restarting the sketch using the Arduino's on-board reset button.


In the next post, I will included the complete code used for Google App Engine. As of this moment, the Arduino / Hardware components are complete.

Step Six: Getting Started with Google App Engine

In order to store all this useful data with minimal thinking about databases etc. Google App Engine is an easy choice.

Warning:

I hope that this post illustrates how using only 2-3 dozen lines of code, we have a 'free' web-based datastore for this project. What follows is a primer for future posts where we will tie everything together.


Google App Engine will allow us to easily handle the Arduino's requests, store data, and let us retrieve data to display in a web browser.


To get started with Google App Engine you can sign up at: appengine.google.com.


For the purposes of this blog/tutorial, I will assume that you have some working knowledge of App Engine, that you can gain by working through the python tutorial.


If you are very technical, hopefully you can likely stich together a working app using this blog and source code provided alone (without completing the tutorial).


Once you are up and running with the App Engine Launcher and have created your first application, it's quite simple to log data.


The Model:

Since database reads / writes are limited (and we want to keep within App Engine's free-quota limits), storing a day of entries in a single string will be a hacky-effective solution.

I am also storing the date as a unix timestamp integer to remove some complexity of working with timestamps when it's time to graph them.


Defining an API:
Quite simply, the Arduino will pass a temperature and humidity value. Our Google App Engine application will receive these values, and record them to the database. An example request might look like:
myproject.appspot.com/t=7205&h=4302 which represents an entry of 72.05 degrees F and 43.02% humidity. Timestamp isn't required because that is handled server side.



Handling Requests from the Arduino:
The following code is heavily commented, and all records are formatted to be super-friendly to use with Flot (javascript based graphing library) in future posts.

The above code will be used to handle requests made from the Arduino. Note the use of the X-Arduino-Data header. This will be used for debugging the Arduino sketch.


Displaying Posts:
This code will be used to handle requests from the browser in order to display our temperature/humidity records from the datastore:



Confused? Probably. We'll be pulling everything together in the next post(s).

TLDR;

In order to proceed you need a Google App Engine account and basic understanding of App Engine. We can make use of Google App Engine using only 2-3 dozen lines of code. The next few posts will bring everything together.

Step Five: Interfacing with the Ethernet Shield

In order to get up and running with the ethernet shield, we can use an example sketch that ships with Arduino 1.0.


The TwitterClient example is most useful for a number of reasons:
1) The sketch behaves as a client (rather than a server which would be more difficult to configure)
2) A regular polling period of 5 minutes is written out of the box.

You can find this source code and documentation on the official arduino.cc website. A special thanks to Tom Igoe for writing the original!


With a hardcoded mac address and IP, my linksys router picked up the arduino and I could see recent tweets right away. Sometimes, I had to reset the arduino (using the on-board reset button) in order to have the router recognize the device. If you are having trouble, I would experiment with resetting the Arduino, and maybe even integrating DHCP.

In future posts, we will make some light modifications to this sketch to better suit our purposes:
1) Swap the api.twitter.com hostnames with our app engine hostname.
2) Pass a payload of temperature and humidity data in the query string.

TLDR;

Use the example TwitterClient example that ships with Arduino 1.0 - it's really great and only requires minor adjustments for this project.

Step Four: Interfacing With the 7-Segment Serial Display

In order to test my Serial 7-Segment display, I whipped together a minimal hello world sketch.

This logic can then be plugged into the temperature sketch discussed in the previous post.

Turns out that using SoftwareSerial, you can chat with the sparkfun Serial 7-Segment display quite easily:



Please note - as mentioned the display comes with a default 9600 baud rate. Mine got re-programmed due to a lack of pull down resistors (as discussed on the sparkfun product pages)!

Also note, many of the strange 'hex commands' send to the 7-Seg display were drawn from the data sheet. Reference it before doing any additional programming here (sparkfun user's manual).

TLDR;

Use the sketch above to get the your serial 7-Segment display up and running.

Step Three: Interfacing RHT03 Temperature & Humidity Sensor

Since this project revolves around the temperature and humidity, this was the first component I wanted to test.

Browsing sparkfun's comments on the product, I was able to find a good starting point for this component on github:

nethoncho's Arduino DHT22 Library via GitHub

This library however is not Arduino 1.0 compatible. Thankfully there is a pull request with the necessary adjustments by user ringerc on January 15th (great timing!):
https://github.com/nethoncho/Arduino-DHT22/pull/2

You can download the complete commit that is 1.0 compatible from the following page:
https://github.com/ringerc/Arduino-DHT22/tree/f1c5b3ab1e6f274ec66ecee09df729224af1cf7d

Or using this direct link:
https://github.com/ringerc/Arduino-DHT22/zipball/f1c5b3ab1e6f274ec66ecee09df729224af1cf7d

After un-zipping, you want to drag the entire folder into your 'libraries' directory within the Arduino application.

Once in that directory, you can open the example sketch within the Arduino application.

Wiring the temperature sensor based on comments in the example sketch and sparkfun customer comments yields a steady stream of temperature / humidity data as shown:

From left to right pins 1,2,3,4:
1: Connect to 5v VCC
2: Connect to Pin 7 on the Arduino with a 4.7K resistor to 5v VCC (pull up)
3: Ground
4: Ground

Running the sketch referenced above we'll the temp/humidity readings:

Next, we want to modify this sketch to leverage the 7-segment display. That will come in the next post!

TLDR;

You want to interface with the RHT03 Sensor? Just use the library here to get a hello-world sketch, and wire up the sensor's pins as described above.