Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bluetooth Passive Radar</title> | |
| <style> | |
| body { | |
| background: #000; | |
| color: #00ff00; | |
| font-family: monospace; | |
| margin: 0; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .radar-container { | |
| position: relative; | |
| width: 600px; | |
| height: 600px; | |
| border: 2px solid #00ff00; | |
| border-radius: 50%; | |
| margin: 20px; | |
| overflow: hidden; | |
| } | |
| #radarCanvas { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .controls { | |
| margin: 20px; | |
| padding: 15px; | |
| border: 1px solid #00ff00; | |
| background: rgba(0, 255, 0, 0.1); | |
| } | |
| .device-list { | |
| width: 600px; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| border: 1px solid #00ff00; | |
| margin: 20px; | |
| padding: 10px; | |
| } | |
| .device-item { | |
| padding: 5px; | |
| margin: 5px 0; | |
| border: 1px solid #00ff00; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| button { | |
| background: #000; | |
| color: #00ff00; | |
| border: 1px solid #00ff00; | |
| padding: 10px 20px; | |
| margin: 5px; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background: #00ff00; | |
| color: #000; | |
| } | |
| .stats { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 10px; | |
| margin: 10px 0; | |
| } | |
| .stat-item { | |
| padding: 5px; | |
| border: 1px solid #00ff00; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Bluetooth Passive Radar System</h1> | |
| <div class="controls"> | |
| <button id="startScan">Start Scanning</button> | |
| <button id="stopScan">Stop Scanning</button> | |
| <div class="stats"> | |
| <div class="stat-item">Devices found: <span id="deviceCount">0</span></div> | |
| <div class="stat-item">Scan status: <span id="scanStatus">Inactive</span></div> | |
| <div class="stat-item">Last update: <span id="lastUpdate">-</span></div> | |
| <div class="stat-item">Signal strength: <span id="signalStrength">-</span></div> | |
| </div> | |
| </div> | |
| <div class="radar-container"> | |
| <canvas id="radarCanvas" width="600" height="600"></canvas> | |
| </div> | |
| <div class="device-list" id="deviceList"></div> | |
| <script> | |
| const radarCanvas = document.getElementById('radarCanvas'); | |
| const ctx = radarCanvas.getContext('2d'); | |
| const deviceList = document.getElementById('deviceList'); | |
| const startButton = document.getElementById('startScan'); | |
| const stopButton = document.getElementById('stopScan'); | |
| const deviceCount = document.getElementById('deviceCount'); | |
| const scanStatus = document.getElementById('scanStatus'); | |
| const lastUpdate = document.getElementById('lastUpdate'); | |
| const signalStrength = document.getElementById('signalStrength'); | |
| let isScanning = false; | |
| let devices = new Map(); | |
| let angle = 0; | |
| class BluetoothDevice { | |
| constructor(device) { | |
| this.id = device.id || Math.random().toString(36).substr(2, 9); | |
| this.name = device.name || 'Unknown Device'; | |
| this.rssi = device.rssi || -100; | |
| this.lastSeen = Date.now(); | |
| this.distance = this.calculateDistance(); | |
| this.angle = Math.random() * Math.PI * 2; | |
| } | |
| calculateDistance() { | |
| // Rough distance estimation based on RSSI | |
| const txPower = -59; // Calibrated transmit power at 1 meter | |
| const ratio = this.rssi * 1.0 / txPower; | |
| if (ratio < 1.0) { | |
| return Math.pow(ratio, 10); | |
| } | |
| return 0.89976 * Math.pow(ratio, 7.7095) + 0.111; | |
| } | |
| } | |
| function drawRadar() { | |
| ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; | |
| ctx.fillRect(0, 0, radarCanvas.width, radarCanvas.height); | |
| const centerX = radarCanvas.width / 2; | |
| const centerY = radarCanvas.height / 2; | |
| const radius = Math.min(centerX, centerY) - 10; | |
| // Draw radar circles | |
| for (let i = 1; i <= 4; i++) { | |
| ctx.beginPath(); | |
| ctx.arc(centerX, centerY, radius * i / 4, 0, Math.PI * 2); | |
| ctx.strokeStyle = 'rgba(0, 255, 0, 0.3)'; | |
| ctx.stroke(); | |
| } | |
| // Draw scanning line | |
| ctx.beginPath(); | |
| ctx.moveTo(centerX, centerY); | |
| ctx.lineTo( | |
| centerX + radius * Math.cos(angle), | |
| centerY + radius * Math.sin(angle) | |
| ); | |
| ctx.strokeStyle = '#00ff00'; | |
| ctx.stroke(); | |
| // Draw devices | |
| devices.forEach(device => { | |
| const deviceX = centerX + (device.distance * radius / 10) * Math.cos(device.angle); | |
| const deviceY = centerY + (device.distance * radius / 10) * Math.sin(device.angle); | |
| ctx.beginPath(); | |
| ctx.arc(deviceX, deviceY, 5, 0, Math.PI * 2); | |
| ctx.fillStyle = '#00ff00'; | |
| ctx.fill(); | |
| // Draw device info | |
| ctx.fillStyle = '#00ff00'; | |
| ctx.font = '12px monospace'; | |
| ctx.fillText(device.name, deviceX + 10, deviceY); | |
| }); | |
| angle += 0.02; | |
| if (angle >= Math.PI * 2) angle = 0; | |
| } | |
| function updateDeviceList() { | |
| deviceList.innerHTML = ''; | |
| devices.forEach(device => { | |
| const deviceElement = document.createElement('div'); | |
| deviceElement.className = 'device-item'; | |
| deviceElement.innerHTML = ` | |
| <span>Name: ${device.name}</span> | |
| <span>RSSI: ${device.rssi}dBm</span> | |
| <span>Distance: ~${device.distance.toFixed(2)}m</span> | |
| <span>Last seen: ${Math.round((Date.now() - device.lastSeen)/1000)}s ago</span> | |
| `; | |
| deviceList.appendChild(deviceElement); | |
| }); | |
| deviceCount.textContent = devices.size; | |
| } | |
| async function startScanning() { | |
| try { | |
| if (!navigator.bluetooth) { | |
| alert('Bluetooth not supported in this browser!'); | |
| return; | |
| } | |
| isScanning = true; | |
| scanStatus.textContent = 'Active'; | |
| const device = await navigator.bluetooth.requestDevice({ | |
| acceptAllDevices: true, | |
| optionalServices: ['generic_access'] | |
| }); | |
| // Simulate continuous scanning with mock data | |
| const scanInterval = setInterval(() => { | |
| if (!isScanning) { | |
| clearInterval(scanInterval); | |
| return; | |
| } | |
| // Simulate finding new devices | |
| if (Math.random() < 0.3) { | |
| const mockDevice = new BluetoothDevice({ | |
| name: `Device_${Math.floor(Math.random() * 1000)}`, | |
| rssi: -Math.floor(Math.random() * 100), | |
| }); | |
| devices.set(mockDevice.id, mockDevice); | |
| } | |
| // Update existing devices | |
| devices.forEach((device, id) => { | |
| if (Date.now() - device.lastSeen > 10000) { | |
| devices.delete(id); | |
| } else { | |
| device.rssi += Math.random() * 10 - 5; | |
| device.distance = device.calculateDistance(); | |
| } | |
| }); | |
| lastUpdate.textContent = new Date().toLocaleTimeString(); | |
| signalStrength.textContent = `${Math.floor(Math.random() * -100)}dBm`; | |
| updateDeviceList(); | |
| }, 1000); | |
| function animate() { | |
| if (isScanning) { | |
| drawRadar(); | |
| requestAnimationFrame(animate); | |
| } | |
| } | |
| animate(); | |
| } catch (error) { | |
| console.error('Error starting Bluetooth scan:', error); | |
| scanStatus.textContent = 'Error'; | |
| } | |
| } | |
| function stopScanning() { | |
| isScanning = false; | |
| scanStatus.textContent = 'Inactive'; | |
| devices.clear(); | |
| updateDeviceList(); | |
| } | |
| startButton.addEventListener('click', startScanning); | |
| stopButton.addEventListener('click', stopScanning); | |
| // Initial radar background | |
| ctx.fillStyle = '#000'; | |
| ctx.fillRect(0, 0, radarCanvas.width, radarCanvas.height); | |
| </script> | |
| </body> | |
| </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script> |