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

Plot from PiPedalUI

Browse Source
This commit is contained in:
Robin E. R. Davies
2025-09-19 07:27:33 -04:00
parent 9c18f7ab7c
commit eeb525dc71
11 changed files with 237 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
default_presets/presets/Default+Bank.bank
+1 -1
View File
File diff suppressed because one or more lines are too long
src/PiPedalModel.cpp
+9 -6
View File
@@ -1745,15 +1745,18 @@ void PiPedalModel::SendSetPatchProperty(
{ {
std::shared_ptr<Lv2PluginInfo> pluginInfo = GetPluginInfo(pedalboardItem->uri_); std::shared_ptr<Lv2PluginInfo> pluginInfo = GetPluginInfo(pedalboardItem->uri_);
auto pipedalUi = pluginInfo->piPedalUI(); auto pipedalUi = pluginInfo->piPedalUI();
auto fileProperty = pipedalUi->GetFileProperty(propertyUri); if (pipedalUi)
if (fileProperty)
{ {
auto fileProperty = pipedalUi->GetFileProperty(propertyUri);
if (fileProperty)
{
json_variant abstractPath = pluginHost.AbstractPath(value); json_variant abstractPath = pluginHost.AbstractPath(value);
std::string atomString = abstractPath.to_string(); std::string atomString = abstractPath.to_string();
pedalboardItem->pathProperties_[propertyUri] = atomString; pedalboardItem->pathProperties_[propertyUri] = atomString;
}
this->SetPresetChanged(clientId, true);
} }
this->SetPresetChanged(clientId, true);
} }
LV2_Atom *atomValue = atomConverter.ToAtom(value); LV2_Atom *atomValue = atomConverter.ToAtom(value);
src/PiPedalUI.cpp
+3 -1
View File
@@ -538,7 +538,8 @@ UiFrequencyPlot::UiFrequencyPlot(PluginHost*pHost, const LilvNode*node,
this->xRight_ = GetFloat(pWorld,node,pHost->lilvUris->pipedalUI__xRight,22000); this->xRight_ = GetFloat(pWorld,node,pHost->lilvUris->pipedalUI__xRight,22000);
this->yTop_ = GetFloat(pWorld,node,pHost->lilvUris->pipedalUI__yTop,5); this->yTop_ = GetFloat(pWorld,node,pHost->lilvUris->pipedalUI__yTop,5);
this->yBottom_ = GetFloat(pWorld,node,pHost->lilvUris->pipedalUI__yBottom,-35); this->yBottom_ = GetFloat(pWorld,node,pHost->lilvUris->pipedalUI__yBottom,-35);
this->xLog_ = GetFloat(pWorld,node,pHost->lilvUris->pipedalUI__xLog,-35); this->xLog_ = GetFloat(pWorld,node,pHost->lilvUris->pipedalUI__xLog,1);
this->yDb_ = GetFloat(pWorld,node,pHost->lilvUris->pipedalUI__yDb,1);
this->width_ = GetFloat(pWorld,node,pHost->lilvUris->pipedalUI__width,176); this->width_ = GetFloat(pWorld,node,pHost->lilvUris->pipedalUI__width,176);
} }
@@ -727,6 +728,7 @@ JSON_MAP_REFERENCE(UiFrequencyPlot, portGroup)
JSON_MAP_REFERENCE(UiFrequencyPlot, xLeft) JSON_MAP_REFERENCE(UiFrequencyPlot, xLeft)
JSON_MAP_REFERENCE(UiFrequencyPlot, xRight) JSON_MAP_REFERENCE(UiFrequencyPlot, xRight)
JSON_MAP_REFERENCE(UiFrequencyPlot, xLog) JSON_MAP_REFERENCE(UiFrequencyPlot, xLog)
JSON_MAP_REFERENCE(UiFrequencyPlot, yDb)
JSON_MAP_REFERENCE(UiFrequencyPlot, yTop) JSON_MAP_REFERENCE(UiFrequencyPlot, yTop)
JSON_MAP_REFERENCE(UiFrequencyPlot, yBottom) JSON_MAP_REFERENCE(UiFrequencyPlot, yBottom)
JSON_MAP_REFERENCE(UiFrequencyPlot, width) JSON_MAP_REFERENCE(UiFrequencyPlot, width)
src/PiPedalUI.hpp
+3
View File
@@ -63,6 +63,7 @@
#define PIPEDAL_UI__xLeft PIPEDAL_UI_PREFIX "xLeft" #define PIPEDAL_UI__xLeft PIPEDAL_UI_PREFIX "xLeft"
#define PIPEDAL_UI__xRight PIPEDAL_UI_PREFIX "xRight" #define PIPEDAL_UI__xRight PIPEDAL_UI_PREFIX "xRight"
#define PIPEDAL_UI__xLog PIPEDAL_UI_PREFIX "xLog" #define PIPEDAL_UI__xLog PIPEDAL_UI_PREFIX "xLog"
#define PIPEDAL_UI__yDb PIPEDAL_UI_PREFIX "yDb"
#define PIPEDAL_UI__yTop PIPEDAL_UI_PREFIX "yTop" #define PIPEDAL_UI__yTop PIPEDAL_UI_PREFIX "yTop"
#define PIPEDAL_UI__yBottom PIPEDAL_UI_PREFIX "yBottom" #define PIPEDAL_UI__yBottom PIPEDAL_UI_PREFIX "yBottom"
#define PIPEDAL_UI__width PIPEDAL_UI_PREFIX "width" #define PIPEDAL_UI__width PIPEDAL_UI_PREFIX "width"
@@ -196,6 +197,7 @@ namespace pipedal
float yTop_ = 5; float yTop_ = 5;
float yBottom_ = -30; float yBottom_ = -30;
bool xLog_ = true; bool xLog_ = true;
bool yDb_ = true;
float width_ = 60; float width_ = 60;
public: public:
@@ -213,6 +215,7 @@ namespace pipedal
float yTop() const { return yTop_; } float yTop() const { return yTop_; }
float yBottom() const { return yBottom_; } float yBottom() const { return yBottom_; }
float width() const { return width_; } float width() const { return width_; }
bool yDb() const { return yDb_; }
public: public:
DECLARE_JSON_MAP(UiFrequencyPlot); DECLARE_JSON_MAP(UiFrequencyPlot);
src/PluginHost.cpp
+1
View File
@@ -165,6 +165,7 @@ void PluginHost::LilvUris::Initialize(LilvWorld *pWorld)
pipedalUI__yTop = lilv_new_uri(pWorld, PIPEDAL_UI__yTop); pipedalUI__yTop = lilv_new_uri(pWorld, PIPEDAL_UI__yTop);
pipedalUI__yBottom = lilv_new_uri(pWorld, PIPEDAL_UI__yBottom); pipedalUI__yBottom = lilv_new_uri(pWorld, PIPEDAL_UI__yBottom);
pipedalUI__xLog = lilv_new_uri(pWorld, PIPEDAL_UI__xLog); pipedalUI__xLog = lilv_new_uri(pWorld, PIPEDAL_UI__xLog);
pipedalUI__yDb = lilv_new_uri(pWorld, PIPEDAL_UI__yDb);
pipedalUI__width = lilv_new_uri(pWorld, PIPEDAL_UI__width); pipedalUI__width = lilv_new_uri(pWorld, PIPEDAL_UI__width);
pipedalUI__graphicEq = lilv_new_uri(pWorld, PIPEDAL_UI__graphicEq); pipedalUI__graphicEq = lilv_new_uri(pWorld, PIPEDAL_UI__graphicEq);
src/PluginHost.hpp
+1
View File
@@ -810,6 +810,7 @@ namespace pipedal
AutoLilvNode pipedalUI__xLeft; AutoLilvNode pipedalUI__xLeft;
AutoLilvNode pipedalUI__xRight; AutoLilvNode pipedalUI__xRight;
AutoLilvNode pipedalUI__xLog; AutoLilvNode pipedalUI__xLog;
AutoLilvNode pipedalUI__yDb;
AutoLilvNode pipedalUI__yTop; AutoLilvNode pipedalUI__yTop;
AutoLilvNode pipedalUI__yBottom; AutoLilvNode pipedalUI__yBottom;
AutoLilvNode pipedalUI__width; AutoLilvNode pipedalUI__width;
vite/src/pipedal/Lv2Plugin.tsx
+2
View File
@@ -223,6 +223,7 @@ export class UiFrequencyPlot {
this.xLeft = input.xLeft; this.xLeft = input.xLeft;
this.xRight = input.xRight; this.xRight = input.xRight;
this.xLog = input.xLog; this.xLog = input.xLog;
this.yDb = input.yDb;
this.yTop = input.yTop; this.yTop = input.yTop;
this.yBottom = input.yBottom; this.yBottom = input.yBottom;
this.width = input.width; this.width = input.width;
@@ -242,6 +243,7 @@ export class UiFrequencyPlot {
xLeft: number = -1; xLeft: number = -1;
xRight: number = -1; xRight: number = -1;
xLog: boolean = true; xLog: boolean = true;
yDb: boolean = true;
yTop: number = -1; yTop: number = -1;
yBottom: number = -1; yBottom: number = -1;
width: number = -1; width: number = -1;
vite/src/pipedal/PerformanceView.tsx
+170 -166
View File
@@ -19,6 +19,8 @@
import { Theme } from '@mui/material/styles'; import { Theme } from '@mui/material/styles';
import BankIcon from './svg/ic_bank.svg?react';
import Typography from '@mui/material/Typography';
import SaveIconOutline from '@mui/icons-material/Save'; import SaveIconOutline from '@mui/icons-material/Save';
import WithStyles from './WithStyles'; import WithStyles from './WithStyles';
import { createStyles } from './WithStyles'; import { createStyles } from './WithStyles';
@@ -48,6 +50,10 @@ import { css } from '@emotion/react';
const selectColor = isDarkMode() ? "#888" : "#FFFFFF"; const selectColor = isDarkMode() ? "#888" : "#FFFFFF";
const styles = (theme: Theme) => createStyles({ const styles = (theme: Theme) => createStyles({
listIcon: css({
width: 24, height: 24,
opacity: 0.6, fill: theme.palette.text.primary
}),
frame: css({ frame: css({
position: "absolute", display: "flex", flexDirection: "column", flexWrap: "nowrap", position: "absolute", display: "flex", flexDirection: "column", flexWrap: "nowrap",
justifyContent: "flex-start", left: "0px", top: "0px", bottom: "0px", right: "0px", overflow: "hidden" justifyContent: "flex-start", left: "0px", top: "0px", bottom: "0px", right: "0px", overflow: "hidden"
@@ -251,17 +257,18 @@ export const PerformanceView =
return ( return (
<div className={classes.frame} style={{ overflow: "clip", height: "100%" }} > <div className={classes.frame} style={{ overflow: "clip", height: "100%" }} >
<div className={classes.frame} style={{ overflow: "clip", height: "100%" }} > <div className={classes.frame} style={{ overflow: "clip", height: "100%" }} >
<AppBar id="select-plugin-dialog-title" <div id="select-plugin-dialog-title"
style={{ style={{
position: "static", flex: "0 0 auto", height: undefined, position: "static", flex: "0 0 auto", height: undefined,
display: this.state.showSnapshotEditor ? "none" : undefined display: this.state.showSnapshotEditor ? "none" : undefined,
background: "transparent"
}} }}
> >
{this.state.largeAppBar ? ( {this.state.largeAppBar ? (
<div style={{ <div style={{
display: "flex", flexFlow: "row nowrap", alignContent: "center", display: "flex", flexFlow: "row nowrap", alignContent: "center",
paddingTop: 3, paddingBottom: 3, paddingRight: 8, paddingLeft: 8, paddingTop: 3, paddingBottom: 3, paddingRight: 8, paddingLeft: 8,
alignItems: "start", justifyContent: "space-between", alignItems: "center", justifyContent: "space-between"
}}> }}>
<IconButtonEx tooltip="Back" aria-label="menu" color="inherit" <IconButtonEx tooltip="Back" aria-label="menu" color="inherit"
@@ -273,51 +280,9 @@ export const PerformanceView =
<ArrowBackIcon fontSize="large" /> <ArrowBackIcon fontSize="large" />
</IconButtonEx> </IconButtonEx>
{/********* BANKS *******************/}
<div style={{
flex: "1 1 auto", display: "flex", flexFlow: "row nowrap", maxWidth: 300, alignItems: "center",
}}>
<Select variant="standard"
className={classes.select}
style={{
flex: "1 1 1px", width: "100%", position: "relative", top: 0, color: "#FFFFFF",
fontSize: "2.0rem",
}} disabled={false}
displayEmpty
onClose={(e) => this.handleBankSelectClose(e)}
value={banks.selectedBank === 0 ? undefined : banks.selectedBank}
inputProps={{
classes: { icon: classes.select_icon },
'aria-label': "Select preset"
}}
>
{
banks.entries.map((entry) => {
return (
<MenuItem key={entry.instanceId} value={entry.instanceId} >
{entry.name}
</MenuItem>
);
})
}
</Select>
{/** spacer */}
<IconButtonEx
tooltip="Next bank"
aria-label="next-bank"
onClick={() => { this.handleNextBank(); }}
size="medium"
color="inherit"
style={{ visibility: "hidden" }}
>
<ArrowForwardIosIcon style={{ opacity: 0.75 }} fontSize="large" />
</IconButtonEx>
</div>
{/********* PRESETS *******************/} {/********* PRESETS *******************/}
<div style={{ <div style={{
flex: "2 2 auto", display: "flex", flexFlow: "row nowrap", alignItems: "center", flex: "2 2 auto", display: "flex", flexFlow: "row nowrap", alignItems: "center", marginLeft: 24
}}> }}>
<IconButtonEx tooltip="Previous preset" <IconButtonEx tooltip="Previous preset"
@@ -373,149 +338,188 @@ export const PerformanceView =
onClick={() => { this.model.saveCurrentPreset(); }} onClick={() => { this.model.saveCurrentPreset(); }}
size="medium" size="medium"
color="inherit" color="inherit"
style={{ flexShrink: 0, visibility: this.state.presetModified ? "visible" : "hidden" }} style={{ flexShrink: 0, visibility: this.state.presetModified ? "visible" : "hidden", marginRight: 16 }}
> >
<SaveIconOutline style={{ opacity: 0.75 }} color="inherit" fontSize={appBarIconSize} /> <SaveIconOutline style={{ opacity: 0.75 }} color="inherit" fontSize={appBarIconSize} />
</IconButtonEx> </IconButtonEx>
</div> </div>
{/********* BANKS *******************/}
<div style={{
flex: "1 1 auto", display: "flex", flexFlow: "row nowrap", maxWidth: 500, marginRight: 16
}}>
<Select variant="standard"
className={classes.select}
renderValue={(selected) => {
let entry = banks.entries.find(e => e.instanceId === selected);
return <div style={{
display: "flex", flexFlow: "row nowrap", gap: 4,
alignItems: "center", justifyContent: "stretch",
}}>
<BankIcon className={classes.listIcon} style={{ flex: "0 0 auto", width: 20, height: 20 }} />
<Typography noWrap style={{ flex: "1 1 auto", textAlign: "left" }}
variant="body2"
>
{entry ? entry.name : "-"}
</Typography>
</div>;
}}
style={{
flex: "1 1 1px", width: "100%", position: "relative", top: 0, color: "#FFFFFF",
fontSize: "1.0rem",
}} disabled={false}
displayEmpty
onClose={(e) => this.handleBankSelectClose(e)}
value={banks.selectedBank === 0 ? undefined : banks.selectedBank}
inputProps={{
classes: { icon: classes.select_icon },
'aria-label': "Select preset"
}}
>
{
banks.entries.map((entry) => {
return (
<MenuItem key={entry.instanceId} value={entry.instanceId} >
{entry.name}
</MenuItem>
);
})
}
</Select>
{/** spacer */}
</div>
</div> </div>
) : ( ) : (
<div style={{ <div style={{
display: "flex", flexFlow: "row nowrap", alignContent: "center", display: "grid",
paddingTop: 3, paddingBottom: 3, paddingRight: 8, paddingLeft: 8, gridTemplateColumns: "min-content min-content auto min-content min-content",
alignItems: "start", }}>
}}>
<IconButtonEx tooltip="Back" aria-label="menu" color="inherit" <IconButtonEx tooltip="Back" aria-label="menu" color="inherit"
onClick={() => { this.props.onClose(); }} onClick={() => { this.props.onClose(); }}
style={{ style={{
position: "relative", top: 3, position: "relative", top: 3,
flex: "0 0 auto" flex: "0 0 auto"
}} > }} >
<ArrowBackIcon fontSize={appBarIconSize} /> <ArrowBackIcon fontSize="medium" />
</IconButtonEx> </IconButtonEx>
<div style={{ <div/>
flex: "1 1 1px", display: "flex", {/********* BANKS *******************/}
flexFlow: wrapSelects ? "column nowrap" : "row nowrap", <Select variant="standard"
alignItems: wrapSelects ? "stretch" : undefined, className={classes.select}
justifyContent: wrapSelects ? undefined : "space-evenly", renderValue={(selected) => {
marginLeft: 8, let entry = banks.entries.find(e => e.instanceId === selected);
gap: 8 return <div style={{
display: "flex", flexFlow: "row nowrap", gap: 4,
alignItems: "center", justifyContent: "stretch",
}}>
<BankIcon className={classes.listIcon} style={{ flex: "0 0 auto", width: 20, height: 20 }} />
<Typography noWrap style={{ flex: "1 1 auto", textAlign: "left" }}
variant="body2"
>
{entry ? entry.name : "-"}
</Typography>
</div>;
}}
style={{
flex: "1 1 1px", width: "100%", position: "relative", top: 0, color: "#FFFFFF",
fontSize: "1.0rem",
}} disabled={false}
displayEmpty
onClose={(e) => this.handleBankSelectClose(e)}
value={banks.selectedBank === 0 ? undefined : banks.selectedBank}
inputProps={{
classes: { icon: classes.select_icon },
'aria-label': "Select preset"
}}
>
{
banks.entries.map((entry) => {
return (
<MenuItem key={entry.instanceId} value={entry.instanceId} >
{entry.name}
</MenuItem>
);
})
}
</Select>
}}> <div/>
{/********* BANKS *******************/}
<div style={{
flex: "1 1 auto", display: "flex", flexFlow: "row nowrap", maxWidth: 500, <div/>
}}>
<Select variant="standard" {/**** 2nd row ****/}
className={classes.select} <div/>
style={{ {/********* PRESETS *******************/}
flex: "1 1 1px", width: "100%", position: "relative", top: 0, color: "#FFFFFF",
fontSize: (this.state.largeAppBar ? "2.0rem" : undefined), <IconButtonEx tooltip="Previous preset"
}} disabled={false} aria-label="previous-preset"
displayEmpty onClick={() => { this.handlePreviousPreset(); }}
onClose={(e) => this.handleBankSelectClose(e)} color="inherit"
value={banks.selectedBank === 0 ? undefined : banks.selectedBank} style={{ borderTopRightRadius: "3px", borderBottomRightRadius: "3px", marginRight: 4 }}
inputProps={{ >
classes: { icon: classes.select_icon },
'aria-label': "Select preset" <ArrowBackIosIcon style={{ opacity: 0.75 }} fontSize={appBarIconSize} />
}} </IconButtonEx>
> <Select variant="standard"
{ className={classes.select}
banks.entries.map((entry) => { style={{
return ( flex: "1 1 1px", width: "100%", color: "#FFFFFF",
<MenuItem key={entry.instanceId} value={entry.instanceId} > fontSize: (this.state.largeAppBar ? "2.0rem" : undefined),
{entry.name} }} disabled={false}
</MenuItem> displayEmpty
); onClose={(e) => this.handlePresetSelectClose(e)}
}) value={presets.selectedInstanceId === 0 ? '' : presets.selectedInstanceId}
inputProps={{
classes: { icon: classes.select_icon },
'aria-label': "Select preset"
}
}
>
{
presets.presets.map((preset) => {
let name = preset.name;
if (this.state.presets.selectedInstanceId === preset.instanceId && this.state.presetModified) {
name += "*";
} }
</Select> return (
{/** spacer */} <MenuItem key={preset.instanceId} value={preset.instanceId} >
<IconButtonEx {name}
tooltip="Next bank" </MenuItem>
aria-label="next-bank" );
onClick={() => { this.handleNextBank(); }} })
size="medium" }
color="inherit" </Select>
style={{ visibility: "hidden" }}
>
<ArrowForwardIosIcon style={{ opacity: 0.75 }} fontSize={appBarIconSize} />
</IconButtonEx> <IconButtonEx tooltip="Next preset"
aria-label="next-preset"
onClick={() => { this.handleNextPreset(); }}
color="inherit"
style={{ borderTopLeftRadius: "3px", borderBottomLeftRadius: "3px", marginLeft: 4 }}
>
<ArrowForwardIosIcon style={{ opacity: 0.75 }} fontSize={appBarIconSize} />
</IconButtonEx>
<IconButtonEx tooltip="Save preset"
aria-label="save-preset"
onClick={() => { this.model.saveCurrentPreset(); }}
size="medium"
color="inherit"
style={{ flexShrink: 0, visibility: this.state.presetModified ? "visible" : "hidden" }}
>
<SaveIconOutline style={{ opacity: 0.75 }} color="inherit" fontSize={appBarIconSize} />
</IconButtonEx>
</div>
{/********* PRESETS *******************/}
<div style={{
flex: "2 2 auto", display: "flex", flexFlow: "row nowrap", maxWidth: 500,
}}>
<IconButtonEx tooltip="Previous preset"
aria-label="previous-preset"
onClick={() => { this.handlePreviousPreset(); }}
color="inherit"
style={{ borderTopRightRadius: "3px", borderBottomRightRadius: "3px", marginRight: 4 }}
>
<ArrowBackIosIcon style={{ opacity: 0.75 }} fontSize={appBarIconSize} />
</IconButtonEx>
<Select variant="standard"
className={classes.select}
style={{
flex: "1 1 1px", width: "100%", color: "#FFFFFF",
fontSize: (this.state.largeAppBar ? "2.0rem" : undefined),
}} disabled={false}
displayEmpty
onClose={(e) => this.handlePresetSelectClose(e)}
value={presets.selectedInstanceId === 0 ? '' : presets.selectedInstanceId}
inputProps={{
classes: { icon: classes.select_icon },
'aria-label': "Select preset"
}
}
>
{
presets.presets.map((preset) => {
let name = preset.name;
if (this.state.presets.selectedInstanceId === preset.instanceId && this.state.presetModified) {
name += "*";
}
return (
<MenuItem key={preset.instanceId} value={preset.instanceId} >
{name}
</MenuItem>
);
})
}
</Select>
<IconButtonEx tooltip="Next preset"
aria-label="next-preset"
onClick={() => { this.handleNextPreset(); }}
color="inherit"
style={{ borderTopLeftRadius: "3px", borderBottomLeftRadius: "3px", marginLeft: 4 }}
>
<ArrowForwardIosIcon style={{ opacity: 0.75 }} fontSize={appBarIconSize} />
</IconButtonEx>
<IconButtonEx tooltip="Save preset"
aria-label="save-preset"
onClick={() => { this.model.saveCurrentPreset(); }}
size="medium"
color="inherit"
style={{ flexShrink: 0, visibility: this.state.presetModified ? "visible" : "hidden" }}
>
<SaveIconOutline style={{ opacity: 0.75 }} color="inherit" fontSize={appBarIconSize} />
</IconButtonEx>
</div>
</div>
</div> </div>
)} )}
</AppBar > </div >
<div style={{ flex: "1 0 auto", display: "flex", marginTop: 16, marginBottom: 20 }}> <div style={{ flex: "1 0 auto", display: "flex", marginTop: 16, marginBottom: 20 }}>
<SnapshotPanel onEdit={(index) => { return this.handleOnEdit(index); }} /> <SnapshotPanel onEdit={(index) => { return this.handleOnEdit(index); }} />
</div> </div>
vite/src/pipedal/PluginControlView.tsx
+1
View File
@@ -477,6 +477,7 @@ const PluginControlView =
return (( return ((
<ToobFrequencyResponseView instanceId={this.props.instanceId} <ToobFrequencyResponseView instanceId={this.props.instanceId}
propertyName={frequencyPlot.patchProperty} propertyName={frequencyPlot.patchProperty}
frequencyPlot={frequencyPlot}
width={frequencyPlot.width} width={frequencyPlot.width}
/> />
)); ));
vite/src/pipedal/SnapshotButton.tsx
+4 -4
View File
@@ -75,15 +75,15 @@ export default class SnapshotButton extends ResizeResponsiveComponent<SnapshotBu
if (this.is2x3Layout(width,height)) { if (this.is2x3Layout(width,height)) {
uiScale = width / 400; uiScale = width / 400;
} else { } else {
uiScale = (width/3)/(400/2); uiScale = (width/3)/(400/2)*1.5;
} }
if (height < width) { if (height < width) {
// 1 at 400, 2 at 600 // 1 at 400, 2 at 600
let hUiScale = (height-340)/(400-340); let hUiScale = (height-200)/(400-200);
hUiScale += (height-400)/(460-400); hUiScale += 1;
uiScale = Math.min(hUiScale,uiScale); uiScale = Math.min(hUiScale,uiScale);
} }
if (uiScale < 1) uiScale = 1; if (uiScale < 1.3) uiScale = 1.3;
if (uiScale > 4) uiScale = 4; if (uiScale > 4) uiScale = 4;
this.setState({uiScale: uiScale}); this.setState({uiScale: uiScale});
} }
vite/src/pipedal/ToobFrequencyResponseView.tsx
+42 -21
View File
@@ -28,6 +28,7 @@ import { withStyles } from "tss-react/mui";
import { PiPedalModelFactory, PiPedalModel, State } from "./PiPedalModel"; import { PiPedalModelFactory, PiPedalModel, State } from "./PiPedalModel";
import Utility from './Utility'; import Utility from './Utility';
import SvgPathBuilder from './SvgPathBuilder'; import SvgPathBuilder from './SvgPathBuilder';
import { UiFrequencyPlot } from './Lv2Plugin';
const StandardItemSize = { width: 80, height: 110 }; const StandardItemSize = { width: 80, height: 110 };
@@ -50,6 +51,7 @@ interface ToobFrequencyResponseProps extends WithStyles<typeof styles> {
instanceId: number; instanceId: number;
propertyName?: string; propertyName?: string;
width?: number; width?: number;
frequencyPlot?: UiFrequencyPlot
} }
interface ToobFrequencyResponseState { interface ToobFrequencyResponseState {
@@ -57,6 +59,8 @@ interface ToobFrequencyResponseState {
maxDb: number; maxDb: number;
minF: number; minF: number;
maxF: number; maxF: number;
logX: boolean;
dbY: boolean;
path: string; path: string;
} }
@@ -74,10 +78,12 @@ const ToobFrequencyResponseView =
this.model = PiPedalModelFactory.getInstance(); this.model = PiPedalModelFactory.getInstance();
this.state = { this.state = {
path: "", path: "",
minDb: -30, minDb: this.props.frequencyPlot?.yBottom ?? -30,
maxDb: 5, maxDb: this.props.frequencyPlot?.yTop ?? 5,
minF: 30, minF: this.props.frequencyPlot?.xLeft ?? 30,
maxF: 20000 maxF: this.props.frequencyPlot?.xRight ?? 20000,
logX: this.props.frequencyPlot?.xLog ?? true,
dbY: this.props.frequencyPlot?.yDb ?? true
}; };
this.pathRef = React.createRef(); this.pathRef = React.createRef();
@@ -140,16 +146,22 @@ const ToobFrequencyResponseView =
} }
toY(value: number): number { toY(value: number): number {
value = Math.abs(value); if (this.state.dbY)
{
value = Math.abs(value);
var db; var db;
if (value < this.MIN_DB_AF) { if (value < this.MIN_DB_AF) {
db = -192.0; db = -192.0;
} else {
db = 20 * Math.log10(value);
}
var y = (db - this.dbMin) / (this.dbMax - this.dbMin) * (this.yMax - this.yMin) + this.yMin;
return y;
} else { } else {
db = 20 * Math.log10(value); var y = value-this.dbMin /(this.dbMax-this.dbMin)* (this.yMax - this.yMin) + this.yMin;
return y;
} }
var y = (db - this.dbMin) / (this.dbMax - this.dbMin) * (this.yMax - this.yMin) + this.yMin;
return y;
} }
onFrequencyResponseUpdated(data: number[]) { onFrequencyResponseUpdated(data: number[]) {
@@ -159,6 +171,7 @@ const ToobFrequencyResponseView =
let dbMin = data[2]; let dbMin = data[2];
let dbMax = data[3]; let dbMax = data[3];
let xMax = this.xMax(); let xMax = this.xMax();
let dbY = this.state.dbY;
let n = data.length-4; let n = data.length-4;
@@ -166,16 +179,22 @@ const ToobFrequencyResponseView =
return (xMax - this.xMin) * bin/n; return (xMax - this.xMin) * bin/n;
}; };
let toY_ = (value: number): number => { let toY_ = dbY?
(value: number): number => {
var db; var db;
if (value < this.MIN_DB_AF) { if (value < this.MIN_DB_AF) {
db = -192.0; db = -192.0;
} else { } else {
db = 20 * Math.log10(value); db = 20 * Math.log10(value);
}
var y = (db - dbMin) / (dbMax - dbMin) * (this.yMax - this.yMin) + this.yMin;
return y;
} }
var y = (db - dbMin) / (dbMax - dbMin) * (this.yMax - this.yMin) + this.yMin; :
return y; (value: number): number => {
var y = (value - dbMin) / (dbMax - dbMin) * (this.yMax - this.yMin) + this.yMin;
return y;
}; };
@@ -242,7 +261,7 @@ const ToobFrequencyResponseView =
} }
grid(): React.ReactNode[] { grid(): React.ReactNode[] {
let result: React.ReactNode[] = []; let result: React.ReactNode[] = [];
if (!this.state.dbY) return result;
let xMax = this.xMax(); let xMax = this.xMax();
for (var db = Math.ceil(this.dbMax / this.dbTickSpacing) * this.dbTickSpacing; db < this.dbMin; db += this.dbTickSpacing) { for (var db = Math.ceil(this.dbMax / this.dbTickSpacing) * this.dbTickSpacing; db < this.dbMin; db += this.dbTickSpacing) {
var y = (db - this.dbMin) / (this.dbMax - this.dbMin) * (this.yMax - this.yMin); var y = (db - this.dbMin) / (this.dbMax - this.dbMin) * (this.yMax - this.yMin);
@@ -277,6 +296,7 @@ const ToobFrequencyResponseView =
dbMin: number = 5; dbMin: number = 5;
dbMax: number = -35; dbMax: number = -35;
dbY: boolean = true;
private nextKey: number = 0; private nextKey: number = 0;
render() { render() {
@@ -284,6 +304,7 @@ const ToobFrequencyResponseView =
this.nextKey = 0; this.nextKey = 0;
this.dbMax = this.state.minDb; this.dbMax = this.state.minDb;
this.dbMin = this.state.maxDb; this.dbMin = this.state.maxDb;
this.dbY = this.state.dbY;
this.fMin = this.state.minF; this.fMin = this.state.minF;
this.fMax = this.state.maxF; this.fMax = this.state.maxF;