-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhowItWorks.html
More file actions
407 lines (364 loc) · 17.7 KB
/
howItWorks.html
File metadata and controls
407 lines (364 loc) · 17.7 KB
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- mobile metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- site metas -->
<title>O.L.I. - How it works</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<!-- fevicon -->
<link rel="icon" href="images/logo.png" type="image/gif" />
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- style css -->
<link rel="stylesheet" href="css/style.css">
<!-- Responsive-->
<link rel="stylesheet" href="css/responsive.css">
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
<!-- Tweaks for older IEs-->
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css" media="screen">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<!-- body -->
<body class="main-layout contineer_page">
<!-- loader -->
<div class="loader_bg">
<div class="loader"><img src="images/loading.gif" alt="#" /></div>
</div>
<!-- end loader -->
<!-- header -->
<header>
<!-- header inner -->
<div class="header">
<div class="container">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col logo_section">
<div class="full">
<div class="center-desk">
<div class="logo clickable" data-toggle="tooltip" data-placement="right" data-html="true" title="<em>Back to Home</em>">
<a href="index.html"><img src="images/logo.png" alt="#" /></a>
</div>
</div>
</div>
</div>
<div class="col-xl-10 col-lg-10 col-md-10 col-sm-9">
<div class="menu-area">
<div class="limit-box">
<nav class="main-menu ">
<ul class="menu-area-main">
<li> <a href="budget.html">Budget</a> </li>
<li> <a href="system.html">System</a> </li>
<li> <a href="howItWorks.html">How it works</a> </li>
<li> <a href="eval.html">Evaluation</a> </li>
<li> <a href="team.html">Team</a></li>
<li> <a href="documentation.html">Documentation</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end header inner -->
<!-- end header -->
</header>
<div class="backgro_mh">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="heding">
<h2>How it works</h2>
</div>
</div>
</div>
</div>
</div>
<!-- upcoming -->
<div class="upcoming">
<div class="container-fluid padding_left3">
<div class="row display_boxflex">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="text-left">
<div class="titlepage">
<h2 style="padding-bottom: 30px;">App</h2>
<p class="text-left">The front-end of the app was built using Flutter. Flutter is programmed in Dart, which is a lightweight programming
language. Flutter also allows for modularisation of code, making it incredibly easy to divide tasks
and maintain code.
</p>
<p class="text-left">The backend of the app consists of a Flask server that hosts our machine learning model. The Flask API created converts the
raw sensor readings into the feature vector and feeds it into the trained model. Flask API, in the real product, will be deployed on the robot in this way to avoid the unexpected latency
or even loss of connection if the flask server is deployed by cloud service, and this dose not require connection
to the Internet, since both smartphone and robot are able to communicate within the LAN (considering the most
of home environment has WiFi).</p>
<p class="text-left">
The fall detection is be treated as a binary classification (fall/normal behaviors) problem in our implementation.
We take the public dataset MobiAct (2nd release) as our training set. For the feature engineering, we looked into the previous related researches, and finally decided to take 19 features in total (see the details on
<a style="font-weight:bold; background-color:rgba(0,0,0,0); color: #2596be; float:none; border:none; padding:0; margin:0; text-decoration: none; width:auto;"
href ="https://github.com/SDP-Group-1/fall_detection" target="_blank">GitHub</a>).
We compared the performance including the size of the model, runtime and F1-score on different classifiers. We take F1-score rather than commonly used accuracy as main metric is because the dataset is very imbalanced.
You can see the final evaluation of the classifier on
<a style="font-weight:bold; color: #2596be;background-color:rgba(0,0,0,0); float:none; border:none; padding:0; margin:0; text-decoration: none; width:auto;"
href ="eval.html" target="_blank">Evaluation</a>.
</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<figure>
<img src="images/MicrosoftTeams-image PP.png">
<figcaption style="text-align: center;">Home screen of the O.L.I. app</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="upcomimg align-items-center justify-content-center">
<div class = "row">
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 p-4">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay muted loop controls>
<source src="images/bandicam 2021-03-28 22-22-40-573 (1).mp4" type="video/mp4">
</video>
</div>
</div>
<div class ="col-xl-3 col-lg-3 col-md-3 col-sm-8 p-4">
A small demo of the app detecting a fall. The white window on the left shows an editor
with a debug console which shows the
behaviour of the app behind the scene. The terminal window in the middle shows the Flask
server running. When it receives data, runs it through the classifier and returns it to
the app, the results are logged in this window. The right window is the app running on a
smartphone, which is mirrored on the laptop for convenience.
</div>
</div>
</div>
<!-- end upcoming -->
<div class = "container-fluid p-5" style="background-color: aliceblue;">
<div class = "row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="titlepage">
<h2>Hardware design</h2>
<p class="text-left">The custom designed external frame surrounding O.L.I. is built to include 2 crucial features -
the dynamic support bar which operates via a threaded screw lift system, and the support feet
which operate by deploying linear actuators for stability. The components highlighted in orange
are those which make contact, either with the user or with the ground.
Components numbered 1, 2, 3, and 6 are all 3D printed, since their function is that of holding other
components together and providing a minimal amount of support. The rest of the visible frame is
comprised of metal components or electronic parts (namely, linear actuators).
</p><p class="text-left">
Some issues were faced along the way in terms of getting the design to function correctly and
reliably. Initially, the support bar was raised and lowered using a motor connected to a
pseudo-gearbox, and was also prototyped with a pulley system. The problem with both of these
methods is that although the bar was able to move as intended on its own, a very small amount
of external pressure would cause the bar to drift down or in some cases, collapse. Raising and
lowering the bar with a threaded system has mitigated this issue leading to a much stronger base
for the primary contact component of O.L.I.'s frame.
</p><p class="text-left">
Much of the design stayed the same, and has proven to be resilient under various stress tests.</p>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<img src="images/oliExplRender.png">
</div>
</div>
</div>
</div>
<div class="container-fluid p-3" style="background-color: rgb(242, 232, 234);">
<div class="row display_boxflex">
<div class="col-xl-5 col-lg-5 col-md-5 col-sm-12">
<div class="box_text">
<div class="titlepage">
<h2>Navigation</h2>
</div>
<p>O.L.I. starts its movement from a random position in an unknown environment and builds the occupancy grid by keeping track of its own position relative to the built map. <br>We have used SLAM (simultaneous localization and mapping) for this feature and a LDS-O1 LiDAR. </p>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 border_right p-3">
<div class="upcomimg">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay muted loop>
<source src="images/Occupancy_Grid_Building_Trim.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid p-5" style="background-color: rgb(242, 232, 234);">
<div class="row display_boxflex">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="about-box">
<figure><img src="images/drawdiff2.png" alt="#" /></figure>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="about-box">
<h2>Movement</h2>
<p>The straight-line movement done by setting the velocity of the motor of the wheels to positive values.</p>
<p>The rotating movement is done by varying the relative rate of rotation of the robot’s wheels.
This is possible because the TurtleBot3 is a differential wheeled robot (based on two separately
driven wheels placed on either side of the robot body). We get the current location and rotation
of the robot then compute an angle and make O.L.I. rotate using that angle in order to face the target point.
</p>
</div>
</div>
</div>
</div>
<!-- end of straight line movement -->
<div class="container-fluid p-5" style="background-color: rgb(242, 232, 234);">
<div class="row display_boxflex">
<div class="col-xl-5 col-lg-5 col-md-5 col-sm-12">
<div>
<div>
<h2>Route Planning </h2>
<p>A route-planning feature has been designed using the previously built occupancy grid, and two given points (start and end) in the form of coordinates. The robot's controller can then plan a route that avoids collisions. The algorithm used is rapidly exploring random tree (RTT). In the images below, you can see some examples with visible tree structure (the red dot represents the starting point while the pink dot represents the target destination):</p>
</div>
</div>
</div>
<div class="col-xl-7 col-lg-7 col-md-7 col-sm-12 border_right">
<div class="upcomimg">
<figure> <img src= "images/Navi.png" width="2046" height="3353"/> </figure>
</div>
</div>
</div>
</div>
<div id="upcoming" class="upcoming" style="background-color: rgb(242, 232, 234);">
<div class="container-fluid padding_left3">
<div class="row display_boxflex">
<div class="col-xl-7 col-lg-7 col-md-7 col-sm-12 pb-5 border_right" >
<div class="upcomimg">
<div class = "embed-responsive embed-responsive-16by9">
<video width="1028" height="802" autoplay muted loop>
<source src="images/slam algorithm.mov" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-5 col-md-5 col-sm-12">
<div>
<div>
<h2>LIDAR</h2>
</div>
<p>We use a LIDAR sensor (LDS-01) to build the occupancy grid. We selected this LiDAR because its features (3.5 meters range and 360 field of view) are suitable for indoor environment mappings. </p>
</div>
</div>
</div>
</div>
</div>
<div id="gallery m-0" class="Gallery">
<div class="container ">
<div class="row display_boxflex">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<div class="titlepage text-center">
<h2>What would this look like in real life? </h2>
<h3>Since we don't have access to any real hardware, we've created a simulation of O.L.I. in a potential user's home.</h3>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<div class="upcomimg">
<div class ="embed-responsive embed-responsive-16by9">
<video autoplay muted loop controls>
<source src="images/Route Following.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "about">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<div >
<h2 style="color: black">
Want to contribute?
</h2>
<p style="color:black">Our codebase is present on our GitHub organisation, which you can access
<a style="font-weight:bold; color: #2596be;background-color:rgba(0,0,0,0); float:none; border:none; padding:0; margin:0; text-decoration: none; width:auto;" href = "https://github.com/SDP-Group-1" target="_blank">here.</a> We appreciate all
contributions, so if you feel like you would like to contribute, open a pull request and assign
one of the <a style="font-weight:bold; color: #2596be;background-color:rgba(0,0,0,0); float:none; border:none; padding:0; margin:0; text-decoration: none; width:auto;"
href = "team.html">team members</a> to request a review. </p>
</div>
</div>
</div>
<!-- end Gallery -->
<!-- footer -->
<footr>
<div class="footer ">
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="contact_bg">
<div class="row">
<div class="col-md-12">
<div class="titlepage">
<h2>Contact us</h2>
</div>
<div class="col-md-12">
<input class="contactus" placeholder="Your Name" type="text" name="Your Name">
</div>
<div class="col-md-12">
<input class="contactus" placeholder="Your Email" type="text" name="Your Email">
</div>
<div class="col-md-12">
<input class="contactus" placeholder="Your Phone" type="text" name="Your Phone">
</div>
<div class="col-md-12">
<textarea class="textarea" placeholder="Message" type="text" name="Message"></textarea>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<button class="send">Send</button>
</div>
</div>
</div>
</form>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
<div class="address">
<ul class="loca">
<li>
<a href="#"><img src="icon/loc.png" alt="#" /></a>University of Edinburgh
</li>
<li>
<a href="#"><img src="icon/email.png" alt="#" /></a>group1@ed.ac.uk
</li>
</ul>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="copyright">
<p>© 2021 SDP Group 1 - O.L.I</p>
</div>
</div>
</div>
</footr>
<!-- end footer -->
<!-- Javascript files-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/plugin.js"></script>
<!-- sidebar -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
</body>
</html>