Using Node.js to control your Raspberry Pi

Introduction

The Raspberry Pi is a credit card-sized computer that plugs into your TV and a keyboard. It is a capable little computer which can be used in electronics projects, and for many of the things that your desktop PC does, like spreadsheets, word processing, browsing the internet, and playing games – raspberrypi.org

Of course, there are many other things you can use your pi for as you can see here and here.

The raspberry pi runs on mainly a linux based operation system known as Raspbian, however, beginner users have often used NOOBS to get started. You can view a list of officially supported images on the downloads page. My personal preference is the RASPBIAN JESSIE which comes in 2 versions, the full version with a GUI or a headless version for you super techy linux power users which only has a terminal.

So now that you have your raspberry pi running how do you start doing all the cool projects like controlling lights and reading temperatures etc? Simple, you write a program.You have to use the GPIO pins, The raspberry pi provides easy access to to GPIO pins and from there you can either write or read values form each of them. For example you could switch on a light(if it’s directly connected to the board it should be a small LED, the pi is not powerful enough to power a normal light bulb) by setting the output value of that pin to the maximum voltage.

Controlling Your GPIO Pins

There are 2 approaches to doing this. The first is to directly manipulate the GPIO registers much like one would do when programming a micro controller without an operating system or memory management unit. The advantage of this method is that by bypassing the os and you’re shaving some latency off of read/write times. Bypassing the OS however means that if two processes are trying to access the same physical GPIO registers at the same time, a unsafe resource conflict can happen.

The other approach is to use the inbuilt Linux drivers to access the gpio pins. This is a much safer, albeit slower approach.

Most of the time you need not worry about these approaches as the programming language you using will take care of it for you. Almost every programming language supported by the raspberry pi has its own GPIO control library. For most starter projects the best approach would be to use the OS to toggle pins as you need not worry about resource conflicts.

Programming You PI

Python has long being touted as the official language of the PI. The Raspberry PI foundation recommends as a language for learners do you its expressive style and simple syntax.  However, ny language which will compile for ARMv6 (Pi 1) or ARMv7 (Pi 2) can be run on your pi, so Python is not your only option. C, C++, Java, Scratch, and Ruby all come installed by default on the Raspberry Pi however, if this is your first project I recommend using Python for a number of reasons, which I will discuss later. If you notice, Node,js is not on that list, that is because until recently it was not possible to use Node.js to control gpio pins. However, I recently found a rather excellent library for reading and writing to GPIO pins called rpi-gpio,

The library, and the idea of using Node.js for this task, is pretty young and not yet popular however I thought I would give it a try to see what it’s like.

Scenario:

  1. Turn on a series of lights one by one is quick succession with a uniform delay in between.
  2. Once all the lights are switched on, turn them off in the same order with the same uniform delay.
  3. Repeat until script is exited.

The node script:

var gpio = require('rpi-gpio');
var allPins = [7, 11, 13, 15, 12];
//delay in milliseconds
var DELAY = 500;
setupPins(allPins, function() {
    console.log('Setup Done');
    startLoop();
});

function setupPins(pins, callback) {
    console.log('Start Setup');
    setupPin(0, pins, callback);
}
//recursive function since node is async
function setupPin(key, pins, callback) {
    var currentKey = key;
    if (currentKey > (pins.length - 1)) {
        callback();
        return;
    }
    gpio.setup(pins[currentKey], gpio.DIR_OUT, function(err) {
        console.log('Setting up ', pins[key]);
        if (err) {
            console.log("Error in setup of pin " + pins[key]);
        }
        var incrementKey = currentKey + 1;
        setupPin(incrementKey, pins, callback);
    });
}

function startLoop() {
    console.log("Starting loop");
    turnAllOn(allPins, function() {
        console.log('All On');
        turnAllOff(allPins, function() {
            console.log('All Off');
            startLoop();
        });
    });
}

function turnAllOn(pins, callback) {
    console.log('Starting to turn all on');
    writeToPin(0, pins, true, callback);
}

