JS 💖 Hardware – Getting started with Nodebots and Johnny-Five

Time to read: 7 minutes

August 04, 2017

Written by

Twilion

JS 💖 Hardware – Getting started with Nodebots and Johnny-Five

hgPflcjLxl8z2pszNezLEBSYf8UGKfN0TCns15wZTYPH45aU6-lGO18UIvgEU2XSVt6g_NJwNGwbfy1CQ48vJZHnXViT5IpoQhTaE8D7fvSA3euieDePS3IQQasH66m-k1kQlLOT

Getting started with hardware hacking can be quite intimidating for some folks. The world of electronics is completely foreign for most developers; additionally, it requires you to write C/C which is efficient but not everyone feels comfortable with. However, the Nodebots movement is a nice way to get started with hardware development using JavaScript. In this article, I want to guide you through some very basic things to get started.

JavaScript && Hardware? How?

There are quite a few different projects aimed at hardware development with JavaScript. Some come with special hardware like the Tessel or Espruino. Both of them are great projects but in this post we will focus on another option.

The option we’ll use is the npm module johnny-five. Johnny-Five isn’t limited to certain hardware but instead supports a wide range of different microcontroller platforms (including the Tessel) using various I/O plug-ins. The only drawback is that some of these platforms (like Arduino) don’t allow you to execute the JS code directly on the microcontroller. Instead you execute it on a “host system”.

The way it works for Arduino is that you execute the JS code on your “host system” (e.g. your computer) using Node.js and the johnny-five module sends the actions via the serialport module to your Arduino that is running the firmata firmware that is designed for remote controlling an Arduino. This way we have full control over the hardware while it’s connected to our computer.

Requirements

For this tutorial you will need a few things. First of all you need the following things installed on your computer:

Node.js and npm
The Arduino IDE to upload the firmata firmware on your microcontroller
Your favorite code editor

Additionally you will need some hardware components:

An Arduino (or Arduino clone). I’ll be using an Arduino Nano. Check the Johnny-Five page for the different ones that are supported
1x red LED
1x button
1x resistor of 220Ω (has the stripes Red-Red-Brown). Note that for different LED colors you might need different resistance values here
1x resistor of 10kΩ (has the stripes Brown-Black-Orange)
1x breadboard to wire up the setup – something similar to this size should be sufficient
a few jumper or solid wires to connect everything

Installing the firmata firmware

The first thing we need to do is to make sure your Arduino is correctly recognized. Plug it into your computer and click on the Tools menu. In there you want to choose the respective board you are using — in my case I had to choose Arduino Nano.

Also make sure to choose the right port under Tools → Port. It should contain something like usbserial in it. If such a port is not listed make sure you have the necessary drivers for your Arduino installed.

Next we need to install the firmata firmware on our Arduino to be able to communicate with it. Open your Arduino IDE and install the Servo libraries by clicking on Sketch → Include Library → Manage Libraries and searching for the library.

Screen Shot 2017-08-03 at 4.44.35 PM.png

Lastly we need to download StandardFirmataPlus.ino file into our Arduino project directory (in Mac by default under ~/Documents/Arduino) and upload it to our Arduino. You can find your Arduino directory by going into Preferences and looking up the Sketchbook location.

Download the StandardFirmataPlus.ino file from G itHub and place it in a StandardFirmataPlus directory inside your Arduino directory. Open the StandardFirmataPlus.ino file and click the Upload button. This will compile the bits and upload it to your Arduino. You can close the Arduino IDE once it’s done uploading. You are all set now for some JavaScript!

Note: If it fails uploading the code try to install the “Firmata” library the same way you installed the “Servo” library.

“Hello World” of hardware

The equivalent of Hello World in hardware is probably making LEDs blink. The nice thing is that the Arduinos typically already have an LED on the board that we can use to see if everything works without having to wire up anything. So let’s get started!

Create a new Node.js project anywhere on your computer (like your home directory) by running the following lines in your command line:

mkdir nodebots
cd nodebots
npm init -y

Next install the johnny-five module:

npm install johnny-five --save

const { Led, Board } = require('johnny-five');
const board = new Board();
board.on('ready', onReady);

This will create a new Board instance and wait for the ready event to be emitted. This means that the johnny-five library is connected to the Arduino. We then call an onReady function that is still missing. Add it by placing the following lines in the in the bottom of your index.js:

function onReady() {
  // if we don't pass a port to the Led constructor it will use
  // the default port (built-in LED)
  const led = new Led();

  // This will grant access to the led instance
  // from within the REPL that's created when
  // running this program.
  board.repl.inject({
      led: led
  });

  led.blink();
  // run in the REPL led.stop() to make it stop blinking
}

Now all we need to do is start our script:

node index.js

The console should output a couple of messages and then start a REPL like this:

Screen Shot 2017-08-03 at 5.39.27 PM.png

Additionally you should see an LED on your board start blinking. You can stop the blinking by typing into the REPL:

led.stop()

To stop the program type .exit or press Ctrl C twice.

Talking to an external LED

