Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
HTML and JavaScript page to be used with RS_Robot - see http://reefwingrobotics.blogspot.com.au/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=${WIDTH}, initial-scale=1"/>
<title>Alexa M</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style>
.controls {
width: 150px;
font-size: 22pt;
text-align: center;
padding: 15px;
background-color: green;
color: white;
}
</style>
<style type="text/css">
body {
background: ${BGCOLOR};
text-align: center;
margin-top: 2%;
}
#videoCanvas {
// Always stretch the canvas to 640x480, regardless of its internal size.
width: ${WIDTH}px;
height: ${HEIGHT}px;
}
</style>
<script>
function sendCommand(command)
{
$.get('/', {command: command});
}
function keyPress(event)
{
keyCode = event.keyCode;
switch (keyCode) {
case 38: // up arrow
sendCommand('f');
break;
case 37: // left arrow
sendCommand('l');
break;
case 32: // space
sendCommand('s');
break;
case 39: // right arrow
sendCommand('r');
break;
case 40: // down arrow
sendCommand('b');
break;
case 109: // - = decrease speed
case 189:
sendCommand('-');
break;
case 107:
case 187:
sendCommand('+'); // + = increase speed
break;
case 77:
sendCommand('m'); // m = manual (remote control)
break;
case 65:
sendCommand('a'); // a = autonomous
break;
default: return; // allow other keys to be handled
}
// prevent default action (eg. page moving up/down with arrow keys)
event.preventDefault();
}
$(document).keydown(keyPress);
</script>
</head>
<body>
<h1><FONT color=white>Alexa M</h1>
<!-- The Canvas size specified here is the "initial" internal resolution. jsmpeg will
change this internal resolution to whatever the source provides. The size the
canvas is displayed on the website is dictated by the CSS style.
-->
<canvas id="videoCanvas" width="${WIDTH}" height="${HEIGHT}">
<p>
Please use a browser that supports the Canvas Element, like
<a href="http://www.google.com/chrome">Chrome</a>,
<a href="http://www.mozilla.com/firefox/">Firefox</a>,
<a href="http://www.apple.com/safari/">Safari</a> or Internet Explorer 10
</p>
</canvas>
<script type="text/javascript" src="jsmpg.js"></script>
<script type="text/javascript">
// Show loading notice
var canvas = document.getElementById('videoCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '${COLOR}';
ctx.fillText('Loading...', canvas.width/2-30, canvas.height/3);
// Setup the WebSocket connection and start the player
var client = new WebSocket('ws://${ADDRESS}/');
var player = new jsmpeg(client, {canvas:canvas});
</script>
<table align="center">
<tr><td class="controls" onClick="sendCommand('-');">-</td>
<td class="controls" onClick="sendCommand('f');">Forward</td>
<td class="controls" onClick="sendCommand('+');">+</td>
</tr>
<tr><td class="controls" onClick="sendCommand('l');">Left</td>
<td class="controls" onClick="sendCommand('s');">Stop</td>
<td class="controls" onClick="sendCommand('r');">Right</td>
</tr>
<tr><td class="controls" onClick="sendCommand('m');">Manual</td>
<td class="controls" onClick="sendCommand('b');">Back</td>
<td class="controls" onClick="sendCommand('a');">Auto</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment