Skip to content

Commit

Permalink
Improvements to UI controlsin prep for Recorder.
Browse files Browse the repository at this point in the history
  • Loading branch information
@rerdavies
rerdavies committed Dec 3, 2024
1 parent b26bce7 commit 2989309
Show file tree
Hide file tree
Showing 13 changed files with 358 additions and 85 deletions.
7 changes: 4 additions & 3 deletions .vscode/c_cpp_properties.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@
"includePath": [
"${default}",
"${workspaceFolder}",
"${workspaceFolder}/src",
"${workspaceFolder}/build/src/**",
"${workspaceFolder}/src/**",
"${workspaceFolder}/**",
"/usr/include/lilv-0",
"/usr/include/x86_64-linux-gnu",
"/usr/lib",
"~/src/vst3sdk"
"/usr/lib"
],
"compilerPath": "/usr/bin/gcc-12",
"cStandard": "c17",
Expand Down
30 changes: 23 additions & 7 deletions react/src/FilePropertyControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,17 +56,30 @@ const styles = (theme: Theme) => createStyles({
backgroundColor: theme.palette.secondary.main,
opacity: theme.palette.mode === 'light' ? 0.38 : 0.3
},
controlFrame: {
display: "flex", flexDirection: "column", alignItems: "start", justifyContent: "space-between", height: 116
},
displayValue: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 4,
textAlign: "center",
background: "white",
color: "#666",
background: theme.mainBackground,
color: theme.palette.text.secondary,
// zIndex: -1,
},
titleSection: {
flex: "0 0 auto", alignSelf:"stretch", marginBottom: 8, marginLeft: 8, marginRight: 0
},
midSection: {
flex: "1 1 1", display: "flex",flexFlow: "column nowrap",alignContent: "center",justifyContent: "center"
},
editSection: {
flex: "0 0 0", position: "relative", width: 60, height: 28,minHeight: 28
}

});


