How to Control Your Arduino Using JavaScript
Pinterest Whatsapp
Advertisement

Arduino boards are one of the easiest ways to get into hardware hacking for programmers. There are a huge array of beginner projects 10 Great Arduino Projects for Beginners 10 Great Arduino Projects for Beginners Completing an Arduino project gives you a sense of satisfaction like no other. Most beginners aren't sure where to start though, and even beginner's projects can seem rather daunting. Read More out there to suit almost anyone with a programming background. Even so, getting started can seem daunting for those short on time.

Learning a totally new language Which Programming Language Should You Learn for the Future? Which Programming Language Should You Learn for the Future? Which is the best programming language to learn for the future? If you could only pick one language to learn and master for the future, there's no contest: it must be JavaScript. Read More just to try out a microcontroller might seem like a lot of work. What if you want to start playing around with home-brew electronics in a program language you are already familiar with? Good news: you can!

We’ve already showed you how to control an Arduino board with Python How to Program and Control an Arduino With Python How to Program and Control an Arduino With Python Sadly, it is impossible to directly program an Arduino in Python, but you can control it over USB using a Python program. Here's how. Read More , and today we are going to show you how to do the same with JavaScript. Rather than just the most basic blinking LED tutorial, today we will use the Johnny-Five framework to control a servo with the computer keyboard, all programmed in JavaScript What Is JavaScript and How Does It Work? What Is JavaScript and How Does It Work? What is Javascript? It's a programming language used to enhance web pages. It includes dynamically updating web pages, user interfaces and more. Let's dive into what Javascript is all about. Read More .

Hardware List

For this project you will need:

how to control arduino with javascript

Today’s tutorial will use an Arduino Uno board. The Johnny-Five framework we’ll be using later in this project supports most Arduino compatible microcontrollers, although your board will need to have PWM capability to keep the servo happy.

Circuit Setup

Attach your servo to your Arduino like this:

how to control arduino with javascript

In short, VCC line (RED) connects to the 5v pin of the Arduino, the GND line (BLACK or BROWN) connects to the GND pin of the Arduino and the Pulse line (Yellow or Orange) connect to pin 10 of the Arduino. Note that while you do not have to connect it to pin 10 specifically, it must connect to a PWM pin, usually denoted with a ~.

Double check you haven’t mixed up any wires, and connect the Arduino to your computer. We’ll be using Windows 10 for this project. All the elements of this project are available for Mac and Linux too, though some installation instructions may differ slightly.

If you haven’t already, download the Arduino IDE and choose your Board and Port from the Tools menu. If this is your first time doing this and it’s all a bit of a mystery, our Arduino Beginners Guide Getting Started With Arduino: A Beginner's Guide Getting Started With Arduino: A Beginner's Guide Arduino is an open-source electronics prototyping platform based on flexible, easy-to use hardware and software. It's intended for artists, designers, hobbyists, and anyone interested in creating interactive objects or environments. Read More could help you through these steps.

how to control arduino with javascript

Once you’ve got it connected, upload the StandardFirmataPlus example sketch to the board. You can find this sketch in the File menu under Examples > Firmata > StandardFirmataPlus. You don’t need to modify the sketch at all, it essentially just sets the Arduino up to wait for outside instructions – which we will provide ourselves later.

JavaScript Robotics With Johnny-Five

The framework we’ll be use to control our Arduino with Javascript is called Johnny-Five. Unsurprisingly, given its movie namesake, the project is geared toward working with robotics.

how to control arduino with javascript
Image Credit: johnny-five.io

To install Johnny-Five, we must first install Node.js What is Node.JS and Why Should I Care? [Web Development] What is Node.JS and Why Should I Care? [Web Development] JavaScript is a just a client-side programming language that runs in the browser, right? Not any more. Node.js is a way of running JavaScript on the server; but it's so much more as well. If... Read More . You can download their latest build from the Node.js website. We are using the recommended release, which at the time of writing is 8.9.4 LTS.

Open the .msi file and follow the install instructions, making sure that it gets added to your PATH. The current Node.js installer adds PATH as standard, though it is worth checking this during install as it is required for our next step.

how to control arduino with javascript

Once the install is complete, we will have access to the Node Package Manager (NPM) package manager from the Windows Command Line (CMD). Click Start and type CMD. Before we go on, we need to initialize the NPM to prevent possible install errors. It doesn’t require any specialist knowledge, just type:

npm init

Follow the onscreen prompts. For today’s project you needn’t change anything, just press enter until you are back at the command prompt, then type:

npm install johnny-five

