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

White toolbar, load optimizations.

Browse Source
This commit is contained in:
Robin Davies
2022-02-07 07:32:09 -05:00
parent d273f30a75
commit 01b6f801e9
28 changed files with 3996 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/src/App.tsx
+18 -17
View File
@@ -61,14 +61,15 @@ import RenameDialog from './RenameDialog';
import JackStatusView from './JackStatusView';
const theme = createMuiTheme({
palette: {
primary: {
main: "#324c6c"
},
secondary: {
main: "#FF6060"
}
// secondary: {
// main: "#00E676"
// }
}
});
@@ -315,10 +316,10 @@ const App = withStyles(appStyles)(class extends ResizeResponsiveComponent<AppPro
this.model_ = PiPedalModelFactory.getInstance();
this.model_.zoomedUiControl.addOnChangedHandler(
()=> {
() => {
this.setState({
zoomedControlOpen: this.model_.zoomedUiControl.get() !== undefined,
zoomedControlInfo: this.model_.zoomedUiControl.get()
zoomedControlOpen: this.model_.zoomedUiControl.get() !== undefined,
zoomedControlInfo: this.model_.zoomedUiControl.get()
});
}
);
@@ -634,10 +635,10 @@ const App = withStyles(appStyles)(class extends ResizeResponsiveComponent<AppPro
<CssBaseline />
{(!this.state.tinyToolBar) ?
(
<AppBar position="absolute">
<Toolbar variant="dense" >
<AppBar position="absolute" style={{background: "white"}}>
<Toolbar variant="dense" >
<IconButton edge="start"
color="inherit" aria-label="menu" onClick={() => { this.showDrawer() }}
aria-label="menu" onClick={() => { this.showDrawer() }}
>
<MenuButton />
</IconButton>
@@ -648,7 +649,7 @@ const App = withStyles(appStyles)(class extends ResizeResponsiveComponent<AppPro
<div style={{ flex: "2 2 30px" }} />
{this.state.canFullScreen &&
<IconButton
color="inherit" aria-label="menu" onClick={() => { this.toggleFullScreen(); }}>
aria-label="menu" onClick={() => { this.toggleFullScreen(); }}>
{this.state.isFullScreen ? (
<FullscreenExitIcon />
) : (
@@ -663,13 +664,13 @@ const App = withStyles(appStyles)(class extends ResizeResponsiveComponent<AppPro
) : (
<div className={classes.toolBarContent} >
<IconButton style={{ position: "absolute", left: 12, top: 8, zIndex: 2 }}
color="inherit" aria-label="menu" onClick={() => { this.showDrawer() }}
aria-label="menu" onClick={() => { this.showDrawer() }}
>
<MenuButton />
</IconButton>
{this.state.canFullScreen && (
<IconButton style={{ position: "absolute", right: 8, top: 8, zIndex: 2 }}
color="inherit" aria-label="menu" onClick={() => { this.toggleFullScreen(); }}>
aria-label="menu" onClick={() => { this.toggleFullScreen(); }}>
{this.state.isFullScreen ? (
<FullscreenExitIcon />
) : (
@@ -784,12 +785,12 @@ const App = withStyles(appStyles)(class extends ResizeResponsiveComponent<AppPro
}
/>
<ZoomedUiControl
<ZoomedUiControl
dialogOpen={this.state.zoomedControlOpen}
controlInfo={this.state.zoomedControlInfo}
onDialogClose={()=>{ this.setState({zoomedControlOpen: false});} }
onDialogClosed={()=>{ this.model_.zoomedUiControl.set(undefined); }
}
controlInfo={this.state.zoomedControlInfo}
onDialogClose={() => { this.setState({ zoomedControlOpen: false }); }}
onDialogClosed={() => { this.model_.zoomedUiControl.set(undefined); }
}
/>
<Dialog
open={this.state.alertDialogOpen}
react/src/PluginIcon.tsx
+4 -1
View File
@@ -61,9 +61,12 @@ export function SelectBaseIcon(plugin_type: PluginType): string {
return "fx_distortion.svg";
case PluginType.FlangerPlugin:
return "fx_flanger.svg";
case PluginType.ParaEQPlugin:
case PluginType.LowpassPlugin:
return "fx_filter.svg";
case PluginType.HighpassPlugin:
return "fx_filter_hp.svg";
case PluginType.ParaEQPlugin:
return "fx_parametric_eq.svg";
case PluginType.MultiEQPlugin:
case PluginType.EQPlugin:
return "fx_eq.svg";
react/src/PresetSelector.tsx
+6 -5
View File
@@ -57,7 +57,7 @@ interface PresetSelectorState {
};
const selectColor = "white";
const selectColor = "black";
const styles = (theme: Theme) => createStyles({
select: { // fu fu fu.Overrides for white selector on dark background.
@@ -279,12 +279,13 @@ const PresetSelector =
let presets = this.state.presets;
let classes = this.props.classes;
return (
<div style={{ marginLeft: 12, display: "flex", flexDirection: "row", justifyContent: "left", flexWrap: "nowrap", alignItems: "center", height: "100%", position: "relative" }}>
<div style={{ marginLeft: 12, display: "flex", flexDirection: "row",
justifyContent: "left", flexWrap: "nowrap", alignItems: "center", height: "100%", position: "relative" }}>
<div style={{ flex: "1 1 auto", minWidth: 60, maxWidth: 300, position: "relative", paddingRight: 12 }} >
{true ? (
<Select
className={classes.select}
style={{ width: "100%", position: "relative", top: 0, color: "white" }} disabled={!this.state.enabled}
style={{ width: "100%", position: "relative", top: 0}} disabled={!this.state.enabled}
onChange={(e, extra) => this.handleChange(e, extra)}
onClose={(e) => this.handleSelectClose(e)}
displayEmpty
@@ -328,13 +329,13 @@ const PresetSelector =
)}
</div>
<div style={{ flex: "0 0 auto" }}>
<IconButton color="inherit" style={{ flex: "0 0 auto", opacity: this.state.presets.presetChanged ? 1.0 : 0.0 }}
<IconButton style={{ flex: "0 0 auto", opacity: this.state.presets.presetChanged ? 1.0 : 0.0 }}
onClick={(e) => { this.handleSave(); }} >
<SaveIconOutline style={{ opacity: 0.75 }} />
</IconButton>
</div>
<div style={{ flex: "0 0 auto" }}>
<IconButton color="inherit" style={{ flex: "0 0 auto" }} onClick={(e) => this.handlePresetMenuClick(e)}>
<IconButton style={{ flex: "0 0 auto" }} onClick={(e) => this.handlePresetMenuClick(e)}>
<MoreVertIcon style={{ opacity: 0.75 }} />
</IconButton>
<Menu
react/src/TemporaryDrawer.tsx
+4 -2
View File
@@ -95,10 +95,12 @@ export const TemporaryDrawer = withStyles(drawerStyles)(
onClick={() => { this.fireClose(); }}
onKeyDown={() => { this.fireClose(); }}
>
<Toolbar className={classes.drawer_header} style={{backgroundImage: 'url("img/ic_drawer.svg")' }} >
<Toolbar className={classes.drawer_header}
style={{backgroundImage: 'url("img/ic_drawer_2.png")', border: "red solid", borderWidth: "0px 0px 3px 0px" }}
>
<IconButton style={{ marginLeft: -24 }}
>
<ArrowBackIcon />
<ArrowBackIcon style={{ fill: '#666' }} />
</IconButton>
</Toolbar>
{this.props.children}
react/src/ToobWaveShapeView.tsx
+39 -2
View File
@@ -36,7 +36,7 @@ const styles = (theme: Theme) => createStyles({
width: PLOT_WIDTH, height: PLOT_HEIGHT, background: "#444",
borderRadius: 6,
marginTop: 12, marginLeft: 8, marginRight: 8,
boxShadow: "1px 4px 8px #000 inset"
boxShadow: "1px 2px 4px #000 inset"
},
});
@@ -203,7 +203,7 @@ const ToobWaveShapeView =
}
toY(value: number): number {
let yMid = (this.yMin + this.yMax) / 2;
return yMid - yMid * value;
return yMid - (this.yMax-this.yMin)/2 * value;
}
toX(value: number): number {
let xMid = (this.xMin + this.xMax)/2;
@@ -358,6 +358,40 @@ const ToobWaveShapeView =
return result;
}
grid() : React.ReactNode[] {
let result : React.ReactNode[] = [];
let xMid = (this.xMin+this.xMax)/2;
let yMid = (this.yMin+this.yMax)/2;
let color = "#888";
let kx = 0;
result.push(
<line x1={this.xMin} y1={this.yMin} x2={this.xMax} y2={this.yMin} stroke={color} strokeWidth={0.5}
key={"grid"+ kx++}/>
);
result.push(
<line x1={this.xMin} y1={yMid} x2={this.xMax} y2={yMid} stroke={color} strokeWidth={0.5}
key={"grid"+ kx++}/>
);
result.push(
<line x1={this.xMin} y1={this.yMax} x2={this.xMax} y2={this.yMax} stroke={color} strokeWidth={0.5}
key={"grid"+ kx++}/>
);
result.push(
<line x1={this.yMin} y1={this.yMin} x2={this.yMin} y2={this.yMax} stroke={color} strokeWidth={0.5}
key={"grid"+ kx++}/>
);
result.push(
<line x1={xMid} y1={this.yMin} x2={xMid} y2={this.yMax} stroke={color} strokeWidth={0.5}
key={"grid"+ kx++}/>
);
result.push(
<line x1={this.xMax} y1={this.yMin} x2={this.xMax} y2={this.yMax} stroke={color} strokeWidth={0.5}
key={"grid"+ kx++}/>
);
return result;
}
peakColor(value: number): string {
if (value >= 1.0 || value <= -1.0) return this.redColor;
if (value >= 0.5 || value <= -0.5) return this.yellowColor;
@@ -384,6 +418,9 @@ const ToobWaveShapeView =
return (
<div className={classes.frame} >
<svg width={PLOT_WIDTH} height={PLOT_HEIGHT} viewBox={"0 0 " + PLOT_WIDTH + " " + PLOT_HEIGHT} >
{
this.grid()
}
{ this.horizontalVuMeter(this.props.vuMin,this.props.vuMax,
this.props.vuMinPeak,this.props.vuMaxPeak)
}