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

feat: use new meter format

Browse Source
This commit is contained in:
LucasDLTG
2026-09-13 09:04:04 +02:00
parent 1e00ca3a7c
commit 9f2ace9698
11 changed files with 131 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChoiceStepper/ChoiceStepper.css
+6 -8
View File
@@ -18,15 +18,14 @@
width: 100%;
font-family: var(--font-mono);
font-size: 3cqh;
font-size: var(--font--sm);
font-weight: var(--font-weight-normal);
text-align: center;
text-align: left;
color: var(--accent-brand);
background: transparent;
border: none;
/* padding: 0.5ch; */
white-space: nowrap;
overflow: hidden;
@@ -47,11 +46,12 @@
height: 100%;
box-sizing: border-box;
padding-right: 1%;
}
.choice-stepper__arrow-btn {
width: 3cqh;
height: 3cqh;
height: 50%;
min-width: 0;
min-height: 0;
@@ -61,13 +61,11 @@
justify-content: center;
padding: 0;
padding-top: 0.2cqh;
margin: 0;
color: var(--accent-brand);
background: transparent;
border: none;
border-radius: 0.75cqh;
border-radius: var(--radius-md);
cursor: pointer;
}
src/components/Sidebar/Sidebar.css
+2 -1
View File
@@ -35,13 +35,14 @@
justify-content: center;
flex: 0 0 auto;
gap: var(--space-1);
padding: var(--space-1);
height: var(--header-height);
}
.sidebar-rail--expanded .sidebar-header {
justify-content: space-between;
padding-inline: var(--space-3);
padding-left: var(--space-3);
}
.sidebar-toggle {
src/features/dsp408/components/CompressorSection/CompressorSection.tsx
+6 -76
View File
@@ -8,67 +8,7 @@ import MeterBar from '../../../../components/MeterBar/MeterBar';
import { useMemo, useState } from 'react';
import ChoiceStepper from '../../../../components/ChoiceStepper/ChoiceStepper';
import './CompressorSection.css';
// Enum order defines stepper order (1:1 -> Limit).
const RATIO_ORDER: Ratio[] = [
Ratio.Ratio1_1,
Ratio.Ratio1_1_1,
Ratio.Ratio1_1_3,
Ratio.Ratio1_1_5,
Ratio.Ratio1_1_7,
Ratio.Ratio1_2,
Ratio.Ratio1_2_5,
Ratio.Ratio1_3,
Ratio.Ratio1_3_5,
Ratio.Ratio1_4,
Ratio.Ratio1_5,
Ratio.Ratio1_6,
Ratio.Ratio1_8,
Ratio.Ratio1_10,
Ratio.Ratio1_20,
Ratio.Limit,
];
const RATIO_LABEL: Record<Ratio, string> = {
[Ratio.Ratio1_1]: '1:1',
[Ratio.Ratio1_1_1]: '1.1:1',
[Ratio.Ratio1_1_3]: '1.3:1',
[Ratio.Ratio1_1_5]: '1.5:1',
[Ratio.Ratio1_1_7]: '1.7:1',
[Ratio.Ratio1_2]: '2:1',
[Ratio.Ratio1_2_5]: '2.5:1',
[Ratio.Ratio1_3]: '3:1',
[Ratio.Ratio1_3_5]: '3.5:1',
[Ratio.Ratio1_4]: '4:1',
[Ratio.Ratio1_5]: '5:1',
[Ratio.Ratio1_6]: '6:1',
[Ratio.Ratio1_8]: '8:1',
[Ratio.Ratio1_10]: '10:1',
[Ratio.Ratio1_20]: '20:1',
[Ratio.Limit]: 'Limit',
};
// Numeric ratio used only for drawing the transfer curve; Limit ~= brickwall.
const RATIO_NUMERIC: Record<Ratio, number> = {
[Ratio.Ratio1_1]: 1,
[Ratio.Ratio1_1_1]: 1.1,
[Ratio.Ratio1_1_3]: 1.3,
[Ratio.Ratio1_1_5]: 1.5,
[Ratio.Ratio1_1_7]: 1.7,
[Ratio.Ratio1_2]: 2,
[Ratio.Ratio1_2_5]: 2.5,
[Ratio.Ratio1_3]: 3,
[Ratio.Ratio1_3_5]: 3.5,
[Ratio.Ratio1_4]: 4,
[Ratio.Ratio1_5]: 5,
[Ratio.Ratio1_6]: 6,
[Ratio.Ratio1_8]: 8,
[Ratio.Ratio1_10]: 10,
[Ratio.Ratio1_20]: 20,
[Ratio.Limit]: 1000,
};
const KNEE_VALUES = Array.from({ length: 13 }, (_, i) => i); // 0..12 dB, integer steps
import { RATIO_ORDER, RATIO_LABEL, RATIO_NUMERIC, KNEE_VALUES } from '../../constants';
const COMPRESSOR_SLIDER_PARAMS = [
{ key: 'threshold', label: 'Threshold', min: -90, max: 20, step: 0.5, unit: ' dB' },
@@ -76,19 +16,6 @@ const COMPRESSOR_SLIDER_PARAMS = [
{ key: 'release', label: 'Release', min: 10, max: 3000, step: 1, unit: ' ms' },
] as const;
// ASSUMPTION: output meter indices follow the 4 input channels (0-3), i.e.
// Out1 -> 4, Out2 -> 5, etc. Adjust to match dsp.meters.channels ordering.
const OUTPUT_METER_INDEX: Record<OutputChannel, number> = {
[OutputChannel.Out1]: 4,
[OutputChannel.Out2]: 5,
[OutputChannel.Out3]: 6,
[OutputChannel.Out4]: 7,
[OutputChannel.Out5]: 8,
[OutputChannel.Out6]: 9,
[OutputChannel.Out7]: 10,
[OutputChannel.Out8]: 11,
} as const;
type CompressorParamKey = 'ratio' | 'attack' | 'release' | 'knee' | 'threshold';
type CompressorValues = {
@@ -349,10 +276,13 @@ function CompressorSection({ dsp, set_compressor }: { dsp: DSP; set_compressor:
<div className="compressor-graph__meters">
{outputs.map((output) => {
const outputState = dsp.state.current_config.output_states[output];
const idx = OUTPUT_METER_INDEX[output];
return (
<MeterBar key={output} label={outputState.name} meter={dsp.meters.channels[idx]} />
<MeterBar
key={output}
label={outputState.name}
meter={dsp.output_meters.meters[output]}
/>
);
})}
</div>
src/features/dsp408/components/GateSection/GateSection.tsx
+8 -10
View File
@@ -15,13 +15,6 @@ const GATE_PARAMS = [
{ key: 'release', label: 'Release', min: 10, max: 3000, step: 1, unit: ' ms' },
] as const;
const INPUT_METER_INDEX: Record<InputChannel, number> = {
[InputChannel.InA]: 0,
[InputChannel.InB]: 1,
[InputChannel.InC]: 2,
[InputChannel.InD]: 3,
} as const;
type GateParamKey = (typeof GATE_PARAMS)[number]['key'];
type GateValues = {
@@ -185,9 +178,14 @@ function GateSection({ dsp, set_gate }: { dsp: DSP; set_gate: SetGateFn }) {
<div className="gate-graph__meters">
{inputs.map((input) => {
const inputState = dsp.state.current_config.input_states[input];
const idx = INPUT_METER_INDEX[input];
const meter = dsp.meters.channels[idx];
return <MeterBar key={input} label={inputState.name} meter={meter} />;
return (
<MeterBar
key={input}
label={inputState.name}
meter={dsp.input_meters.meters[input]}
/>
);
})}
</div>
</div>
src/features/dsp408/constants.ts
+62
View File
@@ -6,6 +6,7 @@ import {
PEQBand,
PEQFilter,
DelayUnit,
Ratio,
} from './types';
export const INPUT_ORDER: InputChannel[] = [
@@ -101,6 +102,67 @@ export const GEQ_GAIN_MAX = 12;
export const GEQ_GAIN_STEP = 0.1;
export const GEQ_CURVE_Q = 8.65 * 0.5;
// ------ Compressor constants ------
export const RATIO_ORDER: Ratio[] = [
Ratio.Ratio1_1,
Ratio.Ratio1_1_1,
Ratio.Ratio1_1_3,
Ratio.Ratio1_1_5,
Ratio.Ratio1_1_7,
Ratio.Ratio1_2,
Ratio.Ratio1_2_5,
Ratio.Ratio1_3,
Ratio.Ratio1_3_5,
Ratio.Ratio1_4,
Ratio.Ratio1_5,
Ratio.Ratio1_6,
Ratio.Ratio1_8,
Ratio.Ratio1_10,
Ratio.Ratio1_20,
Ratio.Limit,
];
export const RATIO_LABEL: Record<Ratio, string> = {
[Ratio.Ratio1_1]: '1:1',
[Ratio.Ratio1_1_1]: '1.1:1',
[Ratio.Ratio1_1_3]: '1.3:1',
[Ratio.Ratio1_1_5]: '1.5:1',
[Ratio.Ratio1_1_7]: '1.7:1',
[Ratio.Ratio1_2]: '2:1',
[Ratio.Ratio1_2_5]: '2.5:1',
[Ratio.Ratio1_3]: '3:1',
[Ratio.Ratio1_3_5]: '3.5:1',
[Ratio.Ratio1_4]: '4:1',
[Ratio.Ratio1_5]: '5:1',
[Ratio.Ratio1_6]: '6:1',
[Ratio.Ratio1_8]: '8:1',
[Ratio.Ratio1_10]: '10:1',
[Ratio.Ratio1_20]: '20:1',
[Ratio.Limit]: 'Limit',
};
export const RATIO_NUMERIC: Record<Ratio, number> = {
[Ratio.Ratio1_1]: 1,
[Ratio.Ratio1_1_1]: 1.1,
[Ratio.Ratio1_1_3]: 1.3,
[Ratio.Ratio1_1_5]: 1.5,
[Ratio.Ratio1_1_7]: 1.7,
[Ratio.Ratio1_2]: 2,
[Ratio.Ratio1_2_5]: 2.5,
[Ratio.Ratio1_3]: 3,
[Ratio.Ratio1_3_5]: 3.5,
[Ratio.Ratio1_4]: 4,
[Ratio.Ratio1_5]: 5,
[Ratio.Ratio1_6]: 6,
[Ratio.Ratio1_8]: 8,
[Ratio.Ratio1_10]: 10,
[Ratio.Ratio1_20]: 20,
[Ratio.Limit]: 1000,
};
export const KNEE_VALUES = Array.from({ length: 13 }, (_, i) => i); // 0..12 dB, integer steps
// ------ Filter constants ------
export const CROSSOVER_FILTER_LABEL: { value: CrossoverFilter; label: string }[] = [
src/features/dsp408/dsp408.ts
+7 -3
View File
@@ -34,14 +34,17 @@ function pollIntervalFor(id: number): number {
async function poll(dsp: DSP408, setDsps: SetDsps) {
try {
const meters = await invoke<DSP408['meters']>('get_meter_levels', { id: dsp.id });
const [input_meters, output_meters] = await invoke<
[DSP408['input_meters'], DSP408['output_meters']]
>('get_meter_levels', { id: dsp.id });
updateDSP(setDsps, dsp.id, (d) =>
d.pollingPaused
? d
: ({
...d,
meters,
input_meters,
output_meters,
} as DSP408)
);
} catch {
@@ -118,7 +121,8 @@ export async function create(params: {
status: 'disconnected',
pollingPaused: true,
state: snapshot.state,
meters: snapshot.meters,
input_meters: snapshot.input_meters,
output_meters: snapshot.output_meters,
};
}
src/features/dsp408/types.ts
+8 -3
View File
@@ -242,7 +242,8 @@ export type DSPMode = 'demo' | 'disconnected' | 'connected';
export type DSP408Snapshot = {
state: DSPState;
meters: Meters;
input_meters: DSP408InputMeters;
output_meters: DSP408OutputMeters;
mode: DSPMode;
};
@@ -252,6 +253,10 @@ export interface Meter {
clip: boolean;
}
export interface Meters {
channels: Meter[];
export interface DSP408InputMeters {
meters: Record<InputChannel, Meter>;
}
export interface DSP408OutputMeters {
meters: Record<OutputChannel, Meter>;
}
src/types.ts
+8 -2
View File
@@ -1,4 +1,9 @@
import { DSPState as DSP408State, Meters as DSP408Meters, DSPMode } from './features/dsp408/types';
import {
DSPState as DSP408State,
DSPMode,
DSP408OutputMeters,
DSP408InputMeters,
} from './features/dsp408/types';
export type DSPStatus = 'connected' | 'connecting' | 'disconnected';
@@ -41,7 +46,8 @@ interface DSPBase {
export type DSP408 = DSPBase & {
type: 'DSP408';
state: DSP408State;
meters: DSP408Meters;
input_meters: DSP408InputMeters;
output_meters: DSP408OutputMeters;
};
export type DSP204 = DSPBase & {
src/variables.css
+1 -1
View File
@@ -79,7 +79,7 @@
/* ---------- Card ---------- */
--card-width: 500px;
--card-control-height: 36px;
--card-control-height: 40px;
/* ---------- Button ---------- */
--disabled-opacity: 0.45;