diff --git a/static/js/components/proximity-radar.js b/static/js/components/proximity-radar.js index 41a774c..4302cd6 100644 --- a/static/js/components/proximity-radar.js +++ b/static/js/components/proximity-radar.js @@ -32,6 +32,7 @@ const ProximityRadar = (function() { let isPaused = false; let activeFilter = null; let onDeviceClick = null; + let selectedDeviceKey = null; /** * Initialize the radar component @@ -204,14 +205,19 @@ const ProximityRadar = (function() { // Check if newly seen (pulse animation) const isNew = device.age_seconds < 5; const pulseClass = isNew ? 'radar-dot-pulse' : ''; + const isSelected = selectedDeviceKey && device.device_key === selectedDeviceKey; return ` - + ${isSelected ? ` + + + ` : ''} - ${device.is_new ? `` : ''} + fill-opacity="${isSelected ? 1 : 0.4 + confidence * 0.5}" + stroke="${isSelected ? '#00d4ff' : color}" stroke-width="${isSelected ? 2 : 1}" /> + ${device.is_new && !isSelected ? `` : ''} ${escapeHtml(device.name || device.address)} (${device.rssi_current || '--'} dBm) `; @@ -306,6 +312,23 @@ const ProximityRadar = (function() { */ function clear() { devices.clear(); + selectedDeviceKey = null; + renderDevices(); + } + + /** + * Highlight a specific device on the radar + */ + function highlightDevice(deviceKey) { + selectedDeviceKey = deviceKey; + renderDevices(); + } + + /** + * Clear device highlighting + */ + function clearHighlight() { + selectedDeviceKey = null; renderDevices(); } @@ -356,8 +379,11 @@ const ProximityRadar = (function() { setPaused, clear, getZoneCounts, + highlightDevice, + clearHighlight, isPaused: () => isPaused, getFilter: () => activeFilter, + getSelectedDevice: () => selectedDeviceKey, }; })(); diff --git a/static/js/modes/bluetooth.js b/static/js/modes/bluetooth.js index e8f47e3..3f10e1b 100644 --- a/static/js/modes/bluetooth.js +++ b/static/js/modes/bluetooth.js @@ -385,6 +385,11 @@ const BluetoothMode = (function() { el.classList.remove('selected'); }); } + + // Clear radar highlight + if (typeof ProximityRadar !== 'undefined') { + ProximityRadar.clearHighlight(); + } } /** @@ -404,6 +409,12 @@ const BluetoothMode = (function() { if (card) { card.classList.add('selected'); } + + // Also highlight on the radar + const device = devices.get(deviceId); + if (device && typeof ProximityRadar !== 'undefined') { + ProximityRadar.highlightDevice(device.device_key || device.device_id); + } } /**