From 90c454afd98f338fddf786dfc137c78d2d36b21f Mon Sep 17 00:00:00 2001 From: James Smith Date: Tue, 30 Dec 2025 22:53:34 +0000 Subject: [PATCH] Apply consistent UI patterns across all dashboards MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Satellite dashboard: Add header stat badges, bottom controls bar, streamlined sidebar with countdown/telemetry/pass list panels - Main dashboard: Add UTC clock, mode-specific header stats with real-time syncing, active mode indicator with pulse animation - Controls bar: Reorganize into logical groups (Mode, Export), gradient background, styled status indicator - Panel styling: Gradient backgrounds, indicator dots on headers, Orbitron font for titles, rounded corners throughout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- templates/index.html | 433 ++++++++++++++++- templates/satellite_dashboard.html | 749 +++++++++++------------------ 2 files changed, 694 insertions(+), 488 deletions(-) diff --git a/templates/index.html b/templates/index.html index 82ca6c8..5bc464f 100644 --- a/templates/index.html +++ b/templates/index.html @@ -13,7 +13,7 @@ @@ -688,25 +647,31 @@ SATELLITE COMMAND // INTERCEPT -
- - +
+
+ 7 + satellites +
+
+ 0 + visible +
+
+ 0 + passes +
+
+ 0 + best el +
- TRACKING ACTIVE + TRACKING
-
--:--:-- UTC
- ← Main Dashboard +
--:--:-- UTC
+ Main Dashboard
@@ -728,13 +693,27 @@ GROUND TRACK // WORLD VIEW
-
+
+ +
+ + +
+
@@ -765,29 +744,37 @@
- -
+ +
- TRACKING STATS + LIVE TELEMETRY
-
-
-
0
-
Satellites
+
+
+
Latitude
+
---.----
-
-
0
-
Visible Now
+
+
Longitude
+
---.----
-
-
0
-
Passes Today
+
+
Altitude
+
--- km
-
-
0°
-
Best Elevation
+
+
Elevation
+
--.-
+
+
+
Azimuth
+
---.-
+
+
+
Distance
+
---- km
@@ -807,66 +794,20 @@
+
- -
-
- LIVE TELEMETRY -
-
-
-
-
- Latitude - ---.----° -
-
- Longitude - ---.----° -
-
- Altitude - --- km -
-
- Elevation - --.-° -
-
- Azimuth - ---.-° -
-
- Distance - ---- km -
-
-
+ +
+
+ Lat: +
- - -
-
- OBSERVER LOCATION -
-
-
-
-
- - -
-
- - -
-
-
- - -
-
+
+ Lon: +
+ +
@@ -879,7 +820,7 @@ let trackLine = null; let observerMarker = null; let orbitTrack = null; - let selectedSatellite = 25544; // Default to ISS + let selectedSatellite = 25544; const satellites = { 25544: { name: 'ISS (ZARYA)', color: '#00ffff' }, @@ -891,41 +832,32 @@ 54234: { name: 'METEOR-M2-3', color: '#ff00ff' } }; - // Handle satellite selection change function onSatelliteChange() { const select = document.getElementById('satSelect'); selectedSatellite = parseInt(select.value); const satName = satellites[selectedSatellite]?.name || 'Unknown'; - // Update tracking status - document.getElementById('trackingStatus').textContent = 'ACQUIRING ' + satName; + document.getElementById('trackingStatus').textContent = 'ACQUIRING'; document.getElementById('trackingDot').style.background = 'var(--accent-orange)'; - // Clear current pass selection while loading new data selectedPass = null; passes = []; - // Clear map layers from previous satellite if (groundMap) { if (trackLine) { groundMap.removeLayer(trackLine); trackLine = null; } if (satMarker) { groundMap.removeLayer(satMarker); satMarker = null; } if (orbitTrack) { groundMap.removeLayer(orbitTrack); orbitTrack = null; } } - // Recalculate passes for new satellite - // calculatePasses() will call selectPass(0) which calls updateRealTimePositions() calculatePasses(); } - // Initialize dashboard document.addEventListener('DOMContentLoaded', () => { initGroundMap(); updateClock(); setInterval(updateClock, 1000); setInterval(updateCountdown, 1000); setInterval(updateRealTimePositions, 5000); - - // Try to get location, then calculate getLocation(); }); @@ -991,16 +923,15 @@ } updateObserverMarker(lat, lon); - // Update tracking status - document.getElementById('trackingStatus').textContent = 'TRACKING ' + satName; + document.getElementById('trackingStatus').textContent = 'TRACKING'; document.getElementById('trackingDot').style.background = 'var(--accent-green)'; } else { - document.getElementById('trackingStatus').textContent = 'ERROR: ' + (data.message || 'Unknown'); + document.getElementById('trackingStatus').textContent = 'ERROR'; document.getElementById('trackingDot').style.background = 'var(--accent-red)'; } } catch (err) { console.error('Pass calculation error:', err); - document.getElementById('trackingStatus').textContent = 'CONNECTION ERROR'; + document.getElementById('trackingStatus').textContent = 'OFFLINE'; document.getElementById('trackingDot').style.background = 'var(--accent-red)'; } } @@ -1015,13 +946,12 @@ return; } - // Show count in header if (countEl) countEl.textContent = `(${passes.length})`; container.innerHTML = passes.slice(0, 10).map((pass, idx) => { const quality = pass.maxEl >= 60 ? 'excellent' : pass.maxEl >= 30 ? 'good' : 'fair'; const qualityText = pass.maxEl >= 60 ? 'EXCELLENT' : pass.maxEl >= 30 ? 'GOOD' : 'FAIR'; - const time = pass.startTime.split(' ')[1] || pass.startTime; // Extract time portion + const time = pass.startTime.split(' ')[1] || pass.startTime; return `
@@ -1031,7 +961,7 @@
${time} - ${pass.maxEl.toFixed(0)}° max · ${pass.duration} min + ${pass.maxEl.toFixed(0)}° · ${pass.duration} min
`; @@ -1048,7 +978,6 @@ drawPolarPlot(pass); updateGroundTrack(pass); updateTelemetry(pass); - // Immediately fetch full orbit track and fit bounds updateRealTimePositions(true); } @@ -1063,11 +992,10 @@ const cy = canvas.height / 2; const radius = Math.min(cx, cy) - 40; - // Clear ctx.fillStyle = '#0a0a0f'; ctx.fillRect(0, 0, canvas.width, canvas.height); - // Draw elevation rings + // Elevation rings ctx.strokeStyle = 'rgba(0, 212, 255, 0.15)'; ctx.lineWidth = 1; for (let el = 30; el <= 90; el += 30) { @@ -1076,7 +1004,6 @@ ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.stroke(); - // Label ctx.fillStyle = 'rgba(0, 212, 255, 0.4)'; ctx.font = '10px JetBrains Mono'; ctx.fillText(el + '°', cx + 5, cy - r + 12); @@ -1118,7 +1045,7 @@ ctx.fillText(l.text, x, y); }); - // Draw pass trajectory + // Pass trajectory if (pass && pass.trajectory) { ctx.strokeStyle = pass.color || '#00d4ff'; ctx.lineWidth = 3; @@ -1145,7 +1072,6 @@ ctx.stroke(); ctx.setLineDash([]); - // Max elevation marker if (maxElPoint) { ctx.beginPath(); ctx.arc(maxElPoint.x, maxElPoint.y, 8, 0, Math.PI * 2); @@ -1154,15 +1080,6 @@ ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.stroke(); - - // Glow effect - ctx.beginPath(); - ctx.arc(maxElPoint.x, maxElPoint.y, 15, 0, Math.PI * 2); - ctx.strokeStyle = pass.color || '#00d4ff'; - ctx.lineWidth = 1; - ctx.globalAlpha = 0.3; - ctx.stroke(); - ctx.globalAlpha = 1; } } } @@ -1170,22 +1087,11 @@ function updateGroundTrack(pass) { if (!groundMap) return; - // Clear all existing map layers and reset references - if (trackLine) { - groundMap.removeLayer(trackLine); - trackLine = null; - } - if (satMarker) { - groundMap.removeLayer(satMarker); - satMarker = null; - } - if (orbitTrack) { - groundMap.removeLayer(orbitTrack); - orbitTrack = null; - } + if (trackLine) { groundMap.removeLayer(trackLine); trackLine = null; } + if (satMarker) { groundMap.removeLayer(satMarker); satMarker = null; } + if (orbitTrack) { groundMap.removeLayer(orbitTrack); orbitTrack = null; } if (pass && pass.groundTrack) { - // Split track only at true antimeridian crossings (±180° line) const segments = []; let currentSegment = []; @@ -1193,22 +1099,16 @@ const p = pass.groundTrack[i]; if (currentSegment.length > 0) { const prevLon = currentSegment[currentSegment.length - 1][1]; - // Only split when crossing the antimeridian (one side > 90, other < -90) const crossesAntimeridian = (prevLon > 90 && p.lon < -90) || (prevLon < -90 && p.lon > 90); if (crossesAntimeridian) { - if (currentSegment.length >= 1) { - segments.push(currentSegment); - } + if (currentSegment.length >= 1) segments.push(currentSegment); currentSegment = []; } } currentSegment.push([p.lat, p.lon]); } - if (currentSegment.length >= 1) { - segments.push(currentSegment); - } + if (currentSegment.length >= 1) segments.push(currentSegment); - // Draw each segment as separate polyline - solid line for visible pass trackLine = L.layerGroup(); const allCoords = []; segments.forEach(seg => { @@ -1221,17 +1121,10 @@ }); trackLine.addTo(groundMap); - // Current position marker if (pass.currentPos) { const satIcon = L.divIcon({ className: 'sat-marker', - html: `
`, + html: `
`, iconSize: [16, 16], iconAnchor: [8, 8] }); @@ -1241,7 +1134,6 @@ .bindPopup(`${pass.name}
Alt: ${pass.currentPos.alt?.toFixed(0)} km`); } - // Fit bounds using collected coordinates if (allCoords.length > 0) { groundMap.fitBounds(L.latLngBounds(allCoords), { padding: [30, 30] }); } @@ -1255,13 +1147,7 @@ const obsIcon = L.divIcon({ className: 'obs-marker', - html: `
`, + html: `
`, iconSize: [12, 12], iconAnchor: [6, 6] }); @@ -1281,11 +1167,11 @@ function updateTelemetry(pass) { if (!pass || !pass.currentPos) { - document.getElementById('telLat').textContent = '---.----°'; - document.getElementById('telLon').textContent = '---.----°'; + document.getElementById('telLat').textContent = '---.----'; + document.getElementById('telLon').textContent = '---.----'; document.getElementById('telAlt').textContent = '--- km'; - document.getElementById('telEl').textContent = '--.-°'; - document.getElementById('telAz').textContent = '---.-°'; + document.getElementById('telEl').textContent = '--.-'; + document.getElementById('telAz').textContent = '---.-'; document.getElementById('telDist').textContent = '---- km'; return; } @@ -1313,7 +1199,6 @@ let nextPass = null; for (const pass of passes) { - // Parse the startTimeISO field const start = new Date(pass.startTimeISO); if (start > now) { nextPass = pass; @@ -1321,10 +1206,7 @@ } } - if (!nextPass) { - // All passes are in the past, show the first one anyway - nextPass = passes[0]; - } + if (!nextPass) nextPass = passes[0]; document.getElementById('countdownSat').textContent = nextPass.satellite; @@ -1332,7 +1214,6 @@ const diff = passTime - now; if (diff <= 0) { - // Pass is happening now or passed document.getElementById('countDays').textContent = '00'; document.getElementById('countHours').textContent = '00'; document.getElementById('countMins').textContent = '00'; @@ -1350,7 +1231,6 @@ document.getElementById('countMins').textContent = mins.toString().padStart(2, '0'); document.getElementById('countSecs').textContent = secs.toString().padStart(2, '0'); - // Animate if within 1 minute const elements = ['countDays', 'countHours', 'countMins', 'countSecs'].map(id => document.getElementById(id)); if (diff < 60000) { elements.forEach(el => el.classList.add('active')); @@ -1363,13 +1243,11 @@ const lat = parseFloat(document.getElementById('obsLat').value); const lon = parseFloat(document.getElementById('obsLon').value); - // Use satellite from selected pass, or fall back to dropdown selection let targetSatellite = selectedSatellite; let satColor = satellites[selectedSatellite]?.color || '#00d4ff'; if (selectedPass !== null && passes[selectedPass]) { const pass = passes[selectedPass]; - // Use the satellite name from the pass (backend accepts names or NORAD IDs) targetSatellite = pass.satellite; satColor = pass.color || satColor; } @@ -1390,7 +1268,6 @@ if (data.status === 'success' && data.positions.length > 0) { const pos = data.positions[0]; - // Update telemetry document.getElementById('telLat').textContent = pos.lat.toFixed(4) + '°'; document.getElementById('telLon').textContent = pos.lon.toFixed(4) + '°'; document.getElementById('telAlt').textContent = pos.altitude.toFixed(0) + ' km'; @@ -1398,36 +1275,23 @@ document.getElementById('telAz').textContent = pos.azimuth.toFixed(1) + '°'; document.getElementById('telDist').textContent = pos.distance.toFixed(0) + ' km'; - // Update visible count document.getElementById('statVisible').textContent = pos.elevation > 0 ? '1' : '0'; - // Update satellite marker on map if (groundMap) { if (satMarker) groundMap.removeLayer(satMarker); const satIcon = L.divIcon({ className: 'sat-marker-live', - html: `
`, + html: `
`, iconSize: [20, 20], iconAnchor: [10, 10] }); satMarker = L.marker([pos.lat, pos.lon], { icon: satIcon }).addTo(groundMap); } - // Always show full orbit track from position data if (pos.track && groundMap) { - // Only remove orbit track, keep trackLine (visible pass) intact - if (orbitTrack) { - groundMap.removeLayer(orbitTrack); - } + if (orbitTrack) groundMap.removeLayer(orbitTrack); - // Split track only at true antimeridian crossings (±180° line) const segments = []; let currentSegment = []; @@ -1435,25 +1299,19 @@ const p = pos.track[i]; if (currentSegment.length > 0) { const prevLon = currentSegment[currentSegment.length - 1][1]; - // Only split when crossing the antimeridian (one side > 90, other < -90) const crossesAntimeridian = (prevLon > 90 && p.lon < -90) || (prevLon < -90 && p.lon > 90); if (crossesAntimeridian) { - if (currentSegment.length >= 1) { - segments.push(currentSegment); - } + if (currentSegment.length >= 1) segments.push(currentSegment); currentSegment = []; } } currentSegment.push([p.lat, p.lon]); } - if (currentSegment.length >= 1) { - segments.push(currentSegment); - } + if (currentSegment.length >= 1) segments.push(currentSegment); - // Draw each segment as separate polyline orbitTrack = L.layerGroup(); const allOrbitCoords = []; - segments.forEach((seg, i) => { + segments.forEach(seg => { L.polyline(seg, { color: satColor, weight: 2, @@ -1464,18 +1322,14 @@ }); orbitTrack.addTo(groundMap); - // Fit map to show the full orbit track (only on initial load) if (fitBoundsToOrbit && allOrbitCoords.length > 0) { - // Add observer location to bounds allOrbitCoords.push([lat, lon]); groundMap.fitBounds(L.latLngBounds(allOrbitCoords), { padding: [30, 30] }); } } - // Update polar plot - preserve pass trajectory if selected if (selectedPass !== null && passes[selectedPass]) { drawPolarPlot(passes[selectedPass]); - // Draw current position on top of pass trajectory drawCurrentPositionOnPolar(pos.azimuth, pos.elevation, satColor); } else { drawPolarPlotWithPosition(pos.azimuth, pos.elevation, satColor); @@ -1497,11 +1351,9 @@ const cy = canvas.height / 2; const radius = Math.min(cx, cy) - 40; - // Clear ctx.fillStyle = '#0a0a0f'; ctx.fillRect(0, 0, canvas.width, canvas.height); - // Draw elevation rings ctx.strokeStyle = 'rgba(0, 212, 255, 0.15)'; ctx.lineWidth = 1; for (let elRing = 30; elRing <= 90; elRing += 30) { @@ -1515,14 +1367,12 @@ ctx.fillText(elRing + '°', cx + 5, cy - r + 12); } - // Horizon ctx.strokeStyle = 'rgba(0, 212, 255, 0.3)'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.stroke(); - // Cardinal lines ctx.strokeStyle = 'rgba(0, 212, 255, 0.1)'; ctx.lineWidth = 1; for (let azLine = 0; azLine < 360; azLine += 45) { @@ -1533,7 +1383,6 @@ ctx.stroke(); } - // Cardinal labels ctx.font = 'bold 14px Orbitron'; const labels = [ { text: 'N', az: 0, color: '#ff4444' }, @@ -1551,45 +1400,13 @@ ctx.fillText(l.text, x, y); }); - // Draw pass trajectory only if the pass is currently happening - if (passes.length > 0 && selectedPass !== null && passes[selectedPass]?.trajectory) { - const pass = passes[selectedPass]; - const passStart = new Date(pass.startTimeISO); - const passEnd = new Date(passStart.getTime() + (pass.duration || 10) * 60 * 1000); - const now = new Date(); - - // Only show trajectory if pass is currently active - if (now >= passStart && now <= passEnd) { - ctx.strokeStyle = color; - ctx.lineWidth = 2; - ctx.setLineDash([8, 4]); - ctx.globalAlpha = 0.5; - ctx.beginPath(); - - pass.trajectory.forEach((pt, i) => { - const r = radius * (1 - pt.el / 90); - const angle = (pt.az - 90) * Math.PI / 180; - const x = cx + r * Math.cos(angle); - const y = cy + r * Math.sin(angle); - - if (i === 0) ctx.moveTo(x, y); - else ctx.lineTo(x, y); - }); - ctx.stroke(); - ctx.setLineDash([]); - ctx.globalAlpha = 1; - } - } - - // Draw current satellite position - if (el > -5) { // Show even slightly below horizon + if (el > -5) { const posEl = Math.max(0, el); const r = radius * (1 - posEl / 90); const angle = (az - 90) * Math.PI / 180; const x = cx + r * Math.cos(angle); const y = cy + r * Math.sin(angle); - // Glow effect const gradient = ctx.createRadialGradient(x, y, 0, x, y, 25); gradient.addColorStop(0, color); gradient.addColorStop(1, 'transparent'); @@ -1600,7 +1417,6 @@ ctx.fill(); ctx.globalAlpha = 1; - // Main marker ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI * 2); ctx.fillStyle = color; @@ -1609,18 +1425,15 @@ ctx.lineWidth = 3; ctx.stroke(); - // Satellite label ctx.font = 'bold 11px Orbitron'; ctx.fillStyle = '#fff'; ctx.textAlign = 'center'; ctx.fillText(satellites[selectedSatellite]?.name || 'SAT', x, y - 20); - // Elevation indicator ctx.font = '10px JetBrains Mono'; ctx.fillStyle = el > 0 ? '#00ff88' : '#ff4444'; ctx.fillText(el.toFixed(1) + '°', x, y + 25); } else { - // Below horizon indicator ctx.font = '12px Rajdhani'; ctx.fillStyle = '#ff4444'; ctx.textAlign = 'center'; @@ -1628,7 +1441,6 @@ } } - // Draw just the current position marker on the polar plot (without clearing) function drawCurrentPositionOnPolar(az, el, color) { const canvas = document.getElementById('polarPlot'); const ctx = canvas.getContext('2d'); @@ -1637,7 +1449,6 @@ const cy = canvas.height / 2; const radius = Math.min(cx, cy) - 40; - // Draw current satellite position if (el > -5) { const posEl = Math.max(0, el); const r = radius * (1 - posEl / 90); @@ -1645,7 +1456,6 @@ const x = cx + r * Math.cos(angle); const y = cy + r * Math.sin(angle); - // Glow effect const gradient = ctx.createRadialGradient(x, y, 0, x, y, 25); gradient.addColorStop(0, color); gradient.addColorStop(1, 'transparent'); @@ -1656,7 +1466,6 @@ ctx.fill(); ctx.globalAlpha = 1; - // Main marker ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI * 2); ctx.fillStyle = color; @@ -1665,13 +1474,11 @@ ctx.lineWidth = 3; ctx.stroke(); - // Satellite label ctx.font = 'bold 11px Orbitron'; ctx.fillStyle = '#fff'; ctx.textAlign = 'center'; ctx.fillText(satellites[selectedSatellite]?.name || 'SAT', x, y - 20); - // Elevation indicator ctx.font = '10px JetBrains Mono'; ctx.fillStyle = el > 0 ? '#00ff88' : '#ff4444'; ctx.fillText(el.toFixed(1) + '°', x, y + 25);