-
Notifications
You must be signed in to change notification settings - Fork 0
/
drone_browser_teleop.html~
69 lines (55 loc) · 1.89 KB
/
drone_browser_teleop.html~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
<head>
<title>Drone control via rosbridge</title>
</head>
<body>
<script type="text/javascript" src="ros.js"></script>
<script type="text/javascript">
// This is the turtle to connect to
var con = new Bridge("ws://localhost:9090");
// send velocity command to the robot
function takeoff() {
con.publish('/ardrone/takeoff', { });
}
function land() {
con.publish('/ardrone/land', { });
}
function start_moving(keycode) {
console.log("Starting to move, keycode: " + keycode);
if (keycode == 38) {
// Forward
con.publish('/cmd_vel', {"linear":{"x":1.0,"y":0,"z":0},"angular":{"x":0,"y":0,"z":0}});
} else if (keycode == 40) {
// Backward
con.publish('/cmd_vel', {"linear":{"x":-1.0,"y":0,"z":0},"angular":{"x":0,"y":0,"z":0}});
} else if (keycode == 39) {
// Left
con.publish('/cmd_vel', {"linear":{"x":0,"y":0,"z":0},"angular":{"x":0,"y":0,"z":-1.0}});
} else if (keycode == 37) {
// Right
con.publish('/cmd_vel', {"linear":{"x":0,"y":0,"z":0},"angular":{"x":0,"y":0,"z":1.0}});
} else if (keycode == 13) {
takeoff();
} else if (keycode == 32) {
land();
}
}
function stop_moving(keycode) {
console.log("ELECTRIC Done moving, keycode: " + keycode);
if (keycode >= 37 && keycode <= 40) {
con.publish('/cmd_vel', {"linear":{"x":0,"y":0,"z":0},"angular":{"x":0,"y":0,"z":0}});
}
}
function main() {
document.addEventListener('keydown', function(e) {start_moving(e.keyCode); }, true);
document.addEventListener('keyup', function(e) {stop_moving(e.keyCode); }, true);
}
main();
</script>
<h1>Drone controller</h1>
Drive your drone by pressing the arrow keys. Take off with the enter key. Land with the space key.
<p>
<img src="http://localhost:8080/stream?topic=/ardrone/image_raw?width=800?height=600">
<p>
</body>
</html>