First, we just made an LED blink:
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.
My (messy) source code is up on GitHub.
The biggest issues I found with Breakout.js were:
- The interface with the hardware is only live while your tab is open in the browser
- Most of us had to keep restarting the Breakout server often while we were developing, due to weird errors
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.