Fix multiple UI bugs and improve error handling

Issues fixed:
- #113: Display RTL-SDR serial numbers in device selector
- #112: Kill all processes now stops Bluetooth scans
- #111: BLE device list no longer overflows container bounds
- #109: WiFi scanner panels maintain minimum width (no more "imploding")
- #108: Radar device hover no longer causes violent shaking
- #106: "Use GPS" button now uses gpsd for USB GPS devices
- #105: Meter trend text no longer overlaps adjacent columns
- #104: dump1090 errors now provide specific troubleshooting guidance

Changes:
- app.py: Add Bluetooth cleanup to /killall endpoint
- routes/adsb.py: Parse dump1090 stderr for specific error messages
- templates/index.html: Show SDR serial numbers in device dropdown
- static/css/index.css: Fix WiFi/BT panel layouts with proper min-width
- static/css/components/signal-cards.css: Fix meter grid overflow
- static/css/components/proximity-viz.css: Fix radar hover transform
- static/css/settings.css: Add GPS detection spinner
- static/js/components/proximity-radar.js: Add invisible hit areas
- static/js/core/settings-manager.js: Use gpsd before browser geolocation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-02-03 21:45:40 +00:00
parent 2caccac0bc
commit 7d937abe93
9 changed files with 248 additions and 88 deletions
+5
View File
@@ -207,9 +207,14 @@ const ProximityRadar = (function() {
const pulseClass = isNew ? 'radar-dot-pulse' : '';
const isSelected = selectedDeviceKey && device.device_key === selectedDeviceKey;
// Hit area size (prevents hover flicker when scaling)
const hitAreaSize = Math.max(dotSize * 2, 15);
return `
<g class="radar-device ${pulseClass}${isSelected ? ' selected' : ''}" data-device-key="${escapeAttr(device.device_key)}"
transform="translate(${x}, ${y})" style="cursor: pointer;">
<!-- Invisible hit area to prevent hover flicker -->
<circle class="radar-device-hitarea" r="${hitAreaSize}" fill="transparent" />
${isSelected ? `<circle r="${dotSize + 8}" fill="none" stroke="#00d4ff" stroke-width="2" stroke-opacity="0.8">
<animate attributeName="r" values="${dotSize + 6};${dotSize + 10};${dotSize + 6}" dur="1.5s" repeatCount="indefinite"/>
<animate attributeName="stroke-opacity" values="0.8;0.4;0.8" dur="1.5s" repeatCount="indefinite"/>
+102 -67
View File
@@ -547,14 +547,14 @@ document.addEventListener('DOMContentLoaded', () => {
/**
* Load and display current observer location
*/
function loadObserverLocation() {
let lat = localStorage.getItem('observerLat');
let lon = localStorage.getItem('observerLon');
if (window.ObserverLocation && ObserverLocation.isSharedEnabled()) {
const shared = ObserverLocation.getShared();
lat = shared.lat.toString();
lon = shared.lon.toString();
}
function loadObserverLocation() {
let lat = localStorage.getItem('observerLat');
let lon = localStorage.getItem('observerLon');
if (window.ObserverLocation && ObserverLocation.isSharedEnabled()) {
const shared = ObserverLocation.getShared();
lat = shared.lat.toString();
lon = shared.lon.toString();
}
const latInput = document.getElementById('observerLatInput');
const lonInput = document.getElementById('observerLonInput');
@@ -584,63 +584,98 @@ function loadObserverLocation() {
}
/**
* Detect location using browser GPS
* Detect location using gpsd (USB GPS) or browser geolocation as fallback
*/
function detectLocationGPS(btn) {
const latInput = document.getElementById('observerLatInput');
const lonInput = document.getElementById('observerLonInput');
if (!navigator.geolocation) {
if (typeof showNotification === 'function') {
showNotification('Location', 'GPS not available in this browser');
} else {
alert('GPS not available in this browser');
}
return;
// Show loading state with visual feedback
const originalText = btn.innerHTML;
btn.innerHTML = '<span class="detecting-spinner"></span> Detecting...';
btn.disabled = true;
btn.style.opacity = '0.7';
// Helper to restore button state
function restoreButton() {
btn.innerHTML = originalText;
btn.disabled = false;
btn.style.opacity = '';
}
// Show loading state
const originalText = btn.innerHTML;
btn.innerHTML = '<span style="opacity: 0.7;">Detecting...</span>';
btn.disabled = true;
// Helper to set location values
function setLocation(lat, lon, source) {
if (latInput) latInput.value = parseFloat(lat).toFixed(4);
if (lonInput) lonInput.value = parseFloat(lon).toFixed(4);
restoreButton();
if (typeof showNotification === 'function') {
showNotification('Location', `Coordinates set from ${source}`);
}
}
navigator.geolocation.getCurrentPosition(
(pos) => {
if (latInput) latInput.value = pos.coords.latitude.toFixed(4);
if (lonInput) lonInput.value = pos.coords.longitude.toFixed(4);
btn.innerHTML = originalText;
btn.disabled = false;
if (typeof showNotification === 'function') {
showNotification('Location', 'GPS coordinates detected');
}
},
(err) => {
btn.innerHTML = originalText;
btn.disabled = false;
let message = 'Failed to get location';
if (err.code === 1) message = 'Location access denied';
else if (err.code === 2) message = 'Location unavailable';
else if (err.code === 3) message = 'Location request timed out';
if (typeof showNotification === 'function') {
showNotification('Location', message);
// First, try gpsd (USB GPS device)
fetch('/gps/position')
.then(response => response.json())
.then(data => {
if (data.status === 'ok' && data.position && data.position.latitude != null) {
// Got valid position from gpsd
setLocation(data.position.latitude, data.position.longitude, 'GPS device');
} else if (data.status === 'waiting') {
// gpsd connected but no fix yet - show message and try browser
if (typeof showNotification === 'function') {
showNotification('GPS', 'GPS device connected but no fix yet. Trying browser location...');
}
useBrowserGeolocation();
} else {
alert(message);
// gpsd not available, try browser geolocation
useBrowserGeolocation();
}
},
{ enableHighAccuracy: true, timeout: 10000 }
);
})
.catch(() => {
// gpsd request failed, try browser geolocation
useBrowserGeolocation();
});
// Fallback to browser geolocation
function useBrowserGeolocation() {
if (!navigator.geolocation) {
restoreButton();
if (typeof showNotification === 'function') {
showNotification('Location', 'No GPS available (gpsd not running, browser GPS unavailable)');
} else {
alert('No GPS available');
}
return;
}
navigator.geolocation.getCurrentPosition(
(pos) => {
setLocation(pos.coords.latitude, pos.coords.longitude, 'browser');
},
(err) => {
restoreButton();
let message = 'Failed to get location';
if (err.code === 1) message = 'Location access denied';
else if (err.code === 2) message = 'Location unavailable';
else if (err.code === 3) message = 'Location request timed out';
if (typeof showNotification === 'function') {
showNotification('Location', message);
} else {
alert(message);
}
},
{ enableHighAccuracy: true, timeout: 10000 }
);
}
}
/**
* Save observer location to localStorage
*/
function saveObserverLocation() {
const latInput = document.getElementById('observerLatInput');
const lonInput = document.getElementById('observerLonInput');
function saveObserverLocation() {
const latInput = document.getElementById('observerLatInput');
const lonInput = document.getElementById('observerLonInput');
const lat = parseFloat(latInput?.value);
const lon = parseFloat(lonInput?.value);
@@ -663,12 +698,12 @@ function saveObserverLocation() {
return;
}
if (window.ObserverLocation && ObserverLocation.isSharedEnabled()) {
ObserverLocation.setShared({ lat, lon });
} else {
localStorage.setItem('observerLat', lat.toString());
localStorage.setItem('observerLon', lon.toString());
}
if (window.ObserverLocation && ObserverLocation.isSharedEnabled()) {
ObserverLocation.setShared({ lat, lon });
} else {
localStorage.setItem('observerLat', lat.toString());
localStorage.setItem('observerLon', lon.toString());
}
// Also update dashboard-specific location keys for ADS-B and AIS
const locationObj = JSON.stringify({ lat: lat, lon: lon });
@@ -678,17 +713,17 @@ function saveObserverLocation() {
// Update display
const currentLatDisplay = document.getElementById('currentLatDisplay');
const currentLonDisplay = document.getElementById('currentLonDisplay');
if (currentLatDisplay) currentLatDisplay.textContent = lat.toFixed(4) + '°';
if (currentLonDisplay) currentLonDisplay.textContent = lon.toFixed(4) + '°';
if (typeof showNotification === 'function') {
showNotification('Location', 'Observer location saved');
}
if (window.observerLocation) {
window.observerLocation.lat = lat;
window.observerLocation.lon = lon;
}
if (currentLatDisplay) currentLatDisplay.textContent = lat.toFixed(4) + '°';
if (currentLonDisplay) currentLonDisplay.textContent = lon.toFixed(4) + '°';
if (typeof showNotification === 'function') {
showNotification('Location', 'Observer location saved');
}
if (window.observerLocation) {
window.observerLocation.lat = lat;
window.observerLocation.lon = lon;
}
// Refresh SSTV ISS schedule if available
if (typeof SSTV !== 'undefined' && typeof SSTV.loadIssSchedule === 'function') {