Configure midi in/out with UI

[mickmister]

The UI should:

• Show all plugged in MIDI input devices
• Then allow the user to "add" one of the devices to the "configured" devices. The device is now considered "configured", even though we haven't actually configured anything useful yet
• Then this MIDI device is shown in the group of "configured" devices
• Next to each configured device is an indicator of "if that device is currently plugged in". We want the user to be aware that the program is aware of previously configured devices, even if they're not plugged in at the moment

To edit the configuration of a MIDI input, we need to have a UI to edit this type:

export type MidiInputConfig = {
    name: string;
    alias?: string;
    musicalKeyboard?: MusicalKeyboardConfig;
    sustainPedal?: MidiTriggerConfig;
    mainTrigger?: MidiTriggerConfig;
    controlButtons?: ControlButtonMap;
}

---

For the visual aspect of the feature, I think the bare minimum would be to have a UI that literally looks like this:

musicalKeyboard: {channel: 0}
mainTrigger: {channel: 1, note: 10}

You would click the word "musicalKeyboard" to:

• Prime the program to wait for the next noteon event, from the specific MIDI input device you're configuring
• Once the midi note is pressed, we use the received midi event and extract the channel from the event
• We then use the extracted channel to configure the "musicalKeyboard" structure
  • In the case of "mainTrigger" etc., you would extract both the channel and note from the midi event and use them to construct the MidiTriggerConfig

Then the user can click save to have the config saved to localStorage. Would be cool to show the raw JSON at the bottom of the screen in a <pre> tag, to make it portable and also show that its persisted structure.

---

For the ControlButtonMap, I think we can:

• Show a button that says "Assign Actions"
• Clicking this button shows a 4x2 grid of buttons like below
• Clicking one of the buttons would prime the program to intake the next midi note like usual
• And then assign the midi note to that action/control

A1  A2  A3  A4
B1  B2  B3  B4

We'd also want a way to "clear" a choice. Like if I accidentally assigned something to A1 and I actually don't want anything assigned to A1, I should be able to remove that assignment. I'm thinking we should disallow mapping a trigger to multiple actions for now. This will result in less room for human error.

[mickmister]

I created a gist containing the types for the config and an example config
https://gist.github.com/mickmister/197aa87f8e4331769dc917713dc26f7f

Here are the types from there as of posting:

export type MusicalKeyboardConfig = {
    channel: number;
}

export type MidiTriggerConfig = {
    channel: number;
    note: number;
}

export enum ControlButtonName {
    A1 = 'A1',
    A2 = 'A2',
    A3 = 'A3',
    A4 = 'A4',
    B1 = 'B1',
    B2 = 'B2',
    B3 = 'B3',
    B4 = 'B4',
}

export type ControlButtonMap = Partial<Record<ControlButtonName, MidiTriggerConfig>>;

export type MidiInputConfig = {
    name: string;
    alias?: string;
    musicalKeyboard?: MusicalKeyboardConfig;
    sustainPedal?: MidiTriggerConfig;
    mainTrigger?: MidiTriggerConfig;
    controlButtons?: ControlButtonMap;
}

export type MidiOutputConfig = {
    name: string;
    alias?: string;
    musicalKeyboard?: MusicalKeyboardConfig;
}

export type Config = {
    midi: {
        inputs: MidiInputConfig[];
        outputs: MidiOutputConfig[];
    };
}