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

fixing callsign bounding, k index, legend

Browse Source
pull/6/head
accius 3 days ago
parent 1647b5133b
commit a19be94768
2 changed files with 61 additions and 27 deletions
Show Stats Download Patch File Download Diff File

51
src/components/SolarPanel.jsx
Unescape View File

@ -11,7 +11,7 @@ export const SolarPanel = ({ solarIndices }) => {
return saved === 'indices';
} catch (e) { return false; }
});
const [imageType, setImageType] = useState('0193'); // AIA 193 (corona)
const [imageType, setImageType] = useState('0193');
const toggleMode = () => {
const newMode = !showIndices;
@ -21,7 +21,6 @@ export const SolarPanel = ({ solarIndices }) => {
} catch (e) {}
};
// SDO/AIA image types
const imageTypes = {
'0193': { name: 'AIA 193Å', desc: 'Corona' },
'0304': { name: 'AIA 304Å', desc: 'Chromosphere' },
@ -30,7 +29,6 @@ export const SolarPanel = ({ solarIndices }) => {
'HMIIC': { name: 'HMI Int', desc: 'Visible' }
};
// SDO images update every ~15 minutes
const timestamp = Math.floor(Date.now() / 900000) * 900000;
const imageUrl = `https://sdo.gsfc.nasa.gov/assets/img/latest/latest_256_${imageType}.jpg?t=${timestamp}`;
@ -42,6 +40,9 @@ export const SolarPanel = ({ solarIndices }) => {
return '#00ff88';
};
// Get K-Index data - server returns 'kp' not 'kIndex'
const kpData = solarIndices?.data?.kp || solarIndices?.data?.kIndex;
return (
<div className="panel" style={{ padding: '8px' }}>
{/* Header with toggle */}
@ -131,23 +132,43 @@ export const SolarPanel = ({ solarIndices }) => {
<div style={{ background: 'var(--bg-tertiary)', borderRadius: '6px', padding: '8px', display: 'flex', alignItems: 'center', gap: '12px' }}>
<div style={{ minWidth: '60px' }}>
<div style={{ fontSize: '10px', color: 'var(--text-muted)' }}>K-Index</div>
<div style={{ fontSize: '22px', fontWeight: '700', color: getKpColor(solarIndices.data.kIndex?.current), fontFamily: 'Orbitron, monospace' }}>
{solarIndices.data.kIndex?.current ?? '--'}
<div style={{ fontSize: '22px', fontWeight: '700', color: getKpColor(kpData?.current), fontFamily: 'Orbitron, monospace' }}>
{kpData?.current ?? '--'}
</div>
</div>
<div style={{ flex: 1 }}>
{solarIndices.data.kIndex?.forecast?.length > 0 && (
{kpData?.forecast?.length > 0 ? (
<div style={{ display: 'flex', gap: '2px', alignItems: 'flex-end', height: '30px' }}>
{kpData.forecast.slice(0, 8).map((item, i) => {
const val = typeof item === 'object' ? item.value : item;
return (
<div key={i} style={{
flex: 1,
height: `${Math.max(10, (val / 9) * 100)}%`,
background: getKpColor(val),
borderRadius: '2px',
opacity: 0.8
}} title={`Kp ${val}`} />
);
})}
</div>
) : kpData?.history?.length > 0 ? (
<div style={{ display: 'flex', gap: '2px', alignItems: 'flex-end', height: '30px' }}>
{solarIndices.data.kIndex.forecast.slice(0, 8).map((kp, i) => (
<div key={i} style={{
flex: 1,
height: `${Math.max(10, (kp / 9) * 100)}%`,
background: getKpColor(kp),
borderRadius: '2px',
opacity: 0.8
}} title={`Kp ${kp}`} />
))}
{kpData.history.slice(-8).map((item, i) => {
const val = typeof item === 'object' ? item.value : item;
return (
<div key={i} style={{
flex: 1,
height: `${Math.max(10, (val / 9) * 100)}%`,
background: getKpColor(val),
borderRadius: '2px',
opacity: 0.8
}} title={`Kp ${val}`} />
);
})}
</div>
) : (
<div style={{ color: 'var(--text-muted)', fontSize: '10px' }}>No forecast data</div>
)}
</div>
</div>

37
src/components/WorldMap.jsx
Unescape View File

@ -290,7 +290,7 @@ export const WorldMap = ({
if (showDXLabels || isHovered) {
const labelIcon = L.divIcon({
className: '',
html: `<div style="background: ${isHovered ? '#fff' : color}; color: ${isHovered ? color : '#000'}; padding: 2px 6px; border-radius: 3px; font-family: JetBrains Mono; font-size: 11px; font-weight: 600; white-space: nowrap;">${path.dxCall}</div>`,
html: `<div style="background: ${isHovered ? '#fff' : color}; color: ${isHovered ? color : '#000'}; padding: 3px 8px; border-radius: 4px; font-family: JetBrains Mono; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid ${isHovered ? color : 'rgba(0,0,0,0.3)'};">${path.dxCall}</div>`,
iconAnchor: [0, -10]
});
const label = L.marker([path.dxLat, path.dxLon], { icon: labelIcon, interactive: false }).addTo(map);
@ -438,34 +438,47 @@ export const WorldMap = ({
background: 'rgba(0, 0, 0, 0.85)',
border: '1px solid #444',
borderRadius: '6px',
padding: '6px 12px',
padding: '8px 14px',
zIndex: 1000,
display: 'flex',
gap: '12px',
gap: '10px',
alignItems: 'center',
fontSize: '10px',
fontSize: '12px',
fontFamily: 'JetBrains Mono, monospace'
}}>
{showDXPaths && (
<div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<span style={{ color: '#888' }}>DX:</span>
<span style={{ color: '#ff6666' }}>160m</span>
<span style={{ color: '#ffcc66' }}>40m</span>
<span style={{ color: '#66ff99' }}>20m</span>
<span style={{ color: '#66ccff' }}>15m</span>
<span style={{ color: '#9966ff' }}>10m</span>
<span style={{ background: '#ff6666', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>160m</span>
<span style={{ background: '#ff9966', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>80m</span>
<span style={{ background: '#ffcc66', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>40m</span>
<span style={{ background: '#ccff66', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>30m</span>
<span style={{ background: '#66ff99', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>20m</span>
<span style={{ background: '#66ffcc', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>17m</span>
<span style={{ background: '#66ccff', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>15m</span>
<span style={{ background: '#6699ff', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>12m</span>
<span style={{ background: '#9966ff', color: '#fff', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>10m</span>
<span style={{ background: '#cc66ff', color: '#fff', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>6m</span>
</div>
)}
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<span style={{ background: '#00aaff', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>● DE</span>
<span style={{ background: '#ff8800', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>● DX</span>
</div>
{showPOTA && (
<div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
<span style={{ color: '#aa66ff' }}>● POTA</span>
<span style={{ background: '#aa66ff', color: '#fff', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>● POTA</span>
</div>
)}
{showSatellites && (
<div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
<span style={{ color: '#00ffff' }}>🛰 SAT</span>
<span style={{ background: '#00ffff', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>🛰 SAT</span>
</div>
)}
<div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
<span style={{ color: '#ffcc00' }}>☀ Sun</span>
<span style={{ color: '#aaaaaa' }}>🌙 Moon</span>
</div>
</div>
</div>
);

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.