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

TooBAmp x11 UI merge

Browse Source
This commit is contained in:
Robin Davies
2023-10-30 19:06:12 -04:00
parent 31aa061af5
commit 94325f20c5
145 changed files with 7186 additions and 6233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/public/var/config.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"socket_server_port": 8080,
"socket_server_port": 80,
"socket_server_address": "*",
"debug": true,
"max_upload_size": 1048576,
react/src/ControlViewFactory.tsx
+1 -14
View File
@@ -26,24 +26,11 @@ import PluginControlView from './PluginControlView';
import SplitControlView from './SplitControlView';
import Typography from '@mui/material/Typography';
import IControlViewFactory from './IControlViewFactory';
import ToobInputStageViewFactory from './ToobInputStageView';
import ToobToneStackViewFactory from './ToobToneStackView';
import ToobCabSimViewFactory from './ToobCabSimView';
import ToobPowerStage2Factory from './ToobPowerStage2View';
import ToobSpectrumAnalyzerViewFactory from './ToobSpectrumAnalyzerView';
import ToobMLViewFactory from './ToobMLView';
import { ToobTunerViewFactory, GxTunerViewFactory } from './GxTunerView';
import { GxTunerViewFactory } from './GxTunerView';
let pluginFactories: IControlViewFactory[] = [
new ToobInputStageViewFactory(),
new ToobToneStackViewFactory(),
new ToobCabSimViewFactory(),
new ToobPowerStage2Factory(),
new ToobSpectrumAnalyzerViewFactory(),
new ToobMLViewFactory(),
new GxTunerViewFactory(),
new ToobTunerViewFactory()
];
react/src/GxTunerControl.tsx
+33 -12
View File
@@ -28,7 +28,7 @@ import {isDarkMode} from './DarkMode';
//const char* model[] = {"12-TET","19-TET","24-TET", "31-TET", "53-TET"};
// set_adjustment(ui->widget[2]->adj,440.0, 440.0, 427.0, 453.0, 0.1, CL_CONTINUOS);
const FREQUENCY_PORT_NAME = "FREQ";
const DEFAULT_FREQUENCY_PORT_NAME = "FREQ";
const DIAL_WIDTH= 220;
const DIAL_HEIGHT = 100;
@@ -89,6 +89,8 @@ const NOTES_53TET = ["la","laa","lo","law","ta","teh","te","tu","tuh","ti","tih"
interface GxTunerControlProps extends WithStyles<typeof styles> {
theme: Theme;
instanceId: number;
valueIsMidi: boolean;
symbolName?: string;
}
type GxTunerControlState = {
pitchInfo: PitchInfo
@@ -128,20 +130,24 @@ const GxTunerControl =
this.onStateChanged = this.onStateChanged.bind(this);
}
frequencyPortName() : string {
if (this.props.symbolName) { return this.props.symbolName;}
return DEFAULT_FREQUENCY_PORT_NAME;
}
noteToPitchInfo(hz: number) : PitchInfo
noteToPitchInfo(value: number) : PitchInfo
{
if (hz < 65) // ground hum. Ignore it.
{
hz = 0;
}
let aOffset = 69;
let tet = this.state.tet;
let refFrequency = this.state.refFrequency;
let aOffset: number;
let names: string[];
let semitoneCents = 100;
let valid = false;
let hz = -1;
let midiNote = -1;
switch (tet)
{
@@ -165,10 +171,25 @@ const GxTunerControl =
let name = "";
let fractionText = "";
let fraction = 0;
if (hz !== 0)
if (this.props.valueIsMidi)
{
midiNote = value;
} else {
if (value < 65)
{
hz = -1;
midiNote = -1;
} else {
midiNote = Math.log2(hz/refFrequency)*12 + aOffset;
}
}
if (midiNote > 0)
{
let note = Math.log2(hz/refFrequency)*tet + aOffset;
let note = midiNote;
let noteNumber = Math.round(note);
let octave = Math.floor((noteNumber)/tet);
@@ -198,7 +219,7 @@ const GxTunerControl =
onFrequencyUpdated(value: number): void
{
// suppress repeated zeros.
if (value === this.lastValue && value === 0 && this.animationIdle) return;
if (value === this.lastValue && value <= 0 && this.animationIdle) return;
this.lastValue = value;
@@ -206,7 +227,7 @@ const GxTunerControl =
this.setState({
pitchInfo: pitchInfo
});
if (value === 0)
if (value <= 0)
{
this.startAnimationTimer();
} else {
@@ -246,7 +267,7 @@ const GxTunerControl =
addSubscription() {
this.subscribedInstanceId = this.props.instanceId;
this.monitorHandle = this.model.monitorPort(this.props.instanceId,FREQUENCY_PORT_NAME,1.0/30,this.onFrequencyUpdated);
this.monitorHandle = this.model.monitorPort(this.props.instanceId,this.frequencyPortName(),1.0/30,this.onFrequencyUpdated);
}
removeSubscription() {
this.subscribedInstanceId = -1;
react/src/GxTunerView.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ const GxTunerView =
let result: (React.ReactNode | ControlGroup)[] = [];
let tunerControl = (<GxTunerControl instanceId={this.props.instanceId} />);
let tunerControl = (<GxTunerControl instanceId={this.props.instanceId} valueIsMidi={false} />);
result.push(tunerControl);
result.push(controls[refFreqIndex]);
react/src/Lv2Plugin.tsx
+39 -2
View File
@@ -447,7 +447,11 @@ export enum ControlType {
Dial,
OnOffSwitch,
ABSwitch,
Select
Select,
Tuner,
Vu,
DbVu
}
export class UiControl implements Deserializable<UiControl> {
@@ -476,6 +480,7 @@ export class UiControl implements Deserializable<UiControl> {
this.is_bypass = input.is_bypass ? true: false;
this.is_program_controller = input.is_program_controller? true: false;
this.custom_units = input.custom_units ?? "";
this.connection_optional = input.connection_optional ? true: false;
if (this.is_bypass)
@@ -485,7 +490,20 @@ export class UiControl implements Deserializable<UiControl> {
this.controlType = ControlType.Dial;
if (this.isValidEnumeration())
if (!this.is_input)
{
if (this.units === Units.midiNote)
{
this.controlType = ControlType.Tuner;
} else if (this.units === Units.db)
{
this.controlType = ControlType.DbVu;
} else {
this.controlType = ControlType.Vu;
}
}
else if (this.isValidEnumeration())
{
this.controlType = ControlType.Select;
if (this.scale_points.length === 2)
@@ -559,6 +577,7 @@ export class UiControl implements Deserializable<UiControl> {
is_bypass: boolean = true;
is_program_controller: boolean = true;
custom_units: string = "";
connection_optional: boolean = false;
// Return the value of the closest scale_point.
@@ -581,6 +600,10 @@ export class UiControl implements Deserializable<UiControl> {
return value;
}
}
isHidden() : boolean {
return this.not_on_gui || (this.connection_optional && !this.is_input);
}
isOnOffSwitch() : boolean {
return this.controlType === ControlType.OnOffSwitch;
}
@@ -592,10 +615,24 @@ export class UiControl implements Deserializable<UiControl> {
return this.controlType === ControlType.Select;
}
isLamp(): boolean {
return this.toggled_property && this.scale_points.length === 0 && !this.is_input;
}
isDial() : boolean {
return this.controlType === ControlType.Dial;
}
isTuner() : boolean {
return this.controlType === ControlType.Tuner;
}
isVu() : boolean {
return this.controlType === ControlType.Vu;
}
isDbVu() : boolean {
return this.controlType === ControlType.DbVu;
}
valueToRange(value: number): number {
if (this.toggled_property) return value === 0 ? 0: 1;
react/src/PluginControlView.tsx
+3 -3
View File
@@ -306,7 +306,7 @@ const PluginControlView =
for (let i = 0; i < controlValues.length; ++i) {
let controlValue = controlValues[i];
let control = uiPlugin.getControl(controlValue.key);
if (control && !control.not_on_gui) {
if (control && !control.isHidden()) {
result.push(controlValue);
}
}
@@ -381,7 +381,7 @@ const PluginControlView =
for (let i = 0; i < plugin.controls.length; ++i) {
let pluginControl = plugin.controls[i];
if (!pluginControl.not_on_gui) {
if (!pluginControl.isHidden()) {
if (pluginControl.port_group !== "" && plugin.getPortGroupBySymbol(pluginControl.port_group)) {
let portGroup = nullCast(plugin.getPortGroupBySymbol(pluginControl.port_group));
@@ -394,7 +394,7 @@ const PluginControlView =
while (i + 1 < plugin.controls.length && plugin.controls[i + 1].port_group === pluginControl.port_group) {
++i;
pluginControl = plugin.controls[i];
if (!pluginControl.not_on_gui) {
if (!pluginControl.isHidden()) {
groupControls.push(
this.makeStandardControl(pluginControl, controlValues)
)
react/src/PluginOutputControl.tsx
+153 -10
View File
@@ -26,6 +26,8 @@ import { UiControl } from './Lv2Plugin';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, MonitorPortHandle,State } from './PiPedalModel';
import {isDarkMode} from './DarkMode';
import GxTunerControl from './GxTunerControl';
import Units from './Units';
@@ -77,12 +79,16 @@ const PluginOutputControl =
private model: PiPedalModel;
private vuRef: React.RefObject<HTMLDivElement>;
private dbVuRef: React.RefObject<HTMLDivElement>;
private dbVuTelltaleRef: React.RefObject<HTMLDivElement>;
private lampRef: React.RefObject<HTMLDivElement>;
constructor(props: PluginOutputControlProps) {
super(props);
this.vuRef = React.createRef<HTMLDivElement>();
this.dbVuRef = React.createRef<HTMLDivElement>();
this.dbVuTelltaleRef = React.createRef<HTMLDivElement>();
this.lampRef = React.createRef<HTMLDivElement>();
this.state = {
hasValue: false,
@@ -128,17 +134,95 @@ const PluginOutputControl =
}
}
private VU_HEIGHT = 48-2;
private VU_HEIGHT = 60-4;
private DB_VU_HEIGHT = 60-4;
private animationHandle: number | undefined = undefined;
private dbVuTelltale = -96.0;
private dbVuValue = -96.0;
private dbVuHoldTime = 0.0;
private requestDbVuAnimation() {
if (!this.animationHandle)
{
this.animationHandle = requestAnimationFrame(
()=> {
let value = this.dbVuValue;
let range = this.vuMap(value);
let top = range-this.VU_HEIGHT;
if (top > 0) top = 0;
if (value > this.dbVuTelltale)
{
this.dbVuTelltale = value;
this.dbVuHoldTime = Date.now()+2000;
}
if (this.dbVuRef.current)
{
this.dbVuRef.current.style.marginTop = top+"px";
}
this.animationHandle = undefined;
this.updateDbVuTelltale();
}
)
}
}
updateDbVuTelltale() {
let telltaleDone = true;
if (this.dbVuHoldTime !== 0)
{
telltaleDone = false;
let t = Date.now();
if (t >= this.dbVuHoldTime)
{
let dt = t-this.dbVuHoldTime;
let telltaleValue = this.dbVuTelltale-30*dt/1000;
if (telltaleValue < -200)
{
telltaleValue = -200;
telltaleDone = true;
}
this.dbVuTelltale = telltaleValue;
this.dbVuHoldTime = t;
}
let y = this.dbVuMap(this.dbVuTelltale);
if (y < 0) y = 0;
if (this.dbVuTelltaleRef.current)
{
let telltaleStyle = this.dbVuTelltaleRef.current.style;
telltaleStyle.marginTop = y + "px";
let telltaleColor = "#0C0";
if (this.dbVuTelltale >= 0)
{
telltaleColor = "#F00";
} else if (this.dbVuTelltale >= -10)
{
telltaleColor = "#FF0";
}
telltaleStyle.background = telltaleColor;
}
}
if (!telltaleDone)
{
this.requestDbVuAnimation();
}
}
private updateValue(value: number) {
if (this.lampRef.current)
{
let control = this.props.uiControl;
let range = (value-control.min_value)/(control.max_value-control.min_value);
this.lampRef.current.style.opacity = range +"";
} else if (this.dbVuRef.current)
{
this.dbVuValue = value;
this.requestDbVuAnimation();
}
if (this.vuRef.current) {
else if (this.vuRef.current) {
let control = this.props.uiControl;
let range = (value-control.min_value)/(control.max_value-control.min_value);
let top = this.VU_HEIGHT-range*this.VU_HEIGHT;
@@ -197,6 +281,19 @@ const PluginOutputControl =
return uiControl.formatDisplayValue(value);
}
dbVuMap(value: number): number {
let control = this.props.uiControl;
let y = (control.max_value-value)*this.DB_VU_HEIGHT/(control.max_value-control.min_value);
return y;
}
vuMap(value: number): number {
let control = this.props.uiControl;
let y = (control.max_value-value)*this.VU_HEIGHT/(control.max_value-control.min_value);
return y;
}
render() {
let control: UiControl = this.props.uiControl;
@@ -220,7 +317,53 @@ const PluginOutputControl =
item_width = 80;
}
}
if (control.isDial()) {
if (control.isTuner())
{
item_width = undefined;
return (
<div style={{ display: "flex", flexDirection: "column", width: item_width, margin: 8, height: 98 }}>
<GxTunerControl instanceId={this.props.instanceId} symbolName={control.symbol}
valueIsMidi={ control.units === Units.midiNote}
/>
</div >
);
} else if (control.isDbVu())
{
item_width = undefined;
let redLevel = this.dbVuMap(0);
let yellowLevel = this.dbVuMap(-10);
return (
<div style={{ display: "flex", flexDirection: "column", width: item_width, margin: 8, height: 98 }}>
{/* TITLE SECTION */}
<div style={{ flex: "0 0 auto", width: "100%", marginBottom: 8, marginLeft: 0, marginRight: 0 }}>
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "center"
}}> {control.name === "" ? "\u00A0" : control.name}</Typography>
</div>
{/* CONTROL SECTION */}
<div style={{ flex: "1 1 auto", display: "flex", justifyContent: "center", alignItems: "start", flexFlow: "row nowrap" }}>
<div style={{ width: 8, height: this.DB_VU_HEIGHT+4, background: "#000", }}>
<div style={{ height: this.DB_VU_HEIGHT, width: 4, overflow: "hidden", position: "absolute", margin: 2 }}>
<div style={{width: 4, height: redLevel,position: "absolute", marginTop: 0, background: "#F00"}} />
<div style={{width: 4, height: (yellowLevel-redLevel),position: "absolute", marginTop: redLevel, background: "#CC0"}} />
<div style={{width: 4, height: (this.DB_VU_HEIGHT-yellowLevel),position: "absolute", marginTop: yellowLevel, background: "#0A0"}} />
<div ref={this.dbVuRef} style={{ width: 4,position: "absolute", marginTop: 0,height: this.VU_HEIGHT, background: "#000" }} />
<div ref={this.dbVuTelltaleRef} style={{ width: 4,position: "absolute", marginTop: 0,height: 3, background: "#C00" }} />
</div>
</div>
</div>
</div >
);
}
else if (control.isVu()) {
item_width = undefined;
return (
<div style={{ display: "flex", flexDirection: "column", width: item_width, margin: 8, height: 98 }}>
@@ -229,14 +372,14 @@ const PluginOutputControl =
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "center"
}}> {control.name}</Typography>
}}> {control.name === "" ? "\u00A0" : control.name}</Typography>
</div>
{/* CONTROL SECTION */}
<div style={{ flex: "1 1 auto", display: "flex", justifyContent: "center", alignItems: "center", flexFlow: "row nowrap" }}>
<div style={{ width: 6, height: 48, background: "#000", }}>
<div style={{ height: 46, overflow: "hidden", position: "absolute", margin: 1 }}>
<div ref={this.vuRef} style={{ width: 4, height: 48, background: "#0C0", }} />
<div style={{ flex: "1 1 auto", display: "flex", justifyContent: "center", alignItems: "start", flexFlow: "row nowrap" }}>
<div style={{ width: 8, height: this.VU_HEIGHT+4, background: "#000", }}>
<div style={{ height: this.VU_HEIGHT, overflow: "hidden", position: "absolute", margin: 2 }}>
<div ref={this.vuRef} style={{ width: 4, height: this.VU_HEIGHT, background: "#0C0", }} />
</div>
</div>
@@ -249,7 +392,7 @@ const PluginOutputControl =
</div >
);
} else if (control.toggled_property && control.scale_points.length === 0) {
} else if (control.isLamp()) {
item_width = undefined;
let attachedLamp = control.name === "" || control.name === "\u00A0" ;
return (
@@ -261,7 +404,7 @@ const PluginOutputControl =
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "center"
}}> {control.name === "" ? "\u00A0": control.name}</Typography>
}}> {control.name === "" ? "\u00A0": (control.name)}</Typography>
</div>
{/* CONTROL SECTION */}
react/src/ToobFrequencyResponseView.tsx
+8 -12
View File
@@ -153,16 +153,13 @@ const ToobFrequencyResponseView =
if (!this.mounted) return;
let pathBuilder = new SvgPathBuilder();
let minF = data[0];
let maxF = data[1];
let dbMin = data[2];
let dbMax = data[3];
let logMin = Math.log(minF);
let logMax = Math.log(maxF);
let toX_ = (frequency: number): number => {
var logV = Math.log(frequency);
return (this.xMax - this.xMin) * (logV - logMin) / (logMax - logMin) + this.xMin;
let n = data.length-4;
let toX_ = (bin: number): number => {
return (this.xMax - this.xMin) * bin/n;
};
let toY_ = (value: number): number => {
@@ -178,11 +175,10 @@ const ToobFrequencyResponseView =
};
if (data.length > 2) {
pathBuilder.moveTo(toX_(data[4]), toY_(data[5]))
for (let i = 6; i < data.length; i += 2) {
pathBuilder.lineTo(toX_(data[i]), toY_(data[i + 1]));
if (n >= 2) {
pathBuilder.moveTo(toX_(0), toY_(data[4]))
for (let i = 1; i < n; i++) {
pathBuilder.lineTo(toX_(i), toY_(data[i+4]));
}
}
this.currentPath = pathBuilder.toString();
react/src/ToobInputStageView.tsx
+6 -5
View File
@@ -28,7 +28,7 @@ import IControlViewFactory from './IControlViewFactory';
import { PiPedalModelFactory, PiPedalModel } from "./PiPedalModel";
import { PedalboardItem } from './Pedalboard';
import PluginControlView, { ControlGroup,ControlViewCustomization } from './PluginControlView';
import ToobFrequencyResponseView from './ToobFrequencyResponseView';
//import ToobFrequencyResponseView from './ToobFrequencyResponseView';
@@ -62,11 +62,12 @@ const ToobInputStageView =
ModifyControls(controls: (React.ReactNode| ControlGroup)[]): (React.ReactNode| ControlGroup)[]
{
let group = controls[1] as ControlGroup;
group.controls.splice(0,0,
( <ToobFrequencyResponseView instanceId={this.props.instanceId} />)
);
return controls;
// let group = controls[1] as ControlGroup;
// group.controls.splice(0,0,
// ( <ToobFrequencyResponseView instanceId={this.props.instanceId} />)
// );
// return controls;
}
render() {
return (<PluginControlView