From a485d78e6f1d22001d918ef8e8d7ea23075c03d3 Mon Sep 17 00:00:00 2001
From: aarbit <aarbit@gmail.com>
Date: Sun, 28 Jul 2024 22:56:23 -0500
Subject: [PATCH] Adds ability for user to select MIDI channel

---
 README.md   |  1 -
 src/App.tsx | 17 ++++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e654d4b..c0b0efc 100644
--- a/README.md
+++ b/README.md
@@ -4,5 +4,4 @@ A quick preset selector for the Oberheim Matrix 1000
 
 # TODO
 
-* Add support for channel selection
 * Save last configuration and patch selection in local browser cache
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index ce3486e..aade763 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ function App() {
   const [patchNumber, setPatchNumber] = useState(0)
   const [midiDeviceMap, setMidiDeviceMap] = useState<Map<string, Output>>(new Map())
   const [selectedMidiDevice, setSelectedMidiDevice] = useState<string>()
+  const [selectedMidiChannel, setSelectedMidiChannel] = useState<number>(1)
 
   function connect() {
     WebMidi.enable()
@@ -55,7 +56,7 @@ function App() {
   function sendPatchNumber() {
     if(selectedMidiDevice) {
       let outputDevice = midiDeviceMap.get(selectedMidiDevice)
-      let midiChannel = 2
+      let midiChannel = selectedMidiChannel
       if(outputDevice) {
         outputDevice.sendControlChange(1, 127, {channels: midiChannel})
         pause(50)
@@ -93,13 +94,27 @@ function App() {
     return options
   }
 
+  function midiChannelOptions() {
+    let channelList = makeList(16).map((num) => {
+      return <option value={num+1} key={'channelkey'+(num+1)}>{num+1}</option>
+    })
+    channelList.unshift(<option key={"channelnochoice"}>--</option>)
+    return channelList
+
+  }
+
   function handleMidiDeviceSelect(e: ChangeEvent<HTMLSelectElement>) {
     setSelectedMidiDevice(e.target.value)
   }
 
+  function handleMidiChannelSelect(e: ChangeEvent<HTMLSelectElement>) {
+    setSelectedMidiChannel(parseInt(e.target.value))
+  }
+
   return (
     <>
       <select onChange={handleMidiDeviceSelect}>{midiDeviceOptions()}</select>
+      <select onChange={handleMidiChannelSelect}>{midiChannelOptions()}</select>
       <div>
         PATCH:
       </div>