Clean up and finish serialisation

package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.5.0",
         "@testing-library/user-event": "^7.2.1",
+        "chokidar": "^3.5.1",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "react-redux": "^7.2.2",
@@ -4438,7 +4439,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -4907,14 +4907,12 @@
       "integrity": "sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ=="
     },
     "node_modules/chokidar": {
-      "version": "3.4.3",
+      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-      "integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==",
+      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
-      "optional": true,
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.1.2",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -4923,18 +4921,9 @@
       },
       "engines": {
         "node": ">= 8.10.0"
-      }
+      },
-    },
+      "optionalDependencies": {
-    "node_modules/chokidar/node_modules/fsevents": {
+        "fsevents": "~2.3.1"
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
-      "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
     "node_modules/chownr": {
@@ -8369,9 +8358,10 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "node_modules/fsevents": {
-      "version": "2.2.1",
+      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-bTLYHSeC0UH/EFXS9KqWnXuOl/wHK5Z/d+ghd5AsFMYN7wIGkUCOJyzy88+wJKkZPGON8u4Z9f6U4FdgURE9qA==",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
       "optional": true,
       "os": [
         "darwin"
@@ -9357,7 +9347,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "optional": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -15594,7 +15583,6 @@
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
       "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
-      "optional": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -24405,8 +24393,7 @@
     "binary-extensions": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
-      "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
+      "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ=="
-      "optional": true
     },
     "bluebird": {
       "version": "3.7.2",
@@ -24811,27 +24798,18 @@
       "integrity": "sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ=="
     },
     "chokidar": {
-      "version": "3.4.3",
+      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-      "integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==",
+      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
-      "optional": true,
       "requires": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.1.2",
+        "fsevents": "~2.3.1",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
         "normalize-path": "~3.0.0",
         "readdirp": "~3.5.0"
-      },
-      "dependencies": {
-        "fsevents": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
-          "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
-          "optional": true
-        }
       }
     },
     "chownr": {
@@ -27695,9 +27673,9 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
-      "version": "2.2.1",
+      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-bTLYHSeC0UH/EFXS9KqWnXuOl/wHK5Z/d+ghd5AsFMYN7wIGkUCOJyzy88+wJKkZPGON8u4Z9f6U4FdgURE9qA==",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
       "optional": true
     },
     "function-bind": {
@@ -28506,7 +28484,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "optional": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -33549,7 +33526,6 @@
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
       "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
-      "optional": true,
       "requires": {
         "picomatch": "^2.2.1"
       }

package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "chokidar": "^3.5.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",

src/features/editor/Arpeggio.js

@@ -4,30 +4,19 @@ import { selectById } from './parameters/parameterSlice.js';
 import Card from './card';
 import { Knob, Select, Checkbox } from '../utils/components';
 import { parameterUpdated } from './parameters/parameterSlice';
-import { ArpeggA, ArpeggB } from './parameters/Arpeggios';
 
-export default function Arpeggio(props) {
+export default function Arpeggiator(props) {
-  const ids = useSelector((state) => selectById(state, props.id));
-  return (
-    <div>
-      <ArpeggA id={ids.arpeggA} />
-      <ArpeggB id={ids.arpeggB} />
-    </div>
-  );
-}
-
-export function Arpeggiator(props) {
   const parameters_1 = useSelector((state) => selectById(state, props.id1));
   const parameters_2 = useSelector((state) => selectById(state, props.id2));
   const dispatch = useDispatch();
   return (
-    <Card className={props.className} header='Arpeggiator'>
+    <Card className={props.className} header="Arpeggiator">
-      <div className='flex flex-row'>
+      <div className="flex flex-row">
-        <section className='flex flex-col justify-around w-2/5'>
+        <section className="flex flex-col justify-around w-2/5">
-          <div className='flex flex-row items-center justify-between'>
+          <div className="flex flex-row items-center justify-between">
             <h3>Type</h3>
             <Select
-              className='select w-1/2'
+              className="select w-1/2"
               value={parameters_1.type}
               list={[
                 { value: 'Up' },
@@ -47,10 +36,10 @@ export function Arpeggiator(props) {
               }
             />
           </div>
-          <div className='flex flex-row items-center justify-between'>
+          <div className="flex flex-row items-center justify-between">
             <h3>Range</h3>
             <Select
-              className='select w-1/2'
+              className="select w-1/2"
               labelFunction={(v) => `${v.value} Oct`}
               value={parameters_1.range}
               list={[{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]}
@@ -64,10 +53,10 @@ export function Arpeggiator(props) {
               }
             />
           </div>
-          <div className='flex flex-row items-center justify-between'>
+          <div className="flex flex-row items-center justify-between">
             <h3>Resolution</h3>
             <Select
-              className='select w-1/2'
+              className="select w-1/2"
               value={parameters_1.resolution}
               list={[
                 { value: '1/24' },
@@ -88,9 +77,9 @@ export function Arpeggiator(props) {
             />
           </div>
         </section>
-        <section className=' -mt-4 flex flex-col justify-around w-1/5'>
+        <section className=" -mt-4 flex flex-col justify-around w-1/5">
-          <div className='flex flex-col'>
+          <div className="flex flex-col">
-            <div className='flex flex-col items-center'>
+            <div className="flex flex-col items-center">
               <h3>Tempo</h3>
               <Knob
                 max={280}
@@ -106,7 +95,7 @@ export function Arpeggiator(props) {
                 }
               />
             </div>
-            <div className='flex flex-col items-center'>
+            <div className="flex flex-col items-center">
               <h3>Gate</h3>
               <Knob
                 max={100}
@@ -121,7 +110,7 @@ export function Arpeggiator(props) {
                 }
               />
             </div>
-            <div className='flex flex-col items-center'>
+            <div className="flex flex-col items-center">
               <h3>Swing</h3>
               <Knob
                 dual={true}
@@ -139,11 +128,11 @@ export function Arpeggiator(props) {
             </div>
           </div>
         </section>
-        <section className='flex flex-col space-y-4 w-2/5'>
+        <section className="flex flex-col space-y-4 w-2/5">
-          <div className='flex flex-row items-center justify-between'>
+          <div className="flex flex-row items-center justify-between">
             <h3>Target</h3>
             <Select
-              className='select w-1/2'
+              className="select w-1/2"
               value={parameters_2.target}
               list={[
                 { value: 'Both' },
@@ -160,10 +149,10 @@ export function Arpeggiator(props) {
               }
             />
           </div>
-          <div className='flex flex-row items-center justify-between'>
+          <div className="flex flex-row items-center justify-between">
             <h3>Last Step</h3>
             <Select
-              className='select w-1/2'
+              className="select w-1/2"
               labelFunction={(v) => `Step ${v.value}`}
               value={parameters_2.lastStep}
               list={[
@@ -186,8 +175,8 @@ export function Arpeggiator(props) {
               }
             />
           </div>
-          <div className='flex flex-row justify-around'>
+          <div className="flex flex-row justify-around">
-            <div className='flex flex-col items-center w-1/2'>
+            <div className="flex flex-col items-center w-1/2">
               <h3>Key Sync</h3>
               <Checkbox
                 parameter={parameters_2.keySync}
@@ -201,7 +190,7 @@ export function Arpeggiator(props) {
                 }
               />
             </div>
-            <div className='flex flex-col items-center w-1/2'>
+            <div className="flex flex-col items-center w-1/2">
               <h3>Latch</h3>
               <Checkbox
                 parameter={parameters_2.latch}

src/features/editor/Effects.js

@@ -2,26 +2,26 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { ModFX, Delay, EQ } from './parameters/ModFX';
 import { selectById } from './timbreSlice.js';
-import { Arpeggiator } from './Arpeggio';
+import Arpeggiator from './Arpeggio';
 
 export default function Effects(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div className='h-screen grid grid-cols-10 grid-rows-6 gap-4 p-6'>
+    <div className="h-screen grid grid-cols-10 grid-rows-6 gap-4 p-6">
       <ModFX
-        className='row-start-2 col-start-3 col-span-2 row-span-2'
+        className="row-start-2 col-start-3 col-span-2 row-span-2"
         id={ids.modfx}
       />
       <Delay
-        className='row-start-2 col-start-5 col-span-2 row-span-2'
+        className="row-start-2 col-start-5 col-span-2 row-span-2"
         id={ids.delay}
       />
       <EQ
-        className='row-start-2 col-start-7 col-span-2 row-span-2'
+        className="row-start-2 col-start-7 col-span-2 row-span-2"
         id={ids.eq}
       />
       <Arpeggiator
-        className='row-start-4 row-span-2 col-start-4 col-span-4'
+        className="row-start-4 row-span-2 col-start-4 col-span-4"
         id1={ids.arpeggA}
         id2={ids.arpeggB}
       />

src/features/editor/parameters/Arpeggios.js

@@ -1,199 +0,0 @@
-import React from 'react';
-import Card from '../card';
-import { useSelector, useDispatch } from 'react-redux';
-import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
-
-const ArpeggA = (props) => {
-  const parameters = useSelector((state) => selectById(state, props.id));
-  const dispatch = useDispatch();
-
-  return (
-    <Card className={props.className} header='Arpeggio A'>
-      <span>Arpeggio A.</span>
-      <div>
-        Tempo
-        <Slider
-          min={20}
-          max={300}
-          parameter={parameters.tempo}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { tempo: value },
-              })
-            )
-          }
-        />
-        Resolution
-        <SelectList
-          value={parameters.resolution}
-          list={[
-            { value: '1/24' },
-            { value: '1/16' },
-            { value: '1/12' },
-            { value: '1/8' },
-            { value: '1/6' },
-            { value: '1/4' },
-          ]}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { resolution: value },
-              })
-            )
-          }
-        />
-        Gate
-        <Slider
-          min={0}
-          max={100}
-          parameter={parameters.gate}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { gate: value },
-              })
-            )
-          }
-        />
-      </div>
-      <div />
-      <div>
-        Type
-        <SelectList
-          value={parameters.type}
-          list={[
-            { value: 'Up' },
-            { value: 'Down' },
-            { value: 'Alternate 1' },
-            { value: 'Alternate 2' },
-            { value: 'Random' },
-            { value: 'Trigger' },
-          ]}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { type: value },
-              })
-            )
-          }
-        />
-        Range
-        <SelectList
-          labelFunction={(v) => `${v.value} Oct`}
-          value={parameters.range}
-          list={[{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { range: value },
-              })
-            )
-          }
-        />
-      </div>
-    </Card>
-  );
-};
-
-const ArpeggB = (props) => {
-  const parameters = useSelector((state) => selectById(state, props.id));
-  const dispatch = useDispatch();
-
-  return (
-    <div>
-      <span>Arpeggio B.</span>
-      <div>
-        <Checkbox
-          name='Latch'
-          parameter={parameters.latch}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { latch: value },
-              })
-            )
-          }
-        />
-        Swing
-        <Slider
-          min={-100}
-          max={100}
-          parameter={parameters.swing}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { swing: value },
-              })
-            )
-          }
-        />
-        <Checkbox
-          name='Key Sync'
-          parameter={parameters.keySync}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { keySync: value },
-              })
-            )
-          }
-        />
-      </div>
-      <div />
-      <div>
-        Last Step
-        <SelectList
-          labelFunction={(v) => `Step ${v.value}`}
-          value={parameters.lastStep}
-          list={[
-            { value: 1 },
-            { value: 2 },
-            { value: 3 },
-            { value: 4 },
-            { value: 5 },
-            { value: 6 },
-            { value: 7 },
-            { value: 8 },
-          ]}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { lastStep: value },
-              })
-            )
-          }
-        />
-        Target Timbre
-        <SelectList
-          value={parameters.target}
-          list={[
-            { value: 'Both' },
-            { value: 'Timbre 1' },
-            { value: 'Timbre 2' },
-          ]}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { target: value },
-              })
-            )
-          }
-        />
-      </div>
-    </div>
-  );
-};
-
-export { ArpeggA, ArpeggB };

