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!