<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div id="divAction">standby</div>
<br />
<table width="100%">
<tr>
<td colspan=3>
<input id="btnForward" onclick="goForward();" type="button" value="forward"/>
</td>
</tr>
<tr >
<td><input type="button" value="left" onclick="goLeft();"/></td>
<td><input type="button" value="stop" onclick="stop();"/></td>
<td><input type="button" value="right" onclick="goRight();"/></td>
</tr>
<tr>
<td colspan=3>
<input type="button" value="backwards" onclick="goBackwards();"/>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript" language="javascript">
var activePin = 0;
function goForward() {
stopMovement();
activePin = 1;
digitalPin(1);
$("#divAction").text("going forward");
}
function goBackwards() {
stopMovement();
activePin = 2;
digitalPin(2);
$("#divAction").text("going back");
}
function goLeft() {
stopMovement();
activePin = 3;
digitalPin(3);
$("#divAction").text("going left");
}
function goRight() {
stopMovement();
activePin = 4;
digitalPin(4);
$("#divAction").text("going right");
}
function stop() {
stopMovement();
$("#divAction").text("Stopped");
}
function stopMovement() {
if (activePin != 0) {
digitalPin(activePin);
activePin = 0;
}
}
var xhttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
try {
// IE 6 and higher
xhttp = new ActiveXObject("MSXML2.XMLHTTP");
} catch (e) {
try {
// IE 5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xhttp = false;
}
}
} else if (window.XMLHttpRequest) {
try {
// Mozilla, Opera, Safari ...
xhttp = new XMLHttpRequest();
} catch (e) {
xhttp = false;
}
}
}
function sendRequest(addr) {
if (!xhttp) {
alert("An Error occured when trying to initialize XMLHttpRequest!");
return;
// exit
}
xhttp.open("GET", addr, false);
xhttp.send(null);
return xhttp.responseXML;
}
function digitalPin(pin) {
xml = sendRequest("switchDigitalPin?pin=" + pin);
//alert("http request sent");
//on = xmlDoc.getElementsByTagName("pin" + pin)[0].childNodes[0].nodeValue;
//alert(on);
//drawDigitalPin(pin, on);
}
function init() {
createXMLHttpRequest();
}
window.onload = init;
</script>