Stable

react/CMakeLists.txt

@@ -122,18 +122,19 @@ add_custom_command(
     src/PluginIcon.tsx
     src/UploadFileDialog.tsx
                 
-    public/
-    public/css
     public/css/roboto.css
     public/logo192x.png
     public/robots.txt
-    public/img
     public/img/ic_drawer_2.png
     public/img/fx_constant.svg
+    public/img/ic_presets_white.svg
     public/img/cx_mono.svg
     public/img/cx_stereo.svg
     public/img/fx_distortion.svg
+    public/img/Pi-Logo-3.png
     public/img/fx_oscillator.svg
+    public/img/save_bank_as_white.svg
+    public/img/edit_banks_white.svg
     public/img/settings_black_24dp.svg
     public/img/fx_filter.svg
     public/img/delete_outline_black_24dp.svg
@@ -142,19 +143,16 @@ add_custom_command(
     public/img/old_delete_outline_black_24dp.svg
     public/img/ic_bank.svg
     public/img/fx_compressor.svg
-    public/img/file_download_black_24dp.svg
     public/img/fx_filter_hp.svg
     public/img/fx_plugin.svg
     public/img/fx_error.svg
     public/img/fx_gate.svg
     public/img/cc-by.png
-    public/img/ic_midi.svg
-    public/img/ic_pluginpreset.svg
     public/img/fx_split_a.svg
     public/img/fx_utility.svg
+    public/img/help_outline_white_24dp.svg
     public/img/ic_navigate_before.svg
     public/img/ic_drawer_2.svg
-    public/img/ic_pluginpreset2.svg
     public/img/fx_parametric_eq.svg
     public/img/fx_terminal.svg
     public/img/ic_presets.svg
@@ -170,7 +168,6 @@ add_custom_command(
     public/img/fx_mixer.svg
     public/img/fx_eq.svg
     public/img/fx_modulator.svg
-    public/img/file_upload_black_24dp.svg
     public/img/fx_pitch.svg
     public/img/ic_navigate_next.svg
     public/img/fx_phaser.svg
@@ -179,6 +176,7 @@ add_custom_command(
     public/img/save_bank_as.svg
     public/img/fx_lr.svg
     public/img/fx_instrument.svg
+    public/img/Pi-Logo-3.svg
     public/img/fx_reverb.svg
     public/img/fx_limiter.svg
     public/img/VST_Logo_Steinberg.png
@@ -191,11 +189,12 @@ add_custom_command(
     public/img/fx_split_b.svg
     public/img/fx_spatial.svg
     public/img/fx_converter.svg
+    public/img/settings_white_24dp.svg
+    public/img/drive_file_rename_outline_white_24dp.svg
     public/img/vst.svg
     public/img/vst.png
     public/sample_lv2_plugins.json
     public/serve.json
-    public/fonts
     public/fonts/Roboto-LightItalic.woff2
     public/fonts/Roboto-Light.woff2
     public/fonts/Roboto-BlackItalic.woff2
@@ -215,11 +214,54 @@ add_custom_command(
     public/logo512.png
     public/index.html
     public/manifest.json
-    public/var
     public/var/config.json
     public/var/current_pedalboard.json
     public/var/uiplugins.json
     public/var/plugin_classes.json
+    src/svg/fx_constant.svg
+    src/svg/fx_distortion.svg
+    src/svg/fx_oscillator.svg
+    src/svg/fx_filter.svg
+    src/svg/fx_function.svg
+    src/svg/fx_generator.svg
+    src/svg/fx_compressor.svg
+    src/svg/file_download_black_24dp.svg
+    src/svg/fx_filter_hp.svg
+    src/svg/fx_plugin.svg
+    src/svg/fx_error.svg
+    src/svg/fx_gate.svg
+    src/svg/ic_midi.svg
+    src/svg/ic_pluginpreset.svg
+    src/svg/fx_split_a.svg
+    src/svg/fx_utility.svg
+    src/svg/ic_pluginpreset2.svg
+    src/svg/fx_parametric_eq.svg
+    src/svg/fx_terminal.svg
+    src/svg/ic_presets.svg
+    src/svg/fx_flanger.svg
+    src/svg/fx_analyzer.svg
+    src/svg/fx_delay.svg
+    src/svg/fx_spectral.svg
+    src/svg/fx_chorus.svg
+    src/svg/fx_simulator.svg
+    src/svg/fx_mixer.svg
+    src/svg/fx_eq.svg
+    src/svg/fx_modulator.svg
+    src/svg/file_upload_black_24dp.svg
+    src/svg/fx_pitch.svg
+    src/svg/fx_phaser.svg
+    src/svg/fx_amplifier.svg
+    src/svg/fx_lr.svg
+    src/svg/fx_instrument.svg
+    src/svg/fx_reverb.svg
+    src/svg/fx_limiter.svg
+    src/svg/fx_empty.svg
+    src/svg/fx_dial.svg
+    src/svg/fx_flanger2.svg
+    src/svg/fx_split_b.svg
+    src/svg/fx_spatial.svg
+    src/svg/fx_converter.svg
+    src/svg/old_delete_outline_24dp.svg
         
 )
 

react/public/img/file_download_white_24dp.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>

react/public/img/file_upload_white_24dp.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M7,9l1.41,1.41L11,7.83V16h2V7.83l2.59,2.58L17,9l-5-5L7,9z"/></g></svg>

react/src/App.tsx

@@ -23,6 +23,16 @@ import { ThemeProvider, createTheme, StyledEngineProvider, Theme } from '@mui/ma
 import AppThemed from "./AppThemed";
 import isDarkMode from './DarkMode';
 
+declare module '@mui/material/styles' {
+    interface Theme {
+      mainBackground: string;
+    }
+    interface ThemeOptions {
+        mainBackground?: string;
+    }
+
+}
+
 
 
 
@@ -44,8 +54,9 @@ const theme = createTheme(
             },
             secondary: {
                 main: "#FF6060"
-            }
+            },
-        }
+        },
+        mainBackground: "#222"
     }
         :
         {
@@ -56,7 +67,10 @@ const theme = createTheme(
             secondary: {
                 main: "#FF6060"
             }
-        }
+
+        },
+        mainBackground: "#FFFFFF"
+
     }
 );
 

