v1.0.18

- MIDI Program/Bank select. - MIDI next/previous program.
2023-01-13 20:59:43 -05:00
parent ee3e264df5
commit ff8ed6b733
31 changed files with 1647 additions and 580 deletions
@@ -31,6 +31,11 @@ export default class MidiBinding {
        this.switchControlType = input.switchControlType;
        return this;
    }
+    static systemBinding(symbol: string): MidiBinding {
+        let result = new MidiBinding();
+        result.symbol = symbol;
+        return result;
+    }
    static deserialize_array(input: any): MidiBinding[] {
        let result: MidiBinding[] = [];
        for (let i = 0; i < input.length; ++i)
@@ -257,7 +257,7 @@ const MidiBindingView =
                                        onChange={(e, extra) => this.handleLatchControlTypeChange(e, extra)}
                                        value={midiBinding.switchControlType}
                                    >
-                                        <MenuItem value={MidiBinding.LATCH_CONTROL_TYPE}>Latch</MenuItem>
+                                        <MenuItem value={MidiBinding.LATCH_CONTROL_TYPE}>Toggle</MenuItem>
                                        <MenuItem value={MidiBinding.MOMENTARY_CONTROL_TYPE}>Momentary</MenuItem>
                                    </Select>
                                </div>
@@ -339,6 +339,7 @@ export interface PiPedalModel {
    favorites: ObservableProperty<FavoritesList>;

    presets: ObservableProperty<PresetIndex>;
+    systemMidiBindings: ObservableProperty<MidiBinding[]>;


    zoomedUiControl: ObservableProperty<ZoomedControlInfo | undefined>;
@@ -409,6 +410,8 @@ export interface PiPedalModel {
    updatePluginPresets(uri: string, presets: PluginUiPresets): Promise<void>;
    duplicatePluginPreset(uri: string, instanceId: number): Promise<number>;

+    setSystemMidiBinding(instanceId: number, midiBinding: MidiBinding): void;
+
    shutdown(): Promise<void>;
    restart(): Promise<void>;

@@ -441,8 +444,8 @@ export interface PiPedalModel {

    zoomUiControl(sourceElement: HTMLElement, instanceId: number, uiControl: UiControl): void;

-    onPreviousZoomedControl() : void;
-    onNextZoomedControl() : void;
+    onPreviousZoomedControl(): void;
+    onNextZoomedControl(): void;
    clearZoomedControl(): void;

    setFavorite(pluginUrl: string, isFavorite: boolean): void;
@@ -495,7 +498,13 @@ class PiPedalModelImpl implements PiPedalModel {
        (
            new PresetIndex()
        );
-
+    systemMidiBindings: ObservableProperty<MidiBinding[]> = new ObservableProperty<MidiBinding[]>
+        (
+            [
+                MidiBinding.systemBinding("prevProgram"),
+                MidiBinding.systemBinding("nextProgram")
+            ]
+        );
    zoomedUiControl: ObservableProperty<ZoomedControlInfo | undefined> = new ObservableProperty<ZoomedControlInfo | undefined>(undefined);

    svgImgUrl(svgImage: string): string {
@@ -682,7 +691,10 @@ class PiPedalModelImpl implements PiPedalModel {
            if (header.replyTo) {
                this.webSocket?.reply(header.replyTo, "onVuUpdate", true);
            }
-
+        } else if (message === "onSystemMidiBindingsChanged")
+        {
+            let bindings = MidiBinding.deserialize_array(body);
+            this.systemMidiBindings.set(bindings);
        } else {
            throw new PiPedalStateError("Unrecognized message received from server: " + message);
        }
@@ -815,6 +827,12 @@ class PiPedalModelImpl implements PiPedalModel {
            .then((data) => {
                this.favorites.set(data);

+                return this.getWebSocket().request<MidiBinding[]>("getSystemMidiBindings");
+            })
+            .then((data)=> {
+                let bindings = MidiBinding.deserialize_array(data);
+                this.systemMidiBindings.set(bindings);
+
                this.setState(State.Ready);
            })
            .catch((what) => {
@@ -944,7 +962,7 @@ class PiPedalModelImpl implements PiPedalModel {
                    })
                    .then(data => {
                        this.showStatusMonitor.set(data);
-        
+
                        return this.getWebSocket().request<any>("getJackServerSettings");
                    })
                    .then(data => {
@@ -977,6 +995,12 @@ class PiPedalModelImpl implements PiPedalModel {
                    .then((data) => {
                        this.favorites.set(data);

+                        return this.getWebSocket().request<MidiBinding[]>("getSystemMidiBindings");
+                    })
+                    .then((data)=> {
+                        let bindings = MidiBinding.deserialize_array(data);
+                        this.systemMidiBindings.set(bindings);
+        
                        if (this.webSocket) {
                            // MUST not allow reconnect until at least one complete load has finished.
                            this.webSocket.canReconnect = true;
@@ -1215,7 +1239,7 @@ class PiPedalModelImpl implements PiPedalModel {
        }

    }
-    _setVst3PedalBoardControlValue(instanceId: number, key: string, value: number, state: string, notifyServer: boolean ): void {
+    _setVst3PedalBoardControlValue(instanceId: number, key: string, value: number, state: string, notifyServer: boolean): void {
        let pedalBoard = this.pedalBoard.get();
        if (pedalBoard === undefined) throw new PiPedalStateError("Pedalboard not ready.");
        let newPedalBoard = pedalBoard.clone();
@@ -1251,7 +1275,7 @@ class PiPedalModelImpl implements PiPedalModel {
        let newPedalBoard = pedalBoard.clone();

        let item = newPedalBoard.getItem(instanceId);
-    
+
        let changed = value !== item.isEnabled;
        if (changed) {
            item.isEnabled = value;
@@ -1837,8 +1861,7 @@ class PiPedalModelImpl implements PiPedalModel {
            });
    }

-    updateVst3State(pedalBoard: PedalBoard)
-    {
+    updateVst3State(pedalBoard: PedalBoard) {
        // let it = pedalBoard.itemsGenerator();
        // while (true) {
        //     let v = it.next();
@@ -1862,6 +1885,23 @@ class PiPedalModelImpl implements PiPedalModel {

        }
    }
+    setSystemMidiBinding(instanceId: number, midiBinding: MidiBinding): void {
+        let currentBindings = this.systemMidiBindings.get();
+
+        let result: MidiBinding[] = [];
+
+        for (var binding of currentBindings)
+        {
+            if (binding.symbol === midiBinding.symbol)
+            {
+                result.push(midiBinding);
+            } else {
+                result.push(binding);
+            }
+        }
+        this.systemMidiBindings.set(result);
+        this.webSocket?.send("setSystemMidiBindings",result);
+    }
    midiListeners: MidiEventListener[] = [];
    atomOutputListeners: AtomOutputListener[] = [];

@@ -1918,8 +1958,7 @@ class PiPedalModelImpl implements PiPedalModel {
                break;
            }
        }
-        if (!found)
-        {
+        if (!found) {
            console.log('cancelListenForMidiEvent: event not found.');
        }
        this.webSocket?.send("cancelListenForMidiEvent", listenHandle._handle);
@@ -2101,7 +2140,7 @@ class PiPedalModelImpl implements PiPedalModel {
            wifiDirectConfigSettings = wifiDirectConfigSettings.clone();

            if ((!oldSettings.enable) && (!wifiDirectConfigSettings.enable)
-            && (oldSettings.hotspotName === wifiDirectConfigSettings.hotspotName)
+                && (oldSettings.hotspotName === wifiDirectConfigSettings.hotspotName)
            ) {
                // no effective change.
                resolve();
@@ -2183,19 +2222,14 @@ class PiPedalModelImpl implements PiPedalModel {
    }
    zoomUiControl(sourceElement: HTMLElement, instanceId: number, uiControl: UiControl): void {
        let name = uiControl.name;
-        if (uiControl.port_group !== "")
-        {
+        if (uiControl.port_group !== "") {
            let pedalboard = this.pedalBoard.get();
-            if (pedalboard)
-            {
+            if (pedalboard) {
                let plugin = pedalboard.getItem(instanceId);
                let uiPlugin = this.getUiPlugin(plugin.uri);
-                if (uiPlugin)
-                {
-                    for (let i = 0; i < uiPlugin.port_groups.length; ++i)
-                    {
-                        if (uiPlugin.port_groups[i].symbol === uiControl.port_group)
-                        {
+                if (uiPlugin) {
+                    for (let i = 0; i < uiPlugin.port_groups.length; ++i) {
+                        if (uiPlugin.port_groups[i].symbol === uiControl.port_group) {
                            name = uiPlugin.port_groups[i].name + " / " + name;
                            break;
                        }
@@ -2205,8 +2239,7 @@ class PiPedalModelImpl implements PiPedalModel {
        }
        this.zoomedUiControl.set({ source: sourceElement, name: name, instanceId: instanceId, uiControl: uiControl });
    }
-    onPreviousZoomedControl() : void
-    {
+    onPreviousZoomedControl(): void {
        let currentUiControl = this.zoomedUiControl.get();
        if (!currentUiControl) return;

@@ -2222,8 +2255,7 @@ class PiPedalModelImpl implements PiPedalModel {

        let i = 0;
        let ix = -1;
-        for (i = 0; i < uiPlugin.controls.length; ++i)
-        {
+        for (i = 0; i < uiPlugin.controls.length; ++i) {
            if (uiPlugin.controls[i].symbol === currentSymbol) {
                ix = i;
                break;
@@ -2234,10 +2266,9 @@ class PiPedalModelImpl implements PiPedalModel {
        ++ix;
        if (ix >= uiPlugin.controls.length) return;

-        this.zoomUiControl(currentUiControl.source,currentUiControl.instanceId,uiPlugin.controls[ix]);
+        this.zoomUiControl(currentUiControl.source, currentUiControl.instanceId, uiPlugin.controls[ix]);
    }
-    onNextZoomedControl() : void
-    {
+    onNextZoomedControl(): void {
        let currentUiControl = this.zoomedUiControl.get();
        if (!currentUiControl) return;

@@ -2253,8 +2284,7 @@ class PiPedalModelImpl implements PiPedalModel {

        let i = 0;
        let ix = -1;
-        for (i = 0; i < uiPlugin.controls.length; ++i)
-        {
+        for (i = 0; i < uiPlugin.controls.length; ++i) {
            if (uiPlugin.controls[i].symbol === currentSymbol) {
                ix = i;
                break;
@@ -2264,8 +2294,8 @@ class PiPedalModelImpl implements PiPedalModel {

        --ix;
        if (ix < 0) return;
-        
-        this.zoomUiControl(currentUiControl.source,currentUiControl.instanceId,uiPlugin.controls[ix]);
+
+        this.zoomUiControl(currentUiControl.source, currentUiControl.instanceId, uiPlugin.controls[ix]);
    }

    clearZoomedControl(): void {
@@ -44,6 +44,7 @@ import WifiDirectConfigDialog from './WifiDirectConfigDialog';
 import DialogEx from './DialogEx'
 import GovernorSettings from './GovernorSettings';
 import { AlsaMidiDeviceInfo } from './AlsaMidiDeviceInfo';
+import SystemMidiBindingsDialog from './SystemMidiBindingsDialog';

 import Slide, { SlideProps } from '@mui/material/Slide';
 import { createStyles, Theme } from '@mui/material/styles';
@@ -84,6 +85,7 @@ interface SettingsDialogState {
    isAndroidHosted: boolean;
    showRestartOkDialog: boolean;
    showShutdownOkDialog: boolean;
+    showSystemMidiBindingsDialog: boolean;
 };


@@ -182,6 +184,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                restarting: false,
                showShutdownOkDialog: false,
                showRestartOkDialog: false,
+                showSystemMidiBindingsDialog: false,
                isAndroidHosted: this.model.isAndroidHosted()


@@ -376,6 +379,12 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                showMidiSelectDialog: true
            })
        }
+        handleMidiMessageSettings() {
+            this.setState({
+                showSystemMidiBindingsDialog: true
+            });
+
+        }
        handleJackServerSettings() {
            this.setState({
                showJackServerSettingsDialog: true,
@@ -634,6 +643,14 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                            <Typography className={classes.secondaryItem} display="block" variant="caption" color="textSecondary" noWrap>{this.midiSummary()}</Typography>
                                        </div>
                                    </ButtonBase>
+                                    <ButtonBase className={classes.setting} disabled={!isConfigValid} onClick={() => this.handleMidiMessageSettings()}  >
+                                        <SelectHoverBackground selected={false} showHover={true} />
+                                        <div style={{ width: "100%" }}>
+                                            <Typography className={classes.primaryItem} display="block" variant="body2" noWrap>System MIDI Bindings</Typography>
+                                            
+                                        </div>
+                                    </ButtonBase>
+
                                </div>
                            </div>
                            <Divider />
@@ -840,6 +857,10 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                        onOk={() => { this.setState({ showShutdownOkDialog: false }); this.handleShutdownOk(); }}
                        onClose={() => { this.setState({ showShutdownOkDialog: false }); }}
                    />
+                    <SystemMidiBindingsDialog
+                        open={this.state.showSystemMidiBindingsDialog}
+                        onClose={()=> { this.setState({showSystemMidiBindingsDialog: false});}}
+                        />
                </DialogEx >

            );
@@ -0,0 +1,218 @@
+/*
+ * MIT License
+ * 
+ * Copyright (c) 2022-2023 Robin E. R. Davies
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ * of the Software, and to permit persons to whom the Software is furnished to do
+ * so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+
+import { Component } from 'react';
+import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
+import { Theme } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import MidiBinding from './MidiBinding';
+import Utility from './Utility';
+import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
+import MicOutlinedIcon from '@mui/icons-material/MicOutlined';
+import IconButton from '@mui/material/IconButton';
+
+
+
+const styles = (theme: Theme) => createStyles({
+    controlDiv: { flex: "0 0 auto", marginRight: 12, verticalAlign: "center", height: 48, paddingTop: 8, paddingBottom: 8 },
+    controlDiv2: {
+        flex: "0 0 auto", marginRight: 12, verticalAlign: "center",
+        height: 48, paddingTop: 0, paddingBottom: 0, whiteSpace: "nowrap"
+    }
+});
+
+interface SystemMidiBindingViewProps extends WithStyles<typeof styles> {
+    instanceId: number;
+    listen: boolean;
+    midiBinding: MidiBinding;
+    onChange: (instanceId: number, newBinding: MidiBinding) => void;
+    onListen: (instanceId: number, key: string, listenForControl: boolean) => void;
+}
+
+
+interface SystemMidiBindingViewState {
+}
+
+
+
+
+const SystemMidiBindingView =
+    withStyles(styles, { withTheme: true })(
+        class extends Component<SystemMidiBindingViewProps, SystemMidiBindingViewState> {
+
+            model: PiPedalModel;
+
+            constructor(props: SystemMidiBindingViewProps) {
+                super(props);
+                this.model = PiPedalModelFactory.getInstance();
+                this.state = {
+                };
+            }
+
+            handleTypeChange(e: any, extra: any) {
+                let newValue = parseInt(e.target.value);
+                let newBinding = this.props.midiBinding.clone();
+                newBinding.bindingType = newValue;
+                this.props.onChange(this.props.instanceId, newBinding);
+            }
+            handleNoteChange(e: any, extra: any) {
+                let newValue = parseInt(e.target.value);
+                let newBinding = this.props.midiBinding.clone();
+                newBinding.note = newValue;
+                this.props.onChange(this.props.instanceId, newBinding);
+            }
+            handleControlChange(e: any, extra: any) {
+                let newValue = parseInt(e.target.value);
+                let newBinding = this.props.midiBinding.clone();
+                newBinding.control = newValue;
+                this.props.onChange(this.props.instanceId, newBinding);
+            }
+            handleLatchControlTypeChange(e: any, extra: any) {
+                let newValue = parseInt(e.target.value);
+                let newBinding = this.props.midiBinding.clone();
+                newBinding.switchControlType = newValue;
+                this.props.onChange(this.props.instanceId, newBinding);
+            }
+            handleLinearControlTypeChange(e: any, extra: any) {
+                let newValue = parseInt(e.target.value);
+                let newBinding = this.props.midiBinding.clone();
+                newBinding.linearControlType = newValue;
+                this.props.onChange(this.props.instanceId, newBinding);
+            }
+            handleMinChange(value: number): void {
+                let newBinding = this.props.midiBinding.clone();
+                newBinding.minValue = value;
+                this.props.onChange(this.props.instanceId, newBinding);
+            }
+            handleMaxChange(value: number): void {
+                let newBinding = this.props.midiBinding.clone();
+                newBinding.maxValue = value;
+                this.props.onChange(this.props.instanceId, newBinding);
+            }
+            handleScaleChange(value: number): void {
+                let newBinding = this.props.midiBinding.clone();
+                newBinding.rotaryScale = value;
+                this.props.onChange(this.props.instanceId, newBinding);
+            }
+
+
+            generateMidiSelects(): React.ReactNode[] {
+                let result: React.ReactNode[] = [];
+
+                for (let i = 0; i < 127; ++i) {
+                    result.push(
+                        <MenuItem value={i}>{Utility.midiNoteName(i)}</MenuItem>
+                    )
+                }
+
+                return result;
+            }
+            generateControlSelects(): React.ReactNode[] {
+
+                return Utility.validMidiControllers.map((control) => (
+                    <MenuItem key={control.value} value={control.value}>{control.displayName}</MenuItem>
+                )
+                );
+            }
+
+
+            render() {
+                let classes = this.props.classes;
+                let midiBinding = this.props.midiBinding;
+
+                return (
+                    <div style={{ display: "flex", flexDirection: "row", flexWrap: "wrap", justifyContent: "left", alignItems: "center", minHeight: 48 }}>
+                        <div className={classes.controlDiv} >
+                            <Select variant="standard"
+                                style={{ width: 80, }}
+                                onChange={(e, extra) => this.handleTypeChange(e, extra)}
+                                value={midiBinding.bindingType}
+                            >
+                                <MenuItem value={0}>None</MenuItem>
+                                <MenuItem value={1}>Note</MenuItem>
+                                <MenuItem value={2}>Control</MenuItem>
+                            </Select>
+                        </div>
+                        {
+                            (midiBinding.bindingType === MidiBinding.BINDING_TYPE_NOTE) &&
+                            (
+                                <div className={classes.controlDiv} >
+                                    <Select variant="standard"
+                                        style={{ width: 80, verticalAlign: 'center' }}
+                                        onChange={(e, extra) => this.handleNoteChange(e, extra)}
+                                        value={midiBinding.note}
+
+                                    >
+                                        {
+                                            this.generateMidiSelects()
+                                        }
+                                    </Select>
+                                </div>
+                            )
+                        }
+                        {
+                            (midiBinding.bindingType === MidiBinding.BINDING_TYPE_CONTROL) &&
+                            (
+                                <div className={classes.controlDiv} >
+
+                                    <Select variant="standard"
+                                        style={{ width: 80 }}
+                                        onChange={(e, extra) => this.handleControlChange(e, extra)}
+                                        value={midiBinding.control}
+                                        renderValue={(value) => { return "CC-" + value }}
+                                    >
+                                        {
+                                            this.generateControlSelects()
+                                        }
+                                    </Select>
+                                </div>
+                            )
+                        }
+                        <IconButton
+                            onClick={() => {
+                                if (this.props.listen) {
+                                    this.props.onListen(-2, "", false)
+                                } else {
+                                    this.props.onListen(this.props.instanceId, this.props.midiBinding.symbol, false)
+                                }
+                            }}
+                            size="large">
+                            {this.props.listen ? (
+                                <MicOutlinedIcon />
+                            ) : (
+                                <MicNoneOutlinedIcon />
+                            )}
+                        </IconButton>
+                    </div>
+                );
+
+            }
+        });
+
+export default SystemMidiBindingView;
@@ -0,0 +1,338 @@
+/*
+ * MIT License
+ * 
+ * Copyright (c) 2022-2023 Robin E. R. Davies
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ * of the Software, and to permit persons to whom the Software is furnished to do
+ * so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+
+import React, { SyntheticEvent } from 'react';
+import DialogEx from './DialogEx';
+import ResizeResponsiveComponent from './ResizeResponsiveComponent';
+import { PiPedalModel, PiPedalModelFactory, ListenHandle } from './PiPedalModel';
+import Typography from '@mui/material/Typography';
+import { Theme } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import IconButton from '@mui/material/IconButton';
+import MidiBinding from './MidiBinding';
+import SystemMidiBindingView from './SystemMidiBindingView';
+import Snackbar from '@mui/material/Snackbar';
+
+const styles = (theme: Theme) => createStyles({
+    dialogAppBar: {
+        position: 'relative',
+        top: 0, left: 0
+    },
+    dialogTitle: {
+        marginLeft: theme.spacing(2),
+        flex: "1 1 auto",
+    },
+    pluginTable: {
+        border: "collapse",
+        width: "100%",
+
+    },
+    pluginHead: {
+        borderTop: "1pt #DDD solid", paddingLeft: 22, paddingRight: 22
+    },
+    bindingTd: {
+        verticalAlign: "top",
+        paddingLeft: 12, paddingBottom: 8
+    },
+    nameTd: {
+        paddingLeft: 16,
+        verticalAlign: "top",
+        paddingTop: 12
+    },
+});
+
+
+export interface SystemMidiBindingDialogProps extends WithStyles<typeof styles> {
+    open: boolean,
+    onClose: () => void
+}
+
+class BindingEntry {
+    constructor(
+        displayName: string,
+        instanceId: number,
+        midiBinding: MidiBinding,
+    ) {
+        this.displayName = displayName;
+        this.instanceId = instanceId;
+        this.midiBinding = midiBinding;
+    }
+    displayName: string;
+    instanceId: number;
+    midiBinding: MidiBinding;
+}
+
+export interface SystemMidiBindingDialogState {
+    listenInstanceId: number;
+    listenSymbol: string;
+    listenSnackbarOpen: boolean;
+    systemMidiBindings: BindingEntry[];
+
+}
+
+export const SystemMidiBindingDialog =
+    withStyles(styles, { withTheme: true })(
+        class extends ResizeResponsiveComponent<SystemMidiBindingDialogProps, SystemMidiBindingDialogState> {
+
+            model: PiPedalModel;
+
+            constructor(props: SystemMidiBindingDialogProps) {
+                super(props);
+                this.model = PiPedalModelFactory.getInstance();
+                this.state = {
+                    listenInstanceId: -2,
+                    listenSymbol: "",
+                    listenSnackbarOpen: false,
+                    systemMidiBindings: this.createBindings()
+                };
+                this.handleClose = this.handleClose.bind(this);
+                this.onMidiBindingsChanged = this.onMidiBindingsChanged.bind(this);
+            }
+
+            createBindings(): BindingEntry[] {
+                let result: BindingEntry[] = [];
+                for (var item of this.model.systemMidiBindings.get())
+                {
+                    let displayName  = "";
+                    let instanceId = -1;
+
+                    if (item.symbol === "prevProgram")
+                    {
+                        displayName = "Previous Preset";
+                        instanceId = 1;
+                    } else if (item.symbol === "nextProgram")
+                    {
+                        displayName = "Next Preset";
+                        instanceId = 2;
+                    }
+                    if (instanceId !== -1)
+                    {
+                        result.push(new BindingEntry(displayName,instanceId,item));
+                    }
+                }
+                return result;
+            }
+            mounted: boolean = false;
+
+            hasHooks: boolean = false;
+
+            handleClose() {
+                this.cancelListenForControl();
+                this.props.onClose();
+            }
+
+            listenTimeoutHandle?: NodeJS.Timeout;
+
+            listenHandle?: ListenHandle;
+
+            cancelListenForControl() {
+                if (this.listenTimeoutHandle) {
+                    clearTimeout(this.listenTimeoutHandle);
+                    this.listenTimeoutHandle = undefined;
+                }
+                if (this.listenHandle)
+                {
+                    this.model.cancelListenForMidiEvent(this.listenHandle)
+                    this.listenHandle = undefined;
+                }
+
+                this.setState({ listenInstanceId: -2, listenSymbol: "" });
+
+            }
+
+            handleListenSucceeded(instanceId: number, symbol: string, isNote: boolean, noteOrControl: number)
+            {
+                this.cancelListenForControl();
+
+                for (var binding of this.state.systemMidiBindings)
+                {
+                    if (binding.instanceId === instanceId)
+                    {
+                        let newBinding = binding.midiBinding.clone();
+
+                        if (isNote) {
+                            newBinding.bindingType = MidiBinding.BINDING_TYPE_NOTE;
+                            newBinding.note = noteOrControl;
+                        } else {
+                            newBinding.bindingType = MidiBinding.BINDING_TYPE_CONTROL;
+                            newBinding.control = noteOrControl;
+                        }
+        
+                        this.model.setSystemMidiBinding(instanceId,newBinding);
+                        return;
+                    }
+                }
+            }
+
+
+            handleListenForControl(instanceId: number, symbol: string, listenForControl: boolean): void {
+                this.cancelListenForControl();
+                this.setState({ listenInstanceId: instanceId, listenSymbol: symbol, listenSnackbarOpen: true });
+                this.listenTimeoutHandle = setTimeout(() => {
+                    this.cancelListenForControl();
+                }, 8000);
+
+                this.listenHandle = this.model.listenForMidiEvent(listenForControl,
+                    (isNote: boolean, noteOrControl: number) => {
+                        this.handleListenSucceeded(instanceId,symbol,isNote, noteOrControl);
+                    });
+                
+
+
+            }
+
+            onWindowSizeChanged(width: number, height: number): void {
+            }
+
+            onMidiBindingsChanged() {
+                this.setState({systemMidiBindings: this.createBindings()});
+            }
+
+            componentDidMount() {
+                super.componentDidMount();
+                this.mounted = true;
+
+                this.model.systemMidiBindings.addOnChangedHandler(this.onMidiBindingsChanged);
+                this.onMidiBindingsChanged();
+            }
+            componentWillUnmount() {
+                super.componentWillUnmount();
+
+                this.mounted = false;
+                this.model.systemMidiBindings.removeOnChangedHandler(this.onMidiBindingsChanged);
+            }
+
+            componentDidUpdate() {
+            }
+            handleItemChanged(instanceId: number, newBinding: MidiBinding) {
+                this.model.setSystemMidiBinding(instanceId, newBinding);
+            }
+            generateTable(): React.ReactNode[] {
+                let classes = this.props.classes;
+                let result: React.ReactNode[] = [];
+
+                let items = this.state.systemMidiBindings;
+                
+                for (var item of items) {
+                    result.push(
+                        <tr key={item.instanceId}>
+                            <td className={classes.nameTd}>
+                                <Typography noWrap style={{ verticalAlign: "center", height: 48 }}>
+                                    {item.displayName}
+                                </Typography>
+                            </td>
+                            <td className={classes.bindingTd}>
+                                <SystemMidiBindingView instanceId={item.instanceId} midiBinding={item.midiBinding}
+                                    onListen={(instanceId: number, symbol: string, listenForControl: boolean) => {
+                                        if (instanceId === -2)
+                                        {
+                                            this.cancelListenForControl();
+                                        } else {
+                                            this.handleListenForControl(instanceId, symbol, listenForControl);
+                                        }
+                                    }}
+                                    listen={item.instanceId === this.state.listenInstanceId && this.state.listenSymbol === item.midiBinding.symbol}
+                                    onChange={(instanceId: number, newItem: MidiBinding) => this.handleItemChanged(instanceId, newItem)}
+                                />
+                            </td>
+                        </tr>
+                    );
+                }
+
+
+                return result;
+            }
+
+            supressDefault(e: SyntheticEvent) {
+                //e.preventDefault();
+                //e.stopPropagation();
+            }
+
+            render() {
+                let props = this.props;
+                let { open, classes } = props;
+                if (!open) {
+                    return (<div />);
+                }
+
+                return (
+                    <DialogEx tag="SystemMidiBindingsDialog" open={open} fullWidth onClose={this.handleClose} aria-labelledby="Rename-dialog-title" 
+                        fullScreen={true} 
+                        style={{userSelect: "none"}}
+                    >
+                            <div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
+                                <div style={{ flex: "0 0 auto" }}>
+                                    <AppBar className={classes.dialogAppBar} >
+                                        <Toolbar>
+                                            <IconButton
+                                                edge="start"
+                                                color="inherit"
+                                                onClick={this.handleClose}
+                                                aria-label="back"
+                                                size="large">
+                                                <ArrowBackIcon />
+                                            </IconButton>
+                                            <Typography variant="h6" className={classes.dialogTitle}>
+                                                System MIDI Bindings
+                                            </Typography>
+                                        </Toolbar>
+                                    </AppBar>
+                                </div>
+                                <div style={{ overflow: "auto", flex: "1 1 auto", width: "100%" }}>
+                                    <table className={classes.pluginTable} >
+                                        <colgroup>
+                                            <col style={{ width: "auto" }} />
+                                            <col style={{ width: "100%" }} />
+                                        </colgroup>
+
+                                        <tbody>
+                                            {this.generateTable()}
+
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                            <Snackbar
+                                anchorOrigin={{
+                                    vertical: 'bottom',
+                                    horizontal: 'left',
+                                }}
+                                open={this.state.listenSnackbarOpen}
+                                autoHideDuration={1500}
+                                onClose={() => this.setState({ listenSnackbarOpen: false })}
+                                message="Listening for MIDI input"
+                            />
+                    </DialogEx >
+                );
+            }
+        });
+
+
+export default SystemMidiBindingDialog;