function turnAllOff(pins, callback) {
    console.log('Starting to turn all off');
    writeToPin(0, pins, false, callback);
}
//recursive function
var writeToPin = function(key, pins, value, callback) {
    var currentKey = key;
    if (currentKey > (pins.length - 1)) {
        callback();
        return;
    }
    setTimeout(function() {
        console.log('Writing to ', pins[key]);
        gpio.write(pins[currentKey], value, function(err) {
            if (err) {
                console.log("Error in writing of pin " + pins[key]);
            }
            var incrementKey = currentKey + 1;
            writeToPin(incrementKey, pins, value, callback);
        });
    }, DELAY);
};

The equivalent python script:

import RPi.GPIO as GPIO
import time

GPIO.setmode(GPIO.BOARD)
pin_list=[7,11,13,15,12]
GPIO.setup(pin_list,GPIO.OUT)

def pin_handler(pin,value):
	GPIO.output(pin,value)
	return;

#delay between light actions, in seconds
delay=0.5
#simple variable to make an infinite loop
guard=1
#condition to make infinite loop
while(guard==1):
	# setting all pins on with a delay in beetween
	for pin in pin_list:
		pin_handler(pin,GPIO.HIGH)
		time.sleep(delay)
	# switching all pins off with delay in between
	for pin in pin_list:
	    pin_handler(pin,GPIO.LOW)
	    time.sleep(delay)
	print("Next Cycle")

As you can see, the controlling of the pins themselves are pretty easy. All you have to do is import the library , set the board numbering mechanism , set up a pin, and then write/read to/from it.

With node and python the main difference is that since node is async you have to use the callback to ensure one action is completed to start the next. You could use a library like async.js to make the code within a block synchronous but I wanted to demonstrate the code as simple as possible.

Conclusion

Python is and will be (for awhile at least) the easiest and most convenient language for programming on the pi. There is support right out of the box, unlike node js.

There are also libraries for virtually every sensor available on the market written in python which means to use a sensor all you have to do is download the respective library and use it. Node.js currently does not have any libraries like this. This means that to read data from a pin you will have to get your hands on the manufatures hardware spec and learn what the voltages and voltage cycles mean and how the data is transferred and write this all by yourself, my advice, unless you gave a degree in electrical engineering as well as a thorough understanding of low level programming, don’t expect to

As you can see, the python code is much more readable and verbose, the node js script due to using callbacks and recursion becomes much more complex than it needs to be.

However, take a different scenario. You want to control some lights form your mobile phone or website. How do you do it? You could write a web socket server on the pi and listen for changes and control the lights accordingly, for this case I would definitely go for a Node.js implementation simply because of how easy it is to set up a server and get it deployed. However, long term python might be the more beneficial choice, but for cool proof of concepts and demos, Node.js is a good choice.

http://www.hertaville.com/introduction-to-accessing-the-raspberry-pis-gpio-in-c.html

https://www.raspberrypi.org/help/faqs/#softwareOS

https://sourceforge.net/p/raspberry-gpio-python/wiki/BasicUsage/

A Websocket Implementation

Websockets are an advanced technology that enable a interactive two-way communication between a client and a server. This means that the client can remain upto date with the server without the need for ajax polling. For more information of websockets read my Introductions To Websockets post.

This post will mainly be about how to implement a websocket client and server using the SOCKET.IO  library.

I will be using a node.js server and a jquery client for this example. However, any client and any server could be used.

The usecase is this. When one user selects a specific color that change should be shown to all the other users connected. If the user selects red, then all users should show red.

The server

I pasted my package.json file below, that way all you have to do is copy the dependencies and get started.

The main libraries needed are socket.io and express, however express is not strictly required.

{
  "name": "socker-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },
  "author": "Shayne Weerakoon",
  "license": "MIT",
  "dependencies": {
    "express": "^4.14.0",
    "socket.io": "^1.7.2"
  }
}

Creating a websocket server

As I mentioned before, express is not needed, however, having it leaves the option of supporting both REST and websocket implementations on the same server.

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var port = process.env.PORT || 3000;
server.listen(port, function() {
    console.log('Server listening at port %d', port);
});

And there you have it. An up and running websocket server.

Now this server won’t do anything. You could connect to it, but that’s it. Add these few lines to give it an endpoint.