src/features/editor/parameters/Filter.js

@@ -3,7 +3,6 @@ import Card from '../card';
 import { Select, Knob } from '../../utils/components';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider } from '../../helpers/Helpers';
 
 export default function Filter(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
@@ -11,10 +10,10 @@ export default function Filter(props) {
 
   return (
     <Card className={props.className} header={props.name}>
-      <div className='-mt-2 flex items-center justify-between'>
+      <div className="-mt-2 flex items-center justify-between">
         <h3>Filter Type</h3>
         <Select
-          className='select w-4/6'
+          className="select w-4/6"
           value={parameters.filterType}
           list={[
             { value: '-24db Low Pass' },
@@ -32,10 +31,10 @@ export default function Filter(props) {
           }
         />
       </div>
-      <div className='-mt-3 flex flex-row justify-evenly'>
+      <div className="-mt-3 flex flex-row justify-evenly">
-        <div className='flex flex-col w-1/2'>
+        <div className="flex flex-col w-1/2">
-          <div className='flex flex-col items-center'>
+          <div className="flex flex-col items-center">
-            <h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3>
+            <h3 className="text-lg font-semibold text-gray-900">Cutoff</h3>
             <Knob
               value={parameters.cutoff}
               max={127}
@@ -49,8 +48,8 @@ export default function Filter(props) {
               }
             />
           </div>
-          <div className='pt-3 flex flex-col items-center'>
+          <div className="pt-3 flex flex-col items-center">
-            <h3 className='text-lg font-semibold text-gray-900'>Resonance</h3>
+            <h3 className="text-lg font-semibold text-gray-900">Resonance</h3>
             <Knob
               value={parameters.resonance}
               max={127}
@@ -65,10 +64,10 @@ export default function Filter(props) {
             />
           </div>
         </div>
-        <div className='px-4'></div>
+        <div className="px-4"></div>
-        <div className='flex flex-col w-1/2'>
+        <div className="flex flex-col w-1/2">
-          <div className='flex flex-col items-center'>
+          <div className="flex flex-col items-center">
-            <h3 className='text-lg font-semibold text-gray-900'>
+            <h3 className="text-lg font-semibold text-gray-900">
               EG Intensity
             </h3>
             <Knob
@@ -85,8 +84,8 @@ export default function Filter(props) {
               }
             />
           </div>
-          <div className='pt-3 flex flex-col items-center'>
+          <div className="pt-3 flex flex-col items-center">
-            <h3 className='text-lg font-semibold text-gray-900'>
+            <h3 className="text-lg font-semibold text-gray-900">
               Keyboard Track
             </h3>
             <Knob
@@ -114,8 +113,8 @@ export const VocoderFilter = (props) => {
   const dispatch = useDispatch();
   return (
     <Card className={props.className} header={props.name}>
-      <div className='-mt-3 flex flex-col justify-around'>
+      <div className="-mt-3 flex flex-col justify-around">
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>Cutoff</h3>
           <Knob
             value={parameters.cutoff}
@@ -130,7 +129,7 @@ export const VocoderFilter = (props) => {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>Resonance</h3>
           <Knob
             value={parameters.resonance}
@@ -145,7 +144,7 @@ export const VocoderFilter = (props) => {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>EF Sense</h3>
           <Knob
             value={parameters.efSense}
@@ -170,11 +169,11 @@ export const FCMod = (props) => {
   const dispatch = useDispatch();
   return (
     <Card className={props.className} header={props.name}>
-      <div className='-mt-4 flex flex-col justify-around space-y-4'>
+      <div className="-mt-4 flex flex-col justify-around space-y-4">
-        <div className='flex flex-col items-center space-y-0.5'>
+        <div className="flex flex-col items-center space-y-0.5">
           <h3>Source</h3>
           <Select
-            className='select w-full'
+            className="select w-full"
             value={parameters.source}
             list={[
               { value: 'Amp EG' },
@@ -195,7 +194,7 @@ export const FCMod = (props) => {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>Intensity</h3>
           <Knob
             value={parameters.intensity}

src/features/editor/parameters/Patches.js

@@ -3,15 +3,14 @@ import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import Card from '../card';
 import { Select, Knob } from '../../utils/components';
-import { Slider, SelectList } from '../../helpers/Helpers';
 
 const Patch = (props) => {
   return (
-    <div className='-mt-3 w-1/4'>
+    <div className="-mt-3 w-1/4">
-      <div className='flex flex-col items-center justify-between'>
+      <div className="flex flex-col items-center justify-between">
         <h3>Source</h3>
         <Select
-          className='select w-2/3'
+          className="select w-2/3"
           value={props.patch.source}
           list={[
             { value: 'Filter EG' },
@@ -32,10 +31,10 @@ const Patch = (props) => {
           }
         />
       </div>
-      <div className='mt-1 flex flex-col items-center justify-between'>
+      <div className="mt-1 flex flex-col items-center justify-between">
         <h3>Destination</h3>
         <Select
-          className='select w-2/3'
+          className="select w-2/3"
           value={props.patch.destination}
           list={[
             { value: 'Pitch' },
@@ -56,7 +55,7 @@ const Patch = (props) => {
           }
         />
       </div>
-      <div className='mt-1 flex flex-col items-center'>
+      <div className="mt-1 flex flex-col items-center">
         <h3>Mod Intensity</h3>
         <Knob
           max={127}
@@ -79,8 +78,8 @@ export default function Patches(props) {
   const dispatch = useDispatch();
 
   return (
-    <Card className={props.className} id='patches' header={props.name}>
+    <Card className={props.className} id="patches" header={props.name}>
-      <div className='flex flex-row justify-evenly'>
+      <div className="flex flex-row justify-evenly">
         <Patch
           patch={parameters.patch1}
           onChange={(value) =>

src/features/editor/parameters/VCO.js

@@ -9,11 +9,11 @@ export default function VCO(props) {
   const dispatch = useDispatch();
 
   return (
-    <Card className='col-span-2' header={props.name}>
+    <Card className="col-span-2" header={props.name}>
-      <div className='-mt-2 flex items-center justify-between'>
+      <div className="-mt-2 flex items-center justify-between">
-        <h3 className='text-lg font-semibold text-gray-900'>Waveform</h3>
+        <h3 className="text-lg font-semibold text-gray-900">Waveform</h3>
         <Select
-          className='select w-4/6'
+          className="select w-4/6"
           value={parameters.waveform}
           list={props.waveforms}
           onChange={(value) =>
@@ -26,10 +26,10 @@ export default function VCO(props) {
           }
         />
       </div>
-      <div className='-mt-4 flex items-center justify-between'>
+      <div className="-mt-4 flex items-center justify-between">
-        <h3 className='text-lg font-semibold text-gray-900'>{`${props.dwgsOrModTypeName}`}</h3>
+        <h3 className="text-lg font-semibold text-gray-900">{`${props.dwgsOrModTypeName}`}</h3>
         <Select
-          className='select w-4/6'
+          className="select w-4/6"
           value={parameters.dwgsOrModType}
           list={props.dwgsOrModType}
           onChange={(value) =>
@@ -42,9 +42,9 @@ export default function VCO(props) {
           }
         />
       </div>
-      <div className='mb-2 flex flex-row'>
+      <div className="mb-2 flex flex-row">
-        <div className='flex flex-col items-center w-1/2'>
+        <div className="flex flex-col items-center w-1/2">
-          <h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
+          <h3 className="text-lg font-semibold text-gray-900">Waveform Mod</h3>
           <Knob
             maxValue={127}
             value={parameters.waveMod}
@@ -58,8 +58,8 @@ export default function VCO(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center w-1/2'>
+        <div className="flex flex-col items-center w-1/2">
-          <h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
+          <h3 className="text-lg font-semibold text-gray-900">LFO Mod</h3>
           <Knob
             maxValue={127}
             value={parameters.lfoMod}
@@ -84,9 +84,9 @@ export const AudioIn = (props) => {
 
   return (
     <Card className={props.className} header={props.name}>
-      <div className='-mt-3 flex flex-col items-stretch space-y-4'>
+      <div className="-mt-3 flex flex-col items-stretch space-y-4">
-        <div className='flex flex-row'>
+        <div className="flex flex-row">
-          <div className='flex flex-col items-center w-1/2'>
+          <div className="flex flex-col items-center w-1/2">
             <h3>Gate Sense</h3>
             <Knob
               max={127}
@@ -101,7 +101,7 @@ export const AudioIn = (props) => {
               }
             />
           </div>
-          <div className='flex flex-col items-center w-1/2'>
+          <div className="flex flex-col items-center w-1/2">
             <h3>Threshold</h3>
             <Knob
               max={127}
@@ -117,8 +117,8 @@ export const AudioIn = (props) => {
             />
           </div>
         </div>
-        <div className='flex flex-row'>
+        <div className="flex flex-row">
-          <div className='flex flex-col items-center w-1/2'>
+          <div className="flex flex-col items-center w-1/2">
             <h3>HPF Level</h3>
             <Knob
               max={127}
@@ -133,10 +133,10 @@ export const AudioIn = (props) => {
               }
             />
           </div>
-          <div className='flex flex-col items-center w-1/2'>
+          <div className="flex flex-col items-center w-1/2">
             <h3>HPF Gate</h3>
             <Checkbox
-              className='checkbox'
+              className="checkbox"
               value={parameters.hpfGate}
               onChange={(value) =>
                 dispatch(

src/features/io/convert/serialise.js

@@ -14,7 +14,7 @@ export default function serialise(patch) {
       data.append(serialise_vocoder(patch[1]));
       break;
   }
-  console.log(data);
+  return data;
 }
 
 function serialise_patch(patch) {
@@ -155,7 +155,93 @@ function serialise_timbre(num, timbre) {
     ),
     timbre[`t${num}_patch_4_intensity`],
   ];
+  array.append(Array(55).fill(0));
   return array;
 }
 
-function serialise_vocoder(vocoder) {}
+function serialise_vocoder(vocoder) {
+  const array = [
+    vocoder.v_midi_channel,
+    buildByte(
+      { value: vocoder.v_assign_mode, start: 6 },
+      { value: vocoder.v_eg_2_reset, start: 5 },
+      { value: vocoder.v_eg_1_reset, start: 4 },
+      { value: vocoder.v_trigger_mode, start: 3 },
+      { value: vocoder.v_key_priority, start: 0 }
+    ),
+    vocoder.v_unison_detune,
+    vocoder.v_tune,
+    vocoder.v_bend_range,
+    vocoder.v_transpose,
+    vocoder.v_vibrato_int,
+    vocoder.v_osc_wave,
+    vocoder.v_osc_ctrl_1,
+    vocoder.v_osc_ctrl_2,
+    vocoder.v_osc_dgws,
+    0,
+    vocoder.v_audio_in_hpf_gate,
+    0,
+    vocoder.v_portamento_time,
+    vocoder.v_osc_level,
+    vocoder.v_audio_in_level,
+    vocoder.v_noise_level,
+    vocoder.v_audio_in_hpf_level,
+    vocoder.v_audio_in_gate_sense,
+    vocoder.v_audio_in_threshold,
+    vocoder.v_filter_shift,
+    vocoder.v_filter_cutoff,
+    vocoder.v_filter_resonance,
+    vocoder.v_filter_mod_source,
+    vocoder.v_filter_intensity,
+    vocoder.v_filter_e_f_sense,
+    vocoder.v_amp_level,
+    vocoder.v_amp_direct_level,
+    vocoder.v_amp_distortion,
+    vocoder.v_amp_vel_sense,
+    vocoder.v_amp_key_track,
+    vocoder.v_eg_1_attack,
+    vocoder.v_eg_1_decay,
+    vocoder.v_eg_1_sustain,
+    vocoder.v_eg_1_release,
+    vocoder.v_eg_2_attack,
+    vocoder.v_eg_2_decay,
+    vocoder.v_eg_2_sustain,
+    vocoder.v_eg_2_release,
+    buildByte(
+      { value: vocoder.v_lfo_1_key_sync, start: 4 },
+      { value: vocoder.v_lfo_1_wave, start: 0 }
+    ),
+    vocoder.v_lfo_1_frequency,
+    buildByte(
+      { value: vocoder.v_lfo_1_tempo_sync, start: 7 },
+      { value: vocoder.v_lfo_1_sync_note, start: 0 }
+    ),
+    buildByte(
+      { value: vocoder.v_lfo_2_key_sync, start: 4 },
+      { value: vocoder.v_lfo_2_wave, start: 0 }
+    ),
+    vocoder.v_lfo_2_frequency,
+    buildByte(
+      { value: vocoder.v_lfo_2_tempo_sync, start: 7 },
+      { value: vocoder.v_lfo_2_sync_note, start: 0 }
+    ),
+    vocoder.v_level_1,
+    vocoder.v_level_2,
+    vocoder.v_level_3,
+    vocoder.v_level_4,
+    vocoder.v_level_5,
+    vocoder.v_level_6,
+    vocoder.v_level_7,
+    vocoder.v_level_8,
+    vocoder.v_pan_1,
+    vocoder.v_pan_2,
+    vocoder.v_pan_3,
+    vocoder.v_pan_4,
+    vocoder.v_pan_5,
+    vocoder.v_pan_6,
+    vocoder.v_pan_7,
+    vocoder.v_pan_8,
+  ];
+  array.append(Array(174).fill(0));
+  return array;
+}

src/features/io/index.js

@@ -1,4 +1,9 @@
-import { sysex_decode, sysex_check } from './utils/sysex';
+import {
+  sysex_decode,
+  sysex_encode,
+  sysex_check,
+  sysex_write_header,
+} from './utils/sysex';
 import parse from './convert/parse';
 import serialise from './convert/serialise';
 import build_store from './convert/loadStore';
@@ -12,7 +17,8 @@ function return_store_from_file(file) {
 
 function return_file_from_store(state) {
   const simple_state = saveStoreState(state);
-  console.log(serialise(simple_state));
+  const headless_binary = sysex_encode(serialise(simple_state));
+  return sysex_write_header(headless_binary, 0);
 }
 
 export { return_store_from_file, return_file_from_store };

src/features/menu/index.js

@@ -41,14 +41,14 @@ export default function Menu() {
   }, [state.patch.mode, dispatch]);
 
   return (
-    <div className='col-span-1 flex flex-col justify-around border-solid border-r border-gray-300 bg-white px-4'>
+    <div className="col-span-1 flex flex-col justify-around border-solid border-r border-gray-300 bg-white px-4">
-      <div className='menu-patch-container'>
+      <div className="menu-patch-container">
-        <div className='patch-name'>
+        <div className="patch-name">
           <input
-            className='block w-full rounded-md rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
+            className="block w-full rounded-md rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-            placeholder='Patch Name'
+            placeholder="Patch Name"
-            type='text'
+            type="text"
-            maxLength='12'
+            maxLength="12"
             value={state.patch.name}
             onChange={(e) => {
               dispatch(
@@ -60,41 +60,44 @@ export default function Menu() {
             }}
           />
         </div>
-        <div className='my-3 flex flex-col items-center space-y-2'>
+        <div className="my-3 flex flex-col items-center space-y-2">
           <button
-            className='btn'
+            className="btn"
             onClick={() => {
               dispatch(parameterRefreshAll());
-            }}>
+            }}
+          >
             New Patch
           </button>
           <button
-            className='btn'
+            className="btn"
             onClick={() => {
               fileRef.current.click();
-            }}>
+            }}
+          >
             Load Patch
           </button>
           <button
-            className='btn'
+            className="btn"
             onClick={() => {
-              return_file_from_store(state);
+              console.log(return_file_from_store(state));
-            }}>
+            }}
+          >
             Save Patch
           </button>
           <input
-            className='hidden'
+            className="hidden"
-            type='file'
+            type="file"
-            accept='.syx'
+            accept=".syx"
             ref={fileRef}
             onChange={(e) => {
               loadFile(e.target.files[0]);
             }}
           />
         </div>
-        <div className='patch-settings'>
+        <div className="patch-settings">
           <Select
-            className='w-full select'
+            className="w-full select"
             value={state.patch.mode}
             list={[
               { value: 'Single' },
@@ -112,13 +115,14 @@ export default function Menu() {
           />
         </div>
       </div>
-      <div className='my-1 flex flex-col items-center space-y-2'>
+      <div className="my-1 flex flex-col items-center space-y-2">
         <button
           disabled={state.patch.mode === 'Vocoder'}
           className={activeTab === 'Timbre1' ? `btn btn-active` : `btn`}
           onClick={() => {
             dispatch(parameterUpdateTab('Timbre1'));
-          }}>
+          }}
+        >
           Timbre 1
         </button>
         <button
@@ -126,7 +130,8 @@ export default function Menu() {
           className={activeTab === 'Timbre2' ? `btn btn-active` : `btn`}
           onClick={() => {
             dispatch(parameterUpdateTab('Timbre2'));
-          }}>
+          }}
+        >
           Timbre 2
         </button>
         <button
@@ -134,19 +139,21 @@ export default function Menu() {
           className={activeTab === 'Vocoder' ? `btn btn-active` : `btn`}
           onClick={() => {
             dispatch(parameterUpdateTab('Vocoder'));
-          }}>
+          }}
+        >
           Vocoder
         </button>
         <button
           className={activeTab === 'Effects' ? `btn btn-active` : `btn`}
           onClick={() => {
             dispatch(parameterUpdateTab('Effects'));
-          }}>
+          }}
+        >
           Arp/FX
         </button>
       </div>
-      <div className='w-full text-center text-xl font-semibold'>
+      <div className="w-full text-center text-xl font-semibold">
-        <span className='text-3xl pb-6'>Alapatch</span> <br /> A microKORG Patch
+        <span className="text-3xl pb-6">Alapatch</span> <br /> A microKORG Patch
         Editor
       </div>
     </div>