<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
<script type="text/javascript" type="text/javascript">
// Connecting to ROS
// -----------------
function freezeFrame() {
if (document.getElementById("snapshot_button").value == "Snapshot!") {
document.getElementById("snapshot_button").value = "Show video!";
document.getElementById("video_stream").src = "http://192.168.2.5:9191/snapshot?topic=/camera/rgb/image_color";
} else {
document.getElementById("snapshot_button").value = "Snapshot!";
document.getElementById("video_stream").src = "http://192.168.2.5:9191/stream?topic=/camera/rgb/image_color";
}
}
function main() {
var forward = 0;
var turn = 0;
var ros = new ROSLIB.Ros({url : 'ws://192.168.2.5:9090'});
function pub() {
//connection.publish('/cmd_vel', 'geometry_msgs/Twist', '{"linear":{"x":' + x + ',"y":0,"z":0}, "angular":{"x":0,"y":0,"z":' + z + '}}');
var cmdVel = new ROSLIB.Topic({
ros : ros,
name : '/mobile_base/commands/velocity',
messageType : 'geometry_msgs/Twist'
});
var twist = new ROSLIB.Message({
linear : {
x : forward,
y : 0,
z : 0
},
angular : {
x : 0,
y : 0,
z : turn
}
});
cmdVel.publish(twist);
}
function handleKey(code, down) {
var scale = 0;
if (down == true) {
scale = 1;
}
switch (code) {
case 37:
//left
turn = 1 * scale;
break;
case 38:
//up
forward = .5 * scale;
break;
case 39:
//right
turn = -1 * scale;
break;
case 40:
//down
forward = -.5 * scale;
break;
}
pub();
}
document.addEventListener('keydown', function (e) {
handleKey(e.keyCode, true);
}, true);
document.addEventListener('keyup', function (e) {
handleKey(e.keyCode, false);
}, true);
}
</script>
</head>
<body onload="main()">
<h1>Drive Turtlebot</h1>
<div id="app_elements" style="display: block;">
<div id="video_div" style="float:left;">
<img id="video_stream" alt="real-time video feed" src="http://192.168.2.5:9191/stream?topic=/camera/rgb/image_color"/>
<div style="text-align:center;">
<input id="snapshot_button" type="button" onclick="freezeFrame()" value="Snapshot!" />
</div>
</div>
<div id="pointer_div" style="float:right;">
<p>Use the arrow keys on the keyboard to drive the turtlebot.</p>
<img border="0" src="keyboard-arrows.png" alt="keyboard arrows" width="300" height="206" />
</div>
</div>
</body>
</html>