This will install the all important packages, which will talk with our Arduino. We need one further thing to make this project work, and that is the Keypress package, which will allow us to read keystrokes from the keyboard.

Install it by entering:

npm install keypress

Once all of these packages are installed, we are ready to code!

If you run into any issues while installing, try running the johnny-five install again after the keypress install. It may just be a quirk of the NPM version used here, but doing this now prevents a problem you’re likely to run into later like I did.

The Code

We will be using a piece of example code provided in the johnny-five documentation today, which allows control over our servo using the arrow keys on the keyboard. The full code is available at johnny-five.io, but we will go through it here in detail to fully understand how it works.

We are using Eclipse IDE 8 Eclipse Keyboard Shortcuts Essential for Beginners 8 Eclipse Keyboard Shortcuts Essential for Beginners As newbie-friendly as the Eclipse IDE (interface) is, you owe it to yourself to learn these keyboard shortcuts. Read More for coding today, though you can use any IDE or text editor Text Editors vs. IDEs: Which One Is Better For Programmers? Text Editors vs. IDEs: Which One Is Better For Programmers? Choosing between an advanced IDE and a simpler text editor can be hard. We offer some insight to help you make that decision. Read More for this project.

Create a new file and name it test.js, and save it somewhere you can easily access from the Command Line later. The script starts by creating variables for the required libraries and initializing the Keypress library to listen for incoming data, along with calling the Board() method to set up the board.

var five = require("johnny-five");
var keypress = require("keypress");

keypress(process.stdin);

var board = new five.Board();

Note that the board setup here is automatic, no need to specify ports. If you have a specific port setup, or are just having no luck with the auto-detect you may need to specify your port explicitly.

Next up we want to “wake up” our board and set it up for servo control. The board.on call waits until the Arduino pins are ready before moving on. The johnny-five library has support for servos built in, and we are calling Servo.Continuous(10) on pin 10 to allow direct control.

board.on("ready", function() {
  console.log("Use Up and Down arrows for CW and CCW respectively. Space to stop.");
  var servo = new five.Servo.Continuous(10);

  process.stdin.resume();
  process.stdin.setEncoding("utf8");
  process.stdin.setRawMode(true);

The process.stdin calls ensure all the data we receive from the keyboard will be usable in the next block of code. Now we want to “listen” for keystrokes and use them to move our servo clockwise (CW), counterclockwise (CCW), or to stop in its tracks.

  process.stdin.on("keypress", function(ch, key) {
    if (!key) { // if no key is pressed, return i.e do nothing.
      return;
    }

    if (key.name === "q") {
      console.log("Quitting");
      process.exit();
    } else if (key.name === "up") {
      console.log("CW");
      servo.cw();
    } else if (key.name === "down") {
      console.log("CCW");
      servo.ccw();
    } else if (key.name === "space") {
      console.log("Stopping");
      servo.stop();
    }
  });
});

Make sure you include all of the closing brackets at the bottom here, and refer to the whole block of code as linked above if you get any errors. Save this script, and open up the Command Prompt.

Waving Hello!

Now navigate to the directory you’ve saved your script in, and run it by typing:

node test.js

The program should start up immediately with information about the board, before giving you the instructions stated in the code. Try pressing the up and down arrow keys, and the space bar, and Q to quit out. The screen should look like this:

how to control arduino with javascript

And all being well, the servo should be dancing to your keystrokes! Look at that little beastie wave!

how to control arduino with javascript

Humble Beginnings

Despite taking on a slightly more ambitious project than the usual beginner blinking LED tutorial, we have hardly even touched upon the full extent of what can be done with Arduino boards and similar microcontrollers.

Seasoned JavaScript users should find the Johnny-Five package intuitive to work with. The library is also installable on the Raspberry Pi natively, making it the perfect package for budding robot builders.

The great thing about this library is that although it is designed with robots in mind, the same input and output data can be used to create DIY smart home setups DIY Smart Home Sensors with Arduino, MySensors and OpenHAB DIY Smart Home Sensors with Arduino, MySensors and OpenHAB Smart home sensors cost a ridiculous amount of money. Wiring a whole house is the domain of those with silly amounts of disposable income. Let’s build our own with MySensors. Read More and even home-brewed security systems DIY Smart Lock with Arduino and RFID DIY Smart Lock with Arduino and RFID Here's how to build a simple RFID-based smart lock using an Arduino as the backbone and a few cheap components. Read More .

Communicating with microcontrollers in this way is a great introduction to the world of DIY hardware without having to devote the time to learning a whole new programming language. Have fun out there, and if you happen to build a killer robot, please remember how we helped you in the early days.

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *