webbluetooth-examples/scanner.html at master · dougt/webbluetooth-examples · GitHub

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
<html>
<style>

#device p { display: inline }

.device { border-style: dotted;
          border-width: thin;
      }

</style>
<script src="bluetooth_manufacturers.js"></script>

<script>
var scan
function start_scan() {
    navigator.bluetooth.requestLEScan({acceptAllAdvertisements: true}).then(function(result) {
          scan = result
    });

    navigator.bluetooth.addEventListener('advertisementreceived', event => {

        line = document.getElementById(event.device.id)
        if (line == null) {
            const template = document.getElementById('device-template');
            const clone = template.content.cloneNode(true);
            clone.firstElementChild.id = event.device.id;
            document.getElementById("devices").appendChild(clone);
            line = document.getElementById(event.device.id);
        }
        update_line(line, event)

    });
}

function update_line(line, event) {
    if (event.name != "") {
        console.log("was: " +line.querySelector("#advertisement_name").textContent)
        console.log("now: " +event.device.name)

        line.querySelector("#advertisement_name").textContent = event.name;
}
    line.querySelector("#device_id").textContent = event.device.id;
    line.querySelector("#rssi").textContent = event.rssi;
    line.querySelector("#txPower").textContent = event.txPower;
    line.querySelector("#uuids").textContent = event.uuids;

    var company = line.querySelector("#company_identifier")
    event.manufacturerData.forEach(function (value, key, map)
        {
            company.textContent = company_identifier(key)
        });

    var serviceData = line.querySelector("#serviceData")
    event.serviceData.forEach(function (value, key, map)
        {
            serviceData.textContent = key
        });
}

function stop_scan() {
    console.log(JSON.stringify(scan))
    console.log(scan.active)
    scan.stop()
    console.log(scan.active)
}

</script>

<template id="device-template">
  <div class="device">

    <div>
        <span>Name: </span>
        <span id="advertisement_name">Unknown</span>
    </div>


    <div>
        <span>Company Identifier: </span>
        <span id="company_identifier">Unknown</span>
    </div>

    <div>
        <span>Device ID: </span>
        <span id="device_id">Unknown</span>
    </div>

    <div>
        <span>RSSI: </span>
        <span id="rssi">2</span>
    </div>
    <div>
        <span>txPower: </span>
        <span id="txPower"></span>
    </div>

    <div>
        <span>UUIDs: </span>
        <span id="uuids"></span>
    </div>

    <div>
        <span>Service Data: </span>
        <span id="serviceData"></span>
    </div>


  </div>
</template>

<body>
<h1> WebBluetooth Scanning </h1>
<p> For more information, see the <a href="https://webbluetoothcg.github.io/web-bluetooth/scanning.html#dom-bluetooth-requestlescan">webbluetoothcg</a></p>
<button onclick="start_scan()">Start Scan</button>
<button onclick="stop_scan()">Stop Scan</button>

<div id="devices">
</div>

</body>
</html>