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
+3
View File
@@ -1745,6 +1745,8 @@ void PiPedalModel::SendSetPatchProperty(
{
std::shared_ptr<Lv2PluginInfo> pluginInfo = GetPluginInfo(pedalboardItem->uri_);
auto pipedalUi = pluginInfo->piPedalUI();
if (pipedalUi)
{
auto fileProperty = pipedalUi->GetFileProperty(propertyUri);
if (fileProperty)
{
@@ -1755,6 +1757,7 @@ void PiPedalModel::SendSetPatchProperty(
}
this->SetPresetChanged(clientId, true);
}
}
LV2_Atom *atomValue = atomConverter.ToAtom(value);
std::function<void(RealtimePatchPropertyRequest *)> onRequestComplete{
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->yTop_ = GetFloat(pWorld,node,pHost->lilvUris->pipedalUI__yTop,5);
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);
}
@@ -727,6 +728,7 @@ JSON_MAP_REFERENCE(UiFrequencyPlot, portGroup)
JSON_MAP_REFERENCE(UiFrequencyPlot, xLeft)
JSON_MAP_REFERENCE(UiFrequencyPlot, xRight)
JSON_MAP_REFERENCE(UiFrequencyPlot, xLog)
JSON_MAP_REFERENCE(UiFrequencyPlot, yDb)
JSON_MAP_REFERENCE(UiFrequencyPlot, yTop)
JSON_MAP_REFERENCE(UiFrequencyPlot, yBottom)
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__xRight PIPEDAL_UI_PREFIX "xRight"
#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__yBottom PIPEDAL_UI_PREFIX "yBottom"
#define PIPEDAL_UI__width PIPEDAL_UI_PREFIX "width"
@@ -196,6 +197,7 @@ namespace pipedal
float yTop_ = 5;
float yBottom_ = -30;
bool xLog_ = true;
bool yDb_ = true;
float width_ = 60;
public:
@@ -213,6 +215,7 @@ namespace pipedal
float yTop() const { return yTop_; }
float yBottom() const { return yBottom_; }
float width() const { return width_; }
bool yDb() const { return yDb_; }
public:
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__yBottom = lilv_new_uri(pWorld, PIPEDAL_UI__yBottom);
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__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__xRight;
AutoLilvNode pipedalUI__xLog;
AutoLilvNode pipedalUI__yDb;
AutoLilvNode pipedalUI__yTop;
AutoLilvNode pipedalUI__yBottom;
AutoLilvNode pipedalUI__width;
vite/src/pipedal/Lv2Plugin.tsx
+2
View File
@@ -223,6 +223,7 @@ export class UiFrequencyPlot {
this.xLeft = input.xLeft;
this.xRight = input.xRight;
this.xLog = input.xLog;
this.yDb = input.yDb;
this.yTop = input.yTop;
this.yBottom = input.yBottom;
this.width = input.width;
@@ -242,6 +243,7 @@ export class UiFrequencyPlot {
xLeft: number = -1;
xRight: number = -1;
xLog: boolean = true;
yDb: boolean = true;
yTop: number = -1;
yBottom: number = -1;
width: number = -1;
vite/src/pipedal/PerformanceView.tsx
+86 -82
View File
@@ -19,6 +19,8 @@
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 WithStyles from './WithStyles';
import { createStyles } from './WithStyles';
@@ -48,6 +50,10 @@ import { css } from '@emotion/react';
const selectColor = isDarkMode() ? "#888" : "#FFFFFF";
const styles = (theme: Theme) => createStyles({
listIcon: css({
width: 24, height: 24,
opacity: 0.6, fill: theme.palette.text.primary
}),
frame: css({
position: "absolute", display: "flex", flexDirection: "column", flexWrap: "nowrap",
justifyContent: "flex-start", left: "0px", top: "0px", bottom: "0px", right: "0px", overflow: "hidden"
@@ -251,17 +257,18 @@ export const PerformanceView =
return (
<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={{
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 ? (
<div style={{
display: "flex", flexFlow: "row nowrap", alignContent: "center",
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"
@@ -273,51 +280,9 @@ export const PerformanceView =
<ArrowBackIcon fontSize="large" />
</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 *******************/}
<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"
@@ -373,17 +338,65 @@ export const PerformanceView =
onClick={() => { this.model.saveCurrentPreset(); }}
size="medium"
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} />
</IconButtonEx>
</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 style={{
display: "flex", flexFlow: "row nowrap", alignContent: "center",
paddingTop: 3, paddingBottom: 3, paddingRight: 8, paddingLeft: 8,
alignItems: "start",
display: "grid",
gridTemplateColumns: "min-content min-content auto min-content min-content",
}}>
<IconButtonEx tooltip="Back" aria-label="menu" color="inherit"
onClick={() => { this.props.onClose(); }}
@@ -391,27 +404,30 @@ export const PerformanceView =
position: "relative", top: 3,
flex: "0 0 auto"
}} >
<ArrowBackIcon fontSize={appBarIconSize} />
<ArrowBackIcon fontSize="medium" />
</IconButtonEx>
<div style={{
flex: "1 1 1px", display: "flex",
flexFlow: wrapSelects ? "column nowrap" : "row nowrap",
alignItems: wrapSelects ? "stretch" : undefined,
justifyContent: wrapSelects ? undefined : "space-evenly",
marginLeft: 8,
gap: 8
}}>
<div/>
{/********* BANKS *******************/}
<div style={{
flex: "1 1 auto", display: "flex", flexFlow: "row nowrap", maxWidth: 500,
}}>
<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: (this.state.largeAppBar ? "2.0rem" : undefined),
fontSize: "1.0rem",
}} disabled={false}
displayEmpty
onClose={(e) => this.handleBankSelectClose(e)}
@@ -431,33 +447,23 @@ export const PerformanceView =
})
}
</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={appBarIconSize} />
</IconButtonEx>
<div/>
<div/>
</div>
{/**** 2nd row ****/}
<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"
@@ -511,11 +517,9 @@ export const PerformanceView =
</IconButtonEx>
</div>
</div>
</div>
)}
</AppBar >
</div >
<div style={{ flex: "1 0 auto", display: "flex", marginTop: 16, marginBottom: 20 }}>
<SnapshotPanel onEdit={(index) => { return this.handleOnEdit(index); }} />
</div>
vite/src/pipedal/PluginControlView.tsx
+1
View File
@@ -477,6 +477,7 @@ const PluginControlView =
return ((
<ToobFrequencyResponseView instanceId={this.props.instanceId}
propertyName={frequencyPlot.patchProperty}
frequencyPlot={frequencyPlot}
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)) {
uiScale = width / 400;
} else {
uiScale = (width/3)/(400/2);
uiScale = (width/3)/(400/2)*1.5;
}
if (height < width) {
// 1 at 400, 2 at 600
let hUiScale = (height-340)/(400-340);
hUiScale += (height-400)/(460-400);
let hUiScale = (height-200)/(400-200);
hUiScale += 1;
uiScale = Math.min(hUiScale,uiScale);
}
if (uiScale < 1) uiScale = 1;
if (uiScale < 1.3) uiScale = 1.3;
if (uiScale > 4) uiScale = 4;
this.setState({uiScale: uiScale});
}
vite/src/pipedal/ToobFrequencyResponseView.tsx
+28 -7
View File
@@ -28,6 +28,7 @@ import { withStyles } from "tss-react/mui";
import { PiPedalModelFactory, PiPedalModel, State } from "./PiPedalModel";
import Utility from './Utility';
import SvgPathBuilder from './SvgPathBuilder';
import { UiFrequencyPlot } from './Lv2Plugin';
const StandardItemSize = { width: 80, height: 110 };
@@ -50,6 +51,7 @@ interface ToobFrequencyResponseProps extends WithStyles<typeof styles> {
instanceId: number;
propertyName?: string;
width?: number;
frequencyPlot?: UiFrequencyPlot
}
interface ToobFrequencyResponseState {
@@ -57,6 +59,8 @@ interface ToobFrequencyResponseState {
maxDb: number;
minF: number;
maxF: number;
logX: boolean;
dbY: boolean;
path: string;
}
@@ -74,10 +78,12 @@ const ToobFrequencyResponseView =
this.model = PiPedalModelFactory.getInstance();
this.state = {
path: "",
minDb: -30,
maxDb: 5,
minF: 30,
maxF: 20000
minDb: this.props.frequencyPlot?.yBottom ?? -30,
maxDb: this.props.frequencyPlot?.yTop ?? 5,
minF: this.props.frequencyPlot?.xLeft ?? 30,
maxF: this.props.frequencyPlot?.xRight ?? 20000,
logX: this.props.frequencyPlot?.xLog ?? true,
dbY: this.props.frequencyPlot?.yDb ?? true
};
this.pathRef = React.createRef();
@@ -140,6 +146,8 @@ const ToobFrequencyResponseView =
}
toY(value: number): number {
if (this.state.dbY)
{
value = Math.abs(value);
var db;
@@ -150,6 +158,10 @@ const ToobFrequencyResponseView =
}
var y = (db - this.dbMin) / (this.dbMax - this.dbMin) * (this.yMax - this.yMin) + this.yMin;
return y;
} else {
var y = value-this.dbMin /(this.dbMax-this.dbMin)* (this.yMax - this.yMin) + this.yMin;
return y;
}
}
onFrequencyResponseUpdated(data: number[]) {
@@ -159,6 +171,7 @@ const ToobFrequencyResponseView =
let dbMin = data[2];
let dbMax = data[3];
let xMax = this.xMax();
let dbY = this.state.dbY;
let n = data.length-4;
@@ -166,8 +179,8 @@ const ToobFrequencyResponseView =
return (xMax - this.xMin) * bin/n;
};
let toY_ = (value: number): number => {
let toY_ = dbY?
(value: number): number => {
var db;
if (value < this.MIN_DB_AF) {
db = -192.0;
@@ -176,6 +189,12 @@ const ToobFrequencyResponseView =
}
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[] {
let result: React.ReactNode[] = [];
if (!this.state.dbY) return result;
let xMax = this.xMax();
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);
@@ -277,6 +296,7 @@ const ToobFrequencyResponseView =
dbMin: number = 5;
dbMax: number = -35;
dbY: boolean = true;
private nextKey: number = 0;
render() {
@@ -284,6 +304,7 @@ const ToobFrequencyResponseView =
this.nextKey = 0;
this.dbMax = this.state.minDb;
this.dbMin = this.state.maxDb;
this.dbY = this.state.dbY;
this.fMin = this.state.minF;
this.fMax = this.state.maxF;