Using Breakout to connect your Arduino with the Internet (through your PC)

Breakout is a great tool that makes easier the communication of your Arduino board with the Internet (and thus Cloud platforms) using your computer as an intermediate node.

As also presented in Chapter 07 of the Book, connecting your Arduino to the Internet through your computer requires developing a small Java-Processing-bases application and using the Firmata library on the Arduino.

Breakout simplifies the process enabling us to create functional web-based interfaces to the physical world. To use it you need the following:

  • An Arduino board (Uno, Fio, Mega, Pro Mini, Duemilanove, etc).

Operation System:

  • Mac OS X 10.6 or higher
  • Windows 7 or higher
  • Ubuntu 11.10 64-bit

Prerequisites:

  • Java Runtime Environment version 1.6 or higher must be installed.

Web Browser:

  • Chrome version 14 or higher
  • Firefox version 7 or higher
  • Safari version 5 or higher

Mobile Web Browsers:

  • Safari
  • Firefox version 7 or higher
  • Chrome Beta (for Android 4.0 or higher)
Once you have downloaded and installed the latest version of Breakout you can prepare your Arduino board by uploading the Firmata sketch (File -> Examples -> Firmata -> StandardFirmata).
Start the Breakout Server (Doubleclick on the installation icon) and connect to your board. No need for extra coding on your computer!
Communication with your board can now be performed through your browser by using standard HTML and JavaScript code.
To access your board remotely you need enable remote access to the Breakout server (public IP or port forwarding at your router and also make sure the port – default is 8887 is accessible).
Breakout comes with various examples demonstrating all kinds of functionality. The hello_world.html contains the following code:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8 />
<style type="text/css">
.text {
font-family: "Arial";
font-size: 22px;
color: #00AEEF;
padding-left:20px;
}
</style><title>Hello World!</title>

<script src="../../dist/Breakout.js"></script>
<script src="../libs/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

// dependencies:
// declare these variables so you don't have
// to type the full namespace
var IOBoard = BO.IOBoard;
var IOBoardEvent = BO.IOBoardEvent;
var Button = BO.io.Button;
var ButtonEvent = BO.io.ButtonEvent;
var LED = BO.io.LED;
var Oscillator = BO.generators.Oscillator;

// set to true to print debug messages to console
BO.enableDebugging = true;

// replace "localhost" with the IP address of the computer
// the IOboard is connected to in order to load pages on a
// phone or tablet (eg. "192.168.2.3", 8887)
var ard = new IOBoard("localhost", 8887);
var onboardLED;
var fadeLED;

// listen for the IOBoard READY event which indicates the IOBoard
// is ready to send and receive data
ard.addEventListener(IOBoardEvent.READY, onReady);

function onReady(event) {

// remove the event listener because it is no longer needed
ard.removeEventListener(IOBoardEvent.READY, onReady);

// create a new LED
// params: IOBoard, reference to the pin object the LED is attached to
onboardLED = new LED(ard, ard.getDigitalPin(13));
// blink the on for 2 seconds then off for 2 seconds 100 times
// params: interval (how often the blink lasts), number of times to blink (0 = forever)
onboardLED.blink(2000, 100);

// create a new LED
fadeLED = new LED(ard, ard.getDigitalPin(11));
// use a sine wave to fade the led on and off every second
// params: interval, times (0 = forever), waveform to apply
fadeLED.blink(1000, 0, Oscillator.SIN);

// create a new button
// params: IOBoard, Pin, buttonMode
var button01 = new Button(ard, ard.getDigitalPin(2), Button.PULL_DOWN);
// listen for button press and release events
button01.addEventListener(ButtonEvent.PRESS, onButtonPress);
button01.addEventListener(ButtonEvent.RELEASE, onButtonRelease);

}

function onButtonPress(event) {
// get a reference to the button object that fired the event
var btn = event.target;
$('#button').html("button: pin = " + btn.pinNumber + " pressed");
}

function onButtonRelease(event) {
// get a reference to the button object that fired the event
var btn = event.target;
$('#button').html("button: pin = " + btn.pinNumber + " released");
}

});

</script>

</head>
<body>

<img src="images/hw_schematic.png"/>
<p class="text">The led attached to pin 11 should fade on and off<br>
every second and the on-board LED should toggle <br>
on for 2 seconds and off for 2 seconds 100 times.</p>
<div id="button" class="text">button:</div>

</body>
</html>​

and looks like this:

 

The LED attached on your Arduino should start blinking right away!

 

 

 

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>