-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
206 lines (206 loc) · 10.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="Web app demonstrating how nearby Bluetooth Low Energy devices that are advertising can be discovered from within a web browser, without the need for a native app!">
<link rel="stylesheet" href="style/bootstrap.min.css">
<link rel="stylesheet" href="style/reelyactive.css">
<title> reelyActive Web BLE Demo </title>
<!----- Structured, linked metadata (JSON-LD & Schema.org) ----->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "reelyActive Web BLE Demo",
"description": "Web app demonstrating how nearby Bluetooth Low Energy devices that are advertising can be discovered from within a web browser, without the need for a native app!",
"license": "https://opensource.org/licenses/MIT",
"isAccessibleForFree": true,
"applicationCategory": "Client-side",
"browserRequirements": "Requires a browser that supports Web Bluetooth and the experimental scanning feature.",
"image": "https://reelyactive.github.io/web-ble-demo/images/header.jpg",
"author": {
"@type": "Organization",
"url": "https://www.reelyactive.com"
}
}
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-reelyactive bg-reelyactive">
<a class="navbar-brand" href="https://www.reelyactive.com/">
<img src="images/reelyactive-logo-nav.png" width="165" height="30"
alt="reelyActive">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarItems" aria-controls="navbarItems"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarItems">
<!-- Left-aligned navigation items -->
<ul class="navbar-nav mr-auto"></ul>
<!-- Right-aligned navigation items -->
<ul class="navbar-nav">
<li class="nav-item">
<!-- Link to home -->
<a class="nav-link"
href="https://reelyactive.github.io/web-ble-demo/">
<i class="fas fa-home"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-question-circle"></i>
</a>
<!-- Info about tracking and open source software/licenses -->
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="navbarDropdown">
<a class="dropdown-item"
href="https://www.reelyactive.com/how-we-observe/#digital">
<i class="fas fa-mouse-pointer"></i>
Behaviour tracking free
<span class="badge badge-success">
<i class="fas fa-user-shield"></i>
</span>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" target="_blank"
href="https://getbootstrap.com" >
<i class="fab fa-bootstrap"></i>
Bootstrap 4
<span class="badge badge-light">
<i class="fab fa-osi"></i> MIT
</span>
</a>
<a class="dropdown-item" target="_blank"
href="https://fontawesome.com" >
<i class="fab fa-font-awesome"></i>
Font Awesome (Free)
<span class="badge badge-light">
<i class="fab fa-creative-commons"></i>
<i class="fab fa-osi"></i> MIT
</span>
</a>
<a class="dropdown-item" target="_blank"
href="https://jquery.com" >
<i class="fab fa-js"></i>
JQuery
<span class="badge badge-light">
<i class="fab fa-osi"></i> MIT
</span>
</a>
<a class="dropdown-item" target="_blank"
href="https://github.com/reelyactive/web-style-guide/" >
<i class="fas fa-code"></i>
Web Style Guide
<span class="badge badge-light">
<i class="fab fa-osi"></i> MIT
</span>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" target="_blank"
href="https://www.reelyactive.com/made-in-montreal/" >
<i class="fab fa-canadian-maple-leaf"></i>
Made in Montréal
<i class="fas fa-city"></i>
</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Content -->
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-12 col-md-10 col-lg-8 col-xl-6">
<h1 class="mt-4"> reelyActive Web BLE Demo </h1>
<p class="lead"> Scan for nearby advertising <i class="fab fa-bluetooth"></i> Bluetooth devices from the web browser </p>
<p class="text-center my-4">
<button type="button" class="btn btn-primary"
id="scanButton"> Scan </button>
<button type="button" class="btn btn-outline-dark"
id="stopButton" disabled> Stop </button>
</p>
<div class="alert alert-dark" role="alert" id="scanAlert" hidden>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-12 col-md-10 col-lg-8 col-xl-6 my-4">
<table class="table table-sm table-hover" id="devices">
<caption> List of detected devices in decreasing order of signal strength </caption>
<thead class="thead-reelyactive">
<tr class="text-center">
<th> <i class="fas fa-barcode"></i> transmitterId * </th>
<th> <i class="fas fa-signal"></i> rssi </th>
<th> <i class="fas fa-info-circle"></i> dec </th>
<th> <i class="fas fa-clock"></i> timestamp </th>
</tr>
</thead>
<tbody id="devicestbody">
</tbody>
</table>
<p><small class="text-muted"> * the transmitterID is not the 48-bit Bluetooth advertiser address but rather a <a href="https://webbluetoothcg.github.io/web-bluetooth/#bluetooth-device-identifiers" target="_blank">128-bit Identity Resolving Key</a>. </small></p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-12 col-md-10 col-lg-8 col-xl-6 my-4">
<h2> Prerequisites </h2>
<p class="lead"> Web Bluetooth Scanning is an experimental feature </p>
<p> The Web Bluetooth Scanning feature demonstrated here is available only in <em>specific</em> browsers under <em>specific</em> conditions, as to be expected given that: </p>
<blockquote class="blockquote mb-4">
<p class="mb-0"> [Web Bluetooth Scanning] is not a W3C Standard nor is it on the W3C Standards Track </p>
<footer class="blockquote-footer">04 11 19 <cite title="Web Bluetooth Scanning Draft Community Group Report"> Draft Community Group Report </cite> <a href="https://webbluetoothcg.github.io/web-bluetooth/scanning.html" target="_blank"><i class="fas fa-external-link-alt"></i></a></footer>
</blockquote>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="chrometab" data-toggle="tab"
href="#chromecontent" role="tab" aria-controls="chromecontent"
aria-selected="true"> <i class="fab fa-chrome"></i> Chrome </a>
</li>
<li class="nav-item">
<a class="nav-link" id="otherstab" data-toggle="tab"
href="#otherscontent" role="tab" aria-controls="otherscontent"
aria-selected="false"> Other Browsers </a>
</li>
</ul>
<div class="tab-content tab-content-reelyactive">
<div class="tab-pane fade show active" id="chromecontent"
role="tabpanel" aria-labelledby="chrometab">
<p> <i class="fab fa-chrome"></i> Chrome/Chromium version 79+ supports Web Bluetooth Scanning on <i class="fab fa-android"></i> Android and <i class="fas fa-laptop"></i> desktop. Check your version by browsing to: </p>
<p class="monospace"> chrome://version </p>
<p> The <em>Experimental Web Platform features</em> flag must be enabled for Web Bluetooth support. Enable this feature by browsing to: </p>
<p class="monospace"> chrome://flags/#enable-experimental-web-platform-features </p>
<img src="images/chrome-flags-web-bluetooth.png" class="img-fluid mx-auto d-block mb-2">
<p> Under this configuration, Web Bluetooth Scanning may nonetheless not function due to OS or hardware constraints. Verify the Bluetooth adapter status by browsing to: </p>
<p class="monospace"> chrome://bluetooth-internals/#adapter </p>
</div>
<div class="tab-pane fade" id="otherscontent" role="tabpanel"
aria-labelledby="otherstab">
<p> <i class="fab fa-chrome"></i> Chrome/Chromium is the only browser successfully tested to date. See the Web Bluetooth Community Group <a href="https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md" target="_blank">Implementation Status</a> for updates. </p>
<p> On the <i class="fab fa-opera"></i> Opera browser, if the functionality becomes available, it will likely be behind a flag: </p>
<p class="monospace"> opera://flags/#enable-web-bluetooth </p>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<a href="https://github.com/reelyactive/web-ble-demo"> web-ble-demo </a>
|
<a href="https://www.reelyactive.com"> © reelyActive 2016-2020 </a>
</footer>
<script defer src="js/solid.min.js"></script>
<script defer src="js/brands.min.js"></script>
<script defer src="js/fontawesome.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/webble.js"></script>
</body>
</html>