sword_strike_classifier/inference.html at main · bdh567/sword_strike_classifier · 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmartSword Telemetry Dashboard</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #121214;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            background-color: #1a1a1e;
            padding: 2.5rem;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            border: 1px solid #2a2a30;
            width: 320px;
        }
        button {
            background-color: #007aff;
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.1s;
        }
        button:hover {
            background-color: #0062cc;
        }
        button:active {
            transform: scale(0.98);
        }
        .status {
            font-size: 0.85rem;
            color: #8e8e93;
            margin-top: 10px;
            margin-bottom: 25px;
        }
        .prediction-box {
            font-size: 2rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #30d158; /* Green text color */
            padding: 20px;
            background-color: #24242a;
            border-radius: 12px;
            border: 1px solid #3a3a42;
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>Sword Tracker</h2>
    <button id="connectBtn">Connect Sword</button>
    <div id="statusText" class="status">Disconnected</div>

    <div id="predictionDisplay" class="prediction-box">---</div>
</div>

<script>
    // These must exactly match the UUID strings declared in your Arduino sketch code
    const SWORD_SERVICE_UUID   = "19b10000-e8f2-537e-4f6c-d104768a1214";
    const PREDICTION_CHAR_UUID = "19b10001-e8f2-537e-4f6c-d104768a1214";

    const connectBtn = document.getElementById('connectBtn');
    const statusText = document.getElementById('statusText');
    const predictionDisplay = document.getElementById('predictionDisplay');

    connectBtn.addEventListener('click', async () => {
        try {
            statusText.innerText = "Requesting Bluetooth device...";

            // 1. Scan and filter out devices by your custom Service UUID identifier flag
            const device = await navigator.bluetooth.requestDevice({
                filters: [{ services: [SWORD_SERVICE_UUID] }]
            });

            statusText.innerText = "Connecting to GATT server infrastructure...";
            const server = await device.gatt.connect();

            statusText.innerText = "Locating custom sword service tracking...";
            const service = await server.getPrimaryService(SWORD_SERVICE_UUID);

            statusText.innerText = "Retrieving notification characteristic...";
            const characteristic = await service.getCharacteristic(PREDICTION_CHAR_UUID);

            // 2. Start listening to active data notifications stream broadcasts
            await characteristic.startNotifications();
            statusText.innerText = "Link established. Streaming live telemetry.";
            connectBtn.style.backgroundColor = "#30d158";
            connectBtn.innerText = "Connected";

            // 3. Handle incoming over-the-air payload string packets
            characteristic.addEventListener('characteristicvaluechanged', (event) => {
                const valueDecoder = new TextDecoder('utf-8');
                const parsedPrediction = valueDecoder.decode(event.target.value);

                // Update the user interface element
                predictionDisplay.innerText = parsedPrediction;

                // Add a dynamic color shift visual flash effect depending on strike vector types
                if (parsedPrediction === "idle") {
                    predictionDisplay.style.color = "#8e8e93"; // Gray text color for idle
                } else {
                    predictionDisplay.style.color = "#ff453a"; // Vivid red color for active strike vector alerts
                }
            });

            // Handle accidental disconnects gracefully
            device.addEventListener('gattserverdisconnected', () => {
                statusText.innerText = "Connection lost. Re-advertising...";
                predictionDisplay.innerText = "---";
                predictionDisplay.style.color = "#30d158";
                connectBtn.style.backgroundColor = "#007aff";
                connectBtn.innerText = "Connect Sword";
            });

        } catch (error) {
            console.error("Web BLE API Pipeline Exception:", error);
            statusText.innerText = "Connection failed/canceled.";
        }
    });
</script>

</body>
</html>