//When there is a new client connecting the 'connection' event is fired
//This event has one parameter, the websocket
io.on('connection', function(socket) {
    //Once the intial connection occurs, we
    //can then listen for an event on this
    //specific socket.
    socket.on('change', function(data) {
        //When this particular client pushes a change event
        //the function will be called with the data as a
        //parameter.
        //Logging the data
        console.log('change ', data);
        //this will then emit the 'changed' event
        //to ALL sockets connectd to the server.
        io.sockets.emit('changed', data);
    });
});

The Client

The client requires the socket.io-client package.

Here is the html with buttons for the user to selct a color, a text field to display the color and the required libraries imported.

<!DOCTYPE doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>Websocket Client Example</title>
            <link href="css/index.css" rel="stylesheet"></link>
        </meta>
    </head>

    <body>
        <br><br><br>
        <center>
            <button id="redButton" type="button">Red</button>
            <p id="redStatus"></p>
            <br>
            <button id="greenButton" type="button">Green</button>
            <p id="redStatus"></p>
            <br>
            <button id="blueButton" type="button">Blue</button>
            <p id="redStatus"></p>
            <br>
            <button id="orangeButton" type="button">Orange</button>
            <p id="redStatus"></p>
            <br>
            <button id="yellowButton" type="button">Yellow</button>
            <br><br><br>
            <h3 id="currentColor"></h3>
        </center>
        <script src="lib/jquery/dist/jquery.min.js">
        </script>
        <script src="lib/socket.io-client/dist/socket.io.js">
        </script>
        <script src="js/sample.js">
        </script>
    </body>

</html>

The UI is extremely basic but for the purposes of this tutorial, the job gets done.

The javascript is as follows:

$(function() {
    //Connect to the socket server we started earlier
    var socket = io.connect('http://localhost:3000');
    //listen for any button clicks by the user
    //if a button is clicked call changeCommand function
    //and pass color as parameter.
    $('#redButton').click(function() {
        changeCommand('red')
    })
    $('#greenButton').click(function() {
        changeCommand('green')
    })
    $('#blueButton').click(function() {
        changeCommand('blue')
    })
    $('#yellowButton').click(function() {
        changeCommand('yellow')
    })
    $('#orangeButton').click(function() {
        changeCommand('orange')
    })
    //Function to be performed when a button is clicked,
    //accepts the color as a parameter.
    function changeCommand(color) {
        socket.emit('change', color);
    }
    //the socket will listen for the changed event to be
    //emmited by the server
    //once emitedd will perform the specified function
    socket.on('changed', function(data) {
        //data is the parameter passed by the server
        ////changing color to the passed data
        $('#currentColor').text(data);
    })
});

Once again, very bare bones but it gets the job done.

The Results

The Server on start up:server1

The server after 2 clients connected:

server2

The 2 clients before any changes:

client3.PNG

The server after some changes were made on both sides:

server3

The clients after the changes were made:

client2

Conclusion

As you can see, websockets provide an easy way to provide the user with real time date, without the need to have complex long-polling processes which pose a heavy load on latency and bandwidth. Websockets are far form perfect, and they are definitely far away from being a complete API solution, however for simple usecases like this, websockets will definitely do the job.

 

 

An Introduction To Websockets

WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user’s browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply. –  Mozilla Foundation

Before going into websockets, I would to speak about how websockets came into being and why they are such a revolutionary piece of technology. To understand that we need to look at how systems were built previously and the problems they faced.

Client Server Communications

How does a client communicate with a server?

Well, there are 100’s of web protocols available like HTTP, FTP, SMTP, POP3, etc. and lower level transport protocols like TCP and UDP(common usage: games).

I’m not going to go into a discussion about each of these protocols here, but out of all these, HTTP(and later HTTPS) became, and still is. the go to standard for MOST applications. Over this HTTP protocol there we some other protocols and standards built, the most common being REST and SOAP.

SOAP used to be the standard, but not REST is becoming the go to solution for many simple web applications. This is because,

  • SOAP is a heavy Protocol. This is because, not only does it carry the required data, it also carried instructions and protocols on how the client and serve should communicate. This means longer latency, more bandwidth usage, and longer processing times. Specially since the world is moving towards mobile, where processing power is a scarce resource.
  • SOAP uses XML, meaning once again the size of data transferred is much larger than it needs to be, and processing take longer.

