feat: icom Scope in Icom Tab
This commit is contained in:
@@ -1,31 +1,60 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Radio, AudioLines, RefreshCw } from 'lucide-react';
|
||||
import { Radio, AudioLines, RefreshCw, Mic, Zap, Activity } from 'lucide-react';
|
||||
import {
|
||||
GetIcomState, IcomRefresh,
|
||||
IcomSetAFGain, IcomSetRFGain, IcomSetNB, IcomSetNBLevel, IcomSetNR, IcomSetNRLevel,
|
||||
IcomSetANF, IcomSetAGC, IcomSetPreamp, IcomSetAtt, IcomSetFilter,
|
||||
IcomSetRFPower, IcomSetMicGain, IcomSetSplit, IcomTune, IcomSetPTT,
|
||||
IcomSetScope, IcomScopeData, IcomSetScopeMode, GetCATState, SetCATFrequency,
|
||||
} from '../../wailsjs/go/main/App';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
type IcomState = {
|
||||
available: boolean; model?: string; mode?: string;
|
||||
transmitting: boolean; split: boolean;
|
||||
s_meter: number; power_meter: number; swr_meter: number;
|
||||
rf_power: number; mic_gain: number;
|
||||
af_gain: number; rf_gain: number;
|
||||
nb: boolean; nb_level: number; nr: boolean; nr_level: number; anf: boolean;
|
||||
agc?: string; preamp: number; att: number; filter: number;
|
||||
};
|
||||
|
||||
const ZERO: IcomState = {
|
||||
available: false, af_gain: 0, rf_gain: 0,
|
||||
available: false, transmitting: false, split: false,
|
||||
s_meter: 0, power_meter: 0, swr_meter: 0, rf_power: 0, mic_gain: 0,
|
||||
af_gain: 0, rf_gain: 0,
|
||||
nb: false, nb_level: 0, nr: false, nr_level: 0, anf: false,
|
||||
preamp: 0, att: 0, filter: 1,
|
||||
};
|
||||
|
||||
function Slider({ value, onChange, disabled, accent = '#2563eb' }: {
|
||||
value: number; onChange: (v: number) => void; disabled?: boolean; accent?: string;
|
||||
function Slider({ value, onChange, disabled, accent = '#2563eb', step = 1 }: {
|
||||
value: number; onChange: (v: number) => void; disabled?: boolean; accent?: string; step?: number;
|
||||
}) {
|
||||
const v = Math.max(0, Math.min(100, value));
|
||||
const ref = useRef<HTMLInputElement>(null);
|
||||
// Mouse-wheel adjusts the slider. React's onWheel is passive (preventDefault
|
||||
// is ignored), so attach a non-passive native listener; read live values via
|
||||
// refs to avoid stale closures.
|
||||
const valRef = useRef(value); valRef.current = value;
|
||||
const cbRef = useRef(onChange); cbRef.current = onChange;
|
||||
const disRef = useRef(disabled); disRef.current = disabled;
|
||||
const stepRef = useRef(step); stepRef.current = step;
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const onWheel = (e: WheelEvent) => {
|
||||
if (disRef.current) return;
|
||||
e.preventDefault();
|
||||
const d = e.deltaY < 0 ? stepRef.current : -stepRef.current;
|
||||
const nv = Math.max(0, Math.min(100, valRef.current + d));
|
||||
if (nv !== valRef.current) cbRef.current(nv);
|
||||
};
|
||||
el.addEventListener('wheel', onWheel, { passive: false });
|
||||
return () => el.removeEventListener('wheel', onWheel);
|
||||
}, []);
|
||||
return (
|
||||
<input
|
||||
ref={ref}
|
||||
type="range" min={0} max={100} value={v} disabled={disabled}
|
||||
onChange={(e) => onChange(parseInt(e.target.value, 10))}
|
||||
className={cn('flex-1 h-1.5 rounded-full appearance-none cursor-pointer disabled:opacity-30 disabled:cursor-default',
|
||||
@@ -95,13 +124,200 @@ function Row({ label, children }: { label: string; children: React.ReactNode })
|
||||
);
|
||||
}
|
||||
|
||||
// IcomPanel — receive-DSP control surface for an Icom on the CI-V backend.
|
||||
// Unlike the Flex (which pushes state), the Icom is polled: the cache reflects
|
||||
// the last refresh plus optimistic updates. Front-panel knob changes show after
|
||||
// the next ↻ Refresh.
|
||||
// Meter — a thin horizontal bar for a live 0-100 reading (S / Po / SWR).
|
||||
function Meter({ label, value, accent, scale }: { label: string; value: number; accent: string; scale?: string }) {
|
||||
const v = Math.max(0, Math.min(100, value));
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-9 shrink-0 text-[11px] font-bold uppercase tracking-wider text-muted-foreground">{label}</span>
|
||||
<div className="flex-1 h-2.5 rounded-full bg-muted/60 overflow-hidden">
|
||||
<div className="h-full rounded-full transition-[width] duration-150" style={{ width: `${v}%`, background: accent }} />
|
||||
</div>
|
||||
<span className="w-10 text-right text-[11px] font-mono tabular-nums text-muted-foreground">{scale ?? v}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// S-meter raw 0-100 → S-unit label (S9 ≈ 47% on the CI-V 0-255 scale; above = +dB).
|
||||
function sUnit(v: number): string {
|
||||
if (v >= 47) {
|
||||
const over = Math.round((v - 47) / 8.8) * 10;
|
||||
return over > 0 ? `S9+${over}` : 'S9';
|
||||
}
|
||||
return `S${Math.max(0, Math.min(9, Math.round(v / 5.2)))}`;
|
||||
}
|
||||
|
||||
// ScopePanadapter — enables the rig's spectrum-scope stream and draws the
|
||||
// reassembled sweep on a canvas. The amplitude array is raw rig scale (~0-160);
|
||||
// we normalise to the tallest recent peak so the trace fills the height.
|
||||
function ScopePanadapter() {
|
||||
const [on, setOn] = useState(false);
|
||||
const [fixed, setFixed] = useState(true);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const peakRef = useRef(160); // running amplitude ceiling for auto-scale
|
||||
const spanRef = useRef({ low: 0, high: 0 }); // latest sweep edges, for click-to-tune
|
||||
const vfoRef = useRef(0); // latest VFO frequency, for wheel-tune
|
||||
|
||||
const toggle = () => {
|
||||
const next = !on;
|
||||
setOn(next);
|
||||
IcomSetScope(next).catch(() => {});
|
||||
};
|
||||
const setMode = (nextFixed: boolean) => {
|
||||
setFixed(nextFixed);
|
||||
IcomSetScopeMode(nextFixed).catch(() => {});
|
||||
};
|
||||
// Stop the stream when the panel unmounts.
|
||||
useEffect(() => () => { IcomSetScope(false).catch(() => {}); }, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!on) return;
|
||||
let raf = 0, lastSeq = -1, alive = true;
|
||||
const tick = async () => {
|
||||
if (!alive) return;
|
||||
try {
|
||||
const sw = await IcomScopeData();
|
||||
if (sw && sw.seq !== lastSeq && sw.amp && sw.amp.length) {
|
||||
lastSeq = sw.seq;
|
||||
setFixed(sw.fixed);
|
||||
spanRef.current = { low: sw.low_hz, high: sw.high_hz };
|
||||
let vfo = 0;
|
||||
try {
|
||||
const cs = await GetCATState();
|
||||
vfo = cs?.split && cs.freq_rx_hz ? cs.freq_rx_hz : (cs?.freq_hz || 0);
|
||||
} catch {}
|
||||
if (vfo > 0) vfoRef.current = vfo;
|
||||
draw(sw.amp, sw.low_hz, sw.high_hz, vfo);
|
||||
}
|
||||
} catch {}
|
||||
if (alive) raf = window.setTimeout(() => { raf = requestAnimationFrame(tick); }, 40) as unknown as number;
|
||||
};
|
||||
raf = requestAnimationFrame(tick);
|
||||
return () => { alive = false; cancelAnimationFrame(raf); window.clearTimeout(raf); };
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [on]);
|
||||
|
||||
// Double-click tunes the rig to the clicked frequency.
|
||||
const onDblClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
const cv = canvasRef.current;
|
||||
const { low, high } = spanRef.current;
|
||||
if (!cv || !(low > 0 && high > low)) return;
|
||||
const rect = cv.getBoundingClientRect();
|
||||
const frac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
|
||||
const hz = Math.round((low + frac * (high - low)) / 100) * 100; // nearest 100 Hz
|
||||
SetCATFrequency(hz).catch(() => {});
|
||||
};
|
||||
|
||||
// Mouse-wheel over the scope QSYs ±100 Hz. Non-passive listener so we can
|
||||
// preventDefault (else the page scrolls); optimistic vfoRef so quick spins
|
||||
// accumulate before the poll reconciles.
|
||||
useEffect(() => {
|
||||
const el = canvasRef.current;
|
||||
if (!el || !on) return;
|
||||
const onWheel = (e: WheelEvent) => {
|
||||
if (!vfoRef.current) return;
|
||||
e.preventDefault();
|
||||
const next = vfoRef.current + (e.deltaY < 0 ? 100 : -100);
|
||||
vfoRef.current = next;
|
||||
SetCATFrequency(next).catch(() => {});
|
||||
};
|
||||
el.addEventListener('wheel', onWheel, { passive: false });
|
||||
return () => el.removeEventListener('wheel', onWheel);
|
||||
}, [on]);
|
||||
|
||||
const draw = (amp: number[], lowHz: number, highHz: number, vfoHz: number) => {
|
||||
const cv = canvasRef.current;
|
||||
if (!cv) return;
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const w = cv.clientWidth, h = cv.clientHeight;
|
||||
if (cv.width !== w * dpr || cv.height !== h * dpr) { cv.width = w * dpr; cv.height = h * dpr; }
|
||||
const ctx = cv.getContext('2d');
|
||||
if (!ctx) return;
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
// Auto-scale: track the peak, decaying slowly so the floor doesn't jump.
|
||||
const peak = Math.max(...amp);
|
||||
peakRef.current = Math.max(peak, peakRef.current * 0.95, 40);
|
||||
const scale = peakRef.current;
|
||||
|
||||
// Grid.
|
||||
ctx.strokeStyle = 'rgba(120,120,120,0.15)';
|
||||
ctx.lineWidth = 1;
|
||||
for (let i = 1; i < 4; i++) { const y = (h * i) / 4; ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke(); }
|
||||
for (let i = 1; i < 8; i++) { const x = (w * i) / 8; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke(); }
|
||||
|
||||
// Spectrum trace, filled under the line.
|
||||
const n = amp.length;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, h);
|
||||
for (let i = 0; i < n; i++) {
|
||||
const x = (i / (n - 1)) * w;
|
||||
const y = h - Math.min(1, amp[i] / scale) * h;
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.lineTo(w, h);
|
||||
ctx.closePath();
|
||||
const grad = ctx.createLinearGradient(0, 0, 0, h);
|
||||
grad.addColorStop(0, 'rgba(56,189,248,0.55)');
|
||||
grad.addColorStop(1, 'rgba(56,189,248,0.05)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = '#38bdf8';
|
||||
ctx.lineWidth = 1.25;
|
||||
ctx.stroke();
|
||||
|
||||
// VFO marker: a vertical line at the current frequency within the span.
|
||||
if (vfoHz > 0 && lowHz > 0 && highHz > lowHz && vfoHz >= lowHz && vfoHz <= highHz) {
|
||||
const x = ((vfoHz - lowHz) / (highHz - lowHz)) * w;
|
||||
ctx.strokeStyle = 'rgba(239,68,68,0.95)';
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
|
||||
}
|
||||
|
||||
// Frequency scale (edges + centre), only when the rig reported the span.
|
||||
if (lowHz > 0 && highHz > lowHz) {
|
||||
const mhz = (hz: number) => (hz / 1e6).toFixed(3);
|
||||
ctx.fillStyle = 'rgba(226,232,240,0.75)';
|
||||
ctx.font = '10px ui-monospace, monospace';
|
||||
ctx.textBaseline = 'bottom';
|
||||
ctx.textAlign = 'left'; ctx.fillText(mhz(lowHz), 3, h - 2);
|
||||
ctx.textAlign = 'center'; ctx.fillText(mhz((lowHz + highHz) / 2), w / 2, h - 2);
|
||||
ctx.textAlign = 'right'; ctx.fillText(mhz(highHz), w - 3, h - 2);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card icon={Activity} title="Spectrum" accent="#38bdf8">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-[11px] text-muted-foreground truncate">
|
||||
{on ? (fixed ? 'Fixed — double-click / wheel to tune' : 'Center — follows VFO') : 'Scope off'}
|
||||
</span>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{on && (
|
||||
<Segmented value={fixed ? 'FIX' : 'CTR'} options={[{ v: 'CTR', l: 'CTR' }, { v: 'FIX', l: 'FIX' }]}
|
||||
onChange={(v) => setMode(v === 'FIX')} />
|
||||
)}
|
||||
<Chip label={on ? 'ON' : 'OFF'} on={on} onClick={toggle} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg border border-border bg-black/70 overflow-hidden">
|
||||
<canvas ref={canvasRef} onDoubleClick={onDblClick}
|
||||
className="w-full block cursor-crosshair" style={{ height: 150 }} />
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// IcomPanel — full control surface (RX DSP + TX) for an Icom on the CI-V backend.
|
||||
// Unlike the Flex (which pushes state), the Icom is polled: meters/TX state are
|
||||
// read every cache cycle; DSP set-controls are optimistic and reconcile on the
|
||||
// next poll. Front-panel knob changes for DSP show after ↻ Refresh.
|
||||
export function IcomPanel() {
|
||||
const [st, setSt] = useState<IcomState>(ZERO);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [tuning, setTuning] = useState(false);
|
||||
const txRef = useRef(false);
|
||||
|
||||
const load = () => GetIcomState().then((s) => setSt((s ?? ZERO) as IcomState)).catch(() => {});
|
||||
const refresh = async () => {
|
||||
@@ -113,7 +329,7 @@ export function IcomPanel() {
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
const id = window.setInterval(load, 1500); // cheap cache poll (mode + optimistic state)
|
||||
const id = window.setInterval(load, 500); // fast poll so meters/TX feel live
|
||||
return () => window.clearInterval(id);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
@@ -124,6 +340,18 @@ export function IcomPanel() {
|
||||
fn().catch(() => {});
|
||||
};
|
||||
|
||||
const toggleMox = () => {
|
||||
const next = !txRef.current;
|
||||
txRef.current = next;
|
||||
set({ transmitting: next }, () => IcomSetPTT(next));
|
||||
};
|
||||
|
||||
const tune = async () => {
|
||||
setTuning(true);
|
||||
try { await IcomTune(); } catch {}
|
||||
window.setTimeout(() => setTuning(false), 4000);
|
||||
};
|
||||
|
||||
if (!st.available) {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center text-sm text-muted-foreground p-6 text-center">
|
||||
@@ -132,16 +360,70 @@ export function IcomPanel() {
|
||||
);
|
||||
}
|
||||
|
||||
const tx = st.transmitting;
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto p-3 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm font-bold">{st.model || 'Icom'}{st.mode ? <span className="ml-2 text-xs font-mono text-muted-foreground">{st.mode}</span> : null}</div>
|
||||
<div className="h-full min-h-0 overflow-auto bg-background">
|
||||
<div className="max-w-5xl mx-auto p-3 space-y-3">
|
||||
{/* Header strip: model + mode + live RX/TX indicator + split badge. */}
|
||||
<div className="flex items-center justify-between rounded-xl border border-border bg-card px-3 py-2 shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn('inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-bold uppercase tracking-wider',
|
||||
tx ? 'bg-red-600 text-white' : 'bg-emerald-600 text-white')}>
|
||||
<span className={cn('size-2 rounded-full', tx ? 'bg-white animate-pulse' : 'bg-white/90')} />
|
||||
{tx ? 'TX' : 'RX'}
|
||||
</span>
|
||||
<span className="text-sm font-bold">{st.model || 'Icom'}</span>
|
||||
{st.mode ? <span className="text-xs font-mono text-muted-foreground">{st.mode}</span> : null}
|
||||
{st.split ? <span className="rounded-md bg-amber-500/20 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-amber-600">Split</span> : null}
|
||||
</div>
|
||||
<button type="button" onClick={refresh} disabled={busy}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-2 py-1 text-xs hover:bg-muted disabled:opacity-40">
|
||||
<RefreshCw className={cn('size-3.5', busy && 'animate-spin')} /> Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Spectrum panadapter (full width). */}
|
||||
<ScopePanadapter />
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
|
||||
{/* Live meters. */}
|
||||
<Card icon={Zap} title="Meters" accent="#f59e0b">
|
||||
{tx ? (
|
||||
<>
|
||||
<Meter label="Po" value={st.power_meter} accent="#ef4444" scale={`${st.power_meter}%`} />
|
||||
<Meter label="SWR" value={st.swr_meter} accent="#f59e0b" scale={st.swr_meter > 0 ? `${(1 + st.swr_meter / 33.3).toFixed(1)}` : '1.0'} />
|
||||
</>
|
||||
) : (
|
||||
<Meter label="S" value={st.s_meter} accent="#22c55e" scale={sUnit(st.s_meter)} />
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Transmit controls. */}
|
||||
<Card icon={Mic} title="Transmit" accent="#ef4444">
|
||||
<Row label="Power">
|
||||
<Slider value={st.rf_power} accent="#ef4444" onChange={(v) => set({ rf_power: v }, () => IcomSetRFPower(v))} />
|
||||
<span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{st.rf_power}</span>
|
||||
</Row>
|
||||
<Row label="Mic">
|
||||
<Slider value={st.mic_gain} accent="#ef4444" onChange={(v) => set({ mic_gain: v }, () => IcomSetMicGain(v))} />
|
||||
<span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{st.mic_gain}</span>
|
||||
</Row>
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<button type="button" onClick={toggleMox}
|
||||
className={cn('flex-1 px-3 py-1.5 rounded-md text-xs font-bold border transition-colors',
|
||||
tx ? 'bg-red-600 border-red-600 text-white' : 'bg-card text-foreground border-border hover:bg-muted')}>
|
||||
{tx ? 'TX ON' : 'MOX'}
|
||||
</button>
|
||||
<Chip label="SPLIT" on={st.split} onClick={() => set({ split: !st.split }, () => IcomSetSplit(!st.split))} />
|
||||
<button type="button" onClick={tune} disabled={tuning}
|
||||
className={cn('w-14 shrink-0 px-2 py-1.5 rounded-md text-[11px] font-bold border transition-colors',
|
||||
tuning ? 'bg-amber-500 border-amber-500 text-white animate-pulse' : 'bg-card text-foreground border-border hover:bg-muted')}>
|
||||
TUNE
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card icon={Radio} title="Receive" accent="#2563eb">
|
||||
<Row label="AF">
|
||||
<Slider value={st.af_gain} onChange={(v) => set({ af_gain: v }, () => IcomSetAFGain(v))} />
|
||||
@@ -181,6 +463,8 @@ export function IcomPanel() {
|
||||
<span className="text-xs text-muted-foreground">Auto notch filter</span>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user