Javascript robotics and browser-based Arduino control
Use your JavaScript and web development knowledge to control Arduino projects and even robots (node + robots = nodebots)!

This is made easy with node.js, Firmata and Johnny-Five. Let's get started!

Johnny-Five logo by Mike Sgier. Arduino photo CC-BY Raeky.

Step 1: Install node.js

Javascript robotics and browser-based Arduino control
Node.js is a javascript runtime based on Chrome's V8 engine. If you haven't used it before, node lets you run Javascript code on the server-side, it's designed around non-blocking I/O and asynchronous events. Node includes modules for accessing the filesystem, a web server, sockets and other basic tasks.

Download and install the node for your platform. Source and binaries are available for Windows, OS X and Linux.

If you're using Ubuntu/Debian, you can use apt-get install nodejs (not node). If you're using a distro's package manager, make sure your node version is recent!

node --version

Step 2: Install johnny-five

Javascript robotics and browser-based Arduino control
Javascript robotics and browser-based Arduino control
Javascript robotics and browser-based Arduino control
Johnny-Five is an Arduino control framework for Node. It works with Firmata firmware to enable you to do things like blink lights and control servos.

Create a folder for your project and use Node's package manager, npm, to install johnny-five.

At the command line use npm install as follows:

npm install johnny-five

If you'd like to create a web interface you'll need too:

npm install

Step 3: Upload Firmata to your Arduino

Firmata is a protocol for communicating with microcontrollers via a host computer. There are interface libraries available in Python, Processing, Javascript, Ruby and many other languages. Firmata sketches are included with the Arduino IDE.
  • Download and open the Arduino IDE
  • Go to File -> Examples -> Firmata -> StandardFirmata
  • Upload Firmata to your Arduino board

    Step 4: Blink sketch ... in javascript

    Javascript robotics and browser-based Arduino control
    As is tradition our first sketch will make the on-board LED blink!

    Create a file called ledtest.js with your favorite text editor. Connect your Arduino, copy the code below and run node ledtest.js at the command line. You should see a blinky LED!
    var five = require("johnny-five"),board, led;

    board = new five.Board();

    board.on("ready", function() {
    led = new five.Led(13);
    led.strobe(1000); // on off every second

    Johnny-five will try to find your Arduino automatically. If this doesn't work you can specify a serial port in the Board constructor, like so: board = new five.Board({ port: "/dev/tty.usbmodem1234" });
    LED c/o OpenClipart

    Step 5: WebSockets

    WebSockets allow full-duplex communication between your browser and the server. You can use them to pass messages and events, and as you might imagine this is quite useful for data-logging or controlling a microcontroller or robot!

    We're using socket.IO, a wrapper that makes using WebSockets very simple. It takes into account the differences between browsers, handles gnarly back-end tasks like disconnections, heartbeats and timeouts so we can focus on the fun stuff. provides example code, we can use it with a little modification to control our Arduino with johnny-five.

    Socket.IO Usage

    Emit an event called 'message'

    socket.emit('message', { hello: 'world' });

    Process an event called 'incoming' and print out the data

    socket.on('incoming', function(data) {

    Step 6: Create a web interface with Bootstrap

    Javascript robotics and browser-based Arduino control
    The attached code uses Bootstrap, a responsive front-end framework, to create a simple web interface that can set a servo position, change a LED blink interval and read data from an analog pin.

    If you followed the previous steps you should be able to run node webtest.js at the command line, visit http://localhost/ to start controlling your Arduino!

    Once you can understand this you're well on your way to advanced Browser-to-Arduino hacking and nodebots (the johnny-five repo is an excellent resource for example code)

    An example: on the browser side, when you click on 'Set Delay' emit a socket event 'led'

    // parse number from led delay value
    var tmp = parseInt($('#ledDelay').val(),10);
    // print out
    console.log("Setting LED Delay:",tmp)
    // send socket message of delay

    On the server side, your message is processed and the strobe value adjusted:

    socket.on('led', function (data) {
    if(board.isReady){ led.strobe(data.delay); }

    Javascript robotics and browser-based Arduino control
    websockettest.zip2 KB

    Step 7: Additional resources

    Javascript robotics and browser-based Arduino control
    Further reading and resources:

  • NodeBots - Javascript robots. Hardware hacking meetups around the world!
  • Arduino Experimenter's guide for Node.js
  • The Rise of JS Robotics
  • NodeCopter
  • Sumobot Jr
  • Johnny-Five on github
  • Node-SerialPort
  • Bonescript - JS control of GPIO for BeagleBone Pictured, "phantombot" a Sumobot Jr at JSFest

    Tag cloud

    make build easy simple arduino making homemade solar laser printed portable cheap mini building custom cardboard wooden create super lego turn paracord chocolate your paper light intel