Airgrip Control...over the air?!

Hello hello! Another long-awaited (or not) post from Vince!

In this update we look at the Remote Control Server that we will be able to use to control the Airgrip system from anywhere (as long as there's internet connection).

There are an absolute MULTITUDE of tutorials about nodejs online, but very little about Socket.io. If there are, they are sorely outdated. Furthermore, from the beginning of developing this server and now, the Socket.io package on nodejs has been updated to further increase it's performance, and there has been little updates in tutorials.

However, I would like to credit this tutorial (http://danielnill.com/nodejs-tutorial-with-socketio/) for being an excellent springboard into what we needed to do.

Server-side

NodeJS

Node is an excellent, lightweight package that builds off JavaScript to make it terribly easy to set up servers and paths. See the code snippet below (apologies for the raw, unfinished nature of it!):

	var server = http.createServer(function(request, response){
	console.log('Connection');
	var path = url.parse(request.url).pathname;
	switch(path){
	case '/':
	response.writeHead(200, {'Content-Type': 'text/html'});
	response.write('hello world');
	break;
	case '/socket.html':
	fs.readFile(__dirname + path, function(error, data){
	if (error){
	response.writeHead(404);
	response.write("opps this doesn't exist - 404");
	response.end();
	}
	else{
	response.writeHead(200, {'Content-Type': 'text/html'});
	response.write(data, 'utf8');
	response.end();
	}
	});
	break;
	default:
	response.writeHead(404);
	response.write("opps this doesn't exist - 404");
	response.end();
	break;
	}
	});

view raw gistfile1.js hosted with ❤ by GitHub

The line "var server = http.createServer(function(request, response) {..." in one step creates the server. The switch case determines which page is shown - in this case, the root directory "/" will show a bare html page that just says "hello world". If you access "socket.html", the socket.html page will be shown instead. The page that comes up if it's not a URL that is recognized, is the dreaded 404 page that we all have experienced at least once in our lifetimes (just like a BSOD - or if you're a MAC user, that spinny rainbow thing that says EVERYTHING IS BROKEN)

Anyway, that's the basic idea of the NodeJS package. The NodeJS Package Manager has an absolute multitude of packages that can extend the capability of the server. Popular packages include Express, AngularJS and most importantly for our purposes, SocketIO.

Socket.IO

The Socket.IO package's main use is for real-time data transmission. Due to the asynchronous nature of NodeJS, being able to send data whenever it is ready is quite handy. Thus, we have Socket.IO!

	var io = require('socket.io').listen(server);
	io.sockets.on('connection', function(socket){
	console.log('Socket On');
	socket.on('frame', function(data){
	if (data.length > 100) {
	var index = data.search('Raw JSON');
	var frame = data.slice(index+14);
	json = JSON.parse(frame);
	console.log(json.hands.length);
	if(json.hands.length == 1) {
	socket.emit('arduino data', {'sensors': "A0 A1 A2 A3 A4"});
	}
	else {
	socket.emit('arduino data', {'sensors': "A5 A4 A3 A2 A1"});
	}
	}
	});
	// });
	setInterval(function(){
	socket.emit('arduino data', {'sensors': "A0 A1 A2 A3 A4"});
	}, 1000);});

view raw gistfile1.js hosted with ❤ by GitHub

This snippet shows how we can use Socket.IO. This package builds off the WebSockets package that is already inbuilt into NodeJS.

The most important parts of this snippet are the "socket.emit" and "socket.on" commands. This socket server is interfacing with an HTML page that also uses Socket.IO to send and receive data. The "socket.emit" command sends data (called 'sensors') with the name 'arduino data' to the client/html page. The "socket.on" command waits for a message to come in with a certain name (in this case 'frame') before executing the code given in it's callback function. Here, I was trying to test whether the data given from the Leap Motion could be used to vary what was sent over the server.

	socket.on('arduino data', function(data){
	var frameOutput = document.getElementById("frame");
	frameOutput.innerHTML = data.sensors;
	});

view raw gistfile1.js hosted with ❤ by GitHub

This small snippet of code is from the HTML file that is shown in the browser. When the socket receives a message named 'arduino data', it modifies the html field with id="frame" and changes it to whatever data has been sent.

Next post I'll detail some more information about the data that's being sent!