Expand Down Expand Up @@ -191,6 +204,7 @@ const FilePropertyControl =
render() {
//let classes = this.props.classes;
let fileProperty = this.props.fileProperty;
let classes = this.props.classes;

let value = "\u00A0";
if (this.state.hasValue)
Expand All @@ -206,9 +220,11 @@ const FilePropertyControl =
let item_width = 264;

return (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", width: item_width, margin: 8, paddingLeft: 8 }}>
<div className={classes.controlFrame}
style={{ width: item_width }}>
{/* TITLE SECTION */}
<div style={{ flex: "0 0 auto", width: "100%", marginBottom: 8, marginLeft: 0, marginRight: 0 }}>
<div className={classes.titleSection}
>
<Tooltip title={fileProperty.label} placement="top-start" arrow
enterDelay={1000} enterNextDelay={1000}
>
Expand All @@ -220,9 +236,9 @@ const FilePropertyControl =
</div>
{/* CONTROL SECTION */}

<div style={{ flex: "0 0 auto", width: "100%" }}>
<div className={classes.midSection} style={{ width: "100%", paddingLeft: 8 }}>

<ButtonBase style={{ width: "100%", borderRadius: "4px 4px 0px 0px", overflow: "hidden", marginTop: 8 }} onClick={() => { this.onFileClick() }} >
<ButtonBase style={{ width: "100%", borderRadius: "4px 4px 0px 0px", overflow: "hidden" }} onClick={() => { this.onFileClick() }} >
<div style={{ width: "100%", background:
isDarkMode()? "rgba(255,255,255,0.03)": "rgba(0,0,0,0.07)",
borderRadius: "4px 4px 0px 0px" }}>
Expand All @@ -238,7 +254,7 @@ const FilePropertyControl =
</div>

{/* LABEL/EDIT SECTION*/}
<div style={{ flex: "0 0 auto", position: "relative", width: 60 }}>
<div className={classes.editSection} >
</div>
</div >
);
Expand Down
78 changes: 67 additions & 11 deletions react/src/Lv2Plugin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,16 @@ interface Deserializable<T> {
deserialize(input: any): T;
}

const noteNames: string[] = [
"C","C#","D","Eb","E","F","F#","G","Ab","A","Bb","B","C"
];

function semitone12TETValue(value: number) : string {
let iValue = Math.round(value) % 12;
return noteNames[iValue];

}


export class Port implements Deserializable<Port> {
deserialize(input: any): Port {
Expand Down Expand Up @@ -445,7 +455,30 @@ export enum ControlType {
Tuner,
Vu,
DbVu,
OutputSelect
OutputText
}

const textUnits : Set<Units> = new Set<Units>([
Units.none,
Units.unknown,
Units.bar,
Units.beat,
Units.bpm,
Units.cent,
Units.cm,
Units.hz,
Units.khz,
Units.km,
Units.m,
Units.min,
Units.ms,
Units.s,
Units.semitone12TET
]);

function displayUnitAsText(unit: Units): boolean
{
return textUnits.has(unit);
}

export class UiControl implements Deserializable<UiControl> {
Expand All @@ -468,6 +501,7 @@ deserialize(input: any): UiControl {
this.scale_points = ScalePoint.deserialize_array(input.scale_points);
this.port_group = input.port_group;
this.units = input.units as Units;
this.pipedal_ledColor = input.pipedal_ledColor;

this.comment = input.comment ?? "";
this.is_bypass = input.is_bypass ? true : false;
Expand All @@ -489,10 +523,13 @@ deserialize(input: any): UiControl {
} else if (this.units === Units.db) {
this.controlType = ControlType.DbVu;
} else if (this.enumeration_property) {
this.controlType = ControlType.OutputSelect;
this.controlType = ControlType.OutputText;
} else if (displayUnitAsText(this.units))
{
this.controlType = ControlType.OutputText
} else {
this.controlType = ControlType.Vu;
}
}
}
if (this.isValidEnumeration()) {
this.controlType = ControlType.Select;
Expand Down Expand Up @@ -566,6 +603,7 @@ deserialize(input: any): UiControl {
is_program_controller: boolean = true;
custom_units: string = "";
connection_optional: boolean = false;
pipedal_ledColor: string = "";


// Return the value of the closest scale_point.
Expand Down Expand Up @@ -602,8 +640,8 @@ deserialize(input: any): UiControl {
isTrigger(): boolean {
return this.controlType === ControlType.Trigger;
}
isOutputSelect(): boolean {
return !this.is_input && this.controlType === ControlType.OutputSelect;
isOutputText(): boolean {
return !this.is_input && this.controlType === ControlType.OutputText;
}


Expand Down Expand Up @@ -666,6 +704,29 @@ deserialize(input: any): UiControl {
return scalePoint.label;
}
}

if (this.units === Units.s)
{
let iValue = Math.round(value);
if (iValue >= 60)
{
let minutes = Math.floor(iValue/60);
let seconds = iValue % 60;
if (seconds < 10)
{
return minutes + ":0" + seconds;

}
return minutes + ":" + seconds;
} else {
return this.formatShortValue(value);
}
}
if (this.units === Units.semitone12TET)
{
return semitone12TETValue(value);
}

let text = this.formatShortValue(value);

switch (this.units) {
Expand Down Expand Up @@ -705,13 +766,8 @@ deserialize(input: any): UiControl {
case Units.pc:
text += "%";
break;
case Units.s:
text += "s";
default:
break;
// Midinote: not handled.
// semitone12TET not handled.



}
return text;
Expand Down
34 changes: 29 additions & 5 deletions react/src/PluginControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,13 @@ const styles = (theme: Theme) => createStyles({
backgroundColor: theme.palette.primary.main,
opacity: theme.palette.mode === 'light' ? 0.38 : 0.3
},
controlFrame: {
display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", height: 116
},

titleSection: {
flex: "0 0 auto", alignSelf:"stretch", marginBottom: 8, marginLeft: 0, marginRight: 0
},
displayValue: {
position: "absolute",
top: 0,
Expand All @@ -78,7 +85,14 @@ const styles = (theme: Theme) => createStyles({
background: theme.mainBackground,
color: theme.palette.text.secondary,
// zIndex: -1,
},
midSection: {
flex: "1 1 1", display: "flex",flexFlow: "column nowrap",alignContent: "center",justifyContent: "center"
},
editSection: {
flex: "0 0 0", position: "relative", width: 60, height: 28,minHeight: 28
}

});


Expand Down Expand Up @@ -723,9 +737,16 @@ const PluginControl =


return (
<div ref={this.frameRef} style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", width: item_width, margin: 8 }}>
<div ref={this.frameRef}
className={this.props.classes.controlFrame}
style={{ width: item_width }}
>
{/* TITLE SECTION */}
<div style={{ flex: "0 0 auto", alignSelf:"stretch", marginBottom: 8, marginLeft: isSelect ? 16 : 0, marginRight: 0 }}>
<div className={this.props.classes.titleSection}
style={
{ alignSelf:"stretch", marginBottom: 8, marginLeft: isSelect ? 8 : 0, marginRight: 0

}}>
<ControlTooltip uiControl={control} >
<Typography variant="caption" display="block" noWrap style={{
width: "100%",
Expand All @@ -735,7 +756,8 @@ const PluginControl =
</div>
{/* CONTROL SECTION */}

<div style={{ flex: "0 0 auto" }}>
<div className={this.props.classes.midSection}>

{isTrigger ? (
<Button variant="contained" color="primary" size="small"
onMouseDown={
Expand All @@ -747,7 +769,9 @@ const PluginControl =
style={{
textTransform: "none",
background: (isDarkMode() ? "#6750A4" : undefined),
marginLeft: 8, marginRight: 8,minWidth:60
marginLeft: 8, marginRight: 8,minWidth:60,
marginTop: 0

}}

>
Expand All @@ -774,7 +798,7 @@ const PluginControl =
</div>

{/* LABEL/EDIT SECTION*/}
<div style={{ flex: "0 0 auto", position: "relative", width: 60 }}>
<div className={this.props.classes.editSection} >
{(!(isSelect || isOnOffSwitch || isTrigger)) &&
(
(isAbSwitch) ? (
Expand Down
Loading

0 comments on commit 2989309

Please sign in to comment.