There are a number of scenarios where SOAP is better than rest, however the general rule of thumb is unless you have a solid reason to use SOAP, use rest. If you want to read more on the REST vs SOAP debate checkout this post.

So, now we have REST. The standard in a great number of web, mobile and desktop application. If you want to know more about rest there are plenty of resources online with in depth tutorials. Choose one related to the language you’re familiar with and get started.
Now, the principles of rest are (on a basic level) easy enough to understand and use. You send a HTTP request, specifying a endpoint and some headers, and you get a response back from the server. You can also specify some data and send that along the request as well. This works great about 90% of the time. However, what happens when:

  • The data you request is not immediately available: This could be for any reason, either some processing needs to be done(common when requesting for a report).Then what normally happens in a REST service is the server will return a indication that data is not available along with some identification as to the task being processed, some advanced services will also return a ‘Retry-After’ time estimate. The client then has to keep polling the server until the server responds with the data.
  • Getting Data In Real Time: Take the classic chat application as an example. If client 1 sends a message, how will client  2 know that user 1 has sent a message? Once again, this is polling. The other clients have to keep polling the server, or else they will not get the message which has been polled.

Now what if, instead of the client polling the server for data, the server could push the data to the client? This is sadly not supported by the REST protocol. The serve cannot initiate communications with a client. And most of the time a client request is not kept open for long periods of time(This depends on the language, the server container and the hardware).

Websockets

And now, finally we come to websockets. One of the biggest breakthroughs in client/server communication in the past few years. Websockets introduce a part of the web that was missing, full duplex communication. Or, in simpler terms; bi-directional communication, simultaneously, with very low overhead.

This means that the client no longer has to keep polling the server for data , the server can instead ‘push’ data back to a connected client.

Now websockets aren’t the first attempt at real time web communications. There have been a variety of technologies like LiveConnect or The forever-frame technique, however websockets solve a few of the main issues that other libraries did not.

  • WebSockets account  proxies and firewalls, making streaming possible over any connection. This was a major issue with some of the previous attempts. The Websocket protocol simply detects any proxies and creates a tunnel.
  • Support upstream and downstream communications over a single connection.
  • Less burden on servers, allowing existing machines to support more concurrent connections.
websocket-architecture
Websocket Architecture

How Websockets Work

Websockets use a  single tcp port for traffic in both directions. They  use HTTP as a transport layer to benefit from existing infrastructure (proxies, filtering,
authentication). Such technologies were implemented as trade-offs
between efficiency and reliability because HTTP was not initially
meant to be used for bidirectional communication. Websockets address the
goals of existing bidirectional HTTP technologies in the context of
the existing HTTP infrastructure; as such, it is designed to work
over HTTP ports 80 and 443 as well as to support HTTP proxies and
intermediaries, even if this implies some complexity specific to the
current environment. This however does not mean that the protocol will be bound only to the HTTP protocol, future implementations could implement a simpler.

Creating a Connection

The client will send a normal HTTP request to the server so that it is compatible with HTTP-based server-side software and intermediaries, meaning a single port can be used by the HTTP clients and WebSocket clients communicating with the server.

Initially the client will send a  HTTP upgrade request to the server. This is basically a normal HTTP request except for the following headers, in no significant or particular order:

Upgrade : websocket
Upgrade: websocket
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Version: 13

Below is a sample of the response, please not these are not strictly limited to websocket specific headers.

req1
Client Handshake

 

The server will then process each of the headers and then return a response to the user.

The response will have a status code of 101, which is to switch protocols as you can see in the below image.

res2
Handshake HTTP Request

 

The response headers are as follows:

res1
Server Handshake

Key things to note:

The status code is what determines whether the handshake was successfully completed or not, any other status other than 101 indicates the handshake DID NOT complete and normal HTTP semantics apply.

Apart from this the serve will respond with the necessary ‘Connection’ and ‘Upgrade’ headers.

