About

Breakout is a prototyping tool for exploring the intersection of the web and the physical world. The popular Arduino platform and the Firmata protocol are leveraged to enable users to access physical input and output purely from javascript. This makes it easy for anyone familiar with javascript and basic web development to explore the possibilities of using physical I/O in their web applications. Furthermore, the Breakout framework includes a growing library of hardware abstractions such as buttons, leds, servo motors, accelerometers, gyros, etc enabling the user to easily interface with a range of sensors and actuators using just a few lines of javascript code.

Breakout grew out of a need for a simple platform to enable designers to prototype functional web-based interfaces to the physical world. It is based largely on the Funnel toolkit and informed by the experiences of the developers of both Funnel and Breakout as designers, technologists and educators.

Try It

If you want to give Breakout a try, gather an Arduino (or other compatible board), a button, an LED, a couple of resistors (10k for the button and something between 220 ohm and 1k for the LED) and a breadboard. Click the “Show Schematic” button below to see a wiring diagram. Wire up the LED and Button.

Download or clone the most recent Breakout package, then install ConfigurableFirmata and finally, navigate to Breakout/firmware/BreakoutFirmata/. Open BreakoutFirmata.ino in the Arduino IDE (Version 1.0 or higher), compile and upload to your board. Next navigate to Breakout/server/ and unzip the server for your platform. Launch the Breakout Server application for your platform and make sure your Arduino is selected in the Serial dropdown. Click the Connect button at the bottom of the Server application window (if you are viewing this page on the same computer running Breakout Server you may need to refresh this page after connecting to Breakout Server). Now you should be able to click on the buttons below to turn the LED on and off and press the button on the breadboard to view its state in the UI below.

If you are viewing this page from a mobile device you will see a field to enter an IP address. You will need to enter the IP address of the computer running the Breakout Server application before you can interact with the board. Your mobile device must also be connected to the same network as the computer running Breakout Server. Also make sure your mobile browser supports websockets (see Requirements).

For a better viewing experience, you can also link directly to the demo.

Note that when you start prototyping your own mobile web apps with Breakout that you can hardcode the server IP or hostname in your JS file rather than having to present the user with a field to enter an IP address as in this demo. For situations where mobile users will connect to physical devices with a known IP address or hostname (imagine an interactive window display for example), the IP address or hostname can be hard coded in the JS file. You can then use a QR code, NFC (ideally… but unfortunately not supported on all devices yet) or other means to present the interface to the user. So the user could tap or scan a marker outside the window display and the interface to the installation or device would pop up in the users browser.

Credits

Breakout was created by Jeff Hoefs.

Breakout is based largely on the as3 library of Funnel.cc.

Logo and icon design by Claire Lin.

Contributors: