LucasDLTG/dsp-thomann-interface
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: start input section

Browse Source
This commit is contained in:
LucasDLTG
2026-08-12 22:19:09 +02:00
parent 00adc4df53
commit a28dd890dd
6 changed files with 395 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/dsp408/components/InputSection/InputSection.tsx
+150 -119
View File
@@ -1,5 +1,8 @@
// InputSection.tsx
import VerticalSlider from '../../../../components/VerticalSlider/VerticalSlider';
import VerticalSlider, {
makeLogStep,
makeLogQuantize,
} from '../../../../components/VerticalSlider/VerticalSlider';
// ASSUMPTION: an InputChannel enum exists alongside OutputChannel, mapping
// input pages 1-8 similarly (In1 -> 0, In2 -> 1, ...). Adjust import/values
// if the actual enum differs.
@@ -13,9 +16,23 @@ import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
import Button from '../../../../components/Button/Button';
import MeterBar from '../../../../components/MeterBar/MeterBar';
const FREQ_MIN = 20;
const FREQ_MAX = 20000;
const FREQ_STEP = 1;
const PEQ_BANDS: PEQBand[] = [
PEQBand.B1,
PEQBand.B2,
PEQBand.B3,
PEQBand.B4,
PEQBand.B5,
PEQBand.B6,
PEQBand.B7,
PEQBand.B8,
];
// ASSUMPTION: adjust these to match the real PEQFilter enum in ../../types
const PEQ_FILTER_TYPE_OPTIONS: { value: PEQFilter; label: string }[] = [
{ value: PEQFilter.Peak, label: 'Peak' },
{ value: PEQFilter.LowShelf, label: 'Low Shelf' },
{ value: PEQFilter.HighShelf, label: 'High Shelf' },
];
const FILTER_TYPE_OPTIONS: { value: CrossoverFilter; label: string }[] = [
{ value: CrossoverFilter.Bw6, label: 'BW-6' },
@@ -112,6 +129,12 @@ function PeqPanelSliders({
);
}
const FREQ_MIN = 19.7;
const FREQ_MAX = 20160;
const FREQ_POINTS = 300;
const FREQ_STEP = makeLogStep(FREQ_MIN, FREQ_MAX, FREQ_POINTS);
const FREQ_QUANTIZE = makeLogQuantize(FREQ_MIN, FREQ_MAX, FREQ_POINTS);
function CrossoverPanel({
channel,
dsp,
@@ -124,8 +147,7 @@ function CrossoverPanel({
setCrossover: (
channel: Channel,
frequency: number,
filter_type: CrossoverFilter,
bypass: boolean
filter_type: CrossoverFilter
) => Promise<boolean>;
}) {
const channelState =
@@ -145,7 +167,7 @@ function CrossoverPanel({
bypass?: boolean;
}) => {
const next = { frequency, filter_type, bypass, ...overrides };
return setCrossover(channel, next.frequency, next.filter_type, next.bypass);
return setCrossover(channel, next.frequency, next.filter_type);
};
return (
@@ -153,9 +175,11 @@ function CrossoverPanel({
<div className="crossover-panel__title">{title}</div>
<VerticalSlider
min={20}
max={20000}
step={() => 1}
min={FREQ_MIN}
max={FREQ_MAX}
scale="log"
step={FREQ_STEP}
quantize={FREQ_QUANTIZE}
unit=" Hz"
value={frequency}
onChange={(value) => commit({ frequency: value })}
@@ -194,99 +218,117 @@ function CrossoverPanel({
);
}
function GainMeterPanel({
dsp,
function PeqBandList({
channel,
title,
meter,
setGain,
setMute,
setInverse,
dsp,
activeBand,
setActiveBand,
setPEQ,
}: {
channel: InputChannel;
dsp: DSP;
channel: Channel;
title: string;
meter: Meter;
setGain: (channel: Channel, gain: number) => Promise<boolean>;
setMute: (channel: Channel, muted: boolean) => Promise<boolean>;
setInverse: (channel: Channel, inverted: boolean) => Promise<boolean>;
activeBand: PEQBand;
setActiveBand: (band: PEQBand) => void;
setPEQ: SetPEQFn;
}) {
const channelState =
'Input' in channel
? dsp.state?.current_config.input_states[channel.Input]
: dsp.state?.current_config.output_states[channel.Output];
const inputState = dsp.state.current_config.input_states[channel];
const muted = channelState?.mute ?? false;
const inverted = channelState?.phase_inverted ?? false;
const gain = channelState?.gain ?? 0;
const toggleMute = async () => {
await setMute(channel, !muted);
};
const toggleInverse = async () => {
await setInverse(channel, !inverted);
const commit = (band: PEQBand, overrides: Partial<PEQValues>) => {
const peq = inputState.peq_chain.bands[band] as PEQ;
const next = { ...peq, ...overrides };
return setPEQ(
{ Input: channel },
band,
next.gain,
next.frequency,
next.q,
next.filter_type,
next.bypass
);
};
return (
<div className="gain-meter-panel">
<div className="gain-meter-panel__title">{title}</div>
<div className="gain-meter-panel__grid">
<div className="gain-meter-panel__cell gain-meter-panel__cell--slider">
<VerticalSlider
min={-60}
max={12}
step={(v) => (v >= -20 ? 0.1 : 0.5)}
unit=" dB"
value={gain}
onChange={(value) => setGain(channel, value)}
style={{ width: '100%', height: '100%' }}
/>
</div>
<div className="gain-meter-panel__cell gain-meter-panel__cell--meter">
<MeterBar label="" meter={meter} />
</div>
<div className="gain-meter-panel__cell gain-meter-panel__cell--btn">
<Button
variant="toggle"
className={inverted ? 'active-warning' : ''}
onClick={toggleInverse}
style={{
width: '100%',
paddingLeft: 0,
paddingRight: 0,
fontSize: '3.5cqh',
paddingTop: '1cqh',
paddingBottom: '1cqh',
minHeight: 0,
}}
>
{inverted ? 'Inverted' : 'Invert'}
</Button>
</div>
<div className="gain-meter-panel__cell gain-meter-panel__cell--btn">
<Button
variant="toggle"
className={muted ? 'active-danger' : ''}
onClick={toggleMute}
style={{
width: '100%',
paddingLeft: 0,
paddingRight: 0,
fontSize: '3.5cqh',
paddingTop: '1cqh',
paddingBottom: '1cqh',
minHeight: 0,
}}
>
{muted ? 'Muted' : 'Mute'}
</Button>
</div>
<div className="peq-band-list">
<div className="peq-band-list__row peq-band-list__row--header">
<div className="peq-band-list__cell">Band</div>
<div className="peq-band-list__cell">Freq</div>
<div className="peq-band-list__cell">Q</div>
<div className="peq-band-list__cell">Gain</div>
<div className="peq-band-list__cell">Type</div>
<div className="peq-band-list__cell">Bypass</div>
</div>
{PEQ_BANDS.map((band, i) => {
const peq = inputState.peq_chain.bands[band] as PEQ;
const isActive = band === activeBand;
return (
<div
className={`peq-band-list__row${isActive ? ' peq-band-list__row--active' : ''}`}
key={band}
>
<Button
variant="toggle"
className={isActive ? 'active' : ''}
onClick={() => setActiveBand(band)}
style={{ minHeight: 0 }}
>
{`B${i + 1}`}
</Button>
<input
className="peq-band-list__input"
type="number"
step={0.5}
min={19.7}
max={20160}
value={peq.frequency}
onChange={(e) => commit(band, { frequency: Number(e.target.value) })}
/>
<input
className="peq-band-list__input"
type="number"
step={1}
min={1}
max={999}
value={peq.q}
onChange={(e) => commit(band, { q: Number(e.target.value) })}
/>
<input
className="peq-band-list__input"
type="number"
step={0.1}
min={-12}
max={12}
value={peq.gain}
onChange={(e) => commit(band, { gain: Number(e.target.value) })}
/>
<select
className="peq-band-list__select"
value={peq.filter_type}
onChange={(e) => commit(band, { filter_type: e.target.value as PEQFilter })}
>
{PEQ_FILTER_TYPE_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
<Button
variant="toggle"
className={peq.bypass ? 'active-warning' : ''}
onClick={() => commit(band, { bypass: !peq.bypass })}
style={{ minHeight: 0 }}
>
{peq.bypass ? 'Bypassed' : 'Bypass'}
</Button>
</div>
);
})}
</div>
);
}
@@ -310,23 +352,17 @@ type setPeqBandFn = (
function InputSection({
dsp,
channel,
set_high_pass: setHighPass,
set_low_pass,
setHighPass,
setLowPass,
setPeq,
// setPeqBypass,
setGain,
setMute,
setInverse,
setPeqBypass,
}: {
dsp: DSP;
channel: InputChannel;
set_high_pass: SetFilterFn;
set_low_pass: SetFilterFn;
setHighPass: SetFilterFn;
setLowPass: SetFilterFn;
setPeq: setPeqBandFn;
// setPeqBypass;
setGain: (channel: Channel, gain: number) => Promise<boolean>;
setMute: (channel: Channel, muted: boolean) => Promise<boolean>;
setInverse: (channel: Channel, inverted: boolean) => Promise<boolean>;
setPeqBypass: (channel: Channel, bypass: boolean) => Promise<boolean>;
}) {
const [activeBand, setActiveBand] = useState<PEQBand>(PEQBand.B1);
@@ -408,7 +444,14 @@ function InputSection({
<div className="input-control-section">
<div className="input-control-panel">
<ChannelGroup title="PEQ">
<PeqPanelSliders channel={channel} dsp={dsp} band={PEQBand.B1} setPEQ={setPeq} />
<PeqBandList
channel={channel}
dsp={dsp}
activeBand={activeBand}
setActiveBand={setActiveBand}
setPEQ={setPeq}
/>
<PeqPanelSliders channel={channel} dsp={dsp} band={activeBand} setPEQ={setPeq} />
</ChannelGroup>
<ChannelGroup title="CrossOver">
@@ -425,18 +468,6 @@ function InputSection({
setCrossover={setHighPass}
/>
</ChannelGroup>
<ChannelGroup title="Gain">
<GainMeterPanel
dsp={dsp}
channel={{ Input: channel }}
title={dsp.state.current_config.input_states.InA.name}
meter={dsp.meters.channels[0]}
setGain={setGain}
setMute={setMute}
setInverse={setInverse}
/>
</ChannelGroup>
{/* <div className="input-control-panel__sliders">
<div className="input-control-panel__cell input-control-panel__cell--high-pass">
<VerticalSlider