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

Vu Meter Display Optimization

Browse Source
This commit is contained in:
Robin E. R. Davies
2025-07-20 20:46:14 -04:00
parent 200719af58
commit d3b97ba724
5 changed files with 127 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+2 -1
View File
@@ -115,6 +115,7 @@
"Chowdhury", "Chowdhury",
"Chowdhury's", "Chowdhury's",
"discursus", "discursus",
"distro",
"distros", "distros",
"dpkg", "dpkg",
"flac", "flac",
@@ -162,7 +163,7 @@
"cSpell.ignoreWords": [ "cSpell.ignoreWords": [
"nammodel" "nammodel"
], ],
"cSpell.enabled": true, "cSpell.enabled": false,
// Disable all automatic completion suggestions - only show when Ctrl+Space is pressed // Disable all automatic completion suggestions - only show when Ctrl+Space is pressed
"editor.quickSuggestions": { "editor.quickSuggestions": {
todo.txt
+2 -10
View File
@@ -1,19 +1,12 @@
Crash-proofing: do not reload pedalboard if the previous run crashed before normal shutdown. Crash-proofing: do not reload pedalboard if the previous run crashed before normal shutdown.
Persist and reconnect IP addresses in client.
Zeroconv crash assert. /var/pipedal/audio_uploads/ReverbImpulseFiles/
Investigate if ((keyCode == KeyEvent.KEYCODE_BACK))
MOD ir uses some scheme to limit the minimum buffer size, which is not implemented in Pipedal. MOD ir uses some scheme to limit the minimum buffer size, which is not implemented in Pipedal.
wa
Vu Meters, move rendering to background images, in order to reduce layout overhead. Vu Meters, move rendering to background images, in order to reduce layout overhead.
check reload after change of LV2 plugins. check reload after change of LV2 plugins.
Remove FullScreenIME in PluginControlView.tsx
Exactly one underrun per seek in Toob Player Exactly one underrun per seek in Toob Player
@@ -21,6 +14,7 @@ check filetime conversion in gcc 12.2! (missing c++ 20 time conversion functions
AudioFiles.cpp fileTimeToInt64 AudioFiles.cpp fileTimeToInt64
json "skip" code doesn't work with complex objects (MidiChannelBinding specifically).
- pipewire aux in? - pipewire aux in?
@@ -40,5 +34,3 @@ pcm.pipedal_aux_in {
} }
[{\"message\":\"updateCurrentPedalboard\"},{\"clientId\":6,\"pedalboard\":{\"name\":\"Test\",\"input_volume_db\":0,\"output_volume_db\":0,\"items\":[{\"instanceId\":51,\"title\":\"\",\"isEnabled\":true,\"uri\":\"uri://two-play/pipedal/pedalboard#Empty\",\"pluginName\":\"\",\"controlValues\":[],\"midiBindings\":[],\"midiChannelBinding\":null,\"vstState\":\"\",\"stateUpdateCount\":0,\"lv2State\":[false,{}],\"lilvPresetUri\":\"\",\"pathProperties\":{}},{\"instanceId\":50,\"title\":\"\",\"isEnabled\":true,\"uri\":\"http://calf.sourceforge.net/plugins/Gate\",\"pluginName\":\"Calf Gate\",\"controlValues\":[{\"key\":\"bypass\",\"value\":0},{\"key\":\"level_in\",\"value\":1},{\"key\":\"meter_in\",\"value\":0},{\"key\":\"meter_out\",\"value\":0},{\"key\":\"clip_in\",\"value\":0},{\"key\":\"clip_out\",\"value\":0},{\"key\":\"range\",\"value\":0.0612500012},{\"key\":\"threshold\",\"value\":0.125},{\"key\":\"ratio\",\"value\":2},{\"key\":\"attack\",\"value\":20},{\"key\":\"release\",\"value\":250},{\"key\":\"makeup\",\"value\":1},{\"key\":\"knee\",\"value\":2.82842994},{\"key\":\"detection\",\"value\":0},{\"key\":\"stereo_link\",\"value\":0},{\"key\":\"gating\",\"value\":0.03125}],\"midiBindings\":[],\"midiChannelBinding\":{\"deviceSelection\":0,\"midiDevices\":[],\"channel\":-1,\"acceptProgramChanges\":true,\"acceptCommonMessages\":true},\"vstState\":\"\",\"stateUpdateCount\":0,\"lv2State\":[false,{}],\"lilvPresetUri\":\"\",\"pathProperties\":{}},{\"instanceId\":46,\"title\":\"\",\"isEnabled\":true,\"uri\":\"uri://two-play/pipedal/pedalboard#Empty\",\"pluginName\":\"\",\"controlValues\":[],\"midiBindings\":[],\"midiChannelBinding\":null,\"vstState\":\"\",\"stateUpdateCount\":0,\"lv2State\":[false,{}],\"lilvPresetUri\":\"\",\"pathProperties\":{}},{\"instanceId\":48,\"title\":\"\",\"isEnabled\":true,\"uri\":\"uri://two-play/pipedal/pedalboard#Empty\",\"pluginName\":\"\",\"controlValues\":[],\"midiBindings\":[],\"midiChannelBinding\":null,\"vstState\":\"\",\"stateUpdateCount\":0,\"lv2State\":[false,{}],\"lilvPresetUri\":\"\",\"pathProperties\":{}},{\"instanceId\":47,\"title\":\"\",\"isEnabled\":true,\"uri\":\"uri://two-play/pipedal/pedalboard#Empty\",\"pluginName\":\"\",\"controlValues\":[],\"midiBindings\":[],\"midiChannelBinding\":null,\"vstState\":\"\",\"stateUpdateCount\":1,\"lv2State\":[false,{}],\"lilvPresetUri\":\"\",\"pathProperties\":{\"http://two-play.com/plugins/toob-ml#modelFile\":\"{\\\"otype_\\\": \\\"Path\\\",\\\"value\\\": \\\"/usr/lib/lv2/ToobAmp.lv2/models/tones/MesaBoogieMk2b_Crunch.json\\\"}\"}},{\"instanceId\":31,\"title\":\"\",\"isEnabled\":true,\"uri\":\"http://two-play.com/plugins/toob-freeverb\",\"pluginName\":\"TooB Freeverb\",\"controlValues\":[{\"key\":\"dryWet\",\"value\":0.653543293},{\"key\":\"roomSize\",\"value\":0.625},{\"key\":\"damping\",\"value\":0.574999988}],\"midiBindings\":[{\"symbol\":\"dryWet\",\"bindingType\":2,\"note\":72,\"control\":23,\"minControlValue\":0,\"maxControlValue\":127,\"minValue\":0,\"maxValue\":1,\"rotaryScale\":1,\"linearControlType\":0,\"switchControlType\":0}],\"midiChannelBinding\":null,\"vstState\":\"\",\"stateUpdateCount\":0,\"lv2State\":[false,{}],\"lilvPresetUri\":\"\",\"pathProperties\":{}}],\"nextInstanceId\":51,\"snapshots\":[],\"selectedSnapshot\":-1}}]
vite/src/pipedal/MainPage.tsx
+5 -2
View File
@@ -255,8 +255,11 @@ export const MainPage =
// selectedItem = value.getFirstSelectableItem(); // selectedItem = value.getFirstSelectableItem();
// } // }
let selectedItem = value.selectedPlugin; let selectedItem = value.selectedPlugin;
if (selectedItem === -1 || !value.hasItem(selectedItem)) { if (selectedItem !== -2 && selectedItem !== -3) // start and end nodes.
selectedItem = value.getFirstSelectableItem(); {
if (selectedItem === -1 || !value.hasItem(selectedItem)) {
selectedItem = value.getFirstSelectableItem();
}
} }
this.setState({ this.setState({
pedalboard: value, pedalboard: value,
vite/src/pipedal/ModGuiHost.tsx
-1
View File
@@ -399,7 +399,6 @@ class CustomSelectPathControl implements ModGuiControl {
} }
let valueElement = this.getValueElement(); let valueElement = this.getValueElement();
if (valueElement) { if (valueElement) {
/// xxx: update the display value.
if (this.pathValue === null || this.pathValue === "") { if (this.pathValue === null || this.pathValue === "") {
valueElement.textContent = "No file selected"; valueElement.textContent = "No file selected";
return; return;
vite/src/pipedal/VuMeter.tsx
+118 -95
View File
@@ -95,7 +95,9 @@ class TelltaleState {
} }
const LEFT_X = BORDER_THICKNESS; const LEFT_X = BORDER_THICKNESS;
const RIGHT_X = BORDER_THICKNESS + + CHANNEL_WIDTH + BORDER_THICKNESS; const RIGHT_X = BORDER_THICKNESS + CHANNEL_WIDTH + BORDER_THICKNESS;
const TOP_Y = BORDER_THICKNESS;
const VU_BAR_HEIGHT = DISPLAY_HEIGHT-2*BORDER_THICKNESS;
const styles = (theme: Theme) => ({ const styles = (theme: Theme) => ({
frame: css({ frame: css({
@@ -119,15 +121,16 @@ const styles = (theme: Theme) => ({
overflow: "hidden", overflow: "hidden",
}), }),
monoTextFrame: css({ monoTextFrame: css({
display: "flex",flexFlow: "column nowrap", alignItems: "center", textAlign: "center" display: "flex",flexFlow: "column nowrap", alignItems: "center", textAlign: "center", overflow: "clip",
}), }),
stereoTextFrame: css({ stereoTextFrame: css({
display: "flex",flexFlow: "column nowrap", alignItems: "center", textAlign: "center" display: "flex",flexFlow: "column nowrap", alignItems: "center", textAlign: "center",overflow: "clip",
}), }),
vuTextFrame: css({ vuTextFrame: css({
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
display: "table-cell", display: "div",
position: "relative", position: "relative",
overflow: "clip",
marginTop: 4, marginTop: 4,
textAlign: "center", textAlign: "center",
width: 20, height: 16, width: 20, height: 16,
@@ -135,73 +138,60 @@ const styles = (theme: Theme) => ({
justifyContent: "center", justifyContent: "center",
alignItems: "center" alignItems: "center"
}), }),
redFrameL: css({ frameL: css({
position: "absolute", position: "absolute",
top: "100%", top: TOP_Y ,
left: LEFT_X, left: LEFT_X,
width: CHANNEL_WIDTH, width: CHANNEL_WIDTH,
height: DISPLAY_HEIGHT - 2, height: VU_BAR_HEIGHT,
background: "#F00" overflow: "clip"
}), }),
yellowFrameL: css({ frameR: css({
top: "100%", position: "absolute",
left: LEFT_X, overflow: "clip",
top: TOP_Y,
left: RIGHT_X,
width: CHANNEL_WIDTH, width: CHANNEL_WIDTH,
position: "absolute", height: VU_BAR_HEIGHT,
height: DISPLAY_HEIGHT - 2,
background: "#CC0"
}), }),
greenFrameL: css({ yellowBar: css({
top: "100%", top: 0,
left: LEFT_X, left: 0,
width: CHANNEL_WIDTH, width: CHANNEL_WIDTH,
height: VU_BAR_HEIGHT,
position: "absolute", position: "absolute",
height: DISPLAY_HEIGHT - 2, background: "#CC0",
background: "#0C2" transform: "translateY(" + VU_BAR_HEIGHT + "px)"
}), }),
indicatorL: css({ greenBar: css({
top: 0,
left: 0,
width: CHANNEL_WIDTH,
height: VU_BAR_HEIGHT,
position: "absolute", position: "absolute",
left: LEFT_X, background: "#0C2",
transform: "translateY(" + VU_BAR_HEIGHT + "px)"
}),
redBar: css({
top: 0,
left: 0,
width: CHANNEL_WIDTH,
height: VU_BAR_HEIGHT,
position: "absolute",
background: "#F00",
transform: "translateY(" + VU_BAR_HEIGHT + "px)"
}),
indicatorBar: css({
position: "absolute",
left: 0,
width: CHANNEL_WIDTH, width: CHANNEL_WIDTH,
height: TELLTALE_HEIGHT + "px", height: TELLTALE_HEIGHT + "px",
top: "100%", top: 0,
background: "#F00" background: "#F00",
transform: "translateY(" + VU_BAR_HEIGHT + "px)"
}), }),
redFrameR: css({
position: "absolute",
top: "100%",
left: RIGHT_X,
width: CHANNEL_WIDTH,
height: DISPLAY_HEIGHT - 2,
background: "#F00"
}),
yellowFrameR: css({
top: "100%",
left: RIGHT_X,
width: CHANNEL_WIDTH,
position: "absolute",
height: DISPLAY_HEIGHT - 2,
background: "#CC0"
}),
greenFrameR: css({
top: "100%",
left: RIGHT_X,
width: CHANNEL_WIDTH,
position: "absolute",
height: DISPLAY_HEIGHT - 2,
background: "#0C2"
}),
indicatorR: css({
position: "absolute",
left: RIGHT_X,
width: CHANNEL_WIDTH,
height: TELLTALE_HEIGHT + "px",
top: "100%",
background: "#F00"
})
}); });
@@ -261,10 +251,12 @@ export const VuMeter =
telltaleStateR: TelltaleState = new TelltaleState(); telltaleStateR: TelltaleState = new TelltaleState();
vuInfo?: VuUpdateInfo; vuInfo?: VuUpdateInfo;
requesttedStereoState: boolean = false; requestedStereoState: boolean = false;
private currentDisplayValue: string | null = null;
updateText(telltaleDb: number) updateText(telltaleDb: number)
{ {
if (this.textRef.current) { if (this.textRef.current) {
let displayValue: string; let displayValue: string;
if (telltaleDb <= MIN_DB) if (telltaleDb <= MIN_DB)
@@ -288,16 +280,39 @@ export const VuMeter =
} }
} }
} }
this.textRef.current.innerText = displayValue;
if (this.currentDisplayValue !== displayValue)
{
this.currentDisplayValue = displayValue;
this.textRef.current.innerText = displayValue;
}
} }
} }
private currentVuInfo: VuUpdateInfo | null = null;
private animationFrameHandle: number | null = null;
onVuChanged(vuInfo: VuUpdateInfo): void { onVuChanged(vuInfo: VuUpdateInfo): void {
this.currentVuInfo = vuInfo;
if (this.animationFrameHandle == null)
{
this.animationFrameHandle = window.requestAnimationFrame(() => {
this.animationFrameHandle = null;
this.animateVuUpdate();
});
}
}
private animateVuUpdate() : void
{
let value: number; let value: number;
let valueR: number; let valueR: number;
let vuInfo = this.currentVuInfo;
this.vuInfo = vuInfo; if (!vuInfo) {
return; // no vu info.
}
if (!this.divRef.current) { // unmounted?
return;
}
let isStereo: boolean; let isStereo: boolean;
@@ -312,34 +327,37 @@ export const VuMeter =
} }
if (this.state.isStereo !== isStereo) if (this.state.isStereo !== isStereo)
{ {
if (isStereo !== this.requesttedStereoState) // guard against overrunning the layout engine. if (isStereo !== this.requestedStereoState) // guard against overrunning the layout engine.
{ {
this.requesttedStereoState = isStereo; this.requestedStereoState = isStereo;
this.setState({ this.setState({
isStereo: isStereo isStereo: isStereo
}); });
return; // we can't procede without stereo layout. return; // we can't proceed without stereo layout.
} }
} }
let childNodes = this.divRef.current!.childNodes; let childNodes = this.divRef.current!.childNodes;
let leftFrameChildNodes = childNodes[0].childNodes;
let vuData: VuChannelData = { let vuData: VuChannelData = {
value: value, value: value,
redDiv: childNodes[0] as HTMLDivElement, redDiv: leftFrameChildNodes[0] as HTMLDivElement,
yellowDiv: childNodes[1] as HTMLDivElement, yellowDiv: leftFrameChildNodes[1] as HTMLDivElement,
greenDiv: childNodes[2] as HTMLDivElement, greenDiv: leftFrameChildNodes[2] as HTMLDivElement,
telltaleDiv: childNodes[3] as HTMLDivElement telltaleDiv: leftFrameChildNodes[3] as HTMLDivElement
}; };
this.updateChannel(vuData,this.telltaleStateL); this.updateChannel(vuData,this.telltaleStateL);
if (this.state.isStereo) { if (this.state.isStereo) {
let rightFrameChildren = childNodes[1].childNodes;
vuData = { vuData = {
value: valueR, value: valueR,
redDiv: childNodes[4] as HTMLDivElement, redDiv: rightFrameChildren[0] as HTMLDivElement,
yellowDiv: childNodes[5] as HTMLDivElement, yellowDiv: rightFrameChildren[1] as HTMLDivElement,
greenDiv: childNodes[6] as HTMLDivElement, greenDiv: rightFrameChildren[2] as HTMLDivElement,
telltaleDiv: childNodes[7] as HTMLDivElement telltaleDiv: rightFrameChildren[3] as HTMLDivElement
}; };
this.updateChannel(vuData, this.telltaleStateR); this.updateChannel(vuData, this.telltaleStateR);
} }
@@ -367,17 +385,17 @@ export const VuMeter =
let INVISIBLE_Y = INTERIOR_DISPLAY_HEIGHT + "px"; let INVISIBLE_Y = INTERIOR_DISPLAY_HEIGHT + "px";
if (y >= this.yYellow) { if (y >= this.yYellow) {
// green only. // green only.
vuData.greenDiv.style.top = y + "px"; vuData.greenDiv.style.transform = `translateY(${y}px)`;
vuData.yellowDiv.style.top = INVISIBLE_Y; vuData.yellowDiv.style.transform = `translateY(${INVISIBLE_Y})`;
vuData.redDiv.style.top = INVISIBLE_Y; vuData.redDiv.style.transform = `translateY(${INVISIBLE_Y})`;
} else { } else {
vuData.greenDiv.style.top = this.yYellow + "px"; vuData.greenDiv.style.transform = `translateY(${this.yYellow}px)`;
if (y >= this.yZero) { if (y >= this.yZero) {
vuData.yellowDiv.style.top = y + "px"; vuData.yellowDiv.style.transform = `translateY(${y}px)`;
vuData.redDiv.style.top = INVISIBLE_Y; vuData.redDiv.style.transform = `translateY(${INVISIBLE_Y})`;
} else { } else {
vuData.yellowDiv.style.top = this.yZero + "px"; vuData.yellowDiv.style.transform = `translateY(${this.yZero}px)`;
vuData.redDiv.style.top = y + "px"; vuData.redDiv.style.transform = `translateY(${y}px)`;
} }
} }
let dbTelltale = telltaleState.getTelltaleHoldValue(db); let dbTelltale = telltaleState.getTelltaleHoldValue(db);
@@ -399,7 +417,7 @@ export const VuMeter =
yTelltale = INTERIOR_DISPLAY_HEIGHT; yTelltale = INTERIOR_DISPLAY_HEIGHT;
} }
} }
vuData.telltaleDiv.style.top = yTelltale + "px"; vuData.telltaleDiv.style.transform = `translateY(${yTelltale}px)`;
} }
@@ -467,23 +485,28 @@ export const VuMeter =
if (!this.state.isStereo) { if (!this.state.isStereo) {
return (<div className={classes.frame} ref={this.divRef} return (<div className={classes.frame} ref={this.divRef}
> >
<div className={classes.redFrameL} /> <div className={classes.frameL}>
<div className={classes.yellowFrameL} /> <div className={classes.redBar} />
<div className={classes.greenFrameL} /> <div className={classes.yellowBar} />
<div className={classes.indicatorL} /> <div className={classes.greenBar} />
<div className={classes.indicatorBar} />
</div>
</div>); </div>);
} else { } else {
return (<div className={classes.frameStereo} ref={this.divRef} return (<div className={classes.frameStereo} ref={this.divRef}
> >
<div className={classes.redFrameL} /> <div className={classes.frameL}>
<div className={classes.yellowFrameL} /> <div className={classes.redBar} />
<div className={classes.greenFrameL} /> <div className={classes.yellowBar} />
<div className={classes.indicatorL} /> <div className={classes.greenBar} />
<div className={classes.indicatorBar} />
<div className={classes.redFrameR} /> </div>
<div className={classes.yellowFrameR} /> <div className={classes.frameR}>
<div className={classes.greenFrameR} /> <div className={classes.redBar} />
<div className={classes.indicatorR} /> <div className={classes.yellowBar} />
<div className={classes.greenBar} />
<div className={classes.indicatorBar} />
</div>
</div>); </div>);