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.

http://nodejs.org/download/

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
v0.10.26

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 socket.io too:

npm install socket.io

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
    });
    Troubleshooting:

    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.

    Socket.io 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) {
    console.log(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'

    $('#ledSet').on('click',function(){
    // 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
    socket.emit('led',{delay:tmp});
    });

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

    socket.on('led', function (data) {
    console.log(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