Eduard Iten
c3e554a7a9
All checks were successful
Deploy Docs / build-and-deploy (push) Successful in 25s
66 lines
2.9 KiB
HTML
66 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lasertag Provisioning</title>
|
|
<style>
|
|
body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; padding: 2rem; background: #f0f2f5; }
|
|
.card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
|
|
button { background: #007bff; color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-size: 1rem; width: 100%; }
|
|
button:disabled { background: #ccc; }
|
|
.status { margin-top: 1rem; color: #666; font-size: 0.9rem; }
|
|
.device-info { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #eee; display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h1>Lasertag Setup</h1>
|
|
<p>Connect to your device via Bluetooth to configure Thread settings.</p>
|
|
<button id="connectBtn">Search for Device</button>
|
|
<div class="status" id="status">Ready to connect...</div>
|
|
|
|
<div class="device-info" id="deviceInfo">
|
|
<strong>Connected to:</strong> <span id="connectedName"></span><br>
|
|
<p>Next step: Implement Characteristic Write/Read.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const connectBtn = document.getElementById('connectBtn');
|
|
const status = document.getElementById('status');
|
|
const deviceInfo = document.getElementById('deviceInfo');
|
|
const connectedName = document.getElementById('connectedName');
|
|
|
|
const PROVISIONING_SERVICE_UUID = '03afe2cf-6c64-4a22-9289-c3ae820cbc00';
|
|
|
|
connectBtn.addEventListener('click', async () => {
|
|
try {
|
|
status.textContent = 'Requesting Bluetooth Device...';
|
|
const device = await navigator.bluetooth.requestDevice({
|
|
filters: [{ services: [PROVISIONING_SERVICE_UUID] }],
|
|
optionalServices: [PROVISIONING_SERVICE_UUID]
|
|
});
|
|
|
|
status.textContent = 'Connecting to GATT Server...';
|
|
const server = await device.gatt.connect();
|
|
|
|
status.textContent = 'Connected!';
|
|
connectedName.textContent = device.name || 'Unnamed Device';
|
|
deviceInfo.style.display = 'block';
|
|
connectBtn.disabled = true;
|
|
|
|
device.addEventListener('gattserverdisconnected', () => {
|
|
status.textContent = 'Disconnected.';
|
|
deviceInfo.style.display = 'none';
|
|
connectBtn.disabled = false;
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error(error);
|
|
status.textContent = 'Error: ' + error.message;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |