[PiIoT#01] : Designing a dash board

Waiting for the components to arrive, I thought to do something with my RPi B+. As my project revolves around the convergence of people and their things, a dash board to view the data is an inevitable part of the system. This week I'm exploring the software design for such a dash for displaying the information. I'm going to use 'Freeboard' - a damn sexy real time dash board. There is a cloud version of freeboard available, ut I'm going to self host my freeboard with a nodejs server (Yes, I'm a little data/privacy freak ). In this post, I'm discussing how to install latest nodejs package in RPi and how to host freeboard using a nodejs server.

Installing latest Nodejs

Although an official nodejs version can be installed via apt-get, it is too old (mine reports v0.12). So first thing is to go to official nodejs site and download the latest version (v4.4.5 as on 5th Jun 2016). Flocks at nodejs team has made it really simple to install. Just download the right package, extract, and copy to the system path - and you are ready. First go to https://nodejs.org/en/download/ and scroll down to 'Additional Platforms' section. There you can find ARM binaries for ARM6/7/8. For B/B+ we need ARM6 binary, B2 requires a ARM7. I'm not sure about B3, because test tool reports it as ARMv7 but actually it's ARMv8 - so I'm waiting for my B3 to test it. Now right click over which binary build you want to download and select 'Copy link location'(in Firefox, I hope there will be an equivalent in other browsers as well). This will copy the download link for the build you want to download. Now go to Pi's command line and type in the following:

$ mkdir nodejs
$ cd nodejs
$ wget https://nodejs.org/dist/v4.4.5/node-v4.4.5-linux-armv6l.tar.xz 
$ tar -xvf node-v4.4.5-linux-armv6l.tar.xz
$ cd node-v4.4.5-linux-armv6l
$ sudo cp -R * /usr/local/

This should download, extract and install nodejs in your Pi B+. Replace the URL at line#3 with the corresponding URL for your Pi version. Now you can try the command below and should get a similar output.

$ node -v
v4.4.5

If you are getting similar output, you have successfully installed nodejs into you RPi.

Let's test the installation by creating a simple server which listens to port 8080 and greets the visitor with a welcome message. Create a file named 'main.js' and with contents:

// simple nodejs server

var http = require( "http" );

// Create a server instance at port 8080
http.createServer( function(request, response) {
    // Send a 200 header
    response.writeHead( 200, {'Content-Type': 'text/plain'});

    // Response data
    response.end( 'Hello World, this is Raspberry Pi B+\n' );
}).listen( 8080 );

// Print a message
console.log( "Server started at PORT 8080\n" );

Save 'main.js', go to command line and type:

$ node main.js

It should show an output like:

Now go to a web browser in your computer and visit URL http://<rPi's IP>:8080/ and you will get a response like below:

Serving Freeboard

Now we can create a server for hosting Freeboard and design dashboards. First you have create a new folder to keep the webapp. then download Freeboard.

$ mkdir webapp
$ cd webapp
$ git clone https://github.com/Freeboard/freeboard.git

Now create a new file name "server.js" inside "webapp" directory and save the contents below:

var http  = require("http"),
    url   = require("url"),
    path  = require("path"),
    fs    = require("fs"),
    mime  = require("mime")
    port  = process.argv[2] || 8888;

http.createServer( function(request, response) {

  var uri = url.parse(request.url).pathname;
  var filename = path.join(process.cwd()+"/freeboard", uri );

  // console.log( "New Request: \n" +
  //              "    URI : " + uri + "\n" +
  //              "    file: " + filename + "\n" );
  
  fs.exists( filename, function(exists) {
    if( !exists ) {
      response.writeHead( 404, {"Content-Type": "text/plain"} );
      response.write( "404 Not Found\n" );
      response.end();
      return;
    }
    if ( fs.statSync(filename).isDirectory() ) {
      filename += '/index.html';
    }
    fs.readFile( filename, "binary", function(err, file ) {
      if(err) {        
        response.writeHead( 500, {"Content-Type": "text/plain"} );
        response.write( err + "\n" );
        response.end();
        return;
      }
      response.writeHead( 200, {"Content-Type": mime.lookup(filename)} );
      response.write( file, "binary" );
      response.end();
    });
  });
}).listen( parseInt(port,10) );

console.log( "Freeboard Server running as PORT " + port + "\nPress CTRL + C to stop" );

Save this file and enter command

$ node server.js

This will start the nodejs sever and you will be able to see freeboard editor loaded by default. Now go to http:/<Pi's IP>:8888/ from your web browser. You will be able to see a webpage like the one below. Yayy... you are now successfully self hosting Freeboard.

The interface is so intuitive that it barely needs an introduction. You can add first sources for your data under "Datasources". Then Click on "Add Pane" to create widgets.

Designing your first damn-sexy dashboard

Since I don't have the hardwares for the challenge yet, I'm going to display weather data from my current town and hometown via Yahoo Weather. This where freeboard is really awesome. I can create a dash board design, share that JSON file with my friend and he can also instantly get the dashboard. SO I have already designed my dash. You just need to copy it and use.

Go to "freeboard" folder. Download and save "dash_weather.txt" attachment in this folder. Rename it to "dash_weather.json".

Now you can visit http://<PI's IP>:8888/#source=dash_weather.json from you browser. This will display the dash board designed to show weather from two places in India, my country.

To edit the places, go to Add Source section and edit the URLs to suit your place. You can get help from https://developer.yahoo.com/weather/ to find your place.

Now I have a dashboard to display data from my sensors, I'm eagerly waiting for the hardwares to arrive for start the build.

Happy hacking,

vish

<< Prev | Index | Next >>