-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (181 loc) · 7.2 KB
/
index.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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<html>
<head>
<title>Kalman Filter Localization Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Kalman Filter Localization Demo</h1>
<div style="display: inline-block">
<div class="group">
<svg width="500" height="500" viewBox="-10 -10 20 20" style="border: 1px solid black">
<g transform="scale(1,-1)">
<rect id="robot" stroke="black" stroke-width="0.2" fill="none" />
<ellipse id="cov_est" stroke="blue" stroke-width="0.2" fill="none" />
<ellipse id="cov_landmark" stroke="green" stroke-width="0.2" fill="none" />
</g>
</svg>
</div>
<div class="group" style="width: 340px; margin-top: 0; margin-bottom: 0">
<p>The robot’s actual position is shown using a black square. You can move the robot by clicking any of the 8 arrow buttons in the Move / Odometry Update section.</p>
<p>The <span style="color: blue">blue</span> oval shape represents the Normal distributions for the estimate of the robot’s position. The center of the oval denotes the mean/most likely position of the distribution, the size of the oval denotes how large the (co)variances are (larger ovals mean larger variances), and the orientation of the oval shows whether the variance is more in the X direction, Y direction, or some diagonal.</p>
<p>If you click the Measure button, a similar <span style="color: green">green</span> oval is displayed to represent a measurement from the landmark sensor. Clicking Update will update the estimated position of the robot using that measurement (you will see the blue oval shrink as the variance is decreased by including the new information from the sensor).</p>
<p>For a more realistic simulation, try selecting the two “Add error” checkboxes, which will cause the sensor measurements to include some inaccuracy.</p>
</div>
</div>
<div style="display: inline-block">
<div class="group">
<h2>Move / Odometry Update</h2>
<div class="control_row">
<label class="control_label">Distance</label>
<input type="number" min="0" max="5" value="1" id="move_distance">
</div>
<div class="control_row">
<label class="control_label">Covariance<sub>per distance</sub></label>
<table class="matrix">
<tr>
<td>
<label>Along-track Variance</label><br>
<input type="number" min="0" max="1" value="0.02" step="0.01" id="move_var_track">
</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>
<label>Cross-track Variance</label><br>
<input type="number" min="0" max="1" value="0.005" step="0.005" id="move_var_cross">
</td>
</tr>
</table>
</div>
<div class="control_row">
<label class="control_label">Add error to movement</label>
<input type="checkbox" id="move_error">
</div>
<div class="control_row">
<label class="control_label">Move robot and update</label>
<table style="display: inline-block; vertical-align: middle">
<tr>
<td><button onclick="moveRobot([-1, 1])" class="move_button" title="Move Northeast">◸</button></td>
<td><button onclick="moveRobot([0, 1])" class="move_button" title="Move North">△</button></td>
<td><button onclick="moveRobot([1, 1])" class="move_button" title="Move Northwest">◹</button></td>
</tr>
<tr>
<td><button onclick="moveRobot([-1, 0])" class="move_button" title="Move West">◁</button></td>
<td></td>
<td><button onclick="moveRobot([1, 0])" class="move_button" title="Move East">▷</button></td>
</tr>
<tr>
<td><button onclick="moveRobot([-1, -1])" class="move_button" title="Move Southwest">◺</button></td>
<td><button onclick="moveRobot([0, -1])" class="move_button" title="Move South">▽</button></td>
<td><button onclick="moveRobot([1, -1])" class="move_button" title="Move Southeast">◿</button></td>
</tr>
</table>
</div>
<h2>Landmark Update</h2>
<div class="control_row">
<label class="control_label">Covariance<sub>sensor</sub></label>
<table class="matrix">
<tr>
<td>
<label>X Variance</label><br>
<input type="number" min="0" max="5" value="0.2" step="0.05" id="landmark_var_x">
</td>
<td>
<label>XY Covariance</label><br>
<input type="number" min="0" max="5" value="0.0" step="0.05" id="landmark_cov_xy">
</td>
</tr>
<tr>
<td>
<label>XY Covariance</label><br>
<output id="landmark_sym_cov_xy"></output>
</td>
<td>
<label>Y Variance</label><br>
<input type="number" min="0" max="5" value="0.2" step="0.05" id="landmark_var_y">
</td>
</tr>
</table>
</div>
<div class="control_row">
<label class="control_label">Add error to measurement</label>
<input type="checkbox" id="landmark_error">
</div>
<div class="control_row" id="landmark_measure_div">
<label class="control_label">Update using sensor</label>
<button onclick="landmarkMeasure()">Measure</button>
<button onclick="landmarkUpdate()" id="landmark_update">Update</button>
<div id="landmark_update_help">Click Update to update the position estimate with the measurement.</div>
</div>
</div>
<div class="group">
<h2>Result</h2>
<div class="control_row">
<label class="control_label">Reset position and estimate</label>
<button onclick="resetRobot()">Reset</button>
</div>
<div class="control_row">
<label class="control_label">Position<sub>actual</sub></label>
<table class="matrix">
<tr>
<td>
<label>X Position</label><br>
<output id="actual_pos_x"></output>
</td>
</tr>
<tr>
<td>
<label>Y Position</label><br>
<output id="actual_pos_y"></output>
</td>
</tr>
</table>
</div>
<div class="control_row">
<label class="control_label">Position<sub>estimate</sub></label>
<table class="matrix">
<tr>
<td>
<label>X Position</label><br>
<output id="est_pos_x"></output>
</td>
</tr>
<tr>
<td>
<label>Y Position</label><br>
<output id="est_pos_y"></output>
</td>
</tr>
</table>
</div>
<div class="control_row">
<label class="control_label">Covariance<sub>estimate</sub></label>
<table class="matrix">
<tr>
<td>
<label>X Variance</label><br>
<output id="est_pos_var_x"></output>
</td>
<td>
<label>XY Covariance</label><br>
<output id="est_pos_cov_xy"></output>
</td>
</tr>
<tr>
<td>
<label>XY Covariance</label><br>
<output id="est_pos_sym_cov_xy"></output>
</td>
<td>
<label>Y Variance</label><br>
<output id="est_pos_var_y"></output>
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>