Tracking Environmental Data with TPS and Keen.IO


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.

What you need


Proposed Tibbit configuration

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:

Clone URL:

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:


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

Store the keys securely, especially the master one


Node.js Application

Configuration and Installation

git clone
cd keenio-tutorial
npm install .
  • Launch the app:
node device

Comments in the code explain how it works

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

// 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..
    // ..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){

Web Interface


  • 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):
git clone
cd keenio-tutorial
npm install .
  • Launch:
node server

Comments in the code explain how it works


        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"

            // Executes the query..
  , function(err, res){

                // ..transforms the received data to be accepted by NVD3..
                    var timestamp = new Date(record.timeframe.end);
                        x: timestamp,
                        y: record.value.temp.toFixed(2)
                        x: timestamp,
                        y: record.value.hum.toFixed(2)

                // ..and does rendering


        <link href="" rel="stylesheet" type="text/css">

        <script src=""/>
        <script src="" type="text/javascript"/>
        <script src="" type="text/javascript"/>
        <script src="" type="text/javascript"/>
        <script src="" type="text/javascript"/>

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

    <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">

To learn more click here