Thanks to a suggestion from my wife last week, I bought a Energenie socket controller for the Raspberry Pi. This little gadget allows wireless communication to a special socket that plugs into an electrical outlet. When working, this allows you to easily write code that will turn on or off that socket. The pack comes with one transmitter and two receiving sockets but actually, I bought two kits as each socket may be controlled by up to two transmitters and one transmitter may control up to four sockets.

The reason that I bought this is quite simple. I have a new Raspberry Pi B+ in our living room with RaspBMC to allow us to use the XBMC media center software. we also put up our Christmas tree last weekend so we have the yearly problem of having to reach around quite a large christmas tree to reach the socket to turn off power to the lights every night. As they would say on twitter, it’s a perfect example of a first world problem! I hate that term but I’m getting off the point. Thanks to the RP and the Energenie I can turn on and off our Christmas tree lights remotely without going anywhere near that hard to reach socket.

The problem of course was, on Wednesday after I spent a short amount of time getting this set up the night before, my wife posted a status to facebook saying, “It’s bad when I’m not technical enough to turn on the christmas tree lights”. Point taken. I set about creating a web interface to allow us to do this from our phones.

I have never used the Flask Python web micro framework so this was a very new venture for me. the code you see before is my second version. The first one didn’t use views, a config file, templates or flash messages. It worked but it wasn’t as clean. I like to learn to do things properly so I scrapped it and read about how to do this properly. If you are interested in Flask, I really suggest you read this incredibly helplful tutorial by guel Grinberg.
Here are all the steps. Hopefully I haven’t left anything out. To make this a little more conveenient for you, I’ve also included a package of all the code and graphics you will need to get this running on your own system.

What you’ll need

• A Raspberry Pi
• An Energenie socket

Getting your environment ready.

I’m installing this on RaspBMC. This is the Raspberry Pi distribution for XBMC use primarily.
Update the aptitude repository
sudo apt-get update
Install build dependencies.
apt-get install gcc python-dev
install the Python GPIO package to gain control of the pins on the Pi.
cd /tmp
wget https://pypi.python.org/packages/source/R/RPi.GPIO/RPi.GPIO-0.5.8.tar.gz
Extract the contents of the archive.
tar xzvf RPi.GPIO-0.5.8.tar.gz
cd RPi.GPIO-0.5.8
sudo python setup.py install
Change to your home directory and get the Energenie install software from the following address.
cd
wget https://energenie4u.co.uk/res/software/ENER002-2PI.py
Now install this.
sudo python ENER002-2PI.py
Make a directory that will hold your project
cd
mkdir

ProjectName}
cd {ProjectName}
Get the really fantastic library created by Amy Mather’s. More information can be found here.
wget https://github.com/MiniGirlGeek/energenie-demo/raw/master/energenie.py
Get the Python setup tools package.
sudo apt-get install python-setuptools
get the Flask micro web framework.
sudo easy_install flask
Get the Jinja2 Python template engine.
sudo easy_install Jinja2
You now have all the components required to get coding.

create your app file and directory structure

The structure is as follows:
{ProjectName}/
{ProjectName}/run.py
{ProjectName}/config.py
{ProjectName}/energenie.py
{ProjectName}/apple-touch-icon-120x120-precomposed.png
{ProjectName}/apple-touch-icon-120x120.png
{ProjectName}/favicon.png
{ProjectName}/app/
{ProjectName}/app/views.py
{ProjectName}/app/__init__.py
{ProjectName}/app/static/
{ProjectName}/app/static/apple-touch-icon-120x120.png
{ProjectName}/app/static/christmastree.png
{ProjectName}/app/static/style.css
{ProjectName}/app/templates/
{ProjectName}/app/templates/index.html

The code

The following section has the code for each file along with a description of what that file is used for.

run.py

You will use this file to launch your application.

from app import app
app.run(host='0.0.0.0', debug=True) # Set to be accessible over the network with debugging enabled.


config.py

The config.py file does as you would expect. It is used to store config variables for the application.
SECRET_KEY = 'YourSecretKey'
The secret key is what ever you define. This is used by the flash messaging component.

app/views.py

This is the main part of your application. all of the processing happens here.

# Import statements.
from flask import render_template, flash
from app import app
from energenie import switch_on, switch_off

# Main page. accessible from http://yourIPAddress:5000/
@app.route('/')
def index():
return render_template('index.html', title='Christmas')

# Code that is called with http://yourIPAddress:5000/on. This turns on the lights and adds a message to say the lights are on.
@app.route('/on')
def on():
switch_on(1)
flash('Christmas tree lights on.')
return render_template('index.html', title='Christmas - Lights On')

# Code that is called with http://yourIPAddress:5000/off. This turns off the lights and adds a message to say the lights are off.
@app.route('/blue')
def off():
switch_off(1)
flash('Christmas tree lights off.')
return render_template('index.html', title='Christmas - Lights Off')


app/__init__.py

App initialization. Also includes the definition of the config file and tells flask that we are using views.py.

from flask import Flask
app = Flask(__name__)
app.config.from_object('config')
from app import views


app/static/style.css

You need to put static files into the static directory. The following style sheet definition defines some basic page layout options.

body {
margin-top:100px;
font-size: 30px;
}

.red-button-link {
text-decoration: none;
padding: 15px 20px;
background: red;
color: #FFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: solid 2px #20538D;
text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.red-button-link:hover {
background: red;
border: solid 2px #2A4E77;
text-decoration: none;
}
.red-button-link:active {
text-decoration: none;
-webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
background: red;
border: solid 2px #23E5F;
}

.green-button-link {
text-decoration: none;
padding: 15px 20px;
background: green;
color: #FFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: solid 2px #20538D;
text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.green-button-link:hover {
background: green;
border: solid 2px #2A4E77;
text-decoration: none;
}
.green-button-link:active {
text-decoration: none;
-webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
background: green;
border: solid 2px #203E5F;
}


PNG files

Add the graphics from the attached zip file if you like but if you would rather use your own, add them to the static folder.

templates/index.html

This is the template file. The UI that you will see is defined in this file.









Turn the lights on      Turn the lights off

{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
{{ message }} {% endfor %}
{% endif %}
{% endwith %}






Download the files required in an archive

You may download the archive here

if you would rather not copy and paste the code.