Skip to content

Instantly share code, notes, and snippets.

@phodal
Forked from musart/index.html
Created October 9, 2012 14:35
Show Gist options
  • Save phodal/3859224 to your computer and use it in GitHub Desktop.
Save phodal/3859224 to your computer and use it in GitHub Desktop.
web application for breakout.js client
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<style type="text/css">
body {
margin: 15px;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #666;
}
h2 {
padding-left: 0px;
font-weight: normal;
font-size: 28px;
color: #00AEFF;
}
.ledBtns {
padding: 10px;
font-size: 22px;
width: 130px;
color: #00AEFF;
margin-bottom: 20px;
}
#state {
color: #00AEFF;
font-size: 22px;
}
.container {
background-color: #f7f7f7;
padding-left: 10px;
border: 1px dotted #CCC;
width: 280px;
margin-top: 20px;
}
.spacer {
margin-left: 5px;
}
#schematic {
position: absolute;
display: none;
top: 65px;
left: 15px;
}
#schematicBtn {
margin-top: 20px;
}
</style>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="websocket.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.7.min.js"></script>
<script type="text/javascript" charset="utf-8" src="Breakout.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// declare these variables so you don't have
// to type the full namespace
var IOBoard = BO.IOBoard;
var IOBoardEvent = BO.IOBoardEvent;
var LED = BO.io.LED;
var Button = BO.io.Button;
var ButtonEvent = BO.io.ButtonEvent;
// If you want to load this example on a smartphone or tablet,
// replace "localhost" with the IP address of the computer
// the IOboard is connected to (eg. "192.168.2.3", 8887)
var arduino = new IOBoard("192.168.0.21", 8890);
var led;
// listen for the IOBoard READY event which indicates the IOBoard
// is ready to send and receive data
arduino.addEventListener(IOBoardEvent.READY, onReady);
function onReady(event) {
// remove the event listener because it is no longer needed
arduino.removeEventListener(IOBoardEvent.READY, onReady);
// create an LED object to interface with the LED wired
// to the I/O board
led = new LED(arduino, arduino.getDigitalPin(11));
// create a new Button object to interface with the physical
// button wired to the I/O board
var button = new Button(arduino, arduino.getDigitalPin(2));
// listen for button press and release events
button.addEventListener(ButtonEvent.PRESS, onPress);
button.addEventListener(ButtonEvent.RELEASE, onRelease);
// use jQuery to get a reference to the buttons
// and listen for click events
$('#btnLeft').on('click', turnLedOff);
$('#btnRight').on('click', turnLedOn);
// handle showing and hiding the schematic
$('#schematicBtn').on('click', toggleSchematicView);
}
function onPress(evt) {
// get a reference to the target which is the button that
// triggered the event
var btn = evt.target;
// display the state on the page
$('#state').html("Button " + btn.pinNumber + " state: Pressed");
}
function onRelease(evt) {
// get a reference to the target which is the button that
// triggered the event
var btn = evt.target;
// display the state on the page
$('#state').html("Button " + btn.pinNumber + " state: Released");
}
function turnLedOn(evt) {
// turn the LED on
led.on();
}
function turnLedOff(evt) {
// turn the LED off
led.off();
}
// show or hide the schematic
function toggleSchematicView(evt) {
var schematicBtn = $(this);
if (schematicBtn.data('state') === "hidden") {
schematicBtn.text("Hide Schematic");
schematicBtn.data('state', "visible");
$('#schematic').css('display', 'block');
} else {
schematicBtn.text("Show Schematic");
schematicBtn.data('state', "hidden");
$('#schematic').css('display', 'none');
}
}
});
</script>
</head>
<body>
<h2>Hello World Example</h2>
<div class="container">
<p><strong>Output:</strong> Use the buttons below to turn the LED on the breadboard on or off.</p>
<button id="btnLeft" class="ledBtns" type="button">LED Off</button>
<span class="spacer"></span>
<button id="btnRight" class="ledBtns" type="button">LED On</button>
</div>
<div class="container">
<p><strong>Input:</strong> Press the button on the breadboard to display the state below.</p>
<p id="state">Display Button State</p>
</div>
<img id="schematic" src="images/hello_world_schematic.png">
<button id="schematicBtn" data-state="hidden">Show Schematic</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment