DEV Community

Cover image for JS 💖 Hardware – Getting started with Nodebots and Johnny-Five
Dominik Kundel
Dominik Kundel

Posted on • Originally published at twilio.com

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

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?

JavaScript and hardware equals nodebots

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:

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.

screenshot of menu structure

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.

screenshot showing the menu item that should be clicked

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.

screenshot of manage libraries menu entry

screenshot of installing servo library

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 GitHub 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.

screenshot indicating a successful upload

"Hello World" of hardware

Decorative GIF

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
Enter fullscreen mode Exit fullscreen mode

Next install the johnny-five module:

npm install johnny-five --save
Enter fullscreen mode Exit fullscreen mode

Create a file called index.js and place the following code into it:

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

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
}
Enter fullscreen mode Exit fullscreen mode

Now all we need to do is start our script:

node index.js
Enter fullscreen mode Exit fullscreen mode

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

Terminal reads among others Available, Connected, Repl Initialized

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

led.stop()
Enter fullscreen mode Exit fullscreen mode

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

Talking to an external LED

Decorative GIF

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:

picture of wireup

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
}
Enter fullscreen mode Exit fullscreen mode

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

Push the button

Decoartive GIF

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:

Picture of circuit

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:

Photo of actual wireup

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
}
Enter fullscreen mode Exit fullscreen mode

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?

Decorative GIF

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
  });
}
Enter fullscreen mode Exit fullscreen mode

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:

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:

Decorative GIF

Top comments (9)

Collapse
 
ben profile image
Ben Halpern

Wow thanks so much for this

Collapse
 
dkundel profile image
Dominik Kundel

Thank you :) glad you liked it!

Collapse
 
renannobile profile image
Renan Lourençoni Nobile

I know nothing (pretty much like Jon Snow), about working with hardware and Arduino, so if this is a dumb question I'm sorry.

You said that the drawback of using Javascript with Arduino is that you can only execute code on 'host system'.

What exactly does that implicates?

Collapse
 
gaserd profile image
Sergey Gustun

Nice!

What do you think about IskraJS ?

IskraJS - this is hardware + JS compiler in one corpus.

Amperka - IskraJS

Collapse
 
dkundel profile image
Dominik Kundel

Never worked with it. It looks interesting but I seem to only be able to find documentation in Russian which makes it a bit harder for me to understand :D

Collapse
 
burzumumbra profile image
Ronald Flores Sequeira

You just made me borrow some arduinos stuf from a friend

Collapse
 
dkundel profile image
Dominik Kundel

That's awesome! Good look with the hardware hacking :)

Collapse
 
renannobile profile image
Renan Lourençoni Nobile

I see, thanks very much for the response.

Collapse
 
aswathm78 profile image
Aswath KNM

That's a cool start .I expect more from you man.