From b40bdc256a2742ac182bc5aa58caee0cf0aa1c3a Mon Sep 17 00:00:00 2001
From: Tim Stirrat <tim.stirrat@gmail.com>
Date: Sun, 1 Sep 2024 20:28:34 +1000
Subject: [PATCH] Allow choosing from all the mGB built-in waves

---
 src/App.tsx                            |  31 +++++---
 src/components/Field.tsx               |  15 ++++
 src/components/SendSysex.tsx           |  86 ++++++++++----------
 src/components/SysexDownloadButton.tsx |  41 ++++++++++
 src/components/SysexPreview.tsx        |  55 +++----------
 src/components/WaveformEditor.tsx      |  36 ++++++---
 src/components/WaveformSelector.tsx    |  44 ++++++++++
 src/lib/globals.ts                     | 106 +++++++++++++++++++++++++
 src/lib/sysex.ts                       |  26 ++++--
 src/types.ts                           |   6 --
 10 files changed, 325 insertions(+), 121 deletions(-)
 create mode 100644 src/components/Field.tsx
 create mode 100644 src/components/SysexDownloadButton.tsx
 create mode 100644 src/components/WaveformSelector.tsx
 create mode 100644 src/lib/globals.ts

diff --git a/src/App.tsx b/src/App.tsx
index 93d12db..161d0ed 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,25 +1,34 @@
 import { useState } from "react";
 import { SendSysex } from "./components/SendSysex";
 import { WaveformEditor } from "./components/WaveformEditor";
-import { Waveform } from "./types";
-import { SysexPreview } from "./components/SysexPreview";
+import { Callback, Waveform } from "./types";
+import { MGB_WAVEFORMS } from "./lib/globals";
 import { Flex } from "./components/Flex";
