Created
June 10, 2012 12:51
-
-
Save musart/2905394 to your computer and use it in GitHub Desktop.
web application for breakout.js client
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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