feat(tci): a control console for the SunSDR
TCI already carries the frequency, the mode, the meters and now the audio. It also carries everything else about the radio — and OpsLog was logging most of it once as '(unhandled once)' and throwing it away. The console is mostly a place to put what was already arriving. That makes it the cheapest panel here, and it is worth saying why. A K3 console costs a command and a reply for every value it shows, which is why it reads its settings in a rotation and its meters only while on screen. TCI PUSHES: the radio announces its drive, its filters, its noise blanker and the rest on connect, and again whenever any of them changes — including when the operator changes them in ExpertSDR3's own window, which this panel therefore follows without asking anything. What it drives: drive and tune drive, mic gain, TUNE, volume, mute, squelch and its threshold, NB, NR, ANF, APF, AGC speed, the passband, RIT and XIT with their offsets, and the VFO lock. The S-meter is a real dBm reading, so its S units are arithmetic rather than the calibration guess a K3's meter needs. Setters never update the cached state. The radio answers with the new value, and taking its word is what keeps the panel honest when a setting is refused, clamped, or changed at the radio a second later — the one exception being a slider mid-drag, held for 900 ms so it is not dragged back by its own echo. Capped width and centred, like the other consoles. Also offered as a docked pane — and the Elecraft console is offered there too now: App has always had that pane, Settings simply never listed it.
This commit is contained in:
@@ -0,0 +1,314 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Radio, Activity, AudioLines, SlidersHorizontal, Mic } from 'lucide-react';
|
||||
import {
|
||||
GetTCIPanel, GetCATState,
|
||||
SetTCIDrive, SetTCITuneDrive, SetTCIMicLevel, SetTCIVolume, SetTCIMute,
|
||||
SetTCIAGC, SetTCISquelch, SetTCISquelchLevel,
|
||||
SetTCINB, SetTCINR, SetTCIANF, SetTCIAPF, SetTCIFilter,
|
||||
SetTCIRIT, SetTCIXIT, SetTCIRITOffset, SetTCIXITOffset, SetTCILock, SetTCITune,
|
||||
} from '../../wailsjs/go/main/App';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { sMeterRST } from '@/lib/rst';
|
||||
import { MeterBar } from '@/components/MeterBar';
|
||||
import { WheelRange } from '@/components/WheelRange';
|
||||
|
||||
type TCIState = {
|
||||
connected: boolean; device?: string; protocol?: string;
|
||||
drive: number; tune_drive: number; mic_level: number; tx_enabled: boolean; tx: boolean; tuning: boolean;
|
||||
volume: number; mute: boolean; agc?: string; squelch_on: boolean; squelch: number;
|
||||
nb: boolean; nr: boolean; anf: boolean; apf: boolean;
|
||||
filter_lo: number; filter_hi: number;
|
||||
rit: boolean; rit_offset: number; xit: boolean; xit_offset: number; lock: boolean; split: boolean;
|
||||
smeter: number; modulations?: string[];
|
||||
};
|
||||
|
||||
const ZERO: TCIState = {
|
||||
connected: false, drive: 0, tune_drive: 0, mic_level: 0, tx_enabled: false, tx: false, tuning: false,
|
||||
volume: 0, mute: false, squelch_on: false, squelch: 0,
|
||||
nb: false, nr: false, anf: false, apf: false, filter_lo: 0, filter_hi: 0,
|
||||
rit: false, rit_offset: 0, xit: false, xit_offset: 0, lock: false, split: false, smeter: 0,
|
||||
};
|
||||
|
||||
// Passbands worth a button, as edges relative to the carrier. TCI takes the two
|
||||
// edges rather than a width, which is more than a console needs: an operator
|
||||
// picks "CW" or "SSB", not a pair of numbers.
|
||||
const FILTERS: { label: string; lo: number; hi: number }[] = [
|
||||
{ label: '250', lo: 300, hi: 550 },
|
||||
{ label: '500', lo: 300, hi: 800 },
|
||||
{ label: '1.0k', lo: 200, hi: 1200 },
|
||||
{ label: '1.8k', lo: 100, hi: 1900 },
|
||||
{ label: '2.4k', lo: 100, hi: 2500 },
|
||||
{ label: '2.8k', lo: 100, hi: 2900 },
|
||||
{ label: '3.5k', lo: 100, hi: 3600 },
|
||||
];
|
||||
|
||||
// dBm → S units. TCI reports a real signal level rather than a meter position,
|
||||
// which is the useful way round: S9 is -73 dBm by the IARU definition and every
|
||||
// S unit below it is 6 dB, so this is arithmetic rather than a calibration
|
||||
// table — nothing here is provisional the way the K3's meter reading is.
|
||||
function sParts(dbm: number): { s: number; over: number; label: string } {
|
||||
if (dbm === 0) return { s: 0, over: 0, label: '—' };
|
||||
if (dbm >= -73) {
|
||||
const over = Math.round((dbm + 73) / 10) * 10;
|
||||
return { s: 9, over, label: over > 0 ? `S9+${over}` : 'S9' };
|
||||
}
|
||||
const s = Math.max(0, Math.min(9, Math.round(9 + (dbm + 73) / 6)));
|
||||
return { s, over: 0, label: `S${s}` };
|
||||
}
|
||||
|
||||
// The meter bar wants 0-100; -127 dBm is the bottom of the scale and -13 dBm
|
||||
// (S9+60) the top.
|
||||
function sBar(dbm: number): number {
|
||||
if (dbm === 0) return 0;
|
||||
return Math.max(0, Math.min(100, ((dbm + 127) / 114) * 100));
|
||||
}
|
||||
|
||||
function sSegColor(frac: number): string {
|
||||
return frac > 0.75 ? '#dc2626' : frac > 0.55 ? '#f59e0b' : '#16a34a';
|
||||
}
|
||||
|
||||
function Card({ icon: Icon, title, children }: { icon: any; title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="rounded-xl border border-border bg-card shadow-sm overflow-hidden">
|
||||
<div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/30">
|
||||
<Icon className="size-4 text-primary" />
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-foreground/80">{title}</span>
|
||||
</div>
|
||||
<div className="p-3 space-y-3">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// One button shape for every on/off control, as on the other consoles.
|
||||
function Toggle({ label, on, off, onClick, title }: {
|
||||
label: string; on: boolean; off: boolean; onClick: () => void; title?: string;
|
||||
}) {
|
||||
return (
|
||||
<button type="button" disabled={off} onClick={onClick} title={title}
|
||||
className={cn('rounded-lg border-2 px-2 py-1.5 text-xs font-bold transition-all disabled:opacity-30',
|
||||
on ? 'bg-primary text-primary-foreground border-primary shadow-[0_0_10px] shadow-primary/40'
|
||||
: 'bg-card text-muted-foreground border-border hover:bg-muted')}>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({ label, value, children }: { label: string; value: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-baseline justify-between">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">{label}</span>
|
||||
<span className="text-xs font-mono tabular-nums">{value}</span>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TCIPanel({ onReportRST }: { onReportRST?: (rst: string) => void } = {}) {
|
||||
const { t } = useI18n();
|
||||
const [st, setSt] = useState<TCIState>(ZERO);
|
||||
const [freqHz, setFreqHz] = useState(0);
|
||||
const [mode, setMode] = useState('');
|
||||
const [err, setErr] = useState('');
|
||||
|
||||
// A slider the operator is dragging must not be dragged back by the poll.
|
||||
// The radio confirms every change by announcing it, but that answer takes a
|
||||
// round trip — long enough for a drag to stutter against its own echo.
|
||||
const holdRef = useRef<Record<string, { v: number; until: number }>>({});
|
||||
const hold = (key: string, reported: number) => {
|
||||
const h = holdRef.current[key];
|
||||
return h && Date.now() < h.until ? h.v : reported;
|
||||
};
|
||||
const setHold = (key: string, v: number) => {
|
||||
holdRef.current[key] = { v, until: Date.now() + 900 };
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
const tick = async () => {
|
||||
try {
|
||||
const p: any = await GetTCIPanel();
|
||||
if (!alive) return;
|
||||
setSt(p as TCIState);
|
||||
const cs: any = await GetCATState();
|
||||
if (!alive) return;
|
||||
setFreqHz(Number(cs?.rx_freq_hz) || Number(cs?.freq_hz) || 0);
|
||||
setMode(String(cs?.mode || ''));
|
||||
} catch (e: any) {
|
||||
if (alive) setErr(String(e?.message ?? e));
|
||||
}
|
||||
};
|
||||
tick();
|
||||
const id = window.setInterval(tick, 400);
|
||||
return () => { alive = false; window.clearInterval(id); };
|
||||
}, []);
|
||||
|
||||
const off = !st.connected;
|
||||
const call = (fn: () => Promise<any>) => { fn().catch((e: any) => setErr(String(e?.message ?? e))); };
|
||||
|
||||
const drive = hold('drive', st.drive);
|
||||
const tuneDrive = hold('tune_drive', st.tune_drive);
|
||||
const mic = hold('mic', st.mic_level);
|
||||
const vol = hold('vol', st.volume);
|
||||
const sql = hold('sql', st.squelch);
|
||||
const s = sParts(st.smeter);
|
||||
|
||||
return (
|
||||
<div className="h-full min-h-0 overflow-auto bg-background">
|
||||
{/* Capped and centred, like the Elecraft, Yaesu, Icom and Flex consoles.
|
||||
Stretched across a wide window a console puts each slider a hand's
|
||||
width from its own label and stops reading as one instrument. */}
|
||||
<div className="max-w-5xl mx-auto p-3 space-y-3">
|
||||
{/* VFO + identity */}
|
||||
<div className="rounded-xl border border-border bg-card shadow-sm px-4 py-3 flex items-center justify-between gap-3 flex-wrap">
|
||||
<div>
|
||||
<div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
|
||||
<Radio className="size-3.5" />
|
||||
{st.device || 'SunSDR'} {st.protocol ? `· ${st.protocol}` : ''}
|
||||
<span className={cn('size-2 rounded-full', off ? 'bg-muted-foreground/40' : 'bg-success')} />
|
||||
</div>
|
||||
<div className="text-2xl font-mono tabular-nums font-bold">
|
||||
{freqHz > 0 ? (freqHz / 1e6).toFixed(6) : '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{st.tx && <span className="rounded-md bg-danger px-2 py-1 text-[11px] font-bold text-danger-foreground">TX</span>}
|
||||
{st.split && <span className="rounded-md border border-border px-2 py-1 text-[11px] font-bold">SPLIT</span>}
|
||||
<Toggle label={t('tcip.lock')} on={st.lock} off={off} onClick={() => call(() => SetTCILock(!st.lock))} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{off && <div className="text-xs text-muted-foreground px-1">{t('tcip.waiting')}</div>}
|
||||
{!!err && <div className="text-[11px] text-danger px-1">{err}</div>}
|
||||
|
||||
{/* Meters — one for now: TCI reports the receive level and does not
|
||||
publish a transmit power reading, so a PWR bar here would be an
|
||||
empty promise. */}
|
||||
<Card icon={Activity} title={t('tcip.meters')}>
|
||||
<MeterBar label="S-METER" value={st.tx ? 0 : sBar(st.smeter)} lo={0} hi={100}
|
||||
accent="#16a34a" segColor={sSegColor}
|
||||
display={st.tx ? '—' : `${s.label} ${st.smeter} dBm`}
|
||||
onClick={() => {
|
||||
if (st.tx || !onReportRST) return;
|
||||
onReportRST(sMeterRST(s.s, s.over, mode));
|
||||
}}
|
||||
title={t('tcip.sMeterHint')} />
|
||||
</Card>
|
||||
|
||||
{/* Transmit */}
|
||||
<Card icon={SlidersHorizontal} title={t('tcip.transmit')}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<Row label={t('tcip.drive')} value={`${drive}%`}>
|
||||
<WheelRange min={0} max={100} disabled={off} value={drive}
|
||||
onChange={(v) => { setHold('drive', v); call(() => SetTCIDrive(v)); }} />
|
||||
</Row>
|
||||
<Row label={t('tcip.tuneDrive')} value={`${tuneDrive}%`}>
|
||||
<WheelRange min={0} max={100} disabled={off} value={tuneDrive} accent="#f59e0b"
|
||||
onChange={(v) => { setHold('tune_drive', v); call(() => SetTCITuneDrive(v)); }} />
|
||||
</Row>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{/* TUNE transmits, and at the tune drive rather than the main one —
|
||||
which is why both numbers are above the button rather than one of
|
||||
them being in a menu somewhere. */}
|
||||
<button type="button" disabled={off || !st.tx_enabled}
|
||||
onClick={() => call(() => SetTCITune(!st.tuning))}
|
||||
className={cn('rounded-lg border-2 px-4 py-2 text-sm font-extrabold tracking-wide transition-all disabled:opacity-30',
|
||||
st.tuning ? 'bg-warning text-warning-foreground border-warning shadow-[0_0_14px] shadow-warning/50'
|
||||
: 'bg-card text-warning border-warning hover:bg-warning-muted')}>
|
||||
{st.tuning ? t('tcip.tuning') : t('tcip.tune')}
|
||||
</button>
|
||||
{!st.tx_enabled && !off && (
|
||||
<span className="text-[11px] text-muted-foreground">{t('tcip.txDisabled')}</span>
|
||||
)}
|
||||
</div>
|
||||
<Row label={t('tcip.mic')} value={`${mic}%`}>
|
||||
<WheelRange min={0} max={100} disabled={off} value={mic} accent="#a855f7"
|
||||
onChange={(v) => { setHold('mic', v); call(() => SetTCIMicLevel(v)); }} />
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
{/* Receive */}
|
||||
<Card icon={AudioLines} title={t('tcip.receive')}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{/* TCI's volume is dB and NEGATIVE — 0 is full, -60 inaudible. Shown
|
||||
as the radio's own number rather than converted to a percentage,
|
||||
so it matches the figure in ExpertSDR3's window. */}
|
||||
<Row label={t('tcip.volume')} value={`${vol} dB`}>
|
||||
<WheelRange min={-60} max={0} disabled={off} value={vol}
|
||||
onChange={(v) => { setHold('vol', v); call(() => SetTCIVolume(v)); }} />
|
||||
</Row>
|
||||
<Row label={t('tcip.squelch')} value={st.squelch_on ? `${sql} dBm` : t('tcip.off')}>
|
||||
<WheelRange min={-140} max={0} disabled={off || !st.squelch_on} value={sql}
|
||||
onChange={(v) => { setHold('sql', v); call(() => SetTCISquelchLevel(v)); }} />
|
||||
</Row>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 sm:grid-cols-6 gap-2">
|
||||
<Toggle label="NB" on={st.nb} off={off} onClick={() => call(() => SetTCINB(!st.nb))} />
|
||||
<Toggle label="NR" on={st.nr} off={off} onClick={() => call(() => SetTCINR(!st.nr))} />
|
||||
<Toggle label="ANF" on={st.anf} off={off} onClick={() => call(() => SetTCIANF(!st.anf))} />
|
||||
<Toggle label="APF" on={st.apf} off={off} onClick={() => call(() => SetTCIAPF(!st.apf))} />
|
||||
<Toggle label="SQL" on={st.squelch_on} off={off} onClick={() => call(() => SetTCISquelch(!st.squelch_on))} />
|
||||
<Toggle label={t('tcip.mute')} on={st.mute} off={off} onClick={() => call(() => SetTCIMute(!st.mute))} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">{t('tcip.agc')}</span>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{['off', 'long', 'slow', 'med', 'fast'].map((m) => (
|
||||
<Toggle key={m} label={m.toUpperCase()} on={(st.agc || '') === m} off={off}
|
||||
onClick={() => call(() => SetTCIAGC(m))} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-baseline justify-between">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">{t('tcip.filter')}</span>
|
||||
<span className="text-xs font-mono tabular-nums">{st.filter_lo}–{st.filter_hi} Hz</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 sm:grid-cols-7 gap-2">
|
||||
{FILTERS.map((f) => (
|
||||
<Toggle key={f.label} label={f.label}
|
||||
on={st.filter_lo === f.lo && st.filter_hi === f.hi} off={off}
|
||||
onClick={() => call(() => SetTCIFilter(f.lo, f.hi))} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* RIT / XIT */}
|
||||
<Card icon={Mic} title="RIT / XIT">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{([
|
||||
{ key: 'rit', on: st.rit, offset: st.rit_offset, toggle: SetTCIRIT, set: SetTCIRITOffset },
|
||||
{ key: 'xit', on: st.xit, offset: st.xit_offset, toggle: SetTCIXIT, set: SetTCIXITOffset },
|
||||
] as const).map((r) => (
|
||||
<div key={r.key} className="flex items-center gap-2">
|
||||
<Toggle label={r.key.toUpperCase()} on={r.on} off={off} onClick={() => call(() => r.toggle(!r.on))} />
|
||||
<span className="text-xs font-mono tabular-nums w-16 text-center">
|
||||
{r.offset > 0 ? `+${r.offset}` : r.offset} Hz
|
||||
</span>
|
||||
{/* ±10 and ±100, and a zero. The radio's own knob does the rest;
|
||||
a console that tries to replace it needs a knob, not more
|
||||
buttons. */}
|
||||
{[-100, -10, 10, 100].map((d) => (
|
||||
<button key={d} type="button" disabled={off || !r.on}
|
||||
onClick={() => call(() => r.set(r.offset + d))}
|
||||
className="rounded-md border border-border bg-card px-1.5 py-1 text-[10px] font-mono hover:bg-muted disabled:opacity-30">
|
||||
{d > 0 ? `+${d}` : d}
|
||||
</button>
|
||||
))}
|
||||
<button type="button" disabled={off || !r.on}
|
||||
onClick={() => call(() => r.set(0))}
|
||||
className="rounded-md border border-border bg-card px-1.5 py-1 text-[10px] font-bold hover:bg-muted disabled:opacity-30">
|
||||
0
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user