shawn/op-pedal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add units to MIDI range control

Browse Source 
This time taking into account logarithmic scale. Refactored range conversion
functions across the codebase too, as there were similar functions
in different files.
This commit is contained in:
FoolHen
2026-06-03 17:35:02 +02:00
parent bcf7c708d3
commit 144c60a0aa
5 changed files with 152 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite/src/pipedal/Lv2Plugin.tsx
+90 -57
View File
@@ -1,4 +1,5 @@
// Copyright (c) Robin E.R. Davies
// Copyright (c) 2022 Robin Davies
// Copyright (c) Fulgencio Ruiz Rubio.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
@@ -835,15 +836,44 @@ export class UiControl implements Deserializable<UiControl> {
valueToRange(value: number): number {
if (this.toggled_property) return value === 0 ? 0 : 1;
if (this.integer_property || this.enumeration_property) {
value = Math.round(value);
}
let range = (value - this.min_value) / (this.max_value - this.min_value);
let range: number;
if (this.is_logarithmic) {
let minValue = this.min_value;
if (minValue === 0) // LSP plugins do this.
{
minValue = 0.0001;
}
range = Math.log(value / minValue) / Math.log(this.max_value / minValue);
if (!isFinite(range)) {
if (range < 0) {
range = 0;
} else {
range = 1.0;
}
} else if (isNaN(range)) {
range = 0;
}
if (this.range_steps > 1) {
range = Math.round(range * (this.range_steps - 1)) / (this.range_steps - 1);
}
} else {
range = (value - this.min_value) / (this.max_value - this.min_value);
if (!isFinite(range)) {
if (range < 0) {
range = 0;
} else {
range = 1.0;
}
} else if (isNaN(range)) {
range = 0;
}
}
if (range > 1) range = 1;
if (range < 0) range = 0;
return range;
}
@@ -852,17 +882,67 @@ export class UiControl implements Deserializable<UiControl> {
if (range > 1) range = 1;
if (this.toggled_property) return range === 0 ? 0 : 1;
if (this.range_steps > 1) {
range = Math.round(range * (this.range_steps - 1)) / (this.range_steps - 1);
}
let value: number;
let value = range * (this.max_value - this.min_value) + this.min_value;
if (this.integer_property || this.enumeration_property) {
value = Math.round(value);
if (this.min_value === this.max_value) {
value = this.min_value;
} else {
if (this.is_logarithmic) {
let minValue = this.min_value;
if (minValue === 0) // LSP controls.
{
minValue = 0.0001;
}
value = minValue * Math.pow(this.max_value / minValue, range);
if (!isFinite(value)) {
value = this.max_value;
} else if (isNaN(value)) {
value = this.min_value;
}
} else {
value = range * (this.max_value - this.min_value) + this.min_value;
}
if (this.integer_property) {
value = Math.round(value);
}
}
return value;
}
clampValue(value: number): number {
return this.rangeToValue(this.valueToRange(value));
}
getDisplayUnits(): string {
if (this.custom_units !== "") {
return this.custom_units.replace("%f", "");
}
switch (this.units) {
case Units.bar: return "bar";
case Units.beat: return "beats";
case Units.bpm: return "bpm";
case Units.cent: return "cents";
case Units.cm: return "cm";
case Units.db: return "dB";
case Units.hz: return "Hz";
case Units.khz: return "kHz";
case Units.km: return "km";
case Units.m: return "m";
case Units.mhz: return "MHz";
case Units.midiNote: return "MIDI note";
case Units.min: return "min";
case Units.ms: return "ms";
case Units.pc: return "%";
case Units.s: return "s";
case Units.semitone12TET: return "st";
default: return "";
}
}
formatDisplayValue(value: number): string {
if (this.integer_property) {
value = Math.round(value);
@@ -893,56 +973,9 @@ export class UiControl implements Deserializable<UiControl> {
return semitone12TETValue(value);
}
let text = this.formatShortValue(value);
switch (this.units) {
case Units.bpm:
text += "bpm";
break;
case Units.cent:
text += "cents";
break;
case Units.cm:
text += "cm";
break;
case Units.db:
text += "dB";
break;
case Units.hz:
text += "Hz";
break;
case Units.khz:
text += "kHz";
break;
case Units.km:
text += "km";
break;
case Units.m:
text += "m";
break;
case Units.mhz:
text += "MHz";
break;
case Units.min:
text += "min";
break;
case Units.ms:
text += "ms";
break;
case Units.pc:
text += "%";
break;
case Units.unknown:
if (this.custom_units !== "") {
text = this.custom_units.replace("%f", text);
}
break;
default:
break;
}
return text;
return this.formatShortValue(value) + this.getDisplayUnits();
}
formatShortValue(value: number): string {
if (this.enumeration_property) {
for (let i = 0; i < this.scale_points.length; ++i) {
vite/src/pipedal/MidiBindingView.tsx
+40 -10
View File
@@ -1,4 +1,5 @@
// Copyright (c) Robin E.R. Davies
// Copyright (c) 2022 Robin Davies
// Copyright (c) Fulgencio Ruiz Rubio.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
@@ -25,7 +26,7 @@ import { withStyles } from "tss-react/mui";
import { createStyles } from './WithStyles';
import Snackbar from '@mui/material/Snackbar';
import { UiPlugin } from './Lv2Plugin';
import { UiPlugin, UiControl } from './Lv2Plugin';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
@@ -96,6 +97,7 @@ interface MidiBindingViewProps extends WithStyles<typeof styles> {
midiBinding: MidiBinding;
midiControlType: MidiControlType;
canDoTapTempo: boolean;
uiControl?: UiControl;
onChange: (instanceId: number, newBinding: MidiBinding) => void;
}
@@ -188,15 +190,28 @@ const MidiBindingView =
this.props.onChange(this.props.instanceId, newBinding);
}
handleMinChange(value: number): void {
if (!this.props.uiControl) return;
let newBinding = this.props.midiBinding.clone();
newBinding.minValue = value;
newBinding.minValue = this.props.uiControl.valueToRange(value) ;
this.props.onChange(this.props.instanceId, newBinding);
}
handleMaxChange(value: number): void {
if (!this.props.uiControl) return;
let newBinding = this.props.midiBinding.clone();
newBinding.maxValue = value;
newBinding.maxValue = this.props.uiControl.valueToRange(value);
console.log(value, newBinding.maxValue)
this.props.onChange(this.props.instanceId, newBinding);
}
private getDisplayUnit(): string {
let control = this.props.uiControl;
if (!control) return "";
if (control.custom_units !== "") {
return control.custom_units.replace("%f", "");
}
return ` ${control.getDisplayUnits()}`
}
handleCtlMinChange(value: number): void {
let newBinding = this.props.midiBinding.clone();
newBinding.minControlValue = Math.round(value);
@@ -638,21 +653,36 @@ const MidiBindingView =
)
}
{
showLinearRange && (
showLinearRange && (() => {
let uiControl = this.props.uiControl;
let displayMin = uiControl ? uiControl.min_value : 0;
let displayMax = uiControl ? uiControl.max_value : 1;
let unit = this.getDisplayUnit();
let isInteger = uiControl?.integer_property ?? false;
return (
<div style={{ display: "flex", flexFlow: "row wrap", alignItems: "center" }}>
<div className={classes.controlDiv}>
<Typography noWrap display="inline">Min Val:&nbsp;</Typography>
<NumericInput value={midiBinding.minValue} ariaLabel='min'
min={0} max={1} onChange={(value) => { this.handleMinChange(value); }}
<NumericInput value={this.props.uiControl?.rangeToValue(midiBinding.minValue) ?? 0} ariaLabel='min'
min={displayMin} max={displayMax} integer={isInteger}
onChange={(value) => { this.handleMinChange(value); }}
/>
{unit !== "" && (
<Typography noWrap display="inline">&nbsp;{unit.trim()}</Typography>
)}
</div>
<div className={classes.controlDiv}>
<Typography noWrap display="inline">Max Val:&nbsp;</Typography>
<NumericInput value={midiBinding.maxValue} ariaLabel='max'
min={0} max={1} onChange={(value) => { this.handleMaxChange(value); }} />
<NumericInput value={this.props.uiControl?.rangeToValue(midiBinding.maxValue) ?? 0} ariaLabel='max'
min={displayMin} max={displayMax} integer={isInteger}
onChange={(value) => { this.handleMaxChange(value); }} />
{unit !== "" && (
<Typography noWrap display="inline">&nbsp;{unit.trim()}</Typography>
)}
</div>
</div>
)
);
})()
}
{
canRotaryScale && (
vite/src/pipedal/MidiBindingsDialog.tsx
+2
View File
@@ -214,6 +214,7 @@ export const MidiBindingDialog =
midiControlType={ getMidiControlType(plugin, "__bypass")
}
canDoTapTempo={false }
uiControl={plugin.getControl("__bypass")}
onChange={(instanceId: number, newItem: MidiBinding) => this.handleItemChanged(instanceId, newItem)}
/>
</td>
@@ -258,6 +259,7 @@ export const MidiBindingDialog =
midiControlType={getMidiControlType(plugin, symbol)}
midiBinding={item.getMidiBinding(symbol)}
canDoTapTempo={canDoTapTempo(plugin, symbol)}
uiControl={control}
onChange={(instanceId: number, newItem: MidiBinding) => this.handleItemChanged(instanceId, newItem)}
/>
</td>
vite/src/pipedal/ModGuiHost.tsx
+8 -103
View File
@@ -862,7 +862,7 @@ class FilmstripControl implements ModGuiControl {
console.error("pipedal: Invalid mod-widget-rotation value: " + rotationAttr);
return;
}
let range = this.valueToRange(this.value);
let range = this.props.pluginControl.valueToRange(this.value);
this.frameElement.style.transform = `rotate(${rotation * range - rotation / 2}deg)`;
return;
@@ -926,13 +926,13 @@ class FilmstripControl implements ModGuiControl {
let pluginControl = this.props.pluginControl;
let value = this.isPointerDown ? this.pointerDownValue : this.value;
value = this.clampValue(value);
value = this.props.pluginControl.clampValue(value);
let isHorizontalStrip =
this.filmstripInfo.frameWidth / this.filmstripInfo.frameHeight
< this.filmstripInfo.width / this.filmstripInfo.height;
if (isHorizontalStrip) {
let range = this.valueToRange(value);
let range = this.props.pluginControl.valueToRange(value);
if (range < 0) {
range = 0;
@@ -1045,101 +1045,6 @@ class FilmstripControl implements ModGuiControl {
this.pointerDownValue = this.value;
}
valueToRange(value: number): number {
let uiControl = this.props.pluginControl;
if (uiControl) {
let range: number;
if (uiControl.is_logarithmic) {
let minValue = uiControl.min_value;
if (minValue === 0) // LSP plugins do this.
{
minValue = 0.0001;
}
range = Math.log(value / minValue) / Math.log(uiControl.max_value / minValue);
if (!isFinite(range)) {
if (range < 0) {
range = 0;
} else {
range = 1.0;
}
} else if (isNaN(range)) {
range = 0;
}
} else {
range = (value - uiControl.min_value) / (uiControl.max_value - uiControl.min_value);
if (!isFinite(range)) {
if (range < 0) {
range = 0;
} else {
range = 1.0;
}
} else if (isNaN(range)) {
range = 0;
}
}
if (range > 1) range = 1;
if (range < 0) range = 0;
return range;
}
return 0;
}
rangeToValue(range: number): number {
if (range < 0) range = 0;
if (range > 1) range = 1;
let uiControl = this.props.pluginControl;
if (uiControl) {
let value: number;
if (uiControl.min_value === uiControl.max_value) {
value = uiControl.min_value;
} else {
if (uiControl.is_logarithmic) {
let minValue = uiControl.min_value;
if (minValue === 0) // LSP controls.
{
minValue = 0.0001;
}
value = minValue * Math.pow(uiControl.max_value / minValue, range);
if (!isFinite(value)) {
value = uiControl.max_value;
} else if (isNaN(value)) {
value = uiControl.min_value;
}
} else {
value = range * (uiControl.max_value - uiControl.min_value) + uiControl.min_value;
}
}
return value;
}
return 0;
}
clampValue(value: number): number {
let control = this.props.pluginControl;
if (control.enumeration_property) {
value = control.clampSelectValue(value);
} else if (control.toggled_property) {
if (value < (control.min_value + control.max_value) / 2) {
value = control.min_value;
} else {
value = control.max_value;
}
} else if (control.integer_property) {
value = Math.round(value);
} else if (control.range_steps != 0) {
let step = (control.max_value - control.min_value) / control.range_steps;
value = Math.round((value - control.min_value) / step) * step + control.min_value;
}
if (value < control.min_value) {
value = control.min_value;
}
if (value > control.max_value) {
value = control.max_value;
}
return value;
}
handlePointerMove(event: PointerEvent) {
if (!this.frameElement) {
return; // Not mounted yet
@@ -1167,14 +1072,14 @@ class FilmstripControl implements ModGuiControl {
let dRange = -dy / rate;
let range = this.valueToRange(this.pointerDownValue);
let range = this.props.pluginControl.valueToRange(this.pointerDownValue);
range += dRange;
if (range < 0) range = 0;
if (range > 1) range = 1;
let newValue = this.rangeToValue(range);
let newValue = this.props.pluginControl.rangeToValue(range);
this.pointerDownValue = newValue;
this.setControlValue(newValue);
this.props.onValueChanged(this.props.instanceId, this.props.pluginControl.symbol, this.clampValue(newValue));
this.props.onValueChanged(this.props.instanceId, this.props.pluginControl.symbol, this.props.pluginControl.clampValue(newValue));
}
handlePointerUp(event: PointerEvent) {
let index = this.pointerIds.indexOf(event.pointerId);
@@ -1229,11 +1134,11 @@ class FilmstripControl implements ModGuiControl {
}
let dRange = event.deltaY / rate;
let range = this.valueToRange(this.value);
let range = this.props.pluginControl.valueToRange(this.value);
range += dRange;
if (range < 0) range = 0;
if (range > 1) range = 1;
let newValue = this.rangeToValue(range);
let newValue = this.props.pluginControl.rangeToValue(range);
this.setControlValue(newValue);
this.props.onValueChanged(this.props.instanceId, this.props.pluginControl.symbol, newValue);
}
vite/src/pipedal/PluginControl.tsx
+12 -106
View File
@@ -1,4 +1,5 @@
// Copyright (c) Robin E.R. Davies
// Copyright (c) 2022 Robin Davies
// Copyright (c) Fulgencio Ruiz Rubio.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
@@ -203,7 +204,6 @@ const CustomPluginControl =
</div>
);
return (<div />);
}
},
@@ -342,8 +342,9 @@ const PluginControl =
result = this.currentValue; // reset the value!
}
// clamp and quantize.
let range = this.valueToRange(result);
result = this.rangeToValue(range);
let range = this.props.uiControl?.valueToRange(result) ?? 0;
result = this.props.uiControl?.rangeToValue(range) ?? 0;
let displayVal = this.props.uiControl?.formatShortValue(result) ?? "";
if (event.currentTarget) {
event.currentTarget.value = displayVal;
@@ -682,8 +683,8 @@ const PluginControl =
this.setState({ previewValue: undefined });
}
previewInputValue(value: number, commitValue: boolean) {
let range = this.valueToRange(value);
value = this.rangeToValue(range);
let range = this.props.uiControl?.valueToRange(value) ?? 0;
value = this.props.uiControl?.rangeToValue(range) ?? 0;
let imgElement = this.imgRef.current
if (imgElement) {
@@ -712,13 +713,13 @@ const PluginControl =
}
previewRange(dRange: number, commitValue: boolean): void {
let range = this.valueToRange(this.currentValue) + dRange;
let range = (this.props.uiControl?.valueToRange(this.currentValue) ?? 0) + dRange;
if (range > 1) range = 1;
if (range < 0) range = 0;
let value = this.rangeToValue(range);
let value = this.props.uiControl?.rangeToValue(range) ?? 0;
// apply value quantization and clipping.
range = this.valueToRange(value);
range = this.props.uiControl?.valueToRange(value) ?? 0;
if (this.props.uiControl?.isGraphicEq()) {
let imgElement = this.imgRef.current
@@ -835,89 +836,6 @@ const PluginControl =
if (!uiControl) return "";
return uiControl.formatDisplayValue(value);
}
valueToRange(value: number): number {
let uiControl = this.props.uiControl;
if (uiControl) {
if (uiControl.integer_property) {
value = Math.round(value);
}
let range: number;
if (uiControl.is_logarithmic) {
let minValue = uiControl.min_value;
if (minValue === 0) // LSP plugins do this.
{
minValue = 0.0001;
}
range = Math.log(value / minValue) / Math.log(uiControl.max_value / minValue);
if (!isFinite(range)) {
if (range < 0) {
range = 0;
} else {
range = 1.0;
}
} else if (isNaN(range)) {
range = 0;
}
if (uiControl.range_steps > 1) {
range = Math.round(range * (uiControl.range_steps - 1)) / (uiControl.range_steps - 1);
}
} else {
range = (value - uiControl.min_value) / (uiControl.max_value - uiControl.min_value);
if (!isFinite(range)) {
if (range < 0) {
range = 0;
} else {
range = 1.0;
}
} else if (isNaN(range)) {
range = 0;
}
}
if (range > 1) range = 1;
if (range < 0) range = 0;
return range;
}
return 0;
}
rangeToValue(range: number): number {
if (range < 0) range = 0;
if (range > 1) range = 1;
let uiControl = this.props.uiControl;
if (uiControl) {
if (uiControl.range_steps > 1) {
range = Math.round(range * (uiControl.range_steps - 1)) / (uiControl.range_steps - 1);
}
let value: number;
if (uiControl.min_value === uiControl.max_value) {
value = uiControl.min_value;
} else {
if (uiControl.is_logarithmic) {
let minValue = uiControl.min_value;
if (minValue === 0) // LSP controls.
{
minValue = 0.0001;
}
value = minValue * Math.pow(uiControl.max_value / minValue, range);
if (!isFinite(value)) {
value = uiControl.max_value;
} else if (isNaN(value)) {
value = uiControl.min_value;
}
} else {
value = range * (uiControl.max_value - uiControl.min_value) + uiControl.min_value;
}
if (uiControl.integer_property) {
value = Math.round(value);
}
}
return value;
}
return 0;
}
rangeToRotationTransform(range: number): string {
@@ -926,22 +844,10 @@ const PluginControl =
}
getEqPosition(): number {
let range = 0;
let uiControl = this.props.uiControl;
if (uiControl) {
let value = this.props.value;
range = this.valueToRange(value);
}
return range;
return this.props.uiControl?.valueToRange(this.props.value) ?? 0;
}
getRotationTransform(): string {
let range = 0;
let uiControl = this.props.uiControl;
if (uiControl) {
let value = this.props.value;
range = this.valueToRange(value);
}
let range = this.props.uiControl?.valueToRange(this.props.value) ?? 0;
return this.rangeToRotationTransform(range);
}