Proximity HI Button

Proximity HI Button

body { font-family: Arial, sans-serif; background: #f5f5f5; margin: 0; padding: 0; } .container { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 32px 24px; text-align: center; } button { background: #007bff; color: #fff; border: none; padding: 14px 32px; border-radius: 6px; font-size: 1.1em; cursor: pointer; margin-top: 16px; transition: background 0.2s; } button:hover { background: #0056b3; } #status { margin-top: 24px; color: #333; min-height: 24px; } // This demo uses Web Bluetooth API to broadcast and scan for "HI" messages. // NOTE: Browsers do NOT support BLE advertising (broadcast) from web pages. // So, this demo only allows scanning for "HI" messages from nearby BLE devices // that advertise a specific service. Sending is simulated. // In a real-world scenario, a native app or special hardware is needed to broadcast. const hiBtn = document.getElementById('hiBtn'); const statusDiv = document.getElementById('status'); // UUID for our custom "HI" service (randomly generated) const HI_SERVICE_UUID = '0000feed-0000-1000-8000-00805f9b34fb'; const HI_CHARACTERISTIC_UUID = '0000beef-0000-1000-8000-00805f9b34fb'; // Simulate sending "HI" to nearby devices hiBtn.addEventListener('click', async () => { statusDiv.textContent = 'Scanning for nearby devices...'; try { // Request nearby Bluetooth devices advertising our HI service const device = await navigator.bluetooth.requestDevice({ filters: [{ services: [HI_SERVICE_UUID] }] }); statusDiv.textContent = `Connecting to ${device.name || 'device'}...`; const server = await device.gatt.connect(); const service = await server.getPrimaryService(HI_SERVICE_UUID); const characteristic = await service.getCharacteristic(HI_CHARACTERISTIC_UUID); // Write "HI" to the characteristic const encoder = new TextEncoder(); await characteristic.writeValue(encoder.encode('HI')); statusDiv.textContent = 'Sent "HI" to the device!'; } catch (err) { if (err.name === 'NotFoundError') { statusDiv.textContent = 'No nearby devices found with the HI service.'; } else if (err.name === 'NotSupportedError') { statusDiv.textContent = 'Web Bluetooth is not supported in this browser.'; } else { statusDiv.textContent = 'Error: ' + err.message; } } }); // Listen for incoming "HI" messages (if device is advertising) // This is not possible in browser-only JS, but we can simulate it: // Show a message if the user receives a "HI" (simulate by clicking a button) // In a real app, a native app would listen for BLE advertisements. // Simulate receiving a "HI" message window.receiveHi = function() { alert('You received a HI from a nearby device!'); }; // For demo: Add a button to simulate receiving const receiveBtn = document.createElement('button'); receiveBtn.textContent = 'Simulate Receiving HI'; receiveBtn.style.marginTop = '12px'; receiveBtn.onclick = window.receiveHi; document.querySelector('.container').appendChild(receiveBtn);