Peter's cartoon avatar

Peter O'Shaughnessy

Web technologies and browser-based experiments

Arduino with JavaScript (Breakout.js)

On 19th March, I attended an Introduction to Arduino with JavaScript night class.

In 3 hours, Lily Madar guided us to create our first Arduino applications using Breakout.js, a JavaScript Arduino interface for the browser.

First, we just made an LED blink:

Arduino LED

But soon we were playing with colour-changing LEDs, buttons and potentiometers. It was exciting to be able to create a custom, physical hardware interface for the browser.

For our final project, we had a choice. I chose an HTML5 Canvas Etch-a-Sketch. It was easy to hook up two potentiometers for drawing the line horizontally and vertically. And I included a button for erasing the picture.

Arduino Etch-a-sketch

My (messy) source code is up on GitHub.

The biggest issues I found with Breakout.js were:

So it’s not for real, consumer applications, but it’s a cool prototyping tool and could make for some fun personal/office projects. For example, you could make an LED countdown clock, counting down to your next release. Or a set of build server traffic lights.

All in all, it was a really fun event. A fellow attendee also wrote up a nice blog post about it here.

hacks javascript