In my personal time, I love to play around with hardware and robots. I started in Node.js but recently I discovered Cylon.js and after a quick play around with it, I found it pretty awesome and decided to rewrite my projects using this framework.

As a starting point, I decided to rewrite the project to control the Sphero with the Leap Motion Controller.

You can find the original repo here, but here are a few code snippets:

module.exports = function() {

  var Leap = require('leapjs');
  var spheron = require('spheron');

  // Set this to the device Sphero connects as on your computer.
  var device = '/dev/tty.Sphero-RBR-AMP-SPP';

  var safeMode = true; //Turn this off if Sphero is in water or you like to live dangerously!

  var controlSphero = function(sphero) {
  	var controller = new Leap.Controller({frameEventName:'deviceFrame', enableGestures:true});
      controller.on('connect', function() {
      	console.log('connected to leap motion');
      controller.on('ready', function() {
          switch (direction) {
            // Original settings included: 'sphero.heading = (heading value)';
            // Original speed for all of them: 128.
            case 'LEFT':
              //sphero.roll(speed, heading, state, option)
              sphero.roll(70, 270, 1); //Heading is expressed in degrees so 270 will make the ball move to the left.
            case 'RIGHT':
              sphero.heading = 90;
              sphero.roll(70, 90, 1);
            case 'UP':
              //Make the ball turn blue when users move their hand up.
            case 'DOWN':
              //Make the ball turn white when users move their hand down.
            case 'FORWARD':
               sphero.roll(70, 0, 1);
            case 'REVERSE':
              sphero.heading = 180;
              sphero.roll(70, 180, 1);

The way it works is pretty straightforward. The Sphero connects via Bluetooth and the Leap Motion Controller needs to be plugged in your computer. Once the Sphero is detected, the hand is tracked by the Leap Motion device and the direction will be applied to the Sphero. Feel free to have a better look at the code on Github.

cylonNow, let’s move on to Cylon.js. The first thing I noticed about this framework is the short amount of code necessary to get to the same result. I managed to do pretty much the exact same thing in 68 lines of code!

I guess what makes it easier is that Cylon already has some modules you can install to program for certain devices, like the ones below:

Cylon.js platforms, including Leap Motion and Sphero.

To start using Cylon, you need to require it and specify which devices you are working with.

var Cylon = require('cylon');

  connections: {
    leapmotion: {adaptor: 'leapmotion'},
    sphero: {adaptor: 'sphero', port: '/dev/rfcomm0'}

  devices: {
    leapmotion: {driver: 'leapmotion', connection: 'leapmotion'},
    sphero: {driver: 'sphero', connection: 'sphero'}

  work: function(f){

At the moment, this code is not really doing anything but you can see how to specify which devices you are going to use. You have to specify a port for the Sphero because it connects to your computer via Bluetooth. To find the port for your own Sphero, run ‘ls /dev/tty.Sphero*’ in your console and replace the port in this code with the result you get.

The rest of the code goes inside the ‘work’ function as below:
work: function(my){
  my.leapmotion.on('frame', function(frame){
   if(frame.valid && frame.gestures.length > 0{


The code above makes the Sphero go forward if the Leap Motion Controller detects any kind of gesture. When you set up the app in your terminal, here’s what you can do:

  • Move your fingers/hand UP to make the ball stop and turn blue
  • Move your fingers/hand DOWN to turn the ball stop and turn white
  • Push forward to make Sphero go straight ahead (heading of 0°)
  • Pull backward to make Sphero go backward (heading of 180°)
  • Swipe left to make Sphero go left (heading of 270°)
  • Swipe right to make Sphero go right (heading of 90°)

That’s all for now! Tomorrow we’ll take a look at controlling a Parrot AR.Drone using hand controls and Cylon.js.

This post originally appeared on Charlie’s blog. Sphero image courtesy of Sphero.

A software developer and consultant at ThoughtWorks, Charlie is passionate about programming, generative art, robotics, the Internet of Things and anything related to creative innovations.

Twitter LinkedIn Google+