Escaping the Arduino IDE (Node.js ver)

Zeke wrote up an amazing tutorial teaching us how to escape the Arduino IDE using Python in the last lab session. But there are infinitely more ways to escape the Arduino IDE. For beginners who are interested in bridging Arduino to the wider web ecosystem, this additional tutorial will introduce you to the setup for serial communication between Arduino and Node.js.

Photo by Harrison Broadbent on Unsplash

Pre-requisites

Circuit

The example I prepared is a simplified keypress-based RGB mixer similar to the previous assignment. So please make sure that you have the same circuit setup as the examples given there. In short, use pins 9, 10, and 11 for red, green, and blue respectively.

Node.js

Node.js is a popular JavaScript runtime for server-side processes (i.e. everything except browsers). However, unlike the Python runtime, Node.js is not shipped in most operating systems out of the box. If your computer does not already have Node.js installed, you can follow these pages to either install it directly or via a version manager. Direct installation is simpler but it may cause compatibility issues when different projects require different versions of Node.js. On the other hand, installing through version manager is more complicated but makes sure projects are run by the correct version of Node.js.

If you choose to use the nodenv or nvs version manager, you may also want to create a file named “.node-version” in your project and put the Node.js version you would like to use in the first line. This allows the version managers and their supported tools to activate to the corresponding version automatically.

Arduino CLI and VSCode (Completely optional. Really.)

(Please do not waste time on this if you are comfortable with the Arduino IDE editor!)

While escaping from Arduino IDE was meant to be just getting rid of its serial monitor and its restrictive prompt-style interaction, we could actually uninstall the entire IDE and use other tools to replace its other functionalities. After all, we do not use the Arduino IDE just for serial communication, but also for editing, compiling, and flashing! It is not a true escape if we still need the IDE to code, is it? In order to do so, we need the Arduino CLI and a text editor. While any text editor can do the job, VSCode is very user-friendly and provides good support for Arduino via its Arduino extension. Nevertheless, feel free to pick the tools that you like, or even stick with the Arduino IDE (but without the need for its serial monitor).

You may now uninstall the Arduino IDE completely if you have completed this step. Remember to configure the Arduino extension to use the CLI instead of the IDE for compiling and flashing. Enjoy all the fancy auto-formatting, syntax highlighting and linting in VSCode!

Let’s go!

Once you have Node.js installed, you are ready to start.

Getting started

You first need to download/clone the example code from GitHub. If you choose to clone it, please use the following command.

// Please omit $ as it just means it is a command line
$ git clone git@github.com:billykwok/node-arduino.git
// If you have GitHub CLI installed, you can do this instead
$ gh repo clone billykwok/node-arduino

After that, go to your local repository, run the following command to install the dependencies (the libraries and tools used in our code).

$ npm install
// If you have yarn installed (recommended), please use this instead
$ yarn

Arduino

In the next step, please open the node-arduino.ino file in your local repository. I commented out the LED-related code to highlight the code related to serial communication. Please uncomment them and flash the file into your Arduino board. What this code does is basically reading 3 bytes from the serial port at a time (delimited by line breaks) and print them as integers (RGB values).

node-arduino/node-arduino.ino at main · billykwok/node-arduino

A preview of the file content (You already have it, don’t copy)

Node.js

On the Node.js side, I used the serialport library (the pyserial equivalence in Node.js) to handle the low-level serial communication. You can run the following command to try it out.

$ babel-node index.js

babel-node is already installed as a dependency in the previous step. It is just a wrapper of the node command but it automatically precompiles the file so that newer JavaScript features that Node.js has not supported yet can be used today. It also allows us to use the import statements without requiring all files in the entire project to be an ECMAScript module.

I have added various comments to explain what the code does. After experiencing what it does, you can read through the comment to understand how it works.

node-arduino/index.js at main · billykwok/node-arduino

A preview of the file content (You already have it, don’t copy)

Ta-da!

You should now be able to repeatedly press r, g, and b in the command line without hitting enter. The brightness of the LEDs should reflect the number of times you pressed. To exit the program, you can press ctrl-c .

What you should see

But, why…

As mentioned at the beginning, each type of Arduino integration has its own benefits and drawbacks. For example, Python allows us to easily stream data from Arduino to various DS/AI/ML tools and platforms. It is also arguably easier for new programmers to pick up. However, Python itself is quite slow and it is not as mature as JavaScript outside the data science community. JavaScript provides easy ways to both make calls to APIs and visualize data into GUIs. As a long-time web designer and developer, I am excited to see how the web and IoT/Maker ecosystem benefit each other.

How about the browsers?

This is absolutely doable but also quite challenging. Browser support for serial communication is still immature. Only some Chromium-based browsers have experimental support for it. It requires you to have advanced front-end JavaScript knowledge like the browser permission model and workers.

Having said that, using a website as the GUI for Arduino while directly communicating with Arduino using the same piece of code would unlock a lot of amazing use cases. I am experimenting with it right now and would be happy to write another tutorial about it if there turns out to be enough people who need it.

For now, you can check out this Web Serial API tutorial from Google as a starting point. Remember to run the serial code in a web worker! Otherwise, all your other codes would be blocked by it.

Questions?

I am also happy to answer your questions or help you troubleshoot your Node.js setup, but I do not read Medium comments very often. Please ping me through other channels if possible.