forked from strands-project/strands_webtools
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnavigation.html
144 lines (123 loc) · 4.04 KB
/
navigation.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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<!-- The default styling is provided by http://getbootstrap.com -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<!-- EventEmitter2 is the sole dependency of roslibjs -->
<script src="roslibjs/include/EventEmitter2/eventemitter2.js"></script>
<!-- Roslibjs handles core ROS functionality in the browser -->
<script src="roslibjs/build/roslib.js"></script>
<!-- ROS2DJS -->
<!-- EaselJS is a dependency of ros2djs -->
<script src="ros2djs/include/EaselJS/easeljs.js"></script>
<!-- Ros2djs provides 2D scene support, including mapping and more -->
<script src="ros2djs/build/ros2d.js"></script>
<!-- <script src="js/nav2d.min.js"></script> -->
<!-- <script src="js/strands_nav2d.js"></script> -->
<script src="nav2djs/build/nav2d.js"></script>
<script type="text/javascript">
var hostname = location.hostname;
/**
* Setup all GUI elements when the page is loaded.
*/
function init() {
// Connect to ROS.
// Connecting to ROS.
var ros = new ROSLIB.Ros({
url : 'ws://'+hostname+':9090'
});
// Create the main viewer.
var viewer = new ROS2D.Viewer({
divID : 'nav',
width : window.innerWidth/2,
height : window.innerHeight
});
// Subscribes to the robot's OccupancyGrid, which is ROS representation of
// the map, and renders the map in the scene.
//var gridClient = new ROS2D.OccupancyGridClient({
// ros : ros,
// rootObject : viewer.scene
//});
// Setup the nav client.
var gridClient = NAV2D.OccupancyGridClientNav({
ros : ros,
rootObject : viewer.scene,
viewer : viewer,
serverName : '/move_base',
withOrientation : true
});
var xDelta = 0;
var yDelta = 0;
// move view using keyboard
// sets up a key listener on the page used for keyboard teleoperation
var handleKey = function(keyCode, keyDown) {
// used to check for changes in speed
var shiftAmout = 0.5;
// check which key was pressed
if (keyDown === true) {
switch (keyCode) {
case 65:
// turn left
viewer.shift(shiftAmout,0);
xDelta -= shiftAmout;
break;
case 87:
// up
viewer.shift(0,-shiftAmout);
yDelta += shiftAmout;
break;
case 68:
// turn right
viewer.shift(-shiftAmout,0);
xDelta += shiftAmout;
break;
case 83:
// down
viewer.shift(0,shiftAmout);
yDelta -= shiftAmout;
break;
case 79:
// recentre
viewer.shift(xDelta,yDelta);
xDelta = 0;
yDelta = 0;
break;
}
}
};
// handle the key
var body = document.getElementsByTagName('body')[0];
body.addEventListener('keydown', function(e) {
handleKey(e.keyCode, true);
}, false);
body.addEventListener('keyup', function(e) {
handleKey(e.keyCode, false);
}, false);
}
</script>
</head>
<body onload="init()">
<div class="navbar navbar-inverse navbar-fixed-top">
<a class="navbar-brand" href="#">strands_webtools</a>
<ul class="nav pull-right">
<li><a href="main.html">Main</a></li>
<li class="active"><a href="navigation.html">Autonomous</a></li>
</ul>
</div>
<div class="container">
<h1>Map for autonomous Navigation</h1>
<ul>
<li><strong>w/s</strong> to move map up and down</li>
<li><strong>a/d</strong> to move map left and right</li>
<li><strong>o</strong> to reset map to original position</li>
</ul>
<div id="nav"></div> click mouse left button in the map, hold it down to
point into a direction and release it to send the robot
</div>
</body>
</html>