react/src/AppThemed.tsx

@@ -200,7 +200,7 @@ const appStyles = (theme: Theme) => createStyles({
     },
 
     heroContent: {
-        backgroundColor: isDarkMode()? "#222": "#FFFFFF",
+        backgroundColor: theme.mainBackground,
         position: "relative",
         height: "100%",
         width: "100%"

react/src/BankDialog.tsx

@@ -46,6 +46,8 @@ import MenuItem from '@mui/material/MenuItem';
 import DialogEx from './DialogEx';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
+import { ReactComponent as DownloadIcon} from './svg/file_download_black_24dp.svg';
+import { ReactComponent as UploadIcon} from './svg/file_upload_black_24dp.svg';
 
 interface BankDialogProps extends WithStyles<typeof styles> {
     show: boolean;
@@ -70,6 +72,10 @@ interface BankDialogState {
 
 
 const styles = (theme: Theme) => createStyles({
+    listIcon: {
+        width: 24, height: 24, 
+        opacity: 0.6, fill: theme.palette.text.primary 
+    },
     dialogAppBar: {
         position: 'relative',
         top: 0, left: 0
@@ -476,7 +482,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
                                                 >
                                                     <MenuItem onClick={() => { this.handleDownloadBank(); }} >
                                                         <ListItemIcon>
-                                                            <img src="img/file_download_black_24dp.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
+                                                            <DownloadIcon className="listIcon"
+                                                                />
                                                         </ListItemIcon>
                                                         <ListItemText>
                                                             Download bank
@@ -488,7 +495,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
 
 
                                                             <ListItemIcon>
-                                                                <img src="img/file_upload_black_24dp.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
+                                                            <UploadIcon className="listIcon"
+                                                                />
                                                             </ListItemIcon>
                                                             <ListItemText>
                                                                 Upload bank

react/src/DraggableGrid.tsx

@@ -21,6 +21,7 @@ import { Theme } from '@mui/material/styles';
 import createStyles from '@mui/styles/createStyles';
 import { Property } from "csstype";
 import { nullCast} from './Utility'
+import isDarkMode from './DarkMode';
 
 const SELECT_SCALE = 1.0;
 
@@ -714,7 +715,7 @@ const DraggableGrid =
                     this.savedIndex = gridElement.style.zIndex;
                     gridElement.style.zIndex = "3";
                     this.savedBackground = gridElement.style.background;
-                    gridElement.style.background = "#EEE";
+                    gridElement.style.background = isDarkMode()? "333": "#EEE";
                     gridElement.style.opacity = "0.8";
                 }
             }

react/src/GxTunerControl.tsx

@@ -24,6 +24,7 @@ import createStyles from '@mui/styles/createStyles';
 import withStyles from '@mui/styles/withStyles';
 import { MonitorPortHandle, PiPedalModel, State, PiPedalModelFactory } from "./PiPedalModel";
 import SvgPathBuilder from './SvgPathBuilder'
+import isDarkMode from './DarkMode';
 
 //const char* model[] = {"12-TET","19-TET","24-TET", "31-TET", "53-TET"};
 // set_adjustment(ui->widget[2]->adj,440.0, 440.0, 427.0, 453.0, 0.1, CL_CONTINUOS);
@@ -386,15 +387,19 @@ const GxTunerControl =
             }
 
             render() {
-
+                let textColor = isDarkMode() ? "#999": "#444";
                 return (<div ref={this.refRoot} style={{width: DIAL_WIDTH, height: DIAL_HEIGHT, fontSize: "2em", fontWeight: 700, position: "relative",
-                    boxShadow: "1px 5px 6px #888 inset",
+                    boxShadow: isDarkMode() ? 
+                        "5px 5px 6px rgba(0,0,0,0.8) inset":
+                        "1px 5px 6px #888 inset",
+                    background: isDarkMode()? "rgba(255,255,255,0.07)" : "",
+                
                      fontFamily: "arial,roboto,helvetica,sans"}}>
                          <div style={{position: "absolute", left: 0, bottom: 5, width: "50%",textAlign: "right"}}>
-                             <span style={{ marginRight: 20, color: "#444", textAlign: "right" }}>{this.state.pitchInfo.name}</span>
+                             <span style={{ marginRight: 20, color: textColor, textAlign: "right" }}>{this.state.pitchInfo.name}</span>
                          </div>
                          <div style={{position: "absolute", right: 0, bottom: 5, width: "50%",textAlign: "left"}}>
-                             <span style={{ marginLeft: 20, color: "#444", textAlign: "left" }}>{this.state.pitchInfo.fractionText}</span>
+                             <span style={{ marginLeft: 20, color: textColor, textAlign: "left" }}>{this.state.pitchInfo.fractionText}</span>
                          </div>
 
                     { this.renderDial(this.state.pitchInfo) }

react/src/JackHostStatus.tsx

@@ -22,7 +22,7 @@ import Typography from '@mui/material/Typography';
 import isDarkMode from './DarkMode';
 
 
-const RED_COLOR = "#C00";
+const RED_COLOR = isDarkMode()? "#F88":"#C00";
 const GREEN_COLOR = isDarkMode()? "rgba(255,255,255,0.7)": "#666";
 
 

react/src/PluginControl.tsx

@@ -72,7 +72,7 @@ const styles = (theme: Theme) => createStyles({
         right: 0,
         bottom: 4,
         textAlign: "center",
-        background: theme.palette.background.paper,
+        background: theme.mainBackground,
         color: theme.palette.text.secondary,
         // zIndex: -1,
     }

react/src/PluginControlView.tsx

@@ -39,7 +39,6 @@ import FilePropertyDialog from './FilePropertyDialog';
 import JsonAtom from './JsonAtom';
 import PluginOutputControl from './PluginOutputControl';
 import Units from './Units';
-import isDarkMode from './DarkMode';
 
 
 export const StandardItemSize = { width: 80, height: 110 };
@@ -79,7 +78,6 @@ let endPluginInfo: UiPlugin =
     makeIoPluginInfo("Output", Pedalboard.END_PEDALBOARD_ITEM_URI);
 
 
-const darkBackgroundColor = "#181818";
 
 const styles = (theme: Theme) => createStyles({
     frame: {
@@ -99,7 +97,7 @@ const styles = (theme: Theme) => createStyles({
         paddingRight: 4,
         paddingBottom: 24,
         left: 0,
-        background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default,
+        background: theme.mainBackground,
         zIndex: 3
 
     },
@@ -109,7 +107,7 @@ const styles = (theme: Theme) => createStyles({
         marginRight: 22,
         paddingLeft: 4,
         paddingBottom: 24,
-        background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default,
+        background: theme.mainBackground,
         zIndex: 3
 
     },
@@ -119,7 +117,7 @@ const styles = (theme: Theme) => createStyles({
         paddingRight: 22,
         paddingLeft: 12,
         paddingBottom: 24,
-        background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default,
+        background: theme.mainBackground,
         zIndex: 3
 
     },
@@ -191,7 +189,7 @@ const styles = (theme: Theme) => createStyles({
     portGroupTitle: {
         position: "absolute",
         top: -15,
-        background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default,
+        background: theme.mainBackground,
         textOverflow: "ellipsis",
         minWidth: 0,
         marginLeft: 20,

react/src/PluginInfoDialog.tsx

@@ -228,7 +228,7 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
                 style={{ display: (props.plugin_uri !== "") ? "inline-flex" : "none" }}
                 onClick={handleClickOpen}
                 size="large">
-                <InfoOutlinedIcon />
+                <InfoOutlinedIcon style={{opacity: 0.6}} />
             </IconButton>
             {open && (
                 <Dialog onClose={handleClose} open={open} fullWidth >

react/src/PluginPresetSelector.tsx

@@ -67,7 +67,7 @@ const styles = (theme: Theme) => createStyles({
         width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary
     },
     pluginMenuIcon: {
-        width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary, marginRight: 4
+        width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary,marginRight: 4
     }
 
 });

react/src/PluginPresetsDialog.tsx

@@ -45,6 +45,10 @@ import RenameDialog from './RenameDialog';
 import Slide, {SlideProps} from '@mui/material/Slide';
 import { createStyles, Theme } from '@mui/material/styles';
 import { WithStyles, withStyles} from '@mui/styles';
+import {ReactComponent as PluginPresetIcon} from "./svg/ic_pluginpreset2.svg";
+
+import { ReactComponent as DownloadIcon} from './svg/file_download_black_24dp.svg';
+import { ReactComponent as UploadIcon} from './svg/file_upload_black_24dp.svg';
 
 
 
@@ -74,6 +78,9 @@ interface PluginPresetsDialogState {
 
 
 const styles = (theme: Theme) => createStyles({
+    listIcon: {
+        width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary
+    },
     dialogAppBar: {
         position: 'relative',
         top: 0, left: 0
@@ -107,7 +114,8 @@ const styles = (theme: Theme) => createStyles({
 
     },
     itemIcon: {
-        width: 24, height: 24, margin: 12, opacity: 0.6
+        width: 24, height: 24, margin: 12, opacity: 0.6,
+        fill: theme.palette.text.primary
     },
     itemLabel: {
         flex: "1 1 1px",
@@ -260,7 +268,7 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })(
                         <SelectHoverBackground selected={presetEntry.instanceId === selectedItem} showHover={true} />
                         <div className={classes.itemFrame}>
                             <div className={classes.iconFrame}>
-                                <img src="img/ic_pluginpreset2.svg" className={classes.itemIcon} alt="" />
+                                <PluginPresetIcon className={classes.itemIcon}  />
                             </div>
                             <div className={classes.itemLabel}>
                                 <Typography noWrap> 
@@ -427,7 +435,7 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })(
                                                         disabled={this.props.presets.presets.length === 0}
                                                     >
                                                         <ListItemIcon>
-                                                            <img src="img/file_download_black_24dp.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
+                                                            <DownloadIcon className={classes.listIcon} />
                                                         </ListItemIcon>
                                                         <ListItemText>
                                                             Download presets
@@ -436,7 +444,7 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })(
                                                     </MenuItem>
                                                     <MenuItem onClick={() => { this.handleUploadPresets() }}>
                                                         <ListItemIcon>
-                                                            <img src="img/file_upload_black_24dp.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
+                                                            <UploadIcon className={classes.listIcon} />
                                                         </ListItemIcon>
                                                         <ListItemText>
                                                             Upload presets

react/src/PresetDialog.tsx

@@ -45,7 +45,8 @@ import RenameDialog from './RenameDialog';
 import Slide, {SlideProps} from '@mui/material/Slide';
 import { createStyles, Theme } from '@mui/material/styles';
 import { WithStyles, withStyles} from '@mui/styles';
-
+import { ReactComponent as DownloadIcon} from './svg/file_download_black_24dp.svg';
+import { ReactComponent as UploadIcon} from './svg/file_upload_black_24dp.svg';
 
 
 interface PresetDialogProps extends WithStyles<typeof styles> {
@@ -72,6 +73,9 @@ interface PresetDialogState {
 
 
 const styles = (theme: Theme) => createStyles({
+    listIcon: {
+         width: 24, height: 24, opacity: 0.6, fill: theme.palette.text.primary
+    },
     dialogAppBar: {
         position: 'relative',
         top: 0, left: 0
@@ -408,9 +412,7 @@ const PresetDialog = withStyles(styles, { withTheme: true })(
                                                 >
                                                     <MenuItem onClick={() => { this.handleDownloadPreset(); }} >
                                                         <ListItemIcon>
-                                                            <img src=
+                                                            <DownloadIcon className={classes.listIcon} />
-                                                                {isDarkMode()? "img/file_download_white_24dp.svg":"img/file_download_black_24dp.svg"}
-                                                                 style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
                                                         </ListItemIcon>
                                                         <ListItemText>
                                                             Download preset
@@ -419,8 +421,7 @@ const PresetDialog = withStyles(styles, { withTheme: true })(
                                                     </MenuItem>
                                                     <MenuItem onClick={() => { this.handleUploadPreset() }}>
                                                         <ListItemIcon>
-                                                            <img src={ isDarkMode()? "img/file_upload_white_24dp.svg": "img/file_upload_black_24dp.svg"}
+                                                            <UploadIcon className={classes.listIcon} />
-                                                             style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
                                                         </ListItemIcon>
                                                         <ListItemText>
                                                             Upload preset

react/src/SplitControlView.tsx

@@ -52,7 +52,7 @@ const styles = (theme: Theme) => createStyles({
         paddingLeft: 12,
         paddingRight: 12,
         left: 0,
-        background: "white",
+        background: theme.mainBackground,
         zIndex: 3
 
     },
@@ -61,7 +61,7 @@ const styles = (theme: Theme) => createStyles({
         right: 0,
         marginRight: 22,
         paddingLeft: 12,
-        background: "white",
+        background: theme.mainBackground,
         zIndex: 3
 
     },
@@ -70,7 +70,7 @@ const styles = (theme: Theme) => createStyles({
         right: 0,
         paddingRight: 22,
         paddingLeft: 12,
-        background: "white",
+        background: theme.mainBackground,
         zIndex: 3
 
     },

react/tmp.txt

@@ -0,0 +1,45 @@
+src/svg/
+src/svg/fx_constant.svg
+src/svg/fx_distortion.svg
+src/svg/fx_oscillator.svg
+src/svg/fx_filter.svg
+src/svg/fx_function.svg
+src/svg/fx_generator.svg
+src/svg/fx_compressor.svg
+src/svg/file_download_black_24dp.svg
+src/svg/fx_filter_hp.svg
+src/svg/fx_plugin.svg
+src/svg/fx_error.svg
+src/svg/fx_gate.svg
+src/svg/ic_midi.svg
+src/svg/ic_pluginpreset.svg
+src/svg/fx_split_a.svg
+src/svg/fx_utility.svg
+src/svg/ic_pluginpreset2.svg
+src/svg/fx_parametric_eq.svg
+src/svg/fx_terminal.svg
+src/svg/ic_presets.svg
+src/svg/fx_flanger.svg
+src/svg/fx_analyzer.svg
+src/svg/fx_delay.svg
+src/svg/fx_spectral.svg
+src/svg/fx_chorus.svg
+src/svg/fx_simulator.svg
+src/svg/fx_mixer.svg
+src/svg/fx_eq.svg
+src/svg/fx_modulator.svg
+src/svg/file_upload_black_24dp.svg
+src/svg/fx_pitch.svg
+src/svg/fx_phaser.svg
+src/svg/fx_amplifier.svg
+src/svg/fx_lr.svg
+src/svg/fx_instrument.svg
+src/svg/fx_reverb.svg
+src/svg/fx_limiter.svg
+src/svg/fx_empty.svg
+src/svg/fx_dial.svg
+src/svg/fx_flanger2.svg
+src/svg/fx_split_b.svg
+src/svg/fx_spatial.svg
+src/svg/fx_converter.svg
+src/svg/old_delete_outline_24dp.svg