Now obviously just talking to hardware on the board is sort of limiting and not really what we typically want to do when we hack hardware. For this we should be talking to some external hardware. So let’s get rolling by grabbing the following pieces of your hardware:

1x 220Ω resistor (Red-Red-Brown)
1x LED
your breadboard
a few of your wires

Disconnect your Arduino and plug everything the following way into your breadboard:

Basically you need to create the following circuit:

Pin D6 on your Arduino (or any other digital pin) → one side of your resistor → the long leg of your LED (anode) → short leg of your LED (cathode) → GND on your Arduino

With this circuit if we turn on the pin D6 it will start lighting up the LED.

Now let’s update our code to use that LED instead. All you need to do is to pass 6 as an argument to the Led constructor. Note that this might differ for a different Arduino or if you chose a different port. Make the changes in your index.js:

function onReady() {
  const led = new Led(6);
  // … leave remaining code
}

Re-run your program and instead of the on-board LED, the external LED should start blinking 🎉

Push the button

What would hardware hacking be without some user interaction? So let’s add a button to the mix. Grab the remaining components that you got:

1x 10kΩ (Brown-Black-Orange)
1x button
more remaining wires

Add them to the circuit the following way:

Connect one pin to 5V on your Arduino and the diagonally one to both a 10kΩ resistor and to pin D5 on your Arduino. Connect the other end of the resistor to GND of your Arduino to close the circuit.

Your setup should look similar to this now:

Working with things like buttons is where hardware hacking with JavaScript really shines. If we want to know if a button has been pressed or released all we have to do is listen on the press/release events. It’s that easy. Change your index.js:

const { Led, Board, Button } = require('johnny-five');
const board = new Board();

board.on('ready', onReady);

let button;
let led;
function onReady() {
  button = new Button(5);
  led = new Led(6);
  button.on('press', () => led.on());
  button.on('release', () => led.off());

  // This will grant access to the led instance
  // from within the REPL that's created when
  // running this program.
  board.repl.inject({
    led: led
  });

  // led.blink();
  // run in the REPL led.stop() to make it stop blinking
}

Restart the script and start pressing the button. The LED should light up when the button is pressed and stop lighting up when you release it.

Why isn’t that an API?

My favorite part of nodebots is the fact that we can leverage the whole npm ecosystem. So let’s spin up a quick web server using express and light up the LED on every request and let’s use got to do an HTTP POST request to a RequestBin.

Install the two modules using npm:

npm install express got --save

Next let’s require the two dependencies and create an express app. Modify your index.js:

const { Led, Board, Button } = require('johnny-five');
const express = require('express');
const got = require('got');
const board = new Board();
const app = express();

app.get('*', (req, res) => {
  led.on();
  // turn off LED after 1 second
  setTimeout(() => led.off(), 1000);
  res.send('Hello!');
});

board.on('ready', onReady);

Next we need to adjust the event handlers for the button and make the express server start listening:

function onReady() {
  button = new Button(5);
  led = new Led(6);
  button.on('press', () => {
    got
      .post('YOUR_REQUEST_BIN_URL')
      .then(() => {
        console.log('Made request');
      })
      .catch(err => {
        console.error(err);
      });
  });
  // button.on('release', () => led.off());
  app.listen(3000, () => {
    console.log('Server listening on port 3000');
  });

  // This will grant access to the led instance
  // from within the REPL that's created when
  // running this program.
  board.repl.inject({
    led: led
  });
}

Make sure to replace YOUR_REQUEST_BIN_URL with a valid RequestBin URL. You can create one on their website.

Now restart your program and wait for it to state that the server is listening. Navigate to http://localhost:3000 and you should see the LED light up for one second. Refresh the page and you will see it again. Afterwards push the button and refresh your RequestBin page to see the request that was made.

What’s next?

Awesome that’s it! You just did your first steps in the lovely world of nodebots. But this is just the beginning. Now it’s time to find a project and start researching what parts you need for it. If you want to have an idea on how to approach these things check out out my blog post on how I hacked a coffee machine using Johnny-Five and a Tessel. You should also check if there is a local nodebots meetup around you. Other useful resources are:

The Johnny-Five example page that shows how to interact with a variety of components
nodebots-workshop with its variety of exercises
The awesome-nodebots list on GitHub

If you have any cool hardware projects that you are building or planning to build with JS, I would love to hear about them! Also feel free to reach out if you have any questions:

Email: dkundel@twilio.com
Twitter: @dkundel
GitHub: dkundel

Related Resources

Twilio Docs

From APIs to SDKs to sample apps

API reference documentation, SDKs, helper libraries, quickstarts, and tutorials for your language and platform.

Resource Center

The latest ebooks, industry reports, and webinars

Learn from customer engagement experts to improve your own communication.

Ahoy

Twilio's developer community hub

Best practices, code samples, and inspiration to build communications and digital engagement experiences.

JS 💖 Hardware – Getting started with Nodebots and Johnny-Five

Related Posts

Related Resources

From APIs to SDKs to sample apps

The latest ebooks, industry reports, and webinars

Twilio's developer community hub