-
-const INITIAL_WAVEFORM: number[] = [
-  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
-  //
-  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
-];
+import { fromBytes } from "./lib/sysex";
+import { WaveformSelector } from "./components/WaveformSelector";
 
 function App() {
-  const [waveform, setWaveform] = useState<Waveform>(INITIAL_WAVEFORM);
+  // deep clone the mGB default set (bytes) into samples
+  const [waveforms, setWaveforms] = useState<Waveform[]>(
+    MGB_WAVEFORMS.map((bytes) => [...fromBytes(bytes)])
+  );
+  const [waveIndex, setWaveIndex] = useState(0);
+
+  const waveform = waveforms[waveIndex];
+
+  const setCurrentWaveform: Callback<Waveform> = (waveform) =>
+    setWaveforms((prev) => {
+      const newWaveforms = [...prev];
+      newWaveforms[waveIndex] = waveform;
+      return newWaveforms;
+    });
 
   return (
     <Flex row justify="center" align="center">
       <Flex col align="stretch" gap={8} style={{ maxWidth: 800 }}>
-        <WaveformEditor waveform={waveform} onChange={setWaveform} />
+        <WaveformEditor waveform={waveform} onChange={setCurrentWaveform} />
+        <WaveformSelector value={waveIndex} onChange={setWaveIndex} />
         <SendSysex waveform={waveform} />
-        <SysexPreview waveform={waveform} />
       </Flex>
     </Flex>
   );
diff --git a/src/components/Field.tsx b/src/components/Field.tsx
new file mode 100644
index 0000000..6621c39
--- /dev/null
+++ b/src/components/Field.tsx
@@ -0,0 +1,15 @@
+import { useId } from "react";
+import { Flex } from "./Flex";
+
+export const Field: React.FC<{
+  label: string;
+  children: (id: string) => React.ReactNode;
+}> = ({ label, children }) => {
+  const id = useId();
+  return (
+    <Flex row align="center" gap={8} style={{ alignContent: "center" }}>
+      <label htmlFor={id}>{label}</label>
+      {children(id)}
+    </Flex>
+  );
+};
diff --git a/src/components/SendSysex.tsx b/src/components/SendSysex.tsx
index ae6e547..314ec3a 100644
--- a/src/components/SendSysex.tsx
+++ b/src/components/SendSysex.tsx
@@ -1,12 +1,15 @@
 import { Dropdown } from "primereact/dropdown";
 import { useMidiAccess, useMidiPermission } from "../hooks/use_midi";
 import { Flex } from "./Flex";
-import { FormEventHandler, useId, useState } from "react";
+import { FormEventHandler, useState } from "react";
 import { Button } from "primereact/button";
 import { PrimeIcons } from "primereact/api";
 import { Waveform } from "../types";
-import { Fieldset } from "primereact/fieldset";
 import { sendWaveformSysex } from "../lib/sysex";
+import { Field } from "./Field";
+import { Card } from "primereact/card";
+import { SysexPreview } from "./SysexPreview";
+import { SysexDownloadButton } from "./SysexDownloadButton";
 
 export const SendSysex: React.FC<{ readonly waveform: Waveform }> = ({
   waveform,
@@ -40,48 +43,43 @@ export const SendSysex: React.FC<{ readonly waveform: Waveform }> = ({
   }
 
   return (
-    <Fieldset>
-      <Flex
-        row
-        align="center"
-        justify="start"
-        gap={8}
-        as="form"
-        onSubmit={sendSysex}
-      >
-        <Field label="Port">
-          {(id) => (
-            <Dropdown
-              inputId={id}
-              name="midiPort"
-              options={[...midi.outputs.values()]}
-              optionLabel="name"
-              optionValue="id"
-              value={portId}
-              valueTemplate={(
-                option: MIDIOutput | undefined,
-                { placeholder }
-              ) => <span>{option?.name ?? placeholder}</span>}
-              onChange={(e) => setPortId(e.value)}
-              placeholder="MIDI Port"
-            />
-          )}
-        </Field>
-        <Button label="Send" icon={PrimeIcons.PLAY} />
-      </Flex>
-    </Fieldset>
-  );
-};
+    <Card title="Send to mGB">
+      <Flex col align="start" gap={8}>
+        <Flex
+          row
+          align="center"
+          justify="start"
+          gap={8}
+          as="form"
+          onSubmit={sendSysex}
+        >
+          <Field label="Port">
+            {(id) => (
+              <Dropdown
+                inputId={id}
+                name="midiPort"
+                options={[...midi.outputs.values()]}
+                optionLabel="name"
+                optionValue="id"
+                value={portId}
+                valueTemplate={(
+                  option: MIDIOutput | undefined,
+                  { placeholder }
+                ) => <span>{option?.name ?? placeholder}</span>}
+                onChange={(e) => setPortId(e.value)}
+                placeholder="MIDI Port"
+              />
+            )}
+          </Field>
 
-const Field: React.FC<{
-  label: string;
-  children: (id: string) => React.ReactNode;
-}> = ({ label, children }) => {
-  const id = useId();
-  return (
-    <Flex row align="center" gap={8} style={{ alignContent: "center" }}>
-      <label htmlFor={id}>{label}</label>
-      {children(id)}
-    </Flex>
+          <Button label="Send" icon={PrimeIcons.PLAY} />
+        </Flex>
+
+        <Flex row align="baseline">
+          <SysexDownloadButton waveform={waveform} />
+          <SysexPreview waveform={waveform} />
+        </Flex>
+      </Flex>
+    </Card>
   );
 };
diff --git a/src/components/SysexDownloadButton.tsx b/src/components/SysexDownloadButton.tsx
new file mode 100644
index 0000000..c159ce6
--- /dev/null
+++ b/src/components/SysexDownloadButton.tsx
@@ -0,0 +1,41 @@
+import { Waveform } from "../types";
+import { sysexWaveformMessage } from "../lib/sysex";
+import { useMemo } from "react";
+import { Button } from "primereact/button";
+import { PrimeIcons } from "primereact/api";
+
+export const SysexDownloadButton: React.FC<{ waveform: Waveform }> = ({
+  waveform,
+}) => {
+  const blobUrl = useMemo(() => {
+    // Convert object to Blob
+    const blobConfig = new Blob(
+      [Uint8Array.from(sysexWaveformMessage(waveform))],
+      { type: "application/octet-stream" }
+    );
+    return URL.createObjectURL(blobConfig);
+  }, [waveform]);
+
+  const handleDownload = () => {
+    const fileName = "mGB-patch.syx";
+    downloadFile(blobUrl, fileName);
+  };
+
+  return (
+    <Button
+      text
+      icon={PrimeIcons.DOWNLOAD}
+      onClick={handleDownload}
+      label="Download .syx file"
+    />
+  );
+};
+
+function downloadFile(blobUrl: string, fileName: string) {
+  const link = document.createElement("a");
+  link.href = blobUrl;
+  link.download = fileName;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
diff --git a/src/components/SysexPreview.tsx b/src/components/SysexPreview.tsx
index 458882a..36312ac 100644
--- a/src/components/SysexPreview.tsx
+++ b/src/components/SysexPreview.tsx
@@ -1,9 +1,5 @@
-import { Card } from "primereact/card";
 import { Waveform } from "../types";
 import { sysexWaveformMessage, toHex } from "../lib/sysex";
-import { useMemo } from "react";
-import { Button } from "primereact/button";
-import { PrimeIcons } from "primereact/api";
 
 export const SysexPreview: React.FC<{ waveform: Waveform }> = ({
   waveform,
@@ -18,51 +14,22 @@ ${sysex[2]} = mGB id
 ${sysex[3]} = mGB channel
 
 <wave data>
-${wave.join(", ")}
+${wave.slice(0, 8).join(", ")}
+${wave.slice(8, 16).join(", ")}
+${wave.slice(16).join(", ")}
 </wave data>
 
 ${sysex[23]} = SYSEX EOF
 `;
 
-  // Convert Blob to URL
-  const blobUrl = useMemo(() => {
-    // Convert object to Blob
-    const blobConfig = new Blob(
-      [Uint8Array.from(sysexWaveformMessage(waveform))],
-      { type: "application/octet-stream" }
-    );
-    return URL.createObjectURL(blobConfig);
-  }, [waveform]);
-
-  const handleDownload = () => {
-    const fileName = "mGB-patch.syx";
-    downloadFile(blobUrl, fileName);
-  };
-
   return (
-    <Card>
-      <Button
-        icon={PrimeIcons.DOWNLOAD}
-        onClick={handleDownload}
-        label="Download .syx file"
-      />
-      <details>
-        <summary>
-          <strong>Sysex data</strong>
-        </summary>
-        <code>
-          <pre>{output}</pre>
-        </code>
-      </details>
-    </Card>
+    <details>
+      <summary>
+        <strong>Show SysEx</strong>
+      </summary>
+      <code>
+        <pre>{output}</pre>
+      </code>
+    </details>
   );
 };
-
-function downloadFile(blobUrl: string, fileName: string) {
-  const link = document.createElement("a");
-  link.href = blobUrl;
-  link.download = fileName;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-}
diff --git a/src/components/WaveformEditor.tsx b/src/components/WaveformEditor.tsx
index 026e0d8..1660d95 100644
--- a/src/components/WaveformEditor.tsx
+++ b/src/components/WaveformEditor.tsx
@@ -1,7 +1,8 @@
 import styled from "@emotion/styled";
 import { memo, MouseEventHandler, useCallback, useMemo } from "react";
 import { Flex } from "./Flex";
-import { BIT_DEPTH, Callback, SAMPLES_PER_WAVEFORM, Waveform } from "../types";
+import { Callback, Waveform } from "../types";
+import { BIT_DEPTH, SAMPLES_PER_WAVEFORM } from "../lib/globals";
 
 export const WaveformEditor: React.FC<{
   readonly waveform: Waveform;
@@ -25,13 +26,7 @@ export const WaveformEditor: React.FC<{
 
   return (
     <Flex col align="center">
-      <Flex row grow="1" align="center" style={{ height: POINT_SIZE }}>
-        {waveform.slice(0, SAMPLES_PER_WAVEFORM).map((val, i) => (
-          <Block key={i} align="center" justify="center">
-            {val.toString(16).toUpperCase()}
-          </Block>
-        ))}
-      </Flex>
+      <WaveformHex waveform={waveform} />
       <Flex row grow="1" align="center" style={{ border: `2px solid white` }}>
         {waveform.map((sample, i) => (
           <SampleColumn
@@ -48,12 +43,13 @@ export const WaveformEditor: React.FC<{
 
 const POINT_SIZE = 20;
 
-const Block = styled(Flex)({
+const Block = styled(Flex)<{ primary?: boolean }>(({ primary }) => ({
   width: POINT_SIZE,
   height: POINT_SIZE,
   textAlign: "center",
   verticalAlign: "middle",
-});
+  color: primary ? `var(--primary-color)` : undefined,
+}));
 
 const SAMPLES = new Array(BIT_DEPTH).fill(0);
 
@@ -128,3 +124,23 @@ const SamplePoint: React.FC<{
     />
   );
 });
+
+/** The indexes to show in primary color so that hex grouping is more clear */
+const HEX_INDEX = [2, 3, 6, 7, 10, 11, 14, 15, 18, 19, 22, 23, 26, 27, 30, 31];
+
+const WaveformHex: React.FC<{ waveform: Waveform }> = ({ waveform }) => {
+  return (
+    <Flex row grow="1" align="center" style={{ height: POINT_SIZE }}>
+      {waveform.slice(0, SAMPLES_PER_WAVEFORM).map((val, i) => (
+        <Block
+          key={i}
+          align="center"
+          justify="center"
+          primary={HEX_INDEX.includes(i)}
+        >
+          {val.toString(16).toUpperCase()}
+        </Block>
+      ))}
+    </Flex>
+  );
+};
diff --git a/src/components/WaveformSelector.tsx b/src/components/WaveformSelector.tsx
new file mode 100644
index 0000000..86d6dd5
--- /dev/null
+++ b/src/components/WaveformSelector.tsx
@@ -0,0 +1,44 @@
+import { InputText } from "primereact/inputtext";
+import { Slider } from "primereact/slider";
+import { memo } from "react";
+import { WAVEFORM_SLOTS } from "../lib/globals";
+import { Callback } from "../types";
+import { Field } from "./Field";
+import { Flex } from "./Flex";
+
+export const WaveformSelector: React.FC<{
+  value: number;
+  onChange: Callback<number>;
+}> = ({ value, onChange }) => {
+  if (value >= WAVEFORM_SLOTS)
+    throw new Error(
+      `Invalid waveform index ${value}. Only  0-${WAVEFORM_SLOTS - 1} are valid`
+    );
+
+  return (
+    <Field label="Waveform index">
+      {(id) => <SliderWithDisplay id={id} value={value} onChange={onChange} />}
+    </Field>
+  );
+};
+
+const SliderWithDisplay: React.FC<{
+  id: string;
+  value: number;
+  onChange: Callback<number>;
+}> = memo(({ id, value, onChange }) => {
+  return (
+    <Flex row gap={16} align="center" grow="1" style={{ padding: "0 8px" }}>
+      <Slider
+        id={id}
+        style={{ flex: 1 }}
+        max={WAVEFORM_SLOTS - 1}
+        value={value}
+        onChange={(e) => {
+          if (typeof e.value === "number") onChange(e.value);
+        }}
+      />
+      <InputText value={value.toString()} readOnly style={{ width: "48px" }} />
+    </Flex>
+  );
+});
diff --git a/src/lib/globals.ts b/src/lib/globals.ts
new file mode 100644
index 0000000..b6e7952
--- /dev/null
+++ b/src/lib/globals.ts
@@ -0,0 +1,106 @@
+export const SAMPLES_PER_WAVEFORM = 32;
+
+export const BYTES_PER_WAVEFORM = 16;
+
+export const BIT_DEPTH = 16;
+
+/** The default mGB waveforms (as byte Arrays) */
+export const MGB_WAVEFORMS = [
+  [
+    0x01, 0x23, 0x45, 0x67, 0x89, 0xab, 0xcd, 0xef,
+    //
+    0xfe, 0xdc, 0xba, 0x98, 0x76, 0x54, 0x32, 0x10,
+  ],
+
+  [
+    0x22, 0x55, 0x77, 0xaa, 0xbb, 0xdd, 0xee, 0xff,
+    //
+    0xee, 0xdd, 0xbb, 0xaa, 0x77, 0x66, 0x44, 0x00,
+  ],
+
+  [
+    0x01, 0x23, 0x45, 0x67, 0x89, 0xab, 0xcd, 0xef,
+    //
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+  ],
+
+  [
+    0xff, 0xee, 0xdd, 0xcc, 0xbb, 0xaa, 0x99, 0x88,
+    //
+    0x77, 0x66, 0x55, 0x44, 0x33, 0x22, 0x11, 0x00,
+  ],
+
+  [
+    0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    //
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+  ],
+
+  [
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    //
+    0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00,
+  ],
+
+  [
+    0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00,
+    //
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+  ],
+
+  [
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+    //
+    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+  ],
+
+  [
+    0x16, 0x13, 0xaa, 0xb3, 0x25, 0x81, 0xe8, 0x2a,
+    //
+    0x1b, 0xeb, 0xf8, 0x85, 0xe1, 0x28, 0xff, 0xa4,
+  ],
+
+  [
+    0x34, 0x09, 0x91, 0xa7, 0x63, 0xb8, 0x99, 0xa1,
+    //
+    0x3f, 0xe4, 0xd0, 0x61, 0x66, 0x73, 0x59, 0x7c,
+  ],
+
+  [
+    0x86, 0x04, 0x2f, 0xac, 0x85, 0x17, 0xd6, 0xa1,
+    //
+    0x03, 0xcf, 0x27, 0xe4, 0xf8, 0x27, 0x89, 0x2c,
+  ],
+
+  [
+    0x30, 0x1b, 0xd4, 0x93, 0xd3, 0x6e, 0x35, 0x13,
+    //
+    0x53, 0x05, 0x75, 0xb9, 0x79, 0xcf, 0x36, 0x00,
+  ],
+
+  [
+    0xd4, 0x2c, 0xc6, 0x4e, 0x2c, 0x12, 0xe2, 0x15,
+    //
+    0x8b, 0xaf, 0x3d, 0xef, 0x6e, 0xf1, 0xbf, 0xd9,
+  ],
+
+  [
+    0x43, 0x17, 0x2b, 0xf3, 0x12, 0xc2, 0xcb, 0x8c,
+    //
+    0x3b, 0x43, 0xf2, 0xdf, 0x5d, 0xf9, 0xef, 0x31,
+  ],
+
+  [
+    0x6d, 0x46, 0xf6, 0x7a, 0xee, 0x17, 0x35, 0xf4,
+    //
+    0xda, 0xfe, 0x7c, 0x28, 0xb8, 0x55, 0x12, 0x57,
+  ],
+
+  [
+    0xff, 0x82, 0xbb, 0x85, 0xef, 0xd4, 0x7c, 0xa1,
+    //
+    0x05, 0xb4, 0xff, 0xc1, 0x95, 0x27, 0x30, 0x03,
+  ],
+];
+
+export const WAVEFORM_SLOTS = MGB_WAVEFORMS.length;
diff --git a/src/lib/sysex.ts b/src/lib/sysex.ts
index 4926d82..6ddff74 100644
--- a/src/lib/sysex.ts
+++ b/src/lib/sysex.ts
@@ -1,4 +1,5 @@
-import { BYTES_PER_WAVEFORM, SAMPLES_PER_WAVEFORM, Waveform } from "../types";
+import { Waveform } from "../types";
+import { BYTES_PER_WAVEFORM, SAMPLES_PER_WAVEFORM } from "./globals";
 
 const MIDI_STATUS_SYSEX = 0xf0;
 const SYSEX_NON_COMMERCIAL = 0x7d;
@@ -11,20 +12,33 @@ export function sendWaveformSysex(port: MIDIOutput, waveform: Waveform) {
   port.send(sysexWaveformMessage(waveform));
 }
 
+/** Converts a waveform (32 samples) into a byte array (16 bytes) */
 export function toBytes(waveform: Waveform) {
-  return waveform.reduce((out: number[], sample: number, index: number) => {
+  return waveform.reduce((bytes: number[], sample: number, index: number) => {
     const isHighNibble = index % 2;
     if (isHighNibble) {
-      const lowNibble = out[out.length - 1];
+      const lowNibble = bytes[bytes.length - 1];
 
       const byte = lowNibble + (sample << 4);
 
-      out[out.length - 1] = byte;
+      bytes[bytes.length - 1] = byte;
     } else {
-      out[out.length] = sample;
+      bytes[bytes.length] = sample;
     }
 
-    return out;
+    return bytes;
+  }, []);
+}
+
+/** Converts a byte array (16 bytes) into a waveform (32 samples) */
+export function fromBytes(bytes: number[]) {
+  return bytes.reduce((samples: number[], byte: number) => {
+    const highNibble = byte >> 4;
+    const lowNibble = byte & 0xf;
+
+    samples.push(highNibble, lowNibble);
+
+    return samples;
   }, []);
 }
 
diff --git a/src/types.ts b/src/types.ts
index 4bec316..558031b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -2,9 +2,3 @@ export type Callback<T> = (v: T) => void;
 
 /** The representation of a waveform. 32 nibbles long. */
 export type Waveform = number[];
-
-export const SAMPLES_PER_WAVEFORM = 32;
-
-export const BYTES_PER_WAVEFORM = 16;
-
-export const BIT_DEPTH = 16;