KB8PMY
/
openhamclock
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix for dx visualizer

Browse Source
pull/27/head
accius 4 days ago
parent 77b1fac79b
commit b4aeb288ad
1 changed files with 66 additions and 50 deletions
Show Stats Download Patch File Download Diff File

116
public/index.html
Unescape View File

@ -1630,57 +1630,73 @@
// Add new DX paths if enabled // Add new DX paths if enabled
if (showDXPaths && dxPaths && dxPaths.length > 0) { if (showDXPaths && dxPaths && dxPaths.length > 0) {
dxPaths.forEach((path, index) => { dxPaths.forEach((path, index) => {
// Draw great circle line from spotter to DX station try {
const pathPoints = getGreatCirclePoints( // Skip if missing or invalid coordinates
path.spotterLat, path.spotterLon, if (!path.spotterLat || !path.spotterLon || !path.dxLat || !path.dxLon) return;
path.dxLat, path.dxLon if (isNaN(path.spotterLat) || isNaN(path.spotterLon) || isNaN(path.dxLat) || isNaN(path.dxLon)) return;
);
// Draw great circle line from spotter to DX station
// Use different colors based on band (derived from frequency) const pathPoints = getGreatCirclePoints(
const freq = parseFloat(path.freq); path.spotterLat, path.spotterLon,
let color = '#4488ff'; // Default blue path.dxLat, path.dxLon
if (freq >= 1.8 && freq < 2) color = '#ff6666'; // 160m - red );
else if (freq >= 3.5 && freq < 4) color = '#ff9966'; // 80m - orange
else if (freq >= 7 && freq < 7.5) color = '#ffcc66'; // 40m - yellow // Skip if no valid path points
else if (freq >= 10 && freq < 10.5) color = '#99ff66'; // 30m - lime if (!pathPoints || !Array.isArray(pathPoints) || pathPoints.length === 0) return;
else if (freq >= 14 && freq < 14.5) color = '#66ff99'; // 20m - green
else if (freq >= 18 && freq < 18.5) color = '#66ffcc'; // 17m - teal // Use different colors based on band (derived from frequency)
else if (freq >= 21 && freq < 21.5) color = '#66ccff'; // 15m - cyan const freq = parseFloat(path.freq);
else if (freq >= 24 && freq < 25) color = '#6699ff'; // 12m - blue let color = '#4488ff'; // Default blue
else if (freq >= 28 && freq < 30) color = '#9966ff'; // 10m - purple if (freq >= 1.8 && freq < 2) color = '#ff6666'; // 160m - red
else if (freq >= 50 && freq < 54) color = '#ff66ff'; // 6m - magenta else if (freq >= 3.5 && freq < 4) color = '#ff9966'; // 80m - orange
else if (freq >= 7 && freq < 7.5) color = '#ffcc66'; // 40m - yellow
// Handle antimeridian crossing else if (freq >= 10 && freq < 10.5) color = '#99ff66'; // 30m - lime
const segments = Array.isArray(pathPoints[0]) ? pathPoints : [pathPoints]; else if (freq >= 14 && freq < 14.5) color = '#66ff99'; // 20m - green
segments.forEach(segment => { else if (freq >= 18 && freq < 18.5) color = '#66ffcc'; // 17m - teal
const line = L.polyline(segment, { else if (freq >= 21 && freq < 21.5) color = '#66ccff'; // 15m - cyan
color: color, else if (freq >= 24 && freq < 25) color = '#6699ff'; // 12m - blue
weight: 1.5, else if (freq >= 28 && freq < 30) color = '#9966ff'; // 10m - purple
opacity: 0.5 else if (freq >= 50 && freq < 54) color = '#ff66ff'; // 6m - magenta
}).addTo(map);
dxPathsLinesRef.current.push(line); // Handle antimeridian crossing - pathPoints may be array of segments or single segment
}); // Check if first element's first element is an array (segment structure) vs just [lat, lon]
const isSegmented = Array.isArray(pathPoints[0]) && pathPoints[0].length > 0 && Array.isArray(pathPoints[0][0]);
const segments = isSegmented ? pathPoints : [pathPoints];
segments.forEach(segment => {
if (segment && Array.isArray(segment) && segment.length > 1) {
const line = L.polyline(segment, {
color: color,
weight: 1.5,
opacity: 0.5
}).addTo(map);
dxPathsLinesRef.current.push(line);
}
});
// Add small markers at DX station end only (to reduce clutter) // Add small markers at DX station end only (to reduce clutter)
const dxIcon = L.divIcon({ const dxIcon = L.divIcon({
className: '', className: '',
html: `<div style="width: 6px; height: 6px; background: ${color}; border-radius: 50%; border: 1px solid white; box-shadow: 0 0 3px ${color};"></div>`, html: `<div style="width: 6px; height: 6px; background: ${color}; border-radius: 50%; border: 1px solid white; box-shadow: 0 0 3px ${color};"></div>`,
iconSize: [6, 6], iconSize: [6, 6],
iconAnchor: [3, 3] iconAnchor: [3, 3]
}); });
const marker = L.marker([path.dxLat, path.dxLon], { icon: dxIcon }) const marker = L.marker([path.dxLat, path.dxLon], { icon: dxIcon })
.bindPopup(` .bindPopup(`
<div style="font-family: JetBrains Mono, monospace; font-size: 12px;"> <div style="font-family: JetBrains Mono, monospace; font-size: 12px;">
<b style="color: ${color}">${path.dxCall}</b><br> <b style="color: ${color}">${path.dxCall}</b><br>
<span style="color: #888">spotted by</span> <b>${path.spotter}</b><br> <span style="color: #888">spotted by</span> <b>${path.spotter}</b><br>
<b>${path.freq} MHz</b><br> <b>${path.freq} MHz</b><br>
${path.comment || ''}<br> ${path.comment || ''}<br>
<span style="color: #666">${path.time}</span> <span style="color: #666">${path.time}</span>
</div> </div>
`) `)
.addTo(map); .addTo(map);
dxPathsMarkersRef.current.push(marker); dxPathsMarkersRef.current.push(marker);
} catch (err) {
console.error('[DX Paths] Error rendering path:', err, path);
}
}); });
} }
}, [dxPaths, showDXPaths]); }, [dxPaths, showDXPaths]);

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.