${escapeHtml(pass.name)}
${escapeHtml(pass.mode)}
Time
${escapeHtml(timeStr)}
Max El
${pass.maxEl}°
Duration
${pass.duration} min
Freq
${pass.frequency} MHz
${pass.quality}
${countdown}
`;
}).join('');
}
// ========================
// Polar Plot
// ========================
/**
* Draw polar plot for a pass trajectory
*/
function drawPolarPlot(pass) {
if (!pass) return;
const canvas = document.getElementById('wxsatPolarCanvas');
if (!canvas) return;
const ctx = canvas.getContext('2d');
const w = canvas.width;
const h = canvas.height;
const cx = w / 2;
const cy = h / 2;
const r = Math.min(cx, cy) - 20;
ctx.clearRect(0, 0, w, h);
// Background
ctx.fillStyle = '#0d1117';
ctx.fillRect(0, 0, w, h);
// Grid circles (30, 60, 90 deg elevation)
ctx.strokeStyle = '#2a3040';
ctx.lineWidth = 0.5;
[90, 60, 30].forEach((el, i) => {
const gr = r * (1 - el / 90);
ctx.beginPath();
ctx.arc(cx, cy, gr, 0, Math.PI * 2);
ctx.stroke();
// Label
ctx.fillStyle = '#555';
ctx.font = '9px Roboto Condensed, monospace';
ctx.textAlign = 'left';
ctx.fillText(el + '\u00b0', cx + gr + 3, cy - 2);
});
// Horizon circle
ctx.strokeStyle = '#3a4050';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI * 2);
ctx.stroke();
// Cardinal directions
ctx.fillStyle = '#666';
ctx.font = '10px Roboto Condensed, monospace';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('N', cx, cy - r - 10);
ctx.fillText('S', cx, cy + r + 10);
ctx.fillText('E', cx + r + 10, cy);
ctx.fillText('W', cx - r - 10, cy);
// Cross hairs
ctx.strokeStyle = '#2a3040';
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.moveTo(cx, cy - r);
ctx.lineTo(cx, cy + r);
ctx.moveTo(cx - r, cy);
ctx.lineTo(cx + r, cy);
ctx.stroke();
// Trajectory
const trajectory = pass?.trajectory;
if (!trajectory || trajectory.length === 0) return;
const color = pass.mode === 'LRPT' ? '#00ff88' : '#00d4ff';
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = 2;
trajectory.forEach((pt, i) => {
const elRad = (90 - pt.el) / 90;
const azRad = (pt.az - 90) * Math.PI / 180; // offset: N is up
const px = cx + r * elRad * Math.cos(azRad);
const py = cy + r * elRad * Math.sin(azRad);
if (i === 0) ctx.moveTo(px, py);
else ctx.lineTo(px, py);
});
ctx.stroke();
// Start point (green dot)
const start = trajectory[0];
const startR = (90 - start.el) / 90;
const startAz = (start.az - 90) * Math.PI / 180;
ctx.fillStyle = '#00ff88';
ctx.beginPath();
ctx.arc(cx + r * startR * Math.cos(startAz), cy + r * startR * Math.sin(startAz), 4, 0, Math.PI * 2);
ctx.fill();
// End point (red dot)
const end = trajectory[trajectory.length - 1];
const endR = (90 - end.el) / 90;
const endAz = (end.az - 90) * Math.PI / 180;
ctx.fillStyle = '#ff4444';
ctx.beginPath();
ctx.arc(cx + r * endR * Math.cos(endAz), cy + r * endR * Math.sin(endAz), 4, 0, Math.PI * 2);
ctx.fill();
// Max elevation marker
let maxEl = 0;
let maxPt = trajectory[0];
trajectory.forEach(pt => { if (pt.el > maxEl) { maxEl = pt.el; maxPt = pt; } });
const maxR = (90 - maxPt.el) / 90;
const maxAz = (maxPt.az - 90) * Math.PI / 180;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(cx + r * maxR * Math.cos(maxAz), cy + r * maxR * Math.sin(maxAz), 3, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = color;
ctx.font = '9px Roboto Condensed, monospace';
ctx.textAlign = 'center';
ctx.fillText(Math.round(maxEl) + '\u00b0', cx + r * maxR * Math.cos(maxAz), cy + r * maxR * Math.sin(maxAz) - 8);
}
// ========================
// Ground Track Map
// ========================
/**
* Initialize styled real-world map panel.
*/
async function initGroundMap() {
const container = document.getElementById('wxsatGroundMap');
if (!container) return;
if (typeof L === 'undefined') return;
const observer = getObserverCoords();
const defaultCenter = observer
? [Math.max(-85, Math.min(85, observer.lat)), normalizeLon(observer.lon)]
: [12, 0];
const defaultZoom = 1;
if (!groundMap) {
groundMap = L.map(container, {
center: defaultCenter,
zoom: defaultZoom,
minZoom: 1,
maxZoom: 7,
zoomControl: false,
attributionControl: false,
worldCopyJump: true,
preferCanvas: true,
});
if (typeof Settings !== 'undefined' && Settings.createTileLayer) {
await Settings.init();
Settings.createTileLayer().addTo(groundMap);
Settings.registerMap(groundMap);
} else {
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
subdomains: 'abcd',
maxZoom: 18,
noWrap: false,
crossOrigin: true,
className: 'tile-layer-cyan',
}).addTo(groundMap);
}
groundGridLayer = L.layerGroup().addTo(groundMap);
addStyledGridOverlay(groundGridLayer);
groundTrackLayer = L.layerGroup().addTo(groundMap);
groundOverlayLayer = L.layerGroup().addTo(groundMap);
}
setTimeout(() => {
if (!groundMap) return;
groundMap.invalidateSize(false);
groundMap.setView(defaultCenter, defaultZoom, { animate: false });
updateGroundTrack(getSelectedPass());
}, 140);
}
/**
* Update map panel subtitle.
*/
function updateProjectionInfo(text) {
const infoEl = document.getElementById('wxsatMapInfo');
if (infoEl) infoEl.textContent = text || '--';
}
/**
* Normalize longitude to [-180, 180).
*/
function normalizeLon(value) {
const lon = Number(value);
if (!isFinite(lon)) return 0;
return ((((lon + 180) % 360) + 360) % 360) - 180;
}
/**
* Build track segments that do not cross the date line.
*/
function buildTrackSegments(track) {
const segments = [];
let currentSegment = [];
track.forEach((point) => {
const lat = Number(point?.lat);
const lon = normalizeLon(point?.lon);
if (!isFinite(lat) || !isFinite(lon)) return;
if (currentSegment.length > 0) {
const prevLon = currentSegment[currentSegment.length - 1][1];
if (Math.abs(lon - prevLon) > 180) {
if (currentSegment.length > 1) segments.push(currentSegment);
currentSegment = [];
}
}
currentSegment.push([lat, lon]);
});
if (currentSegment.length > 1) segments.push(currentSegment);
return segments;
}
/**
* Draw a subtle graticule over the base map for a cyber/wireframe look.
*/
function addStyledGridOverlay(layer) {
if (!layer || typeof L === 'undefined') return;
layer.clearLayers();
for (let lon = -180; lon <= 180; lon += 30) {
const line = [];
for (let lat = -85; lat <= 85; lat += 5) line.push([lat, lon]);
L.polyline(line, {
color: '#4ed2ff',
weight: lon % 60 === 0 ? 1.1 : 0.8,
opacity: lon % 60 === 0 ? 0.2 : 0.12,
interactive: false,
lineCap: 'round',
}).addTo(layer);
}
for (let lat = -75; lat <= 75; lat += 15) {
const line = [];
for (let lon = -180; lon <= 180; lon += 5) line.push([lat, lon]);
L.polyline(line, {
color: '#5be7ff',
weight: lat % 30 === 0 ? 1.1 : 0.8,
opacity: lat % 30 === 0 ? 0.2 : 0.12,
interactive: false,
lineCap: 'round',
}).addTo(layer);
}
}
function clearSatelliteCrosshair() {
if (!groundOverlayLayer || !satCrosshairMarker) return;
groundOverlayLayer.removeLayer(satCrosshairMarker);
satCrosshairMarker = null;
}
function createSatelliteCrosshairIcon() {
return L.divIcon({
className: 'wxsat-crosshair-icon',
iconSize: [30, 30],
iconAnchor: [15, 15],
html: `