Plot from PiPedalUI
This commit is contained in:
Robin E. R. Davies
File diff suppressed because one or more lines are too long
@@ -1745,15 +1745,18 @@ void PiPedalModel::SendSetPatchProperty(
|
||||
{
|
||||
std::shared_ptr<Lv2PluginInfo> pluginInfo = GetPluginInfo(pedalboardItem->uri_);
|
||||
auto pipedalUi = pluginInfo->piPedalUI();
|
||||
auto fileProperty = pipedalUi->GetFileProperty(propertyUri);
|
||||
if (fileProperty)
|
||||
if (pipedalUi)
|
||||
{
|
||||
auto fileProperty = pipedalUi->GetFileProperty(propertyUri);
|
||||
if (fileProperty)
|
||||
{
|
||||
|
||||
json_variant abstractPath = pluginHost.AbstractPath(value);
|
||||
std::string atomString = abstractPath.to_string();
|
||||
pedalboardItem->pathProperties_[propertyUri] = atomString;
|
||||
json_variant abstractPath = pluginHost.AbstractPath(value);
|
||||
std::string atomString = abstractPath.to_string();
|
||||
pedalboardItem->pathProperties_[propertyUri] = atomString;
|
||||
}
|
||||
this->SetPresetChanged(clientId, true);
|
||||
}
|
||||
this->SetPresetChanged(clientId, true);
|
||||
}
|
||||
LV2_Atom *atomValue = atomConverter.ToAtom(value);
|
||||
|
||||
|
||||
+3
-1
@@ -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)
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,149 +338,188 @@ 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(); }}
|
||||
style={{
|
||||
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 *******************/}
|
||||
<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>
|
||||
|
||||
}}>
|
||||
{/********* BANKS *******************/}
|
||||
<div style={{
|
||||
flex: "1 1 auto", display: "flex", flexFlow: "row nowrap", maxWidth: 500,
|
||||
}}>
|
||||
<Select variant="standard"
|
||||
className={classes.select}
|
||||
style={{
|
||||
flex: "1 1 1px", width: "100%", position: "relative", top: 0, color: "#FFFFFF",
|
||||
fontSize: (this.state.largeAppBar ? "2.0rem" : undefined),
|
||||
}} 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>
|
||||
);
|
||||
})
|
||||
<div/>
|
||||
|
||||
|
||||
<div/>
|
||||
|
||||
{/**** 2nd row ****/}
|
||||
<div/>
|
||||
{/********* PRESETS *******************/}
|
||||
|
||||
<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 += "*";
|
||||
}
|
||||
</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} />
|
||||
return (
|
||||
<MenuItem key={preset.instanceId} value={preset.instanceId} >
|
||||
{name}
|
||||
</MenuItem>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
|
||||
</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>
|
||||
|
||||
)}
|
||||
</AppBar >
|
||||
</div >
|
||||
<div style={{ flex: "1 0 auto", display: "flex", marginTop: 16, marginBottom: 20 }}>
|
||||
<SnapshotPanel onEdit={(index) => { return this.handleOnEdit(index); }} />
|
||||
</div>
|
||||
|
||||
@@ -477,6 +477,7 @@ const PluginControlView =
|
||||
return ((
|
||||
<ToobFrequencyResponseView instanceId={this.props.instanceId}
|
||||
propertyName={frequencyPlot.patchProperty}
|
||||
frequencyPlot={frequencyPlot}
|
||||
width={frequencyPlot.width}
|
||||
/>
|
||||
));
|
||||
|
||||
@@ -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});
|
||||
}
|
||||
|
||||
@@ -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,16 +146,22 @@ const ToobFrequencyResponseView =
|
||||
|
||||
}
|
||||
toY(value: number): number {
|
||||
value = Math.abs(value);
|
||||
if (this.state.dbY)
|
||||
{
|
||||
value = Math.abs(value);
|
||||
|
||||
var db;
|
||||
if (value < this.MIN_DB_AF) {
|
||||
db = -192.0;
|
||||
var db;
|
||||
if (value < this.MIN_DB_AF) {
|
||||
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 {
|
||||
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[]) {
|
||||
@@ -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,16 +179,22 @@ const ToobFrequencyResponseView =
|
||||
return (xMax - this.xMin) * bin/n;
|
||||
|
||||
};
|
||||
let toY_ = (value: number): number => {
|
||||
|
||||
var db;
|
||||
if (value < this.MIN_DB_AF) {
|
||||
db = -192.0;
|
||||
} else {
|
||||
db = 20 * Math.log10(value);
|
||||
let toY_ = dbY?
|
||||
(value: number): number => {
|
||||
var db;
|
||||
if (value < this.MIN_DB_AF) {
|
||||
db = -192.0;
|
||||
} else {
|
||||
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[] {
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user