So you have a fancy little sensor/contraption and its working great, the system is portable maybe even in a waterproof case or is mobile with no room for a display. However, how do you know the quality of your data or if the system is working without carrying a display or connecting up an SSH session? A black and white terminal impresses no one and is a terrible way to view trends in data.

There is an answer and it is fantastically flexible. You turn your Raspberry PI into a wireless access point and web server. Then with a little HTML, JavaScript, JSON and the chart.js library, you have a clean and dynamic interface for your project.


The particular project in this example uses the following hardware:


When assembled and strapped to a buoy anchored in the swan river it is capable of logging and analysing the motion and frequency of waves. This data is collected as part of the research for Woodside’s River Lab run in partnership with UWA’s Oceans Institute. Here you can see the real-time data stream from the buoy in a lab environment.


The Sensor

The BNO055 sensor performs all of the internal calculation and compensation to output clean acceleration and heading information, however as a demonstration to students and visitors the data is hard to visualise when it must be copied and charted from a CSV file. To improve the accessibility of the data and increase its value this tutorial will utilise several scripting & markup languages and several key libraries:

  • Python
  • HTML
  • CSS
  • JavaScript

Configure the Raspberry Pi

To configure the Raspberry Pi and the website there are several steps. Keep in mind any existing configuration or modifications to a vanilla Raspbian Jessie install may have unforeseen ramifications to this tutorial. Thankfully for my fingers many of these steps are already well documented, the links below will take you to the tutorials I used for some of these steps.

  1. Install Apache Web Server
  2. Configure Raspberry Pi as an Access Point
  3. Modifying your python script
  4. Configuring your script to run on boot
  5. Writing a webpage with chart.js

Having configured your Raspberry Pi as a hot spot web server as per tutorials 1 & 2 above, you should be able to load your web page on a laptop or mobile phone connected to the access point according to the IP address you configured in the second tutorial. If you followed the tutorial verbatim this is 172.24.1.1 although in my application I configured my /etc/network/interfaces AND /etc/dnsmasq.conf files with the address 192.168.0.1 as that is common across other hardware we develop.


Modifying your python script

To improve the portability of our data and leverage existing data handling tools built into python and JavaScript we need to output our sensor data as a JSON file. It is a simple and human readable file format for structuring data reminiscent of a dictionary/list within many languages. Python has some built-in functions that make it easy to output a dictionary as a JSON file. In this example, we want to create one file that details the current sensor reading as well as the calibration state of the sensor.

Most importantly, our JSON data is written to the directory for our web server /var/www/html/whatever.JSON  This means our web server can share the file when it is requested by a client. Any JSON file can be placed and requested natively via http://192.168.0.1/whateverTheFileNameIs.JSON this is great for viewing configuration information and system states without the additional effort of writing and formatting a full web page.

JSON can be viewed directly in the browser with no html required. Great for checking system states

Running the script on boot allows for truly headless operation. Although some form of visual feedback that the code is running, such as flashing an LED, will save any head scratching should the Pi fail to boot or script fail. To run the script on boot we will be modifying the /etc/rc.local file again with another line.

 (sleep:10;python /whatever/the/file/path/is/script.py)& 

As all operations within the rc.local file are already executed with privileges you will not need to include sudo in the command. Full copies of the source code used in this example can be found here.

A word of caution. As you are writing & reading the same file concurrently your code must be tolerant of not being able to access the file on occasion.

Now we have everything configured on the raspberry pi and our data is streaming we can start to build our chart.js data interface.


Andrew Van Dam

An electronics expert based in Australia dedicated to creating great tools for the maker community.