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/CMakeLists.txt
+3
View File
@@ -139,6 +139,7 @@ add_custom_command(
public/img/fx_dial.svg
public/img/drive_file_rename_outline_black_24dp.svg
public/img/fx_filter.svg
public/img/fx_filter_hp.svg
public/img/cx_mono.svg
public/img/fx_limiter.svg
public/img/fx_converter.svg
@@ -157,6 +158,8 @@ add_custom_command(
public/img/fx_amplifier.svg
public/img/fx_plugin.svg
public/img/ic_drawer.svg
public/img/ic_drawer_2.png
public/img/fx_terminal.svg
public/img/fx_spatial.svg
public/img/fx_pitch.svg
react/public/img/fx_filter_hp.svg
Executable
+19
View File
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1_1_" display="none">
<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" d="M-7,20.5c0,0,6.632,0,14.601,0
c7.815,0,10.993-10.467,13.093-10.467c3.335,0,5.958,26.467,36.474,26.467c10.001,0,24.833,0,24.833,0"/>
</g>
<g id="Combined">
<g>
<path d="M47.001,18V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v25.783c13.448-3.498,18.375-13.738,21.26-19.743
c1.594-3.316,2.646-5.507,5.047-5.507c2.028,0,3.219,1.724,4.727,3.906C33.945,14.208,36.564,18,40.4,18H47.001z"/>
<path d="M1.001,37.943V41c0,3.313,2.688,6,6,6h34c3.313,0,6-2.688,6-6V23H40.4c-6.459,0-10.229-5.458-12.48-8.719
c-0.129-0.187-0.27-0.389-0.412-0.593c-0.246,0.49-0.505,1.028-0.74,1.518C23.63,21.74,17.618,34.247,1.001,37.943z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

react/public/img/fx_parametric_eq.svg
Executable
+15
View File
@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="x">
</g>
<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M19.996,38.5
c0,1.381-1.119,2.5-2.5,2.5s-2.5-1.119-2.5-2.5V8.984c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5V38.5z M17.496,28.019
c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S18.877,28.019,17.496,28.019z M29.996,38.5
c0,1.381-1.119,2.5-2.5,2.5s-2.5-1.119-2.5-2.5V8.984c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5V38.5z M37.504,31.021
c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S38.885,31.021,37.504,31.021z M40.004,38.5
c0,1.381-1.119,2.5-2.5,2.5s-2.5-1.119-2.5-2.5V8.984c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5V38.5z M27.496,23.016
c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S28.877,23.016,27.496,23.016z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

react/public/img/ic_drawer_2.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

react/public/img/ic_drawer_2.svg
Executable
+47
View File
@@ -0,0 +1,47 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="249px" height="64px" viewBox="0 0 249 64" enable-background="new 0 0 249 64" xml:space="preserve">
<path fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" d="M204,35.183c0,7.907-6.41,14.317-14.317,14.317
H79.317C71.41,49.5,65,43.09,65,35.183v-0.365C65,26.91,71.41,20.5,79.317,20.5h110.365C197.59,20.5,204,26.91,204,34.817V35.183z"
/>
<circle fill="#BE1E2D" cx="80.767" cy="33.983" r="9.634"/>
<g>
<path d="M94.364,24.717h7.509c2.534,0,4.56,0.571,6.077,1.713c1.642,1.231,2.463,3.003,2.463,5.314
c0,2.409-0.866,4.327-2.597,5.755c-1.642,1.348-3.748,2.021-6.318,2.021H96.84v4.149h-2.476V24.717z M101.833,37.271
c1.821,0,3.257-0.455,4.31-1.365c1.098-0.945,1.646-2.279,1.646-4.002c0-1.65-0.616-2.909-1.847-3.774
c-1.106-0.776-2.592-1.165-4.457-1.165H96.84v10.307H101.833z"/>
<path d="M116.972,24.783c0,0.5-0.152,0.901-0.455,1.205c-0.303,0.303-0.705,0.455-1.205,0.455s-0.901-0.152-1.205-0.455
c-0.303-0.304-0.455-0.705-0.455-1.205c0-0.499,0.152-0.898,0.455-1.198c0.303-0.299,0.705-0.448,1.205-0.448
s0.901,0.149,1.205,0.448C116.82,23.885,116.972,24.284,116.972,24.783z M114.041,30.285h2.543V43.67h-2.543V30.285z"/>
<path d="M121.509,24.717h7.508c2.535,0,4.561,0.571,6.078,1.713c1.641,1.231,2.463,3.003,2.463,5.314
c0,2.409-0.865,4.327-2.598,5.755c-1.641,1.348-3.748,2.021-6.316,2.021h-4.659v4.149h-2.476V24.717z M128.979,37.271
c1.82,0,3.256-0.455,4.311-1.365c1.098-0.945,1.646-2.279,1.646-4.002c0-1.65-0.617-2.909-1.848-3.774
c-1.107-0.776-2.592-1.165-4.457-1.165h-4.646v10.307H128.979z"/>
<path d="M151.833,33.25c0.272,0.718,0.409,1.475,0.409,2.269s-0.09,1.727-0.269,2.797h-9.315c0.196,1.08,0.633,1.93,1.312,2.55
c0.678,0.621,1.638,0.931,2.878,0.931c1.659,0,3.181-0.303,4.564-0.91l0.428,1.914c-0.919,0.535-2.23,0.888-3.935,1.058
c-0.474,0.054-1.089,0.08-1.848,0.08s-1.553-0.151-2.383-0.455c-0.829-0.303-1.517-0.749-2.061-1.339
c-1.08-1.168-1.62-2.882-1.62-5.14c0-1.98,0.647-3.641,1.941-4.979c1.312-1.338,2.948-2.008,4.912-2.008
c1.615,0,2.904,0.482,3.868,1.446C151.188,31.936,151.562,32.531,151.833,33.25z M149.819,36.349l0.053-0.724
c0-1.633-0.611-2.717-1.833-3.252c-0.411-0.179-0.901-0.268-1.473-0.268s-1.096,0.111-1.573,0.334
c-0.477,0.224-0.89,0.527-1.237,0.91c-0.715,0.785-1.116,1.785-1.205,2.999H149.819z"/>
<path d="M165.722,42.398c-1.259,1.026-2.775,1.539-4.552,1.539c-1.918,0-3.467-0.634-4.645-1.9
c-1.151-1.231-1.727-2.829-1.727-4.792c0-2.133,0.839-3.891,2.517-5.273c1.598-1.303,3.542-1.955,5.836-1.955
c0.901,0,1.687,0.067,2.355,0.201v-7.442h2.544V43.67h-1.941L165.722,42.398z M165.507,32.479
c-0.937-0.214-1.798-0.321-2.583-0.321s-1.518,0.112-2.195,0.335c-0.678,0.224-1.268,0.545-1.767,0.964
c-1.08,0.91-1.62,2.119-1.62,3.627c0,1.321,0.349,2.423,1.044,3.307c0.741,0.937,1.728,1.405,2.959,1.405
c1.392,0,2.543-0.348,3.453-1.044c0.285-0.223,0.521-0.481,0.709-0.776V32.479z"/>
<path d="M181.716,41.957c-1.633,1.32-3.351,1.98-5.153,1.98c-1.258,0-2.315-0.33-3.172-0.99c-0.919-0.714-1.379-1.646-1.379-2.798
c0-2.373,1.579-3.957,4.738-4.752c1.276-0.321,2.807-0.499,4.592-0.535c-0.054-1.454-0.764-2.311-2.129-2.57
c-0.446-0.089-0.865-0.134-1.258-0.134s-0.741,0.019-1.044,0.054c-0.304,0.036-0.616,0.085-0.938,0.147
c-0.705,0.134-1.303,0.299-1.793,0.495l-0.71-1.9c1.249-0.625,2.758-0.938,4.524-0.938c2.757,0,4.573,0.88,5.447,2.638
c0.295,0.606,0.442,1.329,0.442,2.168v4.27c0,0.91,0.066,1.518,0.2,1.82c0.241,0.581,0.665,0.951,1.271,1.111l-0.374,1.646
C183.313,43.866,182.225,43.295,181.716,41.957z M176.904,37.492c-0.835,0.317-1.435,0.665-1.801,1.045
c-0.365,0.379-0.549,0.787-0.549,1.225s0.063,0.77,0.188,0.997s0.29,0.417,0.495,0.568c0.42,0.313,0.91,0.469,1.473,0.469
s1.068-0.061,1.52-0.181c0.45-0.12,0.867-0.278,1.251-0.476c0.75-0.374,1.37-0.838,1.861-1.392v-2.892
C179.218,36.964,177.738,37.176,176.904,37.492z"/>
<path d="M189.052,22.775h2.543v16.316c0,0.91,0.063,1.518,0.188,1.82c0.25,0.581,0.678,0.951,1.285,1.111l-0.375,1.646
c-1.383,0.179-2.369-0.188-2.958-1.098c-0.455-0.714-0.683-1.812-0.683-3.293V22.775z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

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)
}