feat: Make trails checked by default and remove both radar modes from ADS-B

Trails checkbox now defaults to checked (on). Removed the RADAR view
toggle, Radar overlay checkbox, RadarScope class, and all associated
animation/overlay JS and CSS.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

static/css/adsb_dashboard.css

@@ -872,42 +872,6 @@ body {
     display: block;
 }
 
-#radarOverlayCanvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 500;
-    display: none;
-}
-
-#radarOverlayCanvas.active {
-    display: block;
-}
-
-#radarScope {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: none;
-    background: var(--radar-bg);
-}
-
-#radarScope.active {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-#radarCanvas {
-    max-width: 100%;
-    max-height: 100%;
-}
-
 /* Right sidebar - Mobile first */
 .sidebar {
     display: flex;
@@ -934,42 +898,6 @@ body {
     }
 }
 
-/* View toggle */
-.view-toggle {
-    display: flex;
-    padding: 10px;
-    gap: 8px;
-    background: var(--bg-panel);
-    border-bottom: 1px solid rgba(74, 158, 255, 0.2);
-}
-
-.view-btn {
-    flex: 1;
-    padding: 10px;
-    border: 1px solid rgba(74, 158, 255, 0.3);
-    background: transparent;
-    color: var(--text-secondary);
-    font-family: 'Orbitron', monospace;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.view-btn:hover {
-    border-color: var(--accent-cyan);
-    color: var(--accent-cyan);
-}
-
-.view-btn.active {
-    background: var(--accent-cyan);
-    border-color: var(--accent-cyan);
-    color: var(--bg-dark);
-}
-
 /* Selected aircraft panel */
 .selected-aircraft {
     flex-shrink: 0;

templates/adsb_dashboard.html

@@ -245,22 +245,12 @@
         <div class="main-display">
             <div class="display-container">
                 <div id="radarMap">
-                    <canvas id="radarOverlayCanvas"></canvas>
-                </div>
-                <div id="radarScope">
-                    <canvas id="radarCanvas"></canvas>
                 </div>
             </div>
         </div>
 
         <!-- Sidebar -->
         <div class="sidebar">
-            <!-- View Toggle -->
-            <div class="view-toggle">
-                <button class="view-btn active" id="mapViewBtn" onclick="setView('map')">MAP</button>
-                <button class="view-btn" id="radarViewBtn" onclick="setView('radar')">RADAR</button>
-            </div>
-
             <!-- Selected Aircraft -->
             <div class="panel selected-aircraft">
                 <div class="panel-header">
@@ -296,9 +286,8 @@
             <div class="control-group">
                 <span class="control-group-label">DISPLAY</span>
                 <div class="control-group-items">
-                    <label title="Show aircraft trails"><input type="checkbox" id="showTrails" onchange="toggleTrails()"> Trails</label>
+                    <label title="Show aircraft trails"><input type="checkbox" id="showTrails" checked onchange="toggleTrails()"> Trails</label>
                     <label title="Show range rings"><input type="checkbox" id="showRangeRings" checked onchange="drawRangeRings()"> Rings</label>
-                    <label title="Radar sweep overlay"><input type="checkbox" id="radarOverlay" onchange="toggleRadarOverlay()"> Radar</label>
                     <label title="Audio alerts for military/emergency"><input type="checkbox" id="alertToggle" checked onchange="toggleAlerts()"> Alerts</label>
                     <label title="Sound when new aircraft detected"><input type="checkbox" id="detectionSoundToggle" onchange="toggleDetectionSound()"> Ping</label>
                     <select id="aircraftFilter" onchange="applyFilter()" title="Filter aircraft">
@@ -428,20 +417,15 @@
         let alertsEnabled = true;
         let detectionSoundEnabled = localStorage.getItem('adsb_detectionSound') !== 'false';  // Default on
         let soundedAircraft = {};  // Track aircraft we've played detection sound for
-        let currentView = 'map';  // 'map' or 'radar'
-
         // Watchlist - persisted to localStorage
         let watchlist = JSON.parse(localStorage.getItem('adsb_watchlist') || '[]');
 
         // Aircraft trails
         let aircraftTrails = {};  // ICAO -> [{lat, lon, alt, time}, ...]
         let trailLines = {};      // ICAO -> L.polyline (array of segments)
-        let showTrails = false;
+        let showTrails = true;
         const MAX_TRAIL_POINTS = 100;
 
-        // Radar scope
-        let radarScope = null;
-        let radarAnimationId = null;
         let maxRange = 200;  // nautical miles
 
         // Statistics
@@ -1387,444 +1371,6 @@ ACARS: ${r.statistics.acarsMessages} messages`;
             delete aircraftTrails[icao];
         }
 
-        // ============================================
-        // RADAR SCOPE (PPI)
-        // ============================================
-        class RadarScope {
-            constructor(canvasId) {
-                this.canvas = document.getElementById(canvasId);
-                this.ctx = this.canvas.getContext('2d');
-                this.sweepAngle = 0;
-                this.blips = [];  // Aircraft blips with afterglow
-                this.resize();
-                window.addEventListener('resize', () => this.resize());
-            }
-
-            resize() {
-                const container = this.canvas.parentElement;
-                const size = Math.min(container.clientWidth, container.clientHeight) - 40;
-                this.canvas.width = size;
-                this.canvas.height = size;
-                this.centerX = size / 2;
-                this.centerY = size / 2;
-                this.radius = (size / 2) - 30;
-            }
-
-            draw() {
-                const ctx = this.ctx;
-                const w = this.canvas.width;
-                const h = this.canvas.height;
-
-                // Clear
-                ctx.fillStyle = '#1a1a2e';
-                ctx.fillRect(0, 0, w, h);
-
-                // Draw range rings
-                this.drawRangeRings();
-
-                // Draw compass rose
-                this.drawCompassRose();
-
-                // Draw aircraft blips
-                this.drawBlips();
-
-                // Draw sweep line
-                this.drawSweep();
-
-                // Draw center point (observer)
-                ctx.beginPath();
-                ctx.arc(this.centerX, this.centerY, 4, 0, Math.PI * 2);
-                ctx.fillStyle = '#ffff00';
-                ctx.fill();
-            }
-
-            drawRangeRings() {
-                const ctx = this.ctx;
-                const rings = [0.25, 0.5, 0.75, 1.0];
-
-                ctx.strokeStyle = 'rgba(0, 255, 255, 0.2)';
-                ctx.lineWidth = 1;
-
-                rings.forEach((ratio, i) => {
-                    const r = this.radius * ratio;
-                    ctx.beginPath();
-                    ctx.arc(this.centerX, this.centerY, r, 0, Math.PI * 2);
-                    ctx.stroke();
-
-                    // Range label
-                    const rangeNm = Math.round(maxRange * ratio);
-                    ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
-                    ctx.font = '10px Roboto Condensed';
-                    ctx.fillText(`${rangeNm}`, this.centerX + r + 5, this.centerY + 4);
-                });
-            }
-
-            drawCompassRose() {
-                const ctx = this.ctx;
-                const directions = [
-                    { angle: 0, label: 'N' },
-                    { angle: 90, label: 'E' },
-                    { angle: 180, label: 'S' },
-                    { angle: 270, label: 'W' }
-                ];
-
-                ctx.fillStyle = '#00ffff';
-                ctx.font = 'bold 12px Orbitron';
-                ctx.textAlign = 'center';
-                ctx.textBaseline = 'middle';
-
-                directions.forEach(d => {
-                    const rad = (d.angle - 90) * Math.PI / 180;
-                    const x = this.centerX + (this.radius + 15) * Math.cos(rad);
-                    const y = this.centerY + (this.radius + 15) * Math.sin(rad);
-                    ctx.fillText(d.label, x, y);
-                });
-
-                // Draw tick marks every 30 degrees
-                ctx.strokeStyle = 'rgba(0, 255, 255, 0.3)';
-                ctx.lineWidth = 1;
-                for (let angle = 0; angle < 360; angle += 30) {
-                    const rad = (angle - 90) * Math.PI / 180;
-                    const inner = this.radius - 5;
-                    const outer = this.radius + 2;
-                    ctx.beginPath();
-                    ctx.moveTo(
-                        this.centerX + inner * Math.cos(rad),
-                        this.centerY + inner * Math.sin(rad)
-                    );
-                    ctx.lineTo(
-                        this.centerX + outer * Math.cos(rad),
-                        this.centerY + outer * Math.sin(rad)
-                    );
-                    ctx.stroke();
-                }
-            }
-
-            drawSweep() {
-                const ctx = this.ctx;
-                const rad = (this.sweepAngle - 90) * Math.PI / 180;
-
-                // Sweep line with gradient
-                const gradient = ctx.createLinearGradient(
-                    this.centerX, this.centerY,
-                    this.centerX + this.radius * Math.cos(rad),
-                    this.centerY + this.radius * Math.sin(rad)
-                );
-                gradient.addColorStop(0, 'rgba(0, 255, 255, 0.8)');
-                gradient.addColorStop(1, 'rgba(0, 255, 255, 0.1)');
-
-                ctx.beginPath();
-                ctx.moveTo(this.centerX, this.centerY);
-                ctx.lineTo(
-                    this.centerX + this.radius * Math.cos(rad),
-                    this.centerY + this.radius * Math.sin(rad)
-                );
-                ctx.strokeStyle = gradient;
-                ctx.lineWidth = 2;
-                ctx.stroke();
-
-                // Sweep arc (afterglow)
-                const startAngle = (this.sweepAngle - 90 - 30) * Math.PI / 180;
-                const endAngle = (this.sweepAngle - 90) * Math.PI / 180;
-                const arcGradient = ctx.createConicGradient(startAngle, this.centerX, this.centerY);
-                arcGradient.addColorStop(0, 'rgba(0, 255, 255, 0)');
-                arcGradient.addColorStop(1, 'rgba(0, 255, 255, 0.15)');
-
-                ctx.beginPath();
-                ctx.moveTo(this.centerX, this.centerY);
-                ctx.arc(this.centerX, this.centerY, this.radius, startAngle, endAngle);
-                ctx.closePath();
-                ctx.fillStyle = arcGradient;
-                ctx.fill();
-
-                // Update sweep angle
-                this.sweepAngle = (this.sweepAngle + 2) % 360;
-            }
-
-            drawBlips() {
-                const ctx = this.ctx;
-                const now = Date.now();
-
-                // Update blips from aircraft data
-                this.blips = [];
-                Object.entries(aircraft).forEach(([icao, ac]) => {
-                    if (!ac.lat || !ac.lon) return;
-                    if (!passesFilter(icao, ac)) return;
-
-                    const distance = calculateDistanceNm(
-                        observerLocation.lat, observerLocation.lon,
-                        ac.lat, ac.lon
-                    );
-
-                    if (distance > maxRange) return;
-
-                    const bearing = calculateBearing(
-                        observerLocation.lat, observerLocation.lon,
-                        ac.lat, ac.lon
-                    );
-
-                    const ratio = distance / maxRange;
-                    const rad = (bearing - 90) * Math.PI / 180;
-                    const x = this.centerX + (this.radius * ratio) * Math.cos(rad);
-                    const y = this.centerY + (this.radius * ratio) * Math.sin(rad);
-
-                    this.blips.push({
-                        x, y,
-                        icao,
-                        callsign: ac.callsign,
-                        altitude: ac.altitude,
-                        selected: icao === selectedIcao
-                    });
-                });
-
-                // Draw blips
-                this.blips.forEach(blip => {
-                    // Blip glow
-                    const gradient = ctx.createRadialGradient(blip.x, blip.y, 0, blip.x, blip.y, 12);
-                    gradient.addColorStop(0, blip.selected ? 'rgba(255, 255, 0, 0.8)' : 'rgba(0, 255, 255, 0.8)');
-                    gradient.addColorStop(1, 'rgba(0, 255, 255, 0)');
-                    ctx.fillStyle = gradient;
-                    ctx.fillRect(blip.x - 12, blip.y - 12, 24, 24);
-
-                    // Blip dot
-                    ctx.beginPath();
-                    ctx.arc(blip.x, blip.y, blip.selected ? 5 : 3, 0, Math.PI * 2);
-                    ctx.fillStyle = blip.selected ? '#ffff00' : '#00ffff';
-                    ctx.fill();
-
-                    // Label
-                    if (blip.callsign || blip.selected) {
-                        ctx.fillStyle = '#00ffff';
-                        ctx.font = '9px Roboto Condensed';
-                        ctx.textAlign = 'left';
-                        ctx.fillText(blip.callsign || blip.icao, blip.x + 8, blip.y - 5);
-                        if (blip.altitude) {
-                            ctx.fillText(`${Math.round(blip.altitude/100)}`, blip.x + 8, blip.y + 7);
-                        }
-                    }
-                });
-            }
-
-            handleClick(event) {
-                const rect = this.canvas.getBoundingClientRect();
-                const x = event.clientX - rect.left;
-                const y = event.clientY - rect.top;
-
-                // Find clicked blip
-                for (const blip of this.blips) {
-                    const dx = x - blip.x;
-                    const dy = y - blip.y;
-                    if (dx * dx + dy * dy < 100) {  // 10px radius
-                        selectAircraft(blip.icao);
-                        return;
-                    }
-                }
-            }
-        }
-
-        function startRadarAnimation() {
-            if (radarAnimationId) return;
-            function animate() {
-                if (currentView === 'radar' && radarScope) {
-                    radarScope.draw();
-                }
-                radarAnimationId = requestAnimationFrame(animate);
-            }
-            animate();
-        }
-
-        function stopRadarAnimation() {
-            if (radarAnimationId) {
-                cancelAnimationFrame(radarAnimationId);
-                radarAnimationId = null;
-            }
-        }
-
-        // ============================================
-        // RADAR OVERLAY ON MAP
-        // ============================================
-        let radarOverlayEnabled = false;
-        let radarOverlayAnimationId = null;
-        let radarOverlaySweepAngle = 0;
-
-        function toggleRadarOverlay() {
-            radarOverlayEnabled = document.getElementById('radarOverlay').checked;
-            const canvas = document.getElementById('radarOverlayCanvas');
-
-            if (radarOverlayEnabled) {
-                canvas.classList.add('active');
-                startRadarOverlayAnimation();
-            } else {
-                canvas.classList.remove('active');
-                stopRadarOverlayAnimation();
-            }
-        }
-
-        function startRadarOverlayAnimation() {
-            if (radarOverlayAnimationId) return;
-
-            const canvas = document.getElementById('radarOverlayCanvas');
-            const ctx = canvas.getContext('2d');
-
-            function animate() {
-                if (radarOverlayEnabled && currentView === 'map') {
-                    drawRadarOverlay(canvas, ctx);
-                }
-                radarOverlayAnimationId = requestAnimationFrame(animate);
-            }
-            animate();
-        }
-
-        function stopRadarOverlayAnimation() {
-            if (radarOverlayAnimationId) {
-                cancelAnimationFrame(radarOverlayAnimationId);
-                radarOverlayAnimationId = null;
-            }
-        }
-
-        function drawRadarOverlay(canvas, ctx) {
-            const container = canvas.parentElement;
-            const w = container.clientWidth;
-            const h = container.clientHeight;
-
-            // Resize canvas if needed
-            if (canvas.width !== w || canvas.height !== h) {
-                canvas.width = w;
-                canvas.height = h;
-            }
-
-            const centerX = w / 2;
-            const centerY = h / 2;
-            const radius = Math.min(w, h) / 2 - 20;
-
-            // Clear with transparency
-            ctx.clearRect(0, 0, w, h);
-
-            // Draw range rings
-            ctx.strokeStyle = 'rgba(0, 255, 255, 0.15)';
-            ctx.lineWidth = 1;
-            const rings = [0.25, 0.5, 0.75, 1.0];
-            rings.forEach((ratio, i) => {
-                const r = radius * ratio;
-                ctx.beginPath();
-                ctx.arc(centerX, centerY, r, 0, Math.PI * 2);
-                ctx.stroke();
-
-                // Range label
-                const rangeNm = Math.round(maxRange * ratio);
-                ctx.fillStyle = 'rgba(0, 255, 255, 0.4)';
-                ctx.font = '10px Roboto Condensed';
-                ctx.fillText(`${rangeNm}nm`, centerX + r + 5, centerY);
-            });
-
-            // Draw compass directions
-            ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
-            ctx.font = 'bold 14px Orbitron';
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-
-            const directions = [
-                { angle: 0, label: 'N', x: centerX, y: centerY - radius - 12 },
-                { angle: 90, label: 'E', x: centerX + radius + 12, y: centerY },
-                { angle: 180, label: 'S', x: centerX, y: centerY + radius + 12 },
-                { angle: 270, label: 'W', x: centerX - radius - 12, y: centerY }
-            ];
-            directions.forEach(d => ctx.fillText(d.label, d.x, d.y));
-
-            // Draw tick marks every 30 degrees
-            ctx.strokeStyle = 'rgba(0, 255, 255, 0.2)';
-            for (let angle = 0; angle < 360; angle += 30) {
-                const rad = (angle - 90) * Math.PI / 180;
-                const inner = radius - 8;
-                const outer = radius + 3;
-                ctx.beginPath();
-                ctx.moveTo(centerX + inner * Math.cos(rad), centerY + inner * Math.sin(rad));
-                ctx.lineTo(centerX + outer * Math.cos(rad), centerY + outer * Math.sin(rad));
-                ctx.stroke();
-            }
-
-            // Draw sweep line
-            const sweepRad = (radarOverlaySweepAngle - 90) * Math.PI / 180;
-            const gradient = ctx.createLinearGradient(
-                centerX, centerY,
-                centerX + radius * Math.cos(sweepRad),
-                centerY + radius * Math.sin(sweepRad)
-            );
-            gradient.addColorStop(0, 'rgba(0, 255, 255, 0.6)');
-            gradient.addColorStop(1, 'rgba(0, 255, 255, 0.1)');
-
-            ctx.beginPath();
-            ctx.moveTo(centerX, centerY);
-            ctx.lineTo(
-                centerX + radius * Math.cos(sweepRad),
-                centerY + radius * Math.sin(sweepRad)
-            );
-            ctx.strokeStyle = gradient;
-            ctx.lineWidth = 2;
-            ctx.stroke();
-
-            // Draw sweep arc (afterglow)
-            const startAngle = (radarOverlaySweepAngle - 90 - 40) * Math.PI / 180;
-            const endAngle = (radarOverlaySweepAngle - 90) * Math.PI / 180;
-
-            ctx.beginPath();
-            ctx.moveTo(centerX, centerY);
-            ctx.arc(centerX, centerY, radius, startAngle, endAngle);
-            ctx.closePath();
-
-            const arcGradient = ctx.createConicGradient(startAngle, centerX, centerY);
-            arcGradient.addColorStop(0, 'rgba(0, 255, 255, 0)');
-            arcGradient.addColorStop(1, 'rgba(0, 255, 255, 0.1)');
-            ctx.fillStyle = arcGradient;
-            ctx.fill();
-
-            // Draw center point
-            ctx.beginPath();
-            ctx.arc(centerX, centerY, 4, 0, Math.PI * 2);
-            ctx.fillStyle = 'rgba(255, 255, 0, 0.8)';
-            ctx.fill();
-            ctx.beginPath();
-            ctx.arc(centerX, centerY, 6, 0, Math.PI * 2);
-            ctx.strokeStyle = 'rgba(255, 255, 0, 0.4)';
-            ctx.lineWidth = 1;
-            ctx.stroke();
-
-            // Update sweep angle
-            radarOverlaySweepAngle = (radarOverlaySweepAngle + 1.5) % 360;
-        }
-
-        // ============================================
-        // VIEW TOGGLE
-        // ============================================
-        function setView(view) {
-            currentView = view;
-            const mapEl = document.getElementById('radarMap');
-            const scopeEl = document.getElementById('radarScope');
-            const mapBtn = document.getElementById('mapViewBtn');
-            const radarBtn = document.getElementById('radarViewBtn');
-
-            if (view === 'map') {
-                mapEl.style.display = 'block';
-                scopeEl.classList.remove('active');
-                mapBtn.classList.add('active');
-                radarBtn.classList.remove('active');
-                stopRadarAnimation();
-                // Invalidate map size after showing
-                setTimeout(() => radarMap && radarMap.invalidateSize(), 100);
-            } else {
-                mapEl.style.display = 'none';
-                scopeEl.classList.add('active');
-                mapBtn.classList.remove('active');
-                radarBtn.classList.add('active');
-                if (!radarScope) {
-                    radarScope = new RadarScope('radarCanvas');
-                    document.getElementById('radarCanvas').addEventListener('click', (e) => radarScope.handleClick(e));
-                }
-                radarScope.resize();
-                startRadarAnimation();
-            }
-        }
-
         function updateRange() {
             maxRange = parseInt(document.getElementById('rangeSelect').value);
             drawRangeRings();
@@ -3242,7 +2788,7 @@ sudo make install</code>
             updateFlightLookupBtn();
 
             const ac = aircraft[icao];
-            if (ac && ac.lat && ac.lon && currentView === 'map') {
+            if (ac && ac.lat && ac.lon) {
                 radarMap.setView([ac.lat, ac.lon], 10);
             }
         }