BluetoothMotionMonitor/ble.html at main · GreyhatBruceWayne/BluetoothMotionMonitor · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESP32 BLE Motion Monitor</title>
</head>
<body>
    <h1>ESP32 BLE Motion Monitor</h1>
    <button onclick="connectBLE()">Connect to ESP32</button>
    <p id="status">Not connected</p>
    <ul id="log"></ul>

    <script>
        let characteristic;

        async function connectBLE() {
            try {
                const device = await navigator.bluetooth.requestDevice({
                    acceptAllDevices: true,
                    optionalServices: ['12345678-1234-5678-1234-56789abcdef0']  // Match ESP32 UUID
                });

                const server = await device.gatt.connect();
                const service = await server.getPrimaryService('12345678-1234-5678-1234-56789abcdef0');
                characteristic = await service.getCharacteristic('abcd1234-5678-4321-abcd-56789abcdef1');

                document.getElementById('status').innerText = "Connected to " + device.name;

                // Enable Notifications
                characteristic.startNotifications().then(() => {
                    characteristic.addEventListener('characteristicvaluechanged', handleNotification);
                    console.log("Listening for notifications...");
                });

            } catch (error) {
                console.log("Error:", error);
                document.getElementById('status').innerText = "Error connecting";
            }
        }

        function handleNotification(event) {
            let value = new TextDecoder().decode(event.target.value);
            let logItem = document.createElement('li');
            logItem.textContent = value;
            document.getElementById('log').appendChild(logItem);
        }
    </script>
</body>
</html>