draptik

mostly tech stuff

Remotly Measuring Temperatures With a Raspberry Pi Using Radio Frequency Modules From Ciseco (Part 3: UI)

Part 1 describes how to setup the hardware, part 2 describes how to to record/persist the sensor information.

In this post I’ll describe how to display the data.

TL;DR

Should be similar to http://rpi-temperatures-website-demo.firebaseapp.com/.

Choosing the right technology stack

This really depends on your individual needs. Here are some points to consider:

  • How many people will be accessing the site?
  • Do you have to access the site from outside of your LAN? Do you need a login mechanism?
  • Which technology stack are you comfortable with? Which technology stack is supported on the server?
  • Database interaction possible (this demo uses SQLite3)?

If you know that you’ll have many requests I would discourage you from using the Raspberry Pi (RPi) as a web server.

Otherwhise, the RPi is a good choice for a web server.

Some of the technology stacks available on the RPi are:

  • JVM: Java, Scala
  • .NET/Mono: C#, F#
  • Python
  • JS: Node.js

Since I only want to display data in my LAN I decided to use Javascript: Node.js in combination with the Express framework provides all possible features and is very lightweight.

No matter which stack you choose: Running the web site on the same RPi as the temperature recording from the previous posts saves you the hassle of installing software on a different machine. And it obviously saves energy, since the RPi is running 24/7 anyway recording temperature data.

User Interface

My primary goal was explorative data visualization. For this purpose I decided to show 2 plots:

  • an overview plot showing the past 14 days
  • and a detail plot, showing the selection of the overview plot

You can test the website with some sample data at http://rpi-temperatures-website-demo.firebaseapp.com/

Some of the UI features:

  • The detail plot can be dragged and the overview plot has a selection region which can be resized and dragged.
  • Changes to either plot are reflected in the other.
  • Mouse movement in the detail plot updates the legend.

All charting features are implemented using Flot.

Prerequisites: Node.js

Here is a very concise manual on how to install Node.js on the RPi (this gives you a more up to date version of Node.js than default Raspbian does): http://weworkweplay.com/play/raspberry-pi-nodejs/

Installation

All further instructions are expected to be executed on the RPi.

Download and unzip the source code from

https://github.com/draptik/rpi-temperature-website/archive/v1.0.zip

1
2
3
4
5
cd ~
mkdir website && cd website
wget https://github.com/draptik/rpi-temperature-website/archive/v1.0.zip
unzip *.zip
cd rpi*

Install backend packages (node packages are defined in packages.json):

1
npm install

Node.js packages are installed to folder node_modules.

  • the folder app_server contains the basic web site.
  • the folder app_api provides the REST backend.

Install frontend packages (bower packages are defined in bower.json):

1
bower install

Bower packages are installed to folder public/vendor/bower.

You should now be able to start the application (using the provided sample data in folder sample_data):

1
npm start

Configuration (development vs production)

The application uses a single switch between development mode and production mode:

NODE_ENV

This information is currently used in the following places in the application:

REST URL

Setting the URL for the REST service (in app.js):

1
var url = process.env.NODE_ENV === 'production' ? 'http://camel:3000' : 'http://localhost:3000';

Within my LAN the RPi is named camel

And in case you’re not familiar with the syntax

1
var result = someCondition ? 'string1' : 'string2';

It’s just a shorthand for

1
2
3
4
5
6
var result;
if (someCondition) {
  result = 'string1';
} else {
  result = 'string2';
}

Database location

Setting the database location (in app_api/models/db.js):

1
var dbLocation = process.env.NODE_ENV === 'production' ? '/var/www/templog.db' : 'sample_data/templog.db';

Usage

Once you’ve configured the LAN URL and the database location, you can set the environment variable NODE_ENV to production and start the application:

1
2
export NODE_ENV=production
npm start

Customizing

You will probably want to customize the UI, as my design skills are limited at best. ;–)

Here’s an overview of the project, so you know where to change things:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
├── app_api                     //  REST API
│   ├── controllers
│   │   └── temperatures.js
│   ├── models
│   │   ├── db.js               //  DATABASE
│   └── routes
│       └── index.js
├── app.js                      //  MAIN ENTRY POINT FOR THE APPLICATION
├── app_server                  //  web server (express.js)
│   ├── controllers
│   │   ├── main.js
│   │   └── temperatures.js
│   ├── models
│   ├── routes
│   │   ├── index.js
│   │   ├── temperatures.js
│   └── views
│       ├── error.jade
│       ├── index.jade
│       ├── layout.jade
│       └── temperatures-list.jade
├── bower.json                  //  Bower configuration (frontend)
├── node_modules                //  Location of node modules
├── nodemon.json                //  nodemon configuration
├── package.json                //  node configuration
├── public                      //  frontend stuff...
│   ├── images                  //  images
│   ├── scripts                 //  Javascript code
│   │   ├── chart.js            //  This file includes all charting code
│   │   ├── rest.js             //  wrapper code to access REST API
│   │   └── suncalc.js          //  calc sunrise/sunset on the fly
│   ├── stylesheets             //  ...
│   │   ├── app.css
│   │   ├── chart.css
│   └── vendor                  //  3rd party libraries
│       ├── bower               //  ...installed via bower
│       └── custom              //  ...other 3rd party libraries
├── sample_data                 //  sample data
│   └── templog.db              //  sqlite3 sample data set

That’s it. Have fun!

Comments