The significance of the Sec-WebSocket-Key and  Sec-WebSocket-Accept is simply websockets a mechanism to defend against Cross site scripting or cross site request forgery. How it works is the server will get the  Sec-WebSocket-Key  sent by the client and concatenate the string with a  Globally Unique Identifier(GUID),                        258EAFA5-E914-47DA-95CA-C5AB0DC85B11.So then we are left with something like          this string: 258EAFA5-E914-47DA-95CA-dGhlIHNhbXBsZSBub25jZQ.

This is in string form. The string is then hashed using SHA-1(look here to see why this might change) and the hash is then base-64 encoded which results in:  s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

This is then returned to the client in the Sec-WebSocket-Accept header. The client will then check for scripted pages.(The keys won’t match). If the Sec-WebSocket-Accept value does not match the expected value, if the header field is missing, or if the HTTP status code is not 101, the connection will not be established, and WebSocket frames
will not be sent.

Communication

Data is transferred between the client and the serve using  a series of frames.

frame

 

websocketframe
Representation of a frame

Each of these frames HAVE to be masked by the client. This is mainly to avoid issues with proxies(which are a HUGE part of the internet).

A server WILL close the connection if it receives an unmasked frame and might respond with status code 1002, protocol error.

A server WILL NOT mask frames sent to a client, if the client receives a masked frame, it WILL close the connection.

This framing method makes everything much easier to handle on the JavaScript side, however on the server side, it can become a nightmare because you now have to wrap everything in frames. However, Most websocket frameworks take care of this internally, the user only has to pass whatever data they want to transmit.

Control Frames

Control frames are used to communicate state about the WebSocket and can even be interjected in the middle of a fragmented message.

Control frames are identified by opcodes where the most significant
bit of the opcode is 1. Currently defined opcodes for control frames
include 0x8 (Close), 0x9 (Ping), and 0xA (Pong). Opcodes 0xB-0xF are
reserved for further control frames yet to be defined.

All control frames MUST have a payload length of 125 bytes or less
and MUST NOT be fragmented.

Data Frames

Data frames carry application-layer, with an opcode to define what the data includes(Binary/Text so far).

Data frames are identified by opcodes where the most significant bit of the opcode is 0. Currently defined opcodes for data frames include 0x1 (Text), 0x2 (Binary).

Before sending data the client should check if the connection state is OPEN. If the data is too large then the data may be sent in a series of frames.

Closing a Connection

A connection is closed by sending a control frame with an opcode of 0x8.

This frame may contain a body to specify why the connection was closed.

Once a client sends a close frame, no more data should be sent to the server.

After both sending and receiving a Close message, an endpoint
considers the WebSocket connection closed and MUST close the
underlying TCP connection. The server MUST close the underlying TCP
connection immediately; the client SHOULD wait for the server to
close the connection but MAY close the connection at any time after
sending and receiving a Close message.


 

Conclusion

So there we have it, a short,not so short introduction to websockets, why they came into being, what purpose they serve, and a BASIC idea of how websockets work under the hood. However, it is really unlikely that a user will ever use the underlying interface or implementation considering that there are a number of robust libraries available that handle the low level plumbing for the user. Visit the mozilla documentation on websockets to find some of the suggested libraries as well as user friendly documentation of the websocket API and some guides to writing websocket servers.

If you want an in depth knowledge of what happens under the hood, visit the official rfc6455 documentation by IETF to find out all you need to know and then some.

 

References

  1. https://www.pubnub.com/blog/2015-01-05-websockets-vs-rest-api-understanding-the-difference/
  2. http://spf13.com/post/soap-vs-rest
  3. https://www.w3.org/TR/websockets/
  4. https://tools.ietf.org/html/rfc6455
  5. https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

 

 

 

 

Using a drilldown with Angular Chart’s

So, recently I was working on a project for work that required me to create a dashboard page which would display some statistics in a user friendly manner, using charts. One of the requirements was that I use completely  open source libraries to accomplish this. Therefore, the library I decided to use  angular-chart.js. Which provides some really user friendly, easy to use charts. This is built upon the Chart.js library, meaning most elements can be customized to look how I want it to. However, one of the biggest missing features is that neither of the libraries provide drilldowns. Since having a drilldown was absolutely essential, and i wasn’t willing to change libraries as I was pretty comfortable with angular-charts I decided to implement my own drilldown. Utilizing the power of angular’s data binding and some smart data modelling (if i may say so myself), I was able to get it to work.

