Sensor Detection Hub

Sensor Detection Hub

Connect external sensors via Web Bluetooth or Web Serial. Use the simulator if you don't have hardware.

Web Bluetooth

Service UUID (optional) Characteristic UUID (optional)

Web Serial

Baud rate

Simulator

Status

Recent Readings

:root { --bg: #101116; --panel: #1b1f2a; --accent: #66d9ef; --muted: #9aa4b2; --success: #8ee57a; --danger: #ff6b6b; --card-radius: 8px; color-scheme: dark; } html, body { height: 100%; margin: 0; font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; background: linear-gradient(180deg, var(--bg), #0b0c0f); color: #e6eef6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } header { padding: 20px; text-align: center; } main { display: grid; grid-template-columns: 320px 1fr; gap: 20px; padding: 20px; } .controls { background: var(--panel); padding: 16px; border-radius: var(--card-radius); display: flex; flex-direction: column; gap: 12px; } .control-group { padding: 8px; border-radius: 6px; background: rgba(255,255,255,0.02); } .control-group h2 { margin: 0 0 8px 0; font-size: 0.95rem; color: var(--accent); } label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; } input { width: 100%; padding: 8px; margin-top: 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.25); color: inherit; box-sizing: border-box; } button { margin-top: 8px; padding: 8px 12px; border: none; background: linear-gradient(90deg, var(--accent), #7be4c7); color: #08101a; border-radius: 6px; cursor: pointer; font-weight: 600; } button[disabled] { opacity: 0.45; cursor: not-allowed; } .status, .readings { background: var(--panel); padding: 16px; border-radius: var(--card-radius); max-height: 60vh; overflow: auto; } .log { font-family: monospace; font-size: 0.9rem; color: var(--muted); white-space: pre-wrap; } #readings-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } #readings-list li { padding: 8px; border-radius: 6px; background: rgba(255,255,255,0.02); display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 0.95rem; } #readings-list li .meta { color: var(--muted); font-size: 0.82rem; } footer { padding: 12px 20px; color: var(--muted); text-align: center; } @media (max-width: 880px) { main { grid-template-columns: 1fr; } } import * as BLE from './ble.js'; import * as Serial from './serial.js'; import * as Sim from './simulator.js'; import * as UI from './ui.js'; import { parsePayload } from './parsers.js'; const btnBleConnect = document.getElementById('btn-ble-connect'); const btnBleDisconnect = document.getElementById('btn-ble-disconnect'); const btnSerialConnect = document.getElementById('btn-serial-connect'); const btnSerialDisconnect = document.getElementById('btn-serial-disconnect'); const btnSimStart = document.getElementById('btn-sim-start'); const btnSimStop = document.getElementById('btn-sim-stop'); let bleConnection = null; let serialConnection = null; let simRunning = false; function handleIncomingLine(line, source = 'unknown') { const parsed = parsePayload(line); UI.log(`[${source}] ${line}`); UI.addReading(parsed); } // BLE btnBleConnect.addEventListener('click', async () => { const service = document.getElementById('ble-service').value.trim() || undefined; const char = document.getElementById('ble-char').value.trim() || undefined; try { UI.setStatus('Requesting Bluetooth device...'); bleConnection = await BLE.connect(service, char, (data) => { handleIncomingLine(data, 'BLE'); }); btnBleConnect.disabled = true; btnBleDisconnect.disabled = false; UI.setStatus('BLE connected'); } catch (err) { UI.setStatus(`BLE error: ${err.message || err}`); UI.log(err.stack || String(err)); } }); btnBleDisconnect.addEventListener('click', async () => { if (bleConnection) { await BLE.disconnect(bleConnection); bleConnection = null; btnBleConnect.disabled = false; btnBleDisconnect.disabled = true; UI.setStatus('BLE disconnected'); } }); // Serial btnSerialConnect.addEventListener('click', async () => { const baud = Number(document.getElementById('serial-baud').value || 115200); try { UI.setStatus('Opening serial port...'); serialConnection = await Serial.connect(baud, (line) => { handleIncomingLine(line, 'Serial'); }); btnSerialConnect.disabled = true; btnSerialDisconnect.disabled = false; UI.setStatus('Serial connected'); } catch (err) { UI.setStatus(`Serial error: ${err.message || err}`); UI.log(err.stack || String(err)); } }); btnSerialDisconnect.addEventListener('click', async () => { if (serialConnection) { await Serial.disconnect(serialConnection); serialConnection = null; btnSerialConnect.disabled = false; btnSerialDisconnect.disabled = true; UI.setStatus('Serial disconnected'); } }); // Simulator btnSimStart.addEventListener('click', () => { if (simRunning) return; Sim.start((line) => handleIncomingLine(line, 'Simulator')); simRunning = true; btnSimStart.disabled = true; btnSimStop.disabled = false; UI.setStatus('Simulator running'); }); btnSimStop.addEventListener('click', () => { if (!simRunning) return; Sim.stop(); simRunning = false; btnSimStart.disabled = false; btnSimStop.disabled = true; UI.setStatus('Simulator stopped'); }); // initial UI state UI.setStatus('Ready'); // Minimal Web Bluetooth helper // Accepts optional serviceUuid and characteristicUuid. If omitted, user selects device. // onData callback receives UTF-8 string lines (attempts to split by newline). export async function connect(serviceUuid, characteristicUuid, onData) { const opts = {}; if (serviceUuid) { opts.filters = [{ services: [serviceUuid] }]; } else { opts.acceptAllDevices = true; } const device = await navigator.bluetooth.requestDevice(opts); const server = await device.gatt.connect(); let service; if (serviceUuid) { service = await server.getPrimaryService(serviceUuid); } else { // pick the first primary service const services = await server.getPrimaryServices(); service = services[0]; } let characteristic; if (characteristicUuid) { characteristic = await service.getCharacteristic(characteristicUuid); } else { // pick the first characteristic that supports notify or read const chars = await service.getCharacteristics(); characteristic = chars.find(c => c.properties.notify || c.properties.read) || chars[0]; } if (!characteristic) throw new Error('No characteristic available on selected service'); // Start notifications if supported if (characteristic.properties.notify) { await characteristic.startNotifications(); const decoder = new TextDecoder(); let buffer = ''; const onChar = (event) => { const value = event.target.value; buffer += decoder.decode(value, { stream: true }); let idx; while ((idx = buffer.indexOf('\n')) >= 0) { const line = buffer.slice(0, idx).trim(); buffer = buffer.slice(idx + 1); if (line) onData(line); } }; characteristic.addEventListener('characteristicvaluechanged', onChar); const cleanup = async () => { try { characteristic.removeEventListener('characteristicvaluechanged', onChar); await characteristic.stopNotifications(); } catch (e) { // ignored } try { server.disconnect(); } catch (e) {} }; // return an object for later disconnect return { device, server, service, characteristic, cleanup }; } else { // If no notify, attempt a single read const value = await characteristic.readValue(); const decoder = new TextDecoder(); const text = decoder.decode(value); onData(text.trim()); return { device, server, service, characteristic, cleanup: async () => { try { server.disconnect(); } catch(e){} } }; } } export async function disconnect(conn) { if (!conn) return; try { if (conn.cleanup) await conn.cleanup(); } catch (e) { // ignore } try { if (conn.server && conn.server.connected) conn.server.disconnect(); } catch (e) {} } // Minimal Web Serial helper // Reads newline-delimited UTF-8 text from a serial device. export async function connect(baudRate = 115200, onLine) { if (!('serial' in navigator)) { throw new Error('Web Serial API not supported in this browser'); } const port = await navigator.serial.requestPort(); await port.open({ baudRate }); const decoder = new TextDecoderStream(); const inputDone = port.readable.pipeTo(decoder.writable); const inputStream = decoder.readable; const reader = inputStream.getReader(); let buffer = ''; let closed = false; (async () => { try { while (true) { const { value, done } = await reader.read(); if (done) break; buffer += value; let idx; while ((idx = buffer.indexOf('\n')) >= 0) { const line = buffer.slice(0, idx).trim(); buffer = buffer.slice(idx + 1); if (line) onLine(line); } } } catch (err) { // ignore } finally { closed = true; reader.releaseLock(); } })(); return { port, reader, close: async () => { try { await reader.cancel(); } catch (e) {} try { await inputDone; } catch (e) {} try { await port.close(); } catch (e) {} } }; } export async function disconnect(conn) { if (!conn) return; try { if (conn.close) await conn.close(); } catch (e) {} } // Simple simulator that emits JSON lines for various sensor types. // Useful for development without hardware. let timer = null; let seq = 0; function makeReading() { const types = ['radiation', 'microwave', 'rfid', 'rf_bug', 'camera_reflection']; const t = types[seq % types.length]; seq += 1; const ts = new Date().toISOString(); switch (t) { case 'radiation': // microSieverts per hour return JSON.stringify({ sensor: 'radiation', value: +(Math.random() * 0.5).toFixed(3), unit: 'µSv/h', ts }); case 'microwave': // mW/cm^2 approximate return JSON.stringify({ sensor: 'microwave', value: +(Math.random() * 2).toFixed(3), unit: 'mW/cm2', ts }); case 'rfid': // random tag id in hex return JSON.stringify({ sensor: 'rfid', tag: 'TAG-' + Math.floor(Math.random() * 1e6).toString(16), protocol: 'ISO14443A', ts }); case 'rf_bug': // detected RF strength return JSON.stringify({ sensor: 'rf_bug', rssi: -30 - Math.floor(Math.random() * 70), unit: 'dBm', ts }); case 'camera_reflection': // lens reflection probability (0-1) return JSON.stringify({ sensor: 'camera_reflection', score: +(Math.random()).toFixed(2), ts }); default: return JSON.stringify({ sensor: 'unknown', ts }); } } export function start(onLine, intervalMs = 750) { if (timer) stop(); timer = setInterval(() => { const line = makeReading(); onLine(line); }, intervalMs); } export function stop() { if (timer) { clearInterval(timer); timer = null; } } // Lightweight payload parser: tries JSON, falls back to simple key:value parsing. export function parsePayload(text) { const out = { raw: text, ts: new Date().toISOString() }; if (!text) return out; // Try JSON try { const obj = JSON.parse(text); return { ...out, ...obj }; } catch (e) { // continue } // Try key:value pairs separated by commas or semicolons try { const parts = text.split(/[;,]/).map(p => p.trim()).filter(Boolean); for (const p of parts) { const [k, ...rest] = p.split(':'); if (!k) continue; const v = rest.join(':').trim(); const key = k.trim(); // coerce numbers if (!Number.isNaN(Number(v))) { out[key] = Number(v); } else { out[key] = v; } } return out; } catch (e) { return out; } } // UI helpers: logging and display of readings const statusEl = document.getElementById('status-lines') || null; const readingsList = document.getElementById('readings-list'); export function setStatus(text) { if (!statusEl) return; const time = new Date().toLocaleTimeString(); statusEl.textContent = `${time} — ${text}`; } export function log(text) { if (!statusEl) return; const time = new Date().toLocaleTimeString(); const previous = statusEl.textContent || ''; statusEl.textContent = `${time} — ${text}\n${previous}`.slice(0, 2000); } export function addReading(obj) { if (!readingsList) return; const li = document.createElement('li'); const left = document.createElement('div'); const right = document.createElement('div'); left.style.display = 'flex'; left.style.flexDirection = 'column'; const title = document.createElement('div'); title.textContent = obj.sensor ? `${obj.sensor}` : (obj.tag || 'reading'); title.style.fontWeight = '700'; const meta = document.createElement('div'); meta.className = 'meta'; meta.textContent = obj.ts ? new Date(obj.ts).toLocaleString() : new Date().toLocaleString(); left.appendChild(title); left.appendChild(meta); right.style.textAlign = 'right'; if ('value' in obj) { right.innerHTML = `

${obj.value} ${obj.unit || ''}

`; } else if ('rssi' in obj) { right.innerHTML = `

${obj.rssi} dBm

`; } else if ('tag' in obj) { right.innerHTML = `

${obj.tag}

${obj.protocol || ''}

`; } else if ('score' in obj) { right.innerHTML = `

score: ${obj.score}

`; } else { right.innerHTML = `

${obj.raw || JSON.stringify(obj)}

`; } li.appendChild(left); li.appendChild(right); readingsList.insertBefore(li, readingsList.firstChild); // keep list trimmed while (readingsList.children.length > 200) readingsList.removeChild(readingsList.lastChild); } Sensor Detection Hub (Web Bluetooth + Web Serial + Simulator) Purpose - Provide a small web app that can connect to external sensor hardware over Web Bluetooth (BLE) or Web Serial. - Include a built-in simulator to develop and test parsing and UI without hardware. - This is a software-side hub — it requires appropriate hardware sensors (radiation meters, microwave detectors, RFID readers, RF bug detectors, etc.) to obtain real sensor data. How to use 1. Open index.html in a modern browser. - For Web Bluetooth and Web Serial, use Chrome/Edge on desktop. - For Web Serial and Web Bluetooth, pages must be served over HTTPS or be on localhost. 2. Serve locally for easiest experience: - If you have Node.js installed, run a static server in the project folder: npx http-server -c-1 . - Or use any static file server and open http://localhost:8080 (or the port shown). 3. Web Bluetooth: - Enter optional service and characteristic UUIDs (or leave blank to pick a device). - Click "Connect BLE". When notifications arrive they'll be parsed and shown. - Many hardware devices stream newline-delimited JSON or CSV over a characteristic; the app attempts to parse JSON first. 4. Web Serial: - Click "Connect Serial" and choose the serial port connected to your sensor device. - The app reads newline-delimited UTF-8 text lines. 5. Simulator: - Click "Start Simulator" to generate periodic fake sensor messages for development. Notes and limitations - This project is a software hub only. Accurate detection of radiation, microwaves, RFID, or covert devices requires appropriate physical sensors. - The app provides parsing helpers and UI. You must ensure your hardware streams compatible textual payloads (preferably newline-delimited JSON). - For production: implement authentication, secure transport, robust parsing, and proper calibration of sensors on the hardware side. Files - index.html: main page - styles.css: styling - src/main.js: app wiring - src/ble.js: Web Bluetooth helper - src/serial.js: Web Serial helper - src/simulator.js: simulator data source - src/parsers.js: payload parsing - src/ui.js: DOM helpers License - MIT