Tracking Environmental Data with TPS and Keen.IO

Posted 01-26-2017 at 08:26 AM by Dmitry_Slepov

About the Application

Keen.IO is a cloud platform that provides data collection and analysis services via the REST API. Keen offers SDKs for many programming languages, including browser-side JavaScript and Node.js.
In this tutorial we used Tibbit #30 (ambient humidity and temperature meter) for collecting environmental data and storing it on the Keen.IO server.
A very simple in-browser application is used for fetching data from Keen.IO and displaying charts in the browser window (the charts below have been received from Keen.IO, they are not static).
Data collection and representation are separated into device.js and server.js applications.

Temperature, C

https://hackster.imgix.net/uploads/a...&h=510&fit=max

Humidity, %

https://hackster.imgix.net/uploads/a...&h=510&fit=max

Proposed Tibbit configuration

http://m0.tibbo.net/m/pictures/tps-t...ental-data.png

What you need
Hardware

1 x Tibbit #10 (power supply)
1 x Linux TPS3 (LTPS3) board, optionally in a TBP3 enclosure
1 x Tibbit #00-3 (2 direct I/O lines with 5V and ground)*
1 x Tibbit #18 (power jack)
1 x Tibbit #30 (ambient humidity/temperature meter)

Onboard Software

Node.js V6.x.x (pre-installed during production)

External Services

Keen.IO (you should create an account)

GitHub Repository
Name: keenio-tutorial
Repository page:https://github.com/tibbotech/keenio-tutorial
Clone URL: https://github.com/tibbotech/keenio-tutorial.git
Updated At:Fri Oct 14 2016

Setting Up External Services

Create a Keen.IO account (free for up to 50000 events per month);
Add your project;
Click on the title of the project to open an overview tab:

Keenio Screen Create Project

http://m0.tibbo.net/m/pictures/nodej...te-project.png

Receive your projectID and API keys (you need read and write keys):

Store the keys securely, especially the master one

Keenio Screen Get Keys

http://m0.tibbo.net/m/pictures/nodej...n-get-keys.png

Node.js Application
Configuration and Installation

Define the required configuration in the LTPS Web Interface
Login to the LTPP3 board from the SSH client
Install NPM and other tools as needed.
Install the app

Code:

git clone https://github.com/tibbotech/keenio-tutorial.git
cd keenio-tutorial
npm install .

Launch the app:

Code:

node device

Comments in the code explain how it works

Code:

// requires Keen.IO client module
const Keen = require('keen.io');

// requires Tibbo's humidity/temperature meter and sets it up to work with I2C line 4
const humTempMeter = require('@tibbo-tps/tibbit-30').init("S5");

// Binds the client to your account
const client = Keen.configure({
    projectId: "57066...........fe6a1279",
    writeKey: "0d2b95d4aa686e8274aa40604109d59c5..............4501378b3c193c3286608"
});

// Every minute..
setInterval(function(){
    // ..reads the environmental data from the meter..
    var data = humTempMeter.getData();

    // ..checks out if everything's correct..
    if(data.status === 1){
        var payload = {
            hum: data.humidity,
            temp: data.temperature
        };

        // ..and submits them to your event collection.
        client.addEvent("humtemp",  payload, function(err){
            if(err !== null){
                console.log(err);
            }
        });
    }
},60000);

Web Interface
Installation

The web interface application can be installed on your PC, a remote server, or executed on the same LTPS device (as a separate process)
Install the application (skip if running on the same LTPS):

Code:

git clone https://github.com/tibbotech/keenio-tutorial.git
cd keenio-tutorial
npm install .

Launch:

Code:

node server

Comments in the code explain how it works
browser.js

Code:

angular
    .module('tutorials',['nvd3'])
    .controller("nodejs-keen",['$scope',function($scope){
        var client = new Keen({
            projectId: "5706............fe6a1279",
            readKey: "29ec96c5e..........746871b0923"
        });

        // Configures NVD3 charting engine
        $scope.options = {
            chart: {
                type: 'lineChart',
                height: 300,
                margin: {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 55
                },
                x: function (d) {
                    return d.x;
                },
                y: function (d) {
                    return d.y;
                },
                useInteractiveGuideline: true,
                xAxis: {
                    axisLabel: 'Time',
                    tickFormat: function (d) {
                        return d3.time.format("%X")(new Date(d));
                    }
                }
            }
        };

        $scope.temperature = [
            {
                values: [],
                key: 'Temperature',
                color: 'red'
            }
        ];

        $scope.humidity = [
            {
                values: [],
                key: 'Humidity',
                color: 'blue'
            }
        ];

        // Defines Keen.IO query
        var query = new Keen.Query("multi_analysis", {
            event_collection: "humtemp",
            timeframe: {
                start : "2016-04-09T00:00:00.000Z",
                end : "2016-04-11T00:00:00.000Z"
            },
            interval: "hourly",
            analyses: {
                temp : {
                    analysis_type : "average",
                    target_property: "temp"
                },
                hum : {
                    analysis_type : "average",
                    target_property: "hum"
                }
            }
        });

        Keen.ready(function(){
            // Executes the query..
            client.run(query, function(err, res){

                // ..transforms the received data to be accepted by NVD3..
                res.result.forEach(function(record){
                    var timestamp = new Date(record.timeframe.end);
                    $scope.temperature[0].values.push({
                        x: timestamp,
                        y: record.value.temp.toFixed(2)
                    });
                    $scope.humidity[0].values.push({
                        x: timestamp,
                        y: record.value.hum.toFixed(2)
                    });
                });

                // ..and does rendering
                $scope.$apply();
            });
        });
    }]);

index.html

Code:

<html>
    <head>
        <link href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css" rel="stylesheet" type="text/css">

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.6/angular-nvd3.min.js" type="text/javascript"/>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/keen-js/3.4.0/keen.min.js" type="text/javascript"/>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" type="text/javascript"/>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js" type="text/javascript"/>

        <script src="browser.js" type="text/javascript"/>
    </head>

    <body ng-app="chart" ng-controller="nodejs-keen">
        <h3>Temperature, C</h3>
        <nvd3 options="options" data="temperature">

        <h3>Humidity, %</h3>
        <nvd3 options="options" data="humidity">
    </body>
</html>