Now, How does it work? To understand that you need to understand how angular-charts work, and the best tutorial can be found here.

Once you understand how angular charts work it becoes easy to think about how you implement a drilldown.

First, you have to know on which element the user is clicking on(i.e. which slice of the pie the user is clicking on). This is found out by the on click provided by the library itself.

        <canvas chart-click="clickHandler" chart-colors="chart.primary.colors" chart-data="chart.primary.data" chart-labels="chart.primary.labels" chart-options="chart.primary.options" class="chart chart-pie" id="{{chart.uid}}">
        </canvas>

As you can see, on click the method clickHandler gets called. Here is what clickHandler does:

    $scope.onClick = function(points, evt) {
        //gets the id of the chart
        var chartId = evt.target.id;
        //different use case
        //navigates to a page if ctrl is pressed while cliclomg
        if (points.length != 0) {
            if (evt.ctrlKey) {
                $window.location.href = 'http://www.google.com';
                return;
            }
            //gets the label name
            var labelName = points[0]._model.label;
            //gets the dataset index
            var datasetIndex = points[0]._index;
            changeToDrilldown(chartId, labelName, datasetIndex)
        }
    };

The method signature :

$scope.onClick = function(points, evt)

Please note the method name is different because the html is in a directive and onClick is passed as clickHandler. It is the same method that gets fired though.

The parameters points and evt are passed by the chart-click directive itself, evt is the event that occurred and points is a object containing the information about the graph.

The most important step is to extract the data set index, which is the index of the data in the array which is passed to the chart directive.(Refer the link to angular chart tutorial.)

So basically what I do is i get the dataset index from the click event and i have an associative array of drilldown objects, which means that the drill down in the 1st postion is for the data in the 1st position. Check out this model below.

        //This is my promarty data. Even without drill downs this data will be displays
        var primaryData = {
            header: "Popular Vehicle's 2016",
            labels: ["Car", "Jeep", "SUV", "Van"],
            data: [10, 15, 10, 25],
            colors: colors,
            options: options,
        };
        //Drilldown Data
        var drilldownData1 = {
            header: "Car Colours",
            labels: ["Red", "Grey", "Orange", "Black"],
            data: [
                100, 100, 200, 250
            ],
            colors: colors,
            options: options,
        };
        //Drilldown Data
        var drilldownData2 = {
            header: "Jeep Colours",
            labels: ["Green", "Grey", "Mixed", "Blue", "Yellow"],
            data: [125, 130, 120, 53, 240],
            colors: colors,
            options: options,
        };
        //Since the arrays are associative by index,
        //if there is no drilldown it is still essential to
        //send a null element to indicate
        //there is no drill down
        var drilldownData3 = null;
        //Drilldown Data
        var drilldownData4 = {
            header: "Van Colours",
            labels: ["White", "Black"],
            data: [130, 220],
            colors: colors,
            options: options,
        };
        //This is the chart model which is to my custom directive
        var chart1 = {
            //A uid to identify individual charts(for when you have multiple charts)
            uid: "chart1",
            //The primary daya
            primary: primaryData,
            //The drill down data, associative to the primary data
            drilldown: [drilldownData1,drilldownData2,drilldownData3,drilldownData4],
            //A temp variable to store the primary data when the drilldown data is switched
            //to the primary. When null we know the primary data is being displayed.
            temp:null
        };

Now that you have seen the model let me show you the code that does the actual work.

     function changeToDrilldown(chartId, labelName, datasetIndex) {
        for (var i = 0; i < $scope.charts.length; i++) {
            if ($scope.charts[i].uid === chartId) {
                if ($scope.charts[i].drilldown.length !== 0) {
                    if ($scope.charts[i].temp === null) {
                        if ($scope.charts[i].drilldown[datasetIndex] !== null) {
                            $scope.charts[i].temp = $scope.charts[i].primary;
                            $scope.charts[i].primary =    $scope.charts[i].drilldown[datasetIndex];
                        }
                    }
                }
            }
        }
    }

