Fix weather sat auto-scheduler and Mercator tracking

static/css/modes/weather-satellite.css

@@ -509,10 +509,64 @@
     max-height: 300px;
 }
 
-.wxsat-ground-map {
-    height: 200px;
-    background: var(--bg-primary, #0d1117);
-}
+.wxsat-ground-map {
+    height: 200px;
+    background: var(--bg-primary, #0d1117);
+}
+
+.wxsat-crosshair-icon {
+    background: transparent;
+    border: none;
+}
+
+.wxsat-crosshair-marker {
+    position: relative;
+    width: 26px;
+    height: 26px;
+}
+
+.wxsat-crosshair-h,
+.wxsat-crosshair-v,
+.wxsat-crosshair-ring,
+.wxsat-crosshair-dot {
+    position: absolute;
+    display: block;
+}
+
+.wxsat-crosshair-h {
+    top: 50%;
+    left: 2px;
+    right: 2px;
+    height: 1px;
+    background: rgba(255, 76, 76, 0.9);
+    transform: translateY(-50%);
+}
+
+.wxsat-crosshair-v {
+    left: 50%;
+    top: 2px;
+    bottom: 2px;
+    width: 1px;
+    background: rgba(255, 76, 76, 0.9);
+    transform: translateX(-50%);
+}
+
+.wxsat-crosshair-ring {
+    inset: 5px;
+    border: 1px solid rgba(255, 76, 76, 0.95);
+    border-radius: 50%;
+    box-shadow: 0 0 8px rgba(255, 76, 76, 0.45);
+}
+
+.wxsat-crosshair-dot {
+    width: 4px;
+    height: 4px;
+    left: 50%;
+    top: 50%;
+    border-radius: 50%;
+    background: #ff4c4c;
+    transform: translate(-50%, -50%);
+}
 
 /* ===== Image Gallery Panel ===== */
 .wxsat-gallery-panel {

static/js/modes/weather-satellite.js

@@ -1,7 +1,7 @@
 /**
  * Weather Satellite Mode
- * NOAA APT and Meteor LRPT decoder interface with auto-scheduler,
- * polar plot, ground track map, countdown, and timeline.
+ * NOAA APT and Meteor LRPT decoder interface with auto-scheduler,
+ * polar plot, mercator map, countdown, and timeline.
  */
 
 const WeatherSat = (function() {
@@ -13,10 +13,12 @@ const WeatherSat = (function() {
     let selectedPassIndex = -1;
     let currentSatellite = null;
     let countdownInterval = null;
-    let schedulerEnabled = false;
-    let groundMap = null;
-    let groundTrackLayer = null;
-    let observerMarker = null;
+    let schedulerEnabled = false;
+    let groundMap = null;
+    let groundTrackLayer = null;
+    let groundOverlayLayer = null;
+    let satCrosshairMarker = null;
+    let observerMarker = null;
     let consoleEntries = [];
     let consoleCollapsed = false;
     let currentPhase = 'idle';
@@ -40,7 +42,7 @@ const WeatherSat = (function() {
     /**
      * Load observer location into input fields
      */
-    function loadLocationInputs() {
+    function loadLocationInputs() {
         const latInput = document.getElementById('wxsatObsLat');
         const lonInput = document.getElementById('wxsatObsLon');
 
@@ -484,7 +486,7 @@ const WeatherSat = (function() {
     /**
      * Load pass predictions (with trajectory + ground track)
      */
-    async function loadPasses() {
+    async function loadPasses() {
         let storedLat, storedLon;
         
         // Use ObserverLocation if available, otherwise fall back to localStorage
@@ -497,31 +499,38 @@ const WeatherSat = (function() {
             storedLon = localStorage.getItem('observerLon');
         }
 
-        if (!storedLat || !storedLon) {
-            renderPasses([]);
-            return;
-        }
+        if (!storedLat || !storedLon) {
+            passes = [];
+            selectedPassIndex = -1;
+            renderPasses([]);
+            renderTimeline([]);
+            updateCountdownFromPasses();
+            updateGroundTrack(null);
+            return;
+        }
 
         try {
             const url = `/weather-sat/passes?latitude=${storedLat}&longitude=${storedLon}&hours=24&min_elevation=15&trajectory=true&ground_track=true`;
             const response = await fetch(url);
             const data = await response.json();
 
-            if (data.status === 'ok') {
-                passes = data.passes || [];
-                selectedPassIndex = -1;
-                renderPasses(passes);
-                renderTimeline(passes);
-                updateCountdownFromPasses();
-                // Always select the first upcoming pass so the polar plot
-                // and ground track reflect the current list after every refresh.
-                if (passes.length > 0) {
-                    selectPass(0);
-                }
-            }
-        } catch (err) {
-            console.error('Failed to load passes:', err);
-        }
+            if (data.status === 'ok') {
+                passes = data.passes || [];
+                selectedPassIndex = -1;
+                renderPasses(passes);
+                renderTimeline(passes);
+                updateCountdownFromPasses();
+                // Always select the first upcoming pass so the polar plot
+                // and ground track reflect the current list after every refresh.
+                if (passes.length > 0) {
+                    selectPass(0);
+                } else {
+                    updateGroundTrack(null);
+                }
+            }
+        } catch (err) {
+            console.error('Failed to load passes:', err);
+        }
     }
 
     /**
@@ -747,17 +756,18 @@ const WeatherSat = (function() {
     /**
      * Initialize Leaflet ground track map
      */
-    function initGroundMap() {
-        const container = document.getElementById('wxsatGroundMap');
-        if (!container || groundMap) return;
-        if (typeof L === 'undefined') return;
-
-        groundMap = L.map(container, {
-            center: [20, 0],
-            zoom: 2,
-            zoomControl: false,
-            attributionControl: false,
-        });
+    function initGroundMap() {
+        const container = document.getElementById('wxsatGroundMap');
+        if (!container || groundMap) return;
+        if (typeof L === 'undefined') return;
+
+        groundMap = L.map(container, {
+            center: [20, 0],
+            zoom: 2,
+            zoomControl: false,
+            attributionControl: false,
+            crs: L.CRS.EPSG3857, // Web Mercator projection
+        });
 
         // Check tile provider from settings
         let tileUrl = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
@@ -768,24 +778,39 @@ const WeatherSat = (function() {
             }
         } catch (e) {}
 
-        L.tileLayer(tileUrl, { maxZoom: 10 }).addTo(groundMap);
-
-        groundTrackLayer = L.layerGroup().addTo(groundMap);
-
-        // Delayed invalidation to fix sizing
-        setTimeout(() => { if (groundMap) groundMap.invalidateSize(); }, 200);
-    }
+        L.tileLayer(tileUrl, { maxZoom: 10 }).addTo(groundMap);
+
+        groundTrackLayer = L.layerGroup().addTo(groundMap);
+        groundOverlayLayer = L.layerGroup().addTo(groundMap);
+
+        const selected = getSelectedPass();
+        if (selected) {
+            updateGroundTrack(selected);
+        } else {
+            updateSatelliteCrosshair(null);
+        }
+
+        // Delayed invalidation to fix sizing
+        setTimeout(() => { if (groundMap) groundMap.invalidateSize(); }, 200);
+    }
 
     /**
      * Update ground track on the map
      */
-    function updateGroundTrack(pass) {
-        if (!groundMap || !groundTrackLayer) return;
-
-        groundTrackLayer.clearLayers();
-
-        const track = pass.groundTrack;
-        if (!track || track.length === 0) return;
+    function updateGroundTrack(pass) {
+        if (!groundMap || !groundTrackLayer) return;
+
+        groundTrackLayer.clearLayers();
+        if (!pass) {
+            updateSatelliteCrosshair(null);
+            return;
+        }
+
+        const track = pass.groundTrack;
+        if (!track || track.length === 0) {
+            updateSatelliteCrosshair(null);
+            return;
+        }
 
         const color = pass.mode === 'LRPT' ? '#00ff88' : '#00d4ff';
 
@@ -821,13 +846,134 @@ const WeatherSat = (function() {
             }).addTo(groundTrackLayer);
         }
 
-        // Fit bounds
-        try {
-            const bounds = L.latLngBounds(latlngs);
-            if (!isNaN(lat) && !isNaN(lon)) bounds.extend([lat, lon]);
-            groundMap.fitBounds(bounds, { padding: [20, 20] });
-        } catch (e) {}
-    }
+        // Fit bounds
+        try {
+            const bounds = L.latLngBounds(latlngs);
+            if (!isNaN(lat) && !isNaN(lon)) bounds.extend([lat, lon]);
+            groundMap.fitBounds(bounds, { padding: [20, 20] });
+        } catch (e) {}
+
+        updateSatelliteCrosshair(pass);
+    }
+
+    function updateMercatorInfo(text) {
+        const infoEl = document.getElementById('wxsatMercatorInfo');
+        if (infoEl) infoEl.textContent = text || '--';
+    }
+
+    function clearSatelliteCrosshair() {
+        if (!groundOverlayLayer || !satCrosshairMarker) return;
+        groundOverlayLayer.removeLayer(satCrosshairMarker);
+        satCrosshairMarker = null;
+    }
+
+    function createSatelliteCrosshairIcon() {
+        return L.divIcon({
+            className: 'wxsat-crosshair-icon',
+            iconSize: [26, 26],
+            iconAnchor: [13, 13],
+            html: `
+                <div class="wxsat-crosshair-marker">
+                    <span class="wxsat-crosshair-h"></span>
+                    <span class="wxsat-crosshair-v"></span>
+                    <span class="wxsat-crosshair-ring"></span>
+                    <span class="wxsat-crosshair-dot"></span>
+                </div>
+            `,
+        });
+    }
+
+    function getSelectedPass() {
+        if (selectedPassIndex < 0 || selectedPassIndex >= passes.length) return null;
+        return passes[selectedPassIndex];
+    }
+
+    function getSatellitePositionForPass(pass, atTime = new Date()) {
+        const track = pass?.groundTrack;
+        if (!Array.isArray(track) || track.length === 0) return null;
+
+        const first = track[0];
+        if (track.length === 1) {
+            const lat = Number(first.lat);
+            const lon = Number(first.lon);
+            if (!isFinite(lat) || !isFinite(lon)) return null;
+            return { lat, lon };
+        }
+
+        const start = parsePassDate(pass.startTimeISO);
+        const end = parsePassDate(pass.endTimeISO);
+
+        let fraction = 0;
+        if (start && end && end > start) {
+            const totalMs = end.getTime() - start.getTime();
+            const elapsedMs = atTime.getTime() - start.getTime();
+            fraction = Math.max(0, Math.min(1, elapsedMs / totalMs));
+        }
+
+        const lastIndex = track.length - 1;
+        const idxFloat = fraction * lastIndex;
+        const idx0 = Math.floor(idxFloat);
+        const idx1 = Math.min(lastIndex, idx0 + 1);
+        const t = idxFloat - idx0;
+
+        const p0 = track[idx0];
+        const p1 = track[idx1];
+        const lat0 = Number(p0?.lat);
+        const lon0 = Number(p0?.lon);
+        const lat1 = Number(p1?.lat);
+        const lon1 = Number(p1?.lon);
+
+        if (!isFinite(lat0) || !isFinite(lon0) || !isFinite(lat1) || !isFinite(lon1)) {
+            return null;
+        }
+
+        return {
+            lat: lat0 + ((lat1 - lat0) * t),
+            lon: lon0 + ((lon1 - lon0) * t),
+        };
+    }
+
+    function updateSatelliteCrosshair(pass) {
+        if (!groundMap || !groundOverlayLayer || typeof L === 'undefined') return;
+
+        if (!pass) {
+            clearSatelliteCrosshair();
+            updateMercatorInfo('--');
+            return;
+        }
+
+        const position = getSatellitePositionForPass(pass);
+        if (!position) {
+            clearSatelliteCrosshair();
+            updateMercatorInfo(`${pass.name || pass.satellite || '--'} --`);
+            return;
+        }
+
+        const latlng = [position.lat, position.lon];
+        if (!satCrosshairMarker) {
+            satCrosshairMarker = L.marker(latlng, {
+                icon: createSatelliteCrosshairIcon(),
+                interactive: false,
+                keyboard: false,
+                zIndexOffset: 800,
+            }).addTo(groundOverlayLayer);
+        } else {
+            satCrosshairMarker.setLatLng(latlng);
+        }
+
+        const tooltipText = `${pass.name || pass.satellite || 'Satellite'} ${position.lat.toFixed(2)}°, ${position.lon.toFixed(2)}°`;
+        if (!satCrosshairMarker.getTooltip()) {
+            satCrosshairMarker.bindTooltip(tooltipText, {
+                direction: 'top',
+                offset: [0, -10],
+                opacity: 0.9,
+            });
+        } else {
+            satCrosshairMarker.setTooltipContent(tooltipText);
+        }
+
+        updateMercatorInfo(tooltipText);
+    }
 
     // ========================
     // Countdown
@@ -930,9 +1076,11 @@ const WeatherSat = (function() {
             });
         }
 
-        // Keep timeline cursor in sync
-        updateTimelineCursor();
-    }
+        // Keep timeline cursor in sync
+        updateTimelineCursor();
+        // Keep selected satellite marker synchronized with time progression.
+        updateSatelliteCrosshair(getSelectedPass());
+    }
 
     // ========================
     // Timeline
@@ -1017,7 +1165,7 @@ const WeatherSat = (function() {
     /**
      * Enable auto-scheduler
      */
-    async function enableScheduler() {
+    async function enableScheduler() {
         let lat, lon;
         if (window.ObserverLocation && ObserverLocation.isSharedEnabled()) {
             const shared = ObserverLocation.getShared();
@@ -1041,41 +1189,60 @@ const WeatherSat = (function() {
         const gainInput = document.getElementById('weatherSatGain');
         const biasTInput = document.getElementById('weatherSatBiasT');
 
-        try {
-            const response = await fetch('/weather-sat/schedule/enable', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
+        try {
+            const response = await fetch('/weather-sat/schedule/enable', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
                     latitude: lat,
                     longitude: lon,
                     device: parseInt(deviceSelect?.value || '0', 10),
                     gain: parseFloat(gainInput?.value || '40'),
-                    bias_t: biasTInput?.checked || false,
-                }),
-            });
-
-            const data = await response.json();
-            schedulerEnabled = true;
-            updateSchedulerUI(data);
-            startStream();
-            showNotification('Weather Sat', `Auto-scheduler enabled (${data.scheduled_count || 0} passes)`);
-        } catch (err) {
-            console.error('Failed to enable scheduler:', err);
-            showNotification('Weather Sat', 'Failed to enable auto-scheduler');
-        }
-    }
+                    bias_t: biasTInput?.checked || false,
+                }),
+            });
+
+            let data = {};
+            try {
+                data = await response.json();
+            } catch (err) {
+                data = {};
+            }
+
+            if (!response.ok || !data || data.enabled !== true) {
+                schedulerEnabled = false;
+                updateSchedulerUI({ enabled: false, scheduled_count: 0 });
+                showNotification('Weather Sat', data.message || 'Failed to enable auto-scheduler');
+                return;
+            }
+
+            schedulerEnabled = true;
+            updateSchedulerUI(data);
+            startStream();
+            showNotification('Weather Sat', `Auto-scheduler enabled (${data.scheduled_count || 0} passes)`);
+        } catch (err) {
+            console.error('Failed to enable scheduler:', err);
+            schedulerEnabled = false;
+            updateSchedulerUI({ enabled: false, scheduled_count: 0 });
+            showNotification('Weather Sat', 'Failed to enable auto-scheduler');
+        }
+    }
 
     /**
      * Disable auto-scheduler
      */
-    async function disableScheduler() {
-        try {
-            await fetch('/weather-sat/schedule/disable', { method: 'POST' });
-            schedulerEnabled = false;
-            updateSchedulerUI({ enabled: false });
-            if (!isRunning) stopStream();
-            showNotification('Weather Sat', 'Auto-scheduler disabled');
-        } catch (err) {
+    async function disableScheduler() {
+        try {
+            const response = await fetch('/weather-sat/schedule/disable', { method: 'POST' });
+            if (!response.ok) {
+                showNotification('Weather Sat', 'Failed to disable auto-scheduler');
+                return;
+            }
+            schedulerEnabled = false;
+            updateSchedulerUI({ enabled: false });
+            if (!isRunning) stopStream();
+            showNotification('Weather Sat', 'Auto-scheduler disabled');
+        } catch (err) {
             console.error('Failed to disable scheduler:', err);
         }
     }
@@ -1083,14 +1250,15 @@ const WeatherSat = (function() {
     /**
      * Check current scheduler status
      */
-    async function checkSchedulerStatus() {
-        try {
-            const response = await fetch('/weather-sat/schedule/status');
-            const data = await response.json();
-            schedulerEnabled = data.enabled;
-            updateSchedulerUI(data);
-            if (schedulerEnabled) startStream();
-        } catch (err) {
+    async function checkSchedulerStatus() {
+        try {
+            const response = await fetch('/weather-sat/schedule/status');
+            if (!response.ok) return;
+            const data = await response.json();
+            schedulerEnabled = data.enabled;
+            updateSchedulerUI(data);
+            if (schedulerEnabled) startStream();
+        } catch (err) {
             // Scheduler endpoint may not exist yet
         }
     }