Just practicing

It has been quiet the past weeks, although I have been working quite extensively to find out new stuff for both my energy meter and greenhouse. I have been working primarily on the software side of things. I have been using a combination of Python, Flask, iPython and Pandas.

Python and Flask

One of the things I want to achieve is to have a web application for the greenhouse. This web application should enable telemetry of all the various sensors in the greenhouse as well as controlling the water pump, servo's and other stuff that can be automated. I stumbled upon Python-Flask, which is a great micro platform for writing powerful web applications. The hello world example gives a nice sneak peak what can be achieved easily with Flask:

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

if __name__ == "__main__":
    app.run()<br>

The example generates a web application that can be seen with a browser pointing to 127.0.0.1 (the internal browser of the Raspberry Pi or Beaglebone). When app.run() is replaced by app.run(host='0.0.0.0', debug=True) the web application can be seen on the network. Enabling debugging is great, as the code is on the fly reloaded when you change your source code.

The @app.route decorators take care of routing and can be used to create several URL's supporting different methods (GET, POST). Flask even facilitates the creation of a flexible web api, that can be used by other applications as well. There are several tutorials on the web that explain more on Flask. The following tutorial has been very helpful to me:

http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world

This is a multipart tutorial explaining how a sort of Twitter/Blogroll can be built using Flask. For the energy monitor, I've built a Flask application which uses a separate thread to receive a pulse counter value wirelessly (through the NRF24L01+ and library).

Templates, JQuery and JQuery Mobile

Web applications become more and more user friendly by adding interactivity. The Hello World example shows an unformatted text in your browser. Adding <H1> and </H1> tags around "Hello World!" formats the text but will be very cumbersome when creating a user interface.

Flask provides a templating engine based on Jinja2. One can create HTML templates with additional keywords and code that can be used dynamically with Flask.

I have used JQuery mobile for my energy monitor and plan to use this library for the greenhouse as well. JQuery mobile contains a style, various functions and user interface elements that lead to a slick web application. I could have also been using Bootstrap, the Javascript library from Twitter.

Templates are stored in the templates subdirectory. I have created a basic "layout" template that forms the base of most other templates:

<!doctype html>
<html lang="en">
    <head>
        <title>Say somthing</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>buttonMarkup demo</title>
		<link rel="stylesheet" href="/static/jquery.mobile-1.3.2.min.css">
		<script src="/static/jquery-1.9.1.min.js"></script>
		<script src="/static/jquery.mobile-1.3.2.min.js"></script>
    </head>
    <body>
        {% block content %}{% endblock %}
    </body>
</html>

The {% block content %} and {% endblock %} provide a "hook" to other templates. This template mainly sets the style and javascript libraries. The webpage is:

{% extends "layout.html" %}
{% block content %}
<div data-role=page id=home>
	<div data-role="header"  class="ui-header ui-bar-a" role="banner">
		<h1 class="ui-title" role="heading" aria-level="1"> Smart Energy Monitor </h1>
	</div>
	<div data-role="content">
		<div id="meetdata">
		</div>
	</div>
	<div data-role="footer" class="ui-footer ui-bar-a" role="banner">
		<h4 class="ui-title" role="heading" aria-level="1">Powered by Flask/jQuery/jQuery Mobile</h4>
	</div>
</div>
<script>
	setInterval(
		function()
		{
			$.getJSON(
			'{{ url_for('measure') }}', function(data){
				var str = "<H2>Current timestamp ("+data.time+")</H2>"; 
				str += "<H1>Current Power: "+data.power+" Watt</H1>";
				str += "<H1>Total usage: "+data.consumption+" KWh</H1>";
				$('#meetdata').html(str);
			});
		}
		,1000);
</script
{% endblock %}

Specific attention should be made to the double curly brackets, which enable Jinja2 template code to be executed and the url_for statement which takes care of the correct routing.

Next time

There are three items that need to be described in the next installments:

- Threading

- SQL Alchemy for database access

- iPython as an experimentation platform

- Pandas for timeseries manipulation

Python and Flask

Templates, JQuery and JQuery Mobile

Next time

Quiet, but fruitful

Quiet, but still going strong...

Discussions

Become a Hackaday.io Member