What the code does is:

  1. Searches for the chart in the array which contains all the charts.
  2. Checks if there are drilldowns available
  3. Checks if the temp is null(To check if we are in the primary level or drilldown level)
  4. Then checks if the drilldown element at the index of the primary data is null
  5. Swaps the temp and primary
  6. Swaps the primary with the drilldown.

To revert back to normal, simply switch the primary data with the temp data and make temp null again.

The entire code can be found on my github.

Hope this helps!

$cordovaPushV5 not firing on(‘connection)’ event

This was my latest project which was an cordova project using the Ionic framework and I had to integrate push notifications into it. To do this I used the $cordovaPushV5 plugin provided by ngCordova. The older PushPlugin is now deprecated.

The plugin is easy enough to setup and use as this part is well documented on the ngCordova page itself. However, I had some issues when it came to handling the onNotification event. It just wasn’t firing. I found out by going through the known issues and the documentation in github that for the plugin code written in the application to be executed the payload of the notification HAS TO include a field, among other data, called ‘content-available’  and this field should be set to ‘1’.here.

Once this is set to one then the on notification event occurs without a problem. If you still seem to have a problem with the event firing, such as,

  • It works the first time you run the app but doesn’t work after you logout and close,
  • I doesn’t work after you resume
  • It doesn’t work after closing and opening

The reason is this, you have to make sure that the even is bound to onNotification every time. To do this every time you login make sure you run the below code which binds the event. P.S, This is not my code, it is copied directly from the ngCordova website. I have just added a few comments.

module.run(function($http, $cordovaPushV5) {

  var options = {
    android: {
      senderID: &quot;12345679&quot;
    },
    ios: {
      alert: &quot;true&quot;,
      badge: &quot;true&quot;,
      sound: &quot;true&quot;
    },
    windows: {}
  };

  // initialize
  $cordovaPushV5.initialize(options).then(function() {
    // start listening for new notifications
    //This is the most important part, without this the plugin code will not
    //bind the even hanler you have written
    $cordovaPushV5.onNotification();
    // start listening for errors
    $cordovaPushV5.onError();

    // register to get registrationId
    $cordovaPushV5.register().then(function(data) {
      // `data.registrationId` save it somewhere;
    })
  });

  // triggered every time notification received
  $rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data){
    //this is where the notification handling should happen
    // data.message,
    // data.title,
    // data.count,
    // data.sound,
    // data.image,
    // data.additionalData
  });

  // triggered every time error occurs
  $rootScope.$on('$cordovaPushV5:errorOcurred', function(event, e){
    // e.message
  });

});

 

Making REST calls with Arduino

I recently did a small hello world project on arduino, the basic use case was to read a students RFID tag and cross-check it with our own server to check if the student was registered or not. Pretty simple right? Not when it’s your first project!

Anyway, there are enough of tutorials about scanning RFID tags using arduino so I won’t talk about that much here. Instead I’m gonna talk about a potentially big problem for anyone using this for the first time.

My basic configuration:

  • Arduino Mega 2560 board
  • CC3000 Wifi Shield
  • RFID Scanner module

The first problem,

You have to use a external library to interface with the CC3000 shield. We used the Adafruit_CC3000_Library. Now why do I say this is a problem?

The documentation is very limited and hard to find, I had to finally go through the code to find the problem.

The basic structure of making the rest call is this:

#include <Adafruit_CC3000.h>
#include <ccspi.h>
#include <SPI.h>
#include <string.h>
#include "utility/debug.h"

#define ADAFRUIT_CC3000_IRQ   3
#define ADAFRUIT_CC3000_VBAT  5
#define ADAFRUIT_CC3000_CS    10
#define WLAN_SSID       "myWIFI"
#define WLAN_PASS       "myPassword"
#define WLAN_SECURITY   WLAN_SEC_WPA2
#define IDLE_TIMEOUT_MS  3000
#define WEBSITE      "www.example.com"
#define WEB_HOST_IP      cc3000.IP2U32(192, 168, 253, 71)
#define WEBPAGE      "/users/student/rfidvalidate/"
#define WEBPAGE2      "/users/student/rfidvalidate/24853484854666952526567483"
#define WEBPORT      3000

