-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
557 lines (554 loc) · 25.3 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
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
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- PAGE settings -->
<link rel="icon" href="assets/images/web-icon.ico">
<title>Fitness Partner</title>
<meta name="description" content="Free Bootstrap 4 Pingendo Aquamarine template for unique events.">
<meta name="keywords" content="Pingendo conference event aquamarine free template bootstrap 4">
<!-- CSS dependencies -->
<link rel="stylesheet" href="aquamarine.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<!-- Script: Make my navbar transparent when the document is scrolled to top -->
<script src="js/navbar-ontop.js"></script>
<!-- Script: Animated entrance -->
<script src="js/animate-in.js"></script>
</head>
<body class="text-center">
<!-- Navbar -->
<nav class="navbar-expand-md navbar-dark fixed-top navbar bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#home">
<b class="">Fitness Partner</b>
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarPrimarySupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbarPrimarySupportedContent">
<ul class="navbar-nav">
<li class="nav-item text-lowercase text-primary mx-1">
<a class="nav-link text-capitalize active" href="#vision">Vision</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#ami-steps">AMI steps</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#architecture"> Architecture</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#technic-information">Technic information</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#team"> Team</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#open-issues">Open issues</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Home -->
<div class="d-flex align-items-center py-5 cover section-dark" style="background-image: url('assets/images/gym-background.jpg');" id="home">
<div class="container">
<div class="row">
<div class="col-lg-12 text-white mt-5">
<h1 class="display-2 d-none d-md-block">Fitness Partner</h1>
<h1 class="display-4 d-block d-md-none">Fitness Partner</h1>
<h1>Give you a better private gym enviroment.</h1>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 my-4">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tTAUzPp03Ic?autoplay=0" allowfullscreen="" width="800" height="600
600"> </iframe>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
<!-- Vision section -->
<div class="py-5 section-parallax bg-dark cover" id="vision">
<div class="container my-5 bg-dark p-4">
<div class="row mx-auto">
<div class="col-md-12">
<h3 class="display-3">Vision </h3>
<p class="text-justify lead py-3 my-1"> Nowadays indoor fitness becomes more normally around us. Through the long-term research and analysis. Scientist find that playing music while exercising can improve the result of fitness. It’s not only makes the speed of metabolism, burning
of fat faster but also exercise the endurance of the practitioner, improve self-confidence.
<br>By the way, different exercising should match up different music rhythm. Consider to people who have no enough time to go to the Gym after work or study, Fitness Partner (F.P.) creating a good atmosphere while you doing fitness at home. According
to the heart beats of user, the system can play the different music with suitable rhythm. All the music are divided to different kinds.
<br>At the same time, each kind of music provide suitable light around the space in order to make user feel more relaxed and enjoy the fitness. F.P. system provide the distinctive fitness experience different from the Gym in your private space.
It is suited for all the people who prefer to do fitness at home. </p>
</div>
</div>
</div>
</div>
<!-- AMI steps -->
<div class="py-5 section-dark bg-light cover" id="ami-steps">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="display-3 p-4" contenteditable="true">AMI Steps</h3>
</div>
</div>
<div class="row">
<div class="col-md-6 py-3">
<div class="row">
<div class="text-center col-4">
<i class="d-block fa fa-5x fa-eye m-3"></i>
</div>
<div class="col-8">
<h4 class="mb-3 text-primary">Sensing</h4>
<ul class="">
<li class="text-justify">Collecting the daily rest heartbeat rate of user by smart band.</li>
<li class="text-justify">Using heartbeat sensor to detect the real-time heartbeat while doing sport.</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 py-3">
<div class="row">
<div class="text-center col-4">
<i class="d-block fa fa-5x fa-map-o my-3"></i>
</div>
<div class="col-8">
<h4 class="mb-3 text-primary">Reasoning</h4>
<ul class="">
<li class="text-justify">Listening to music while doing sports improves the result of fitness. According to the heartbeat of user, F.P provide more suitable music during the exercising.</li>
<li class="text-justify">The color of lights changes with the heartbeat of user in order to help user know the state of exercise clearly, which create a good atmosphere during fitness.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 py-3">
<div class="row">
<div class="text-center col-4">
<i class="d-block fa fa-5x fa-exchange m-2"></i>
</div>
<div class="col-8">
<h4 class="mb-3 text-primary">Interacting </h4>
<ul class="">
<li class="text-justify">Provides the users a mobile application to manage the fitness.</li>
<li class="text-justify">Customize the enviroment variables for fitness, including the playing list and the light color for different heartbeat range. </li>
<li class="text-justify">Show real-time heartbeat rate of user on the smart phone. </li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 py-3">
<div class="row">
<div class="text-center col-4">
<i class="d-block fa fa-5x fa-bolt m-2"></i>
</div>
<div class="col-8">
<h4 class="mb-3 text-primary">Acting</h4>
<ul class="">
<li class="text-justify">Change or pause the music as user wish during the current section of excersicing by using the android applicaion.</li>
<li class="text-justify"> Remind user time up of warm up excercise by turning on LEDs.</li>
<li class="text-justify">Auto-change suitable music and colors of LED according to the real-time heartbeat rate of the user in different range.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Features -->
<div class="py-5 bg-info cover" id="features">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h1 class="mb-4 text-muted my-5 py-4">AMI Features</h1>
<div class="row text-left mt-5">
<div class="col-md-6 my-3">
<div class="row mb-3">
<div class="text-center col-2">
<i class="d-block mx-auto fa fa-3x fa-fighter-jet"></i>
</div>
<div class="align-self-center col-10">
<h4 class="text-muted mx-2">
<b>Sensitive</b>
</h4>
</div>
</div>
<h5 class="text-justify">The system can sense the daily rest heart beat rate of user before fitness and real-time heartbeat rate during the fitness.</h5>
</div>
<div class="col-md-6 my-3">
<div class="row mb-3">
<div class="text-center col-2">
<i class="d-block mx-auto fa fa-3x fa-check"></i>
</div>
<div class="align-self-center col-10">
<h4 class="text-muted px-2">
<b>Responsive</b>
</h4>
</div>
</div>
<h5 class="text-justify">The system will change the music and lights' color by detecting users' heartbeat rate in real time.</h5>
</div>
</div>
<div class="row text-left py-2">
<div class="col-md-6 my-3 ">
<div class="row mb-3">
<div class="text-center col-2">
<i class="d-block mx-auto fa fa-3x fa-cloud"></i>
</div>
<div class="align-self-center col-10">
<h4 class="text-muted px-2">
<b>Transparent</b>
</h4>
</div>
</div>
<h5 class="text-justify">It can an be easily installed in any private gym.</h5>
</div>
<div class="col-md-6 my-3">
<div class="row mb-3">
<div class="text-center col-2">
<i class="d-block mx-auto fa fa-3x fa-tasks"></i>
</div>
<div class="align-self-center col-10">
<h4 class="text-muted px-2">
<b>Adaptive</b>
</h4>
</div>
</div>
<h5 class="text-justify">People who prefer to do fitness in a private space and improve the feeling during the fitness. It only works for one user privately at the same time.</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Architecture -->
<div class="py-4" id="architecture">
<div class="container">
<div class="row">
<div class="col-md-12 my-4">
<h1 class="text-left text-secondary m-3">System Architecture </h1>
<div class="row">
<div class="col-md-12">
<img class="img-fluid d-block my-4" src="assets/images/System Archtecture.png"> </div>
</div>
<h1 class="text-left text-secondary py-3 my-3">Hardware architecture</h1>
<ul class="">
<li class="text-justify">
<b class="text-uppercase">Computational nodes: </b>
<br>
<br>
<em>
<b>Server:</b>
</em> Data analyzing, database storage and server program hosting. Controlling rooms lights, music playing and Raspberry Pi.
<br>
<br>
<i>
<b>Raspberry Pi:</b> </i>It controls the heart beat sensor, calculating the heart beat rate data and send it to the server.
<br> </li>
<li class="text-justify">
<b class="text-uppercase">Devices:</b>
<br>
<br>
<i>
<b>Heartbeat sensor:</b>
</i> Gathering the user heart beat rate data and transfer it into voltage signals.
<br>
<br>
<i>
<b>Smart band:</b>
</i> It records user’s daily heart beat rate and send them to the cloud server for further analyzing.
<br>
<br>
<i>
<b>Room LEDs: </b>
</i>They indicate the user’s exercising state (Heavy or light), they change into the suitable color range defined by the user when the user’s heart beat rate rises or falls.
<br>
<br>
<i>
<b>Speaker:</b>
</i> Playing suitable music. It will change into suitable rhythm by different level (high or low) of users’ heartbeat rate.
<br>
<br> </li>
<li class="text-justify">
<b class="text-uppercase">User Interface Device:</b>
<br>
<br>
<i>
<b>Smart Phones:</b>
</i> It runs an android application; this program will show the users needed information and allowed user to change the system’s device state. </li>
</ul>
<h1 class="text-left text-secondary py-3">Software architecture</h1>
<ul class="">
<li class="text-justify">
<b>Python Server:</b>
<br>
<br>The python server is the computational center of the system, it runs on the Server. It is built by five software modules:
<br>
<br>
<i>
<b>Database: </b>
</i>Storage the music location for different BPM.
<br>
<br>
<i>
<b>Logic:</b>
</i> Strategies to change light color and music rhythm.
<br>
<br>
<i>
<b>Network Interface: </b>
</i>To communicate with Android App, Raspberry, Phillipe Hue light and Fitbit cloud server.
<br>
<br>
<i>
<b>Music module:</b>
</i> Provide the music playing function.
<br>
<br>
<i>
<b>Task manger:</b>
</i> To perform corresponding action by receiving the command from Android Application.
<br>
<br> </li>
<li class="text-justify">
<b>Android App:</b>
<br>
<br>
<i>
<b>User interface:</b>
</i> It allows user to initialize necessary data for the sever or reset it. Showing the playing music names and real-time heart beat rate. User can also turn on/off the lights, change the lights color for different sporting range and Pause/Resume
Playing/Change the playing music.
<br>
<br> </li>
<li class="text-justify">
<b>Raspberry Pi Software:</b>
<br>
<br>It analyzes and converting the voltage signal into heartbeat rate represented by digitals, connect to the Python server by LAN. </li>
</ul>
<h1 class="text-left text-secondary py-4">Network architecture</h1>
<img class="img-fluid d-block my-4" src="assets/images/Network Architecture.png"> </div>
</div>
</div>
</div>
<!-- Techinic information -->
<div class="bg-secondary py-4" id="technic-information">
<div class="container">
<div class="row">
<div class="col-md-12 my-2">
<div class="row">
<div class="col-md-12 my-4">
<h1 contenteditable="true" class="my-5">Purpose and scope </h1>
<p class="text-justify p-1">The Purpose of our system is to improve the result of indoor fitness ( improving speed of metabolism, burning of fat faster ) by creating a good atmosphere using suitable music and light.
<br>
<br>First of all, the system collects the user's rest heartbeat rate of the last one week from cloud server to get a more accurate heartbeat range data.
<br>
<br>When user begins to do warm-up sport, the system begins to play the random music in warm-up heartbeat rate range. At the same time, the system begins counting down through the time set by the user. It will inform user by turning on the
LEDs when the warm-up time is over.
<br>
<br>After starting the formal fitness, once a song is ending, the system will choose the most suitable next music by analyzing the heartbeat data in the pervious period. The color of LEDs has 3 ranges which stands for 3 kinds of excerising
(anaerobic exercise, aerobic exercise, reaching maximum heartbeat rate state). The lights' color will change automatically with the purpose of making users know about their sate of exercise directly. This will create a good atmosphere
during fitness. LED color and music playing state can also be modified by user at any time.
<br>
<br>Finally system can be turned off at the end of fitness and all associated device will automatically turn off.</p>
<h1 class="my-5">Project features </h1>
<table class="table" style="color:white;">
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th> Priority</th>
</tr>
</thead>
<tbody>
<tr> </tr>
<tr>
<td>1</td>
<td class="text-justify">App interface can display heartbeat rate, playing music name, rest time of warm up sport and duration of doing exercise.</td>
<td>1</td>
</tr>
<tr>
<td> 2</td>
<td class="text-justify">Initialize server by entering necessary message (Age, rest heartbeat rate).</td>
<td>1</td>
</tr>
<tr>
<td> 3</td>
<td class="text-justify">Play, pause and change the music when needed.</td>
<td>1</td>
</tr>
<tr>
<td> 4</td>
<td class="text-justify">Modify LED colors for three different sport states (anaerobic exercise, aerobic exercise, maximum heartbeat rate state).</td>
<td>1</td>
</tr>
<tr>
<td> 5</td>
<td class="text-justify">Switch on/off LED during fitness.
<br> </td>
<td>2</td>
</tr>
<tr>
<td>6</td>
<td class="text-justify">Turn on/off demo mode. </td>
<td>2</td>
</tr>
<tr>
<td> 7</td>
<td class="text-justify">Every time before doing sports, update rest heartbeat rate from the Fitbit cloud server. </td>
<td>2</td>
</tr>
<tr>
<td> 8</td>
<td class="text-justify">Define the warm-up exercise time and rest time during each group of anaerobic exercise. </td>
<td>1</td>
</tr>
<tr>
<td> 9</td>
<td class="text-justify">Define the Fitbit account for synchronizing rest heartbeat data from cloud server. </td>
<td>2</td>
</tr>
<tr>
<td> 10</td>
<td class="text-justify">Update music database when adding new music into corresponding folders. </td>
<td>2</td>
</tr>
<tr>
<td> 11</td>
<td class="text-justify">Playing suitable music according to the heartbeat rate. </td>
<td>1</td>
</tr>
<tr>
<td> 12</td>
<td class="text-justify">Control the colors of LED to inform user the state of exercise. </td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
<h1 class="my-3">Hardware Components</h1>
<ol class="p-4">
<li class="my-1 text-left">Computer: MACHENIKE F117 (OTS)</li>
<li class="my-1 text-left">Andriod smartphone: XIAOMI MIX 2 (OTS)</li>
<li class="my-1 text-left">LED: Philips Hue</li>
<li class="my-1 text-left">Smart band: Fitbit Charge HR</li>
<li class="my-1 text-left">Raspberry Pi 3</li>
<li class="my-1 text-left">Heartbeat sensor</li>
<li class="my-1 text-left">Speaker: laptop built-in speaker (OTS)</li>
</ol>
<h1 class="my-3">Software Components</h1>
<ol class="py-4">
<li class="my-1 text-left">Python: v3.6</li>
<li class="my-1 text-left">MariaDB: v10.3</li>
<li class="my-1 text-left">Android OS: API level 27</li>
<li class="my-1 text-left">Raspbian Stretch: v4.1</li>
</ol>
</div>
</div>
</div>
</div>
<!-- Team -->
<div class="bg-info py-5" id="team">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1 class="my-4">Team</h1>
</div>
</div>
<div class="row">
<div class="col-6 col-lg-4 animate-in-left col-4 my-3">
<img src="assets/images/Member-1.jpg" class="center-block img-fluid rounded-circle my-2" width="300">
<h3 class="mb-0 py-2">
<b>WU TIANJIAN</b>
</h3>
<p contenteditable="true">[email protected]</p>
<div class="row">
<div class="col-md-12">
<a target="_blank" href="https://github.com/wuskyjian" title="GitHub">
<i class="fa fa-3x fa-github text-light"></i>
</a>
</div>
</div>
<p class="text-muted p-1">Programmer and S/W developer</p>
</div>
<div class="col-6 col-lg-4 my-3">
<img src="assets/images/Member-2.jpg" class="center-block img-fluid rounded-circle my-2" width="300">
<h3 class="mb-0 py-2">
<b>FENG SHENGJIE</b>
</h3>
<p>[email protected]</p>
<div class="row">
<div class="col-md-12">
<a target="_blank" href="https://github.com/SHENGJIEFENG" title="GitHub">
<i class="fa fa-3x fa-github text-light"></i>
</a>
</div>
</div>
<p class="text-muted p-1">Programmer and S/W developer</p>
</div>
<div class="col-6 col-lg-4 my-3 animate-in-right">
<img src="assets/images/Member-3.jpg" class="center-block img-fluid rounded-circle my-2" width="300">
<h3 class="mb-0 py-2">
<b>JIA ZIRUI</b>
</h3>
<p> [email protected]</p>
<div class="row">
<div class="col-md-12">
<a target="_blank" href="https://github.com/jiazirui" title="GitHub">
<i class="fa fa-3x fa-github text-light"></i>
</a>
</div>
</div>
<p class="text-muted p-1">H/W designer and Physical designer</p>
</div>
</div>
</div>
</div>
<!--Open issues -->
<div class="section-aquamarine section-dark py-5" id="open-issues">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-left m-2">Open issues</h1>
<ul class="">
<li class="text-left my-2">
<s>The strategies for computers to act when the user's heartbeat ratio changes. </s>
</li>
<li class="text-left my-2">
<s>Need to learn the API to communicate with the LEDS. </s>
</li>
<li class="text-left my-2">
<s>Develop the application for smartphone to interaction. </s>
</li>
<li class="text-left my-2">Heartbeat sensor is not very stable. ( May caused by bad contact. )</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="text-md-left text-center p-4 bg-dark text-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-muted">Build by WU TIANJIAN, FENG SHENGJIE. </p>
</div>
</div>
</div>
</footer>
<!-- JavaScript dependencies -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Script: Smooth scrolling between anchors in a same page -->
<script src="js/smooth-scroll.js"></script>
</body>
</html>