Programming littleBits circuits with JavaScript Part 1

littleBits are electronic building blocks that snap together with magnetic connectors. They are great for getting started with electronics and robotics and for prototyping circuits. The littleBits Arduino Coding Kit includes an Arduino-compatible microcontroller, which means that you can use the Johnny-Five JavaScript Robotics programming framework to program your littleBits creations using JavaScript, the programming language of the web.

Setup

Plug the Arduino bit into your computer from the port at the top of the Arduino module. You’ll need to supply power to the Arduino by connecting a blue power module to any of the input connectors. The Arduino will appear as a device with a name like /dev/cu.usbmodemfa131 on Mac, or COM3 on Windows.

Johnny-Five uses a communication protocol called Firmata to communicate with the Arduino microcontroller. We’ll load the Standard Firmata sketch onto the Arduino the first time we go to use it, to make this communication possible.

Installing Firmata via the Chrome App

One of the easiest ways to get started programming with Johnny-Five is by using this app for Google Chrome. After you have installed it, open the ‘Johnny-Five Chrome’ app from the Chrome apps page. To send the Firmata sketch to your board using the extension, select the port corresponding to your Arduino bit from the drop-down menu and then hit the Install Firmata button. If the device does not appear in the list at first, try the app’s refresh button.

Installing Firmata via the command line

If you would prefer not to use the Chrome app, you can skip straight to using Node.js via the command line. You’ll need a recent version of Node.js installed. Create a folder for your project’s code. On a Mac run the Terminal app, and on Windows run Command Prompt. From the command line change directory so you are inside your project folder, and then use npm to install the Johnny-Five library and nodebots-interchange:

npm install johnny-five
npm install -g nodebots-interchange

Use the interchange program from nodebots-interchange to send the StandardFirmata sketch to your Arduino:

interchange install StandardFirmata 
-a leonardo -p /dev/cu.usbmodemfa131

Note: If you are familiar with Arduino IDE, you could alternatively use it to write Firmata to your Arduino. Open File > Examples > Firmata > StandardFirmata and select your port and Arduino Leonardo from Tools > Board then hit Upload.

Inputs and Outputs

Programming with hardware is all about I/O: inputs and outputs. These can be either analog (continuous values) or digital (discrete 0 or 1 values). littleBits input modules are color coded pink, while outputs are green.

The Arduino Coding Kit includes analog inputs (dimmers) as well as a digital input module (button). The output modules included in the kit are a servo motor and an LED bargraph, which can be used as a digital output (i.e. on or off) or as an analog output to control the number of LEDs displayed, or with Pulse-Width-Modulation (PWM) – using a pattern of pulses on a digital output – to control LED brightness.

Building a circuit

Let’s start with our output modules: the LED bargraph and servo. Connect a blue power module to any connector on the left-hand side of the Arduino.

Connect the LED bargraph to the connector labelled d5 and the servo module to the connector labelled d9. Flick the switch next to both outputs to PWM. The mounting boards that come with the Arduino Coding Kit come in handy for holding your circuit together.

Blinking an LED bargraph

You can write the JavaScript program using the editor inside the Chrome app, or any text editor.

We require the johnny-five library tocreate a board object with a “ready” handler. Our code for working with inputs and outputs will go inside the ready handler so that it will run after the Arduino has started up and communication has been established:

var five = require("johnny-five");
var board = new five.Board();
board.on("ready", function() {
// code for button, dimmers, servo etc goes here
});

We’ll treat the bargraph like a single output. It’s connected to digital “pin” 5 (d5), so we’ll need to provide this with a parameter when we create the Led object.

The strobe function causes the LED to blink on and off The parameter to the function indicates the number of milliseconds between toggling the LED on or off (one second in this case):

var led = new five.Led(5);
led.strobe( 1000 );

Running the code

Note: Make sure the power switch on your power module is switched on.

If you are using the Chrome app, hit the Run button to start the program.

You should see the LED bargraph start blinking. Any errors will be printed to the console below the code. If you have unplugged your Arduino since the last time you ran code via the app, you’ll probably need to hit refresh and select the port for your device again from the drop-down above the code editor.

The Chrome app is great for getting started, but eventually you’ll want to switch to running programs using Node.js, because the Chrome app only supports a limited number of built-in libraries.

Use a text editor to save your code to a file (e.g. blink.js) within your project directory, and run it from the command line using Node.js:

node blink.js

You can hit control-D on Windows or command-D on Mac to end the program.

Controlling a Servo

Johnny-Five includes a Servo class, but this is for controlling servo motors directly using PWM. The littleBits servo module already takes care of that for us, so we can treat it like a simple motor. Create a Motor object on pin 9 to correspond to the servo. We can start moving it using the start function. The parameter is a number between 0 and 255, which controls the speed. The stop function stops the servo. We’ll use the board’s wait function to stop the servo after 5 seconds (i.e. 5000 milliseconds).

var servo = new five.Motor(9);
servo.start(255);

this.wait(5000, function(){
  servo.stop();
});

In Part 2, we’ll read data from our littleBits input modules and use these values to trigger changes to the servo and bargraph.

About the author

Anna Gerber is a full-stack developer with 15 years of experience in the university sector. Specializing in Digital Humanities, she was a Technical Project Manager at the University of Queensland’s eResearch centre, and she has worked at Brisbane’s Distributed System Technology Centre as a Research Scientist. Anna is a JavaScript robotics enthusiast who enjoys tinkering with soft circuits and 3D printers.