feat: Add ISS tracking globe and location controls to SSTV mode

- Update TLE data with current orbital elements for accurate predictions
- Add location inputs (lat/lon) and GPS button to SSTV stats strip
- Add TLE update button to fetch latest orbital data from CelesTrak
- Add 3D globe visualization showing real-time ISS position
- Display ISS coordinates and altitude below globe
- Auto-refresh ISS position every 5 seconds
- Add NOAA-15, NOAA-18, NOAA-19 satellites to TLE data

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-29 16:22:24 +00:00
parent 18ef6218d8
commit 07ae227cee
4 changed files with 535 additions and 24 deletions
+55 -12
View File
@@ -1741,20 +1741,63 @@
<span class="sstv-strip-label">IMAGES</span>
</div>
</div>
<div class="sstv-strip-divider"></div>
<!-- Location Controls -->
<div class="sstv-strip-group">
<div class="sstv-strip-location">
<span class="sstv-strip-label" style="margin-right: 6px;">LOC</span>
<input type="number" id="sstvObsLat" class="sstv-loc-input" step="0.0001" placeholder="Lat" title="Latitude">
<input type="number" id="sstvObsLon" class="sstv-loc-input" step="0.0001" placeholder="Lon" title="Longitude">
<button class="sstv-strip-btn gps" onclick="SSTV.useGPS(this)" title="Use GPS location">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 12px; height: 12px;">
<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/>
<line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/>
<line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/>
</svg>
GPS
</button>
</div>
</div>
<div class="sstv-strip-divider"></div>
<!-- TLE Update -->
<div class="sstv-strip-group">
<button class="sstv-strip-btn update-tle" onclick="SSTV.updateTLE(this)" title="Update satellite orbital data from CelesTrak">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 12px; height: 12px;">
<path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
<path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/>
<path d="M16 21h5v-5"/>
</svg>
Update TLE
</button>
</div>
</div>
<!-- ISS Pass Info -->
<div id="sstvIssInfo">
<div class="sstv-iss-info">
<svg class="sstv-iss-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M13 7L9 3 5 7l4 4"/>
<path d="m17 11 4 4-4 4-4-4"/>
<path d="m8 12 4 4 6-6-4-4-6 6"/>
</svg>
<div class="sstv-iss-details">
<div class="sstv-iss-label">Next ISS Pass</div>
<div class="sstv-iss-value">Loading...</div>
<div class="sstv-iss-note">Check ARISS.org for SSTV event schedules</div>
<!-- ISS Info Row (Globe + Pass Info) -->
<div class="sstv-iss-row">
<!-- 3D Globe -->
<div class="sstv-globe-container">
<canvas id="sstvGlobe" width="200" height="200"></canvas>
<div class="sstv-globe-info">
<div class="sstv-globe-label">ISS POSITION</div>
<div class="sstv-globe-coords">
<span id="sstvIssLat">--.-°</span>, <span id="sstvIssLon">--.-°</span>
</div>
<div class="sstv-globe-alt">Alt: <span id="sstvIssAlt">---</span> km</div>
</div>
</div>
<!-- Pass Info -->
<div id="sstvIssInfo" class="sstv-pass-info-container">
<div class="sstv-iss-info">
<svg class="sstv-iss-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M13 7L9 3 5 7l4 4"/>
<path d="m17 11 4 4-4 4-4-4"/>
<path d="m8 12 4 4 6-6-4-4-6 6"/>
</svg>
<div class="sstv-iss-details">
<div class="sstv-iss-label">Next ISS Pass</div>
<div class="sstv-iss-value">Loading...</div>
<div class="sstv-iss-note">Check ARISS.org for SSTV event schedules</div>
</div>
</div>
</div>
</div>