Adafruit_CC3000_Client www;
Adafruit_CC3000 cc3000 = Adafruit_CC3000(ADAFRUIT_CC3000_CS, ADAFRUIT_CC3000_IRQ, ADAFRUIT_CC3000_VBAT,
	SPI_CLOCK_DIVIDER);
uint32_t ip;
void setup(){
	resolveHostDetails();
	sendRequest();
	processResponse();

}
void loop(){}
void resolveHostDetails() {
	ip = WEB_HOST_IP;
  //This happens only if there is no ip specified
	while (ip == 0) {
		if (! cc3000.getHostByName(WEBSITE, &ip)) {
			Serial.println(F("Couldn't resolve!"));
		}
		delay(500);
	}

}
void sendRequest() {
	www = cc3000.connectTCP(ip, WEBPORT);
	if (www.connected()) {
		www.fastrprint(F("GET "));
		www.fastrprint(WEBPAGE2);
		www.fastrprint(F(" HTTP/1.1\r\n"));
		www.fastrprint(F("Host: ")); www.fastrprint(WEBSITE); www.fastrprint(F("\r\n"));
		www.fastrprint(F("\r\n"));
		www.println();
	} else {
		Serial.println(F("Connection failed"));
		return ;
	}
}

void processResponse() {
  /* Read data until either the connection is closed, or the idle timeout is reached. */
	unsigned long lastRead = millis();
	while (www.connected() && (millis() - lastRead < IDLE_TIMEOUT_MS)) {
		while (www.available()) {
			char c = www.read();
			Serial.print(c);
			lastRead = millis();
		}
	}
	www.close();
}

 

So the problem here is this. The WEBPAGE is a constant and you cannot concatenate to a constant neither can you pass a string there since fastprint does not accept it. So how do I add the RFID tag to the URL request dynamically? I was stuck on that myself for awhile before I finally went through the code for the CC3000 library. I checked the overloads for the fastprint method and found out that it accepts a array of chars. So then what i did was made my own string, concatenated the WEBPAGE and the tag scanned and converted it to a char array and passes that instead. Worked like a charm. Just remember to clear the char array after you’re done otherwise it might lead to some errors.

Here’s the improved code, just replace the old sendRequest() method with this,

void sendRequest(String tagID) {
	String url = WEBPAGE + tagID;
	int x = url.length() + 1;
	char test[x];
	url.toCharArray(test, x);
  //Incase you want to check your url
	Serial.println("XXXXXXXXXXXXXX");
	for (int i = 0; i < x; i++) {
		Serial.print(test[i]);
	}
	Serial.println("");
	Serial.println("XXXXXXXXXXXXXX");

	www = cc3000.connectTCP(ip, WEBPORT);
	if (www.connected()) {
		www.fastrprint(F("GET "));
		www.fastrprint(test);
		www.fastrprint(F(" HTTP/1.1\r\n"));
		www.fastrprint(F("Host: "));
    //www.fastrprint(WEBSITE);
		www.fastrprint(F("\r\n"));
		www.fastrprint(F("\r\n"));
		www.println();
	} else {
		Serial.println(F("Connection failed"));
		return ;
	}
}

Some notes,

I did not include the code to connect to the wifi, that’s pretty boilerplate stuff.

When connecting to wifi it’s normal for the code to hang at the dhcp request for awhile.(You might even have to reset your board a few times.)

The CC3000 library is prone to give a Connection failed sometimes after a few requests, if anyone finds out why please do comment below 🙂

 

That’s about it. If there are any questions feel free to ask as always. 🙂

 

 

HTTP Response Status 406: Not Acceptable

I was recently writing a mobile application using Apache Cordova along with Ionic framework. I kept getting a status 406 response when I was trying to post some data to the API. Since the API was not written by me and I had no access to it either I ended up wasting a good hour on it, since every person with a 406 error seems to have had a different solution each time.

So after awhile I finally asked someone with access to the server logs to check the requests made with my data key and send them to me.

I cannot post that here since it’s a private api, however long strory short, the problem was witht the content type header.

Instead of application/json, I had used application/JSON.

I know, I know, simple mistake, but it’s often the simplest of things that get overlooked, specially since 406 is so cryptic….

TL;DR If you keep getting a cryptic 406 error with a Not Acceptable header, check you content type characters and case.