-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
700 lines (650 loc) · 39.7 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
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>NTMY project page</title>
<!-- Icon -->
<link rel="shortcut icon" type="image/png" href="images/logo.png"/>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
<!-- Vis.js CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet">
<!-- Now UI CSS -->
<link href="assets/css/now-ui-kit.css?v=1.1.0" rel="stylesheet">
<!-- Own CSS -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body class="sidebar-collapse">
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent" color-on-scroll="0">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="#">
<img src="images/logo.png" class="small-logo"> NTMY
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#vision">Vision</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ami-ms">AmI steps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ami-f">AmI features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#goal">Goal</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#architecture">Architecture</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#components">Components</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#issues">Issues</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Team</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- CONTENT -->
<div class="wrapper">
<!-- JUMBOTRON -->
<div class="page-header clear-filter">
<div class="container">
<div class="content-center">
<img src="images/logo.png" class="big-logo">
<h1 class="title-main">Nice to meet you</h1>
<h4 class="title-sub">Your college events organizer</h4>
<a href="https://github.com/AmI-2018/NTMY-code">
<button class="btn btn-primary" id="github-cta">
<span class="social-icon" style="vertical-align: middle;"><i class="fab fa-github"></i></span>
<span style="vertical-align: middle;">Check out our work on Github!</span>
</button>
</a>
</div>
</div>
</div>
<!-- VIDEO -->
<div class="section" id="video">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 card embed-responsive embed-responsive-16by9">
<iframe width="auto" height="auto" src="https://www.youtube.com/embed/izPPzUvJ-Gs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!-- VISION -->
<div class="section" id="vision">
<div class="container">
<h1>Project vision</h1>
<p>
Imagine you are in a university residence, where you can meet a great amount of people. NTMY, giving you the opportunity to organise thematic events, will help you to meet new friends!
</p>
<p>
The user can interact with the system using a wearable and a smartphone. With the app you can create a new social event in the residence (like watching a football match together on TV or play a card game). The system will then set a specific location for the event (considering its type and the free rooms) and it will assign it a colour; the user’s wearable will turn that colour too (e.g. blue).
</p>
<p>
Whenever a new event is created, people in the residence with the same interests get a notification and, if they decide to take part to the blue event, their wearables will become blue as well. The lights in the reserved room will also become blue to indicate that the room will host the blue event, and in the main streets of the residence some indicators will light up in blue, in order to help the participants to easily find the event's location.
</p>
<p>
The system also acts according to the category of the meeting (e.g. TV event, music event, game event, discussion event), performing actions on the surrounding environment such as adjusting the lights, the video (TV) and the audio facilities of the room.
</p>
<p>
Then, when the user is at the event and greets someone, the system will recognise his action and register the personal information of all the people he met (such as name, photo, phone number, Facebook/Instagram, ...) on his mobile, so that at the end of the day he can remember them. No more forgotten names or time lost in exchanging phone numbers!
</p>
</div>
</div>
<!-- AMI MAIN STEPS -->
<div class="section" id="ami-ms">
<div class="container">
<h1>Ambient Intelligence main steps</h1>
<div class="row justify-content-around">
<div class="col-md-5 card">
<div class="card-header card-title text-center">
<i class="far fa-handshake ami-icon"></i>
<h2 class="ami-title">Sensing</h2>
</div>
<div class="card-body">
Each user wears a smartwatch, which is capable of exchanging personal information among people who meet during an event by transmitting and receiving some data from/to the nearby devices. The input for starting the communication is given by the handshake between two users.
</div>
</div>
<div class="col-md-5 card">
<div class="card-header card-title text-center">
<i class="far fa-question-circle ami-icon"></i>
<h2 class="ami-title">Reasoning</h2>
</div>
<div class="card-body">
When an user creates a new event, the system chooses the most suitable place available to host it according to the kind of event, and assigns it a colour. It is also able to determine how to correctly set the ambient characteristics such as lights, video and audio.
</div>
</div>
<div class="col-md-5 card">
<div class="card-header card-title text-center">
<i class="far fa-lightbulb ami-icon"></i>
<h2 class="ami-title">Acting</h2>
</div>
<div class="card-body">
Once the system has chosen the event's colour, it will adjust some lights in the selected place and some markers around the residence to match that colour. It can also set the TV program, the audio and the right illumination based on the kind of event.
</div>
</div>
<div class="col-md-5 card">
<div class="card-header card-title text-center">
<i class="fas fa-mobile-alt ami-icon"></i>
<h2 class="ami-title">Interacting</h2>
</div>
<div class="card-body">
The user can interact with the system with a mobile app, which lets him create new events, choose what information to share with the others and check the list of the new contacts he met at the events he has taken part in.
</div>
</div>
</div>
</div>
</div>
<!-- AMI FEATURES -->
<div id="ami-f" class="section text-center">
<div class="container">
<h1>Ambient Intelligence features</h1>
<p>NTMY is...</p>
<div class="row align-items-center justify-content-center feat-ml-0">
<div class="col-2">
<i class="far fa-handshake ami-icon-small"></i>
</div>
<div class="col-8 text-justify">
<p>...<strong>sensitive</strong>, because it will detect when you are shaking someone's hand.</p>
</div>
</div>
<div class="row align-items-center justify-content-center feat-ml-1">
<div class="col-2">
<i class="far fa-comments ami-icon-small"></i>
</div>
<div class="col-8 text-justify">
<p>...<strong>responsive</strong>, because it will suggest you the events that fit with your interests.</p>
</div>
</div>
<div class="row align-items-center justify-content-center feat-ml-2">
<div class="col-2">
<i class="fas fa-expand-arrows-alt ami-icon-small"></i>
</div>
<div class="col-8 text-justify">
<p>...<strong>adaptive</strong>, because it will adapt the environment according to the scheduled event.</p>
</div>
</div>
<div class="row align-items-center justify-content-center feat-ml-3">
<div class="col-2">
<i class="fas fa-eye-slash ami-icon-small"></i>
</div>
<div class="col-8 text-justify">
<p>...<strong>transparent</strong>, because the interaction is as natural as a handshake.</p>
</div>
</div>
<div class="row align-items-center justify-content-center feat-ml-4">
<div class="col-2">
<i class="fas fa-globe ami-icon-small"></i>
</div>
<div class="col-8 text-justify">
<p>...<strong>ubiquitous</strong>, because you can interact with it everywhere in order to find the way to your event.</p>
</div>
</div>
<div class="row align-items-center justify-content-center feat-ml-5">
<div class="col-2">
<i class="fas fa-cogs ami-icon-small"></i>
</div>
<div class="col-8 text-justify">
<p>...<strong>intelligent</strong>, because it will smartly allocate the available rooms according to the types of events.</p>
</div>
</div>
</div>
</div>
<!-- GOAL -->
<div id="goal" class="section">
<div class="container">
<h1>Project goal</h1>
<p>
The goal of the project is to build a system that can be used in university residences to smartly organize event in order to let people meet others with the same interests. For this purpose, it makes use of different kinds of electronic devices such as PCs, mini computers, smartphones and wearables, all of which contribute to solve different problems that can be experienced during the organization of an event.
</p>
<p>
The system can improve the management of the rooms in the residence, allocating events in order to maximize the number of participants and find the most suitable room for any kind of event. This process is carried on the central server, that will run an optimization algotithm and generate, for each day, the best events schedule to maximize a number of different target functions such as the number of participants.
</p>
<p>
Once the event has been scheduled, the system will also help in the phase of the room preparation. Every room will be equipped with a Raspberry computer that will interface with the central server and prepare the ambient in order to make it as enjoyable as possible. It will be able to intelligently control the lights, the TV and the audio systems according to the category of the event choosen and to the number of users taking part to it.
</p>
<p>
Smart panels will be put in the intersection of the residence, to help the participants to find their way to the events. Whenever an user passes near one of them, the system will identify his wearable (via Bluetooth) and indicate the right direction to reach the specific event room. The panel is controlled by a Raspberry computer, that will dinamically search for the direction making use of a shortest path algorithm on a graph representing the map of the residence.
</p>
<p>
Finally, the last problem our system aims to solve is related to the personal information that people share when they first meet, that are often not so easy to remember. In order not to spoil the simplicity of the interaction, our system makes use of an Android Wear smartwatch capable of recognizing the users when they handshake, informing the server that a connection has been made; users can then check the information on the people they met on their phone.
</p>
</div>
</div>
<!-- FEATURES -->
<div id="features" class="section">
<div class="container">
<h1>Features</h1>
<ul class="nav nav-tabs justify-content-center" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#feat-tab-1" role="tab">
<i class="far fa-lightbulb"></i> Room organization
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#feat-tab-2" role="tab">
<i class="fas fa-mobile-alt"></i> Smartphone app
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#feat-tab-3" role="tab">
<i class="far fa-handshake"></i> Wearable</a>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#feat-tab-4" role="tab">
<i class="fas fa-map-signs"></i> Smart road sign</a>
</a>
</li>
</ul>
<div class="row justify-content-center">
<div class="tab-content text-center col-md-10">
<div class="tab-pane active" id="feat-tab-1" role="tabpanel">
<table class="table table-sm table-feat">
<thead>
<tr>
<th>#</th>
<th>Priority</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>RO1</th>
<td>1</td>
<td>Smart allocation of the rooms to the events.</td>
</tr>
<tr>
<th>RO2</th>
<td>1</td>
<td>Adjustment of the color of the room's lights to indicate the booking of the room.</td>
</tr>
<tr>
<th>RO3</th>
<td>2</td>
<td>Setting of the TV program, if required by the event.</td>
</tr>
<tr>
<th>RO4</th>
<td>2</td>
<td>Music reproduction to fit the event's category.</td>
</tr>
<tr>
<th>RO5</th>
<td>3</td>
<td>Dynamic generation of video and audio playlist based on the tastes of the users in the room.</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="feat-tab-2" role="tabpanel">
<table class="table table-sm table-feat">
<thead>
<tr>
<th>#</th>
<th>Priority</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>SA1</th>
<td>1</td>
<td>Listing of all the scheduled events.</td>
</tr>
<tr>
<th>SA2</th>
<td>1</td>
<td>Visualization of all the data collected about the people the user met.</td>
</tr>
<tr>
<th>SA3</th>
<td>1</td>
<td>Creation of a new event.</td>
</tr>
<tr>
<th>SA4</th>
<td>1</td>
<td>Joining of an event.</td>
</tr>
<tr>
<th>SA5</th>
<td>3</td>
<td>Sending notifications about new events, according to the user's tastes.</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="feat-tab-3" role="tabpanel">
<table class="table table-sm table-feat">
<thead>
<tr>
<th>#</th>
<th>Priority</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>WR1</th>
<td>1</td>
<td>Setting of the watchface colour based on the event's colour.</td>
</tr>
<tr>
<th>WR2</th>
<td>1</td>
<td>Activation of the data transfer following an handshake.</td>
</tr>
<tr>
<th>WR3</th>
<td>2</td>
<td>Activation of the smart panels when in communication range.</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="feat-tab-4" role="tabpanel">
<table class="table table-sm table-feat">
<thead>
<tr>
<th>#</th>
<th>Priority</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>RS1</th>
<td>1</td>
<td>Detection of the presence of a user nearby.</td>
</tr>
<tr>
<th>RS2</th>
<td>1</td>
<td>Providing of the right direction to the user, lighting up its leds forming an arrow sign.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- ARCHITECTURE -->
<div id="architecture" class="section text-center">
<div class="container">
<h1>System architecture</h1>
<div class="row align-items-center justify-content-around">
<div class="col-md-7 card">
<div class="diagram"></div>
</div>
<div class="col-md-4 card">
<div class="arch-desc card-body" id="arch-content-server">
<h5 class="card-title">Central server</h5>
<p>
<strong>Hardware architecture: </strong> The central server will be implemented with a PC with access to the LAN of the residence. It will be used to store and retrieve the data for both the users and the events.
</p>
<p>
<strong>Software architecture: </strong> The central server will run a Python application which will smartly assigns rooms to each event, calculate the route from user's room to the one of the event and generate movie and music playlists according to the users partecipating in that event. It will expose an API that will be used both by the smartphones and the room clients based on Flask and SQLite as the database backend.
</p>
<p>
<strong>Network architecture: </strong> The central server will be reachable via LAN or WLAN in every room of the residence and will use a static IP address so that every device on the LAN will know how the URI to query to access the exposed APIs.
</p>
</div>
<div class="arch-desc card-body d-none" id="arch-content-room-client">
<h5 class="card-title">Room client</h5>
<p>
<strong>Hardware architecture: </strong> Every room will be managed by a Raspberry Pi client, with the role of controlling all the smart devices in the room, based on the information exchanged with the central server.
</p>
<p>
<strong>Software architecture: </strong> The room clients will run a Python application with the goal of adjusting lights, TV and audio to fit the category of the event and adapts the ambient characteristics dinamically. It will communicate with the server via the room API and will be able to control a number of different smart devices.
</p>
<p>
<strong>Network architecture: </strong> The room clients will be connected to the LAN via a wired or wireless connection (no need for static IP, rooms will have an unique identifier to be recognised by the server) and will use different protocols to control the smart devices around it.
</p>
</div>
<div class="arch-desc card-body d-none" id="arch-content-smartphone">
<h5 class="card-title">Smartphone</h5>
<p>
<strong>Hardware architecture: </strong> Any kind of Android device can be used to interface with the system via the app, provided that it has Bluetooth to connect to the wearable and WiFi to connect to the server.
</p>
<p>
<strong>Software architecture: </strong> The smartphone app will be based on Android API level 23 (Android 6.0) and will use the Android Bluetooth interface for point-to-point communications among devices. It will interface with the users API of the server and will provide events management functions (create/join) and show information about the people the users meet at the events.
</p>
<p>
<strong>Network architecture: </strong> The users' smartphones will use Bluetooth to communicate with their wearables and WiFi to access the server LAN. They will also use Bluetooth to exchange data among users following a handshake.
</p>
</div>
<div class="arch-desc card-body d-none" id="arch-content-wearable">
<h5 class="card-title">Wearable</h5>
<p>
<strong>Hardware architecture: </strong> Wearables will be Android Wear devices, used to recognise handshakes among the users and indicate the event the user is going to take part in.
</p>
<p>
<strong>Software architecture: </strong> The wearable application will be based on Android Wear 2.0 API and will coordinate with the smartphone app to show on the device information about the event (like the event's colour) and activate the data transmission recognising the handshake gesture.
</p>
<p>
<strong>Network architecture: </strong> The wearables will be connected via Bluetooth to the smartphones and will transparently (via the Wear API) use their WiFi connection if needed.
</p>
</div>
<div class="arch-desc card-body d-none" id="arch-content-sign-controller">
<h5 class="card-title">Sign controller</h5>
<p>
<strong>Hardware architecture: </strong> The Smart Road Signs will be managed by a Raspberry Pi board with a LED matrix connected to the GPIO pins.
</p>
<p>
<strong>Software architecture: </strong> The sign controller will run a Python application to interface with the server and take info on events' location, look for nearby users and control GPIO pins in order to light up the LEDs.
</p>
<p>
<strong>Network architecture: </strong> The sign controller will use a wireless link to communicate with the server and will use Bluetooth connection to identify the users nearby and provide him the correct direction.
</p>
</div>
<div class="arch-desc card-body d-none" id="arch-content-sign">
<h5 class="card-title">Smart sign</h5>
<p>
The smart sign will be implemented with 8 RGB LEDs, driven by the Raspberry board, that will form an arrow pointing the direction to the event when the user get close.
</p>
<p>
<a href="images/architecture/general_scheme_smart_panel.png">See the full schematic</a>
</p>
</div>
<div class="arch-desc card-body d-none" id="arch-content-lights">
<h5 class="card-title">Lights</h5>
<p>
We will make use of Philips Hue lights driven by the room clients to control the lighting of the rooms where the events will be held.
</p>
</div>
<div class="arch-desc card-body d-none" id="arch-content-tv">
<h5 class="card-title">Television</h5>
<p>
We will make use of a monitor driven by the room clients as a television system for the events that require this kind of facility.
</p>
</div>
<div class="arch-desc card-body d-none" id="arch-content-speakers">
<h5 class="card-title">Speakers</h5>
<p>
We will make use of a couple of stereo speakers, wired or wireless, driven by the room clients as an audio system for the events that require this kind of facility.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- COMPONENTS -->
<div id="components" class="section text-center">
<div class="container">
<h1>System components</h1>
<div class="row justify-content-around">
<div class="col-md-5 card">
<div class="card-header-img bg-hw"></div>
<div class="card-body">
<h2>Hardware components</h2>
<strong>Off-the-shelf</strong>
<ul class="list-unstyled">
<li>A PC</li>
<li>Some Raspberry Pis</li>
<li>Some Android smartphones</li>
<li>Some Android Wear smartwatches</li>
<li>Some Philips Hue bulbs</li>
<li>A monitor or TV</li>
<li>A couple of stereo speakers</li>
</ul>
<strong>Ad-hoc</strong>
<ul class="list-unstyled">
<li>Smart panels</li>
</ul>
</div>
</div>
<div class="col-md-5 card">
<div class="card-header-img bg-sw"></div>
<div class="card-body">
<h2>Software components</h2>
<strong>Python</strong>
<ul class="list-unstyled">
<li>Flask to build the server API</li>
<li>SQLAlchemy to manage the SQLite database</li>
<li>Requests to build the client software</li>
<li>Networkx to manage the routing scheme</li>
</ul>
<strong>Android</strong>
<ul class="list-unstyled">
<li>Android API Level 23 (6.0) for app design</li>
<li>Android Wear APIs for the wearable</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- ISSUES -->
<div id="issues" class="section text-center">
<div class="container">
<h1>Open issues</h1>
<p>
The following is a list of the open issues our project still needs to face:
</p>
<!-- when an issue is solved it will be set as disabled -->
<ul class="list-group">
<li class="list-group-item">
<del>choose the wearable to use, with all the needed sensors and technology for data transmission</del>
<br>
we chose to use Android Wear smartwatches for the wearable and the Bluetooth technology for data transmission
</li>
<li class="list-group-item">
<del>choose the kind of display for indicators and figure out how to connect them to the system</del>
<br>
we chose to use an ad-hoc made component based on a LED matrix and a Raspberry connected to the system via Bluetooth and WiFi
</li>
</ul>
</div>
</div>
<!-- TEAM -->
<div id="team" class="section text-center">
<div class="container">
<h1>NTMY team</h1>
<div class="row">
<div class="col-12 col-sm-6 col-md-3 text-center">
<div class="team-pic-container">
<img class="img-fluid rounded-circle img-raised team-pic" src="images/team/alessio_ciarcia.jpg" alt="" srcset="">
</div>
<h2>Alessio Ciarcià</h2>
<p>
ID 224705
<br>
SW developer
<br>
<a href="https://github.com/ac-zero"><i class="fab fa-github"></i> ac-zero</a>
<br>
<a href="mailto:[email protected]"><i class="fas fa-envelope"></i> [email protected]</a>
</p>
</div>
<div class="col-12 col-sm-6 col-md-3 text-center">
<div class="team-pic-container">
<img class="img-fluid rounded-circle img-raised team-pic" src="images/team/matteo_corain.jpg" alt="" srcset="">
</div>
<h2>Matteo Corain</h2>
<p>
ID 222981
<br>
SW developer
<br>
<a href="https://github.com/mattecora"><i class="fab fa-github"></i> mattecora</a>
<br>
<a href="mailto:[email protected]"><i class="fas fa-envelope"></i> [email protected]</a>
</p>
</div>
<div class="col-12 col-sm-6 col-md-3 text-center">
<div class="team-pic-container">
<img class="img-fluid rounded-circle img-raised team-pic" src="images/team/andrea_cossio.jpg" alt="" srcset="">
</div>
<h2>Andrea Cossio</h2>
<p>
ID 224221
<br>
SW developer
<br>
<a href="https://github.com/AndreaCossio"><i class="fab fa-github"></i> AndreaCossio</a>
<br>
<a href="mailto:[email protected]"><i class="fas fa-envelope"></i> [email protected]</a>
</p>
</div>
<div class="col-12 col-sm-6 col-md-3 text-center">
<div class="team-pic-container">
<img class="img-fluid rounded-circle img-raised team-pic" src="images/team/raffaele_tuzzo.jpg" alt="" srcset="">
</div>
<h2>Raffaele Tuzzo</h2>
<p>
ID 223261
<br>
HW developer
<br>
<a href="https://github.com/Raffot27"><i class="fab fa-github"></i> Raffot27</a>
<br>
<a href="mailto:[email protected]"><i class="fas fa-envelope"></i> [email protected]</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Now UI JS -->
<script src="assets/js/now-ui-kit.js" type="text/javascript"></script>
<!-- Rellax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.6.2/rellax.min.js"></script>
<script src="assets/js/jumbo_par.js"></script>
<!-- Vis.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<script src="assets/js/diagram.js"></script>
</body>
</html>