Clean up and finish serialisation
This commit is contained in:
Aoife
Generated
+19
-43
@@ -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",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
|
||||
"integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==",
|
||||
"optional": true,
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
|
||||
"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar/node_modules/fsevents": {
|
||||
"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"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/chownr": {
|
||||
@@ -8369,9 +8358,10 @@
|
||||
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.2.1.tgz",
|
||||
"integrity": "sha512-bTLYHSeC0UH/EFXS9KqWnXuOl/wHK5Z/d+ghd5AsFMYN7wIGkUCOJyzy88+wJKkZPGON8u4Z9f6U4FdgURE9qA==",
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"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==",
|
||||
"optional": true
|
||||
"integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ=="
|
||||
},
|
||||
"bluebird": {
|
||||
"version": "3.7.2",
|
||||
@@ -24811,27 +24798,18 @@
|
||||
"integrity": "sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ=="
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
|
||||
"integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==",
|
||||
"optional": true,
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
|
||||
"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.2.1.tgz",
|
||||
"integrity": "sha512-bTLYHSeC0UH/EFXS9KqWnXuOl/wHK5Z/d+ghd5AsFMYN7wIGkUCOJyzy88+wJKkZPGON8u4Z9f6U4FdgURE9qA==",
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"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"
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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) {
|
||||
const ids = useSelector((state) => selectById(state, props.id));
|
||||
return (
|
||||
<div>
|
||||
<ArpeggA id={ids.arpeggA} />
|
||||
<ArpeggB id={ids.arpeggB} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Arpeggiator(props) {
|
||||
export default 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'>
|
||||
<div className='flex flex-row'>
|
||||
<section className='flex flex-col justify-around w-2/5'>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<Card className={props.className} header="Arpeggiator">
|
||||
<div className="flex flex-row">
|
||||
<section className="flex flex-col justify-around w-2/5">
|
||||
<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'>
|
||||
<div className='flex flex-col'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<section className=" -mt-4 flex flex-col justify-around w-1/5">
|
||||
<div className="flex flex-col">
|
||||
<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'>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<section className="flex flex-col space-y-4 w-2/5">
|
||||
<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-col items-center w-1/2'>
|
||||
<div className="flex flex-row justify-around">
|
||||
<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}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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 };
|
||||
@@ -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='flex flex-col w-1/2'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3>
|
||||
<div className="-mt-3 flex flex-row justify-evenly">
|
||||
<div className="flex flex-col w-1/2">
|
||||
<div className="flex flex-col items-center">
|
||||
<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'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Resonance</h3>
|
||||
<div className="pt-3 flex flex-col items-center">
|
||||
<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='flex flex-col w-1/2'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
<div className="px-4"></div>
|
||||
<div className="flex flex-col w-1/2">
|
||||
<div className="flex flex-col items-center">
|
||||
<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'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
<div className="pt-3 flex flex-col items-center">
|
||||
<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='flex flex-col items-center'>
|
||||
<div className="-mt-3 flex flex-col justify-around">
|
||||
<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='flex flex-col items-center space-y-0.5'>
|
||||
<div className="-mt-4 flex flex-col justify-around space-y-4">
|
||||
<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}
|
||||
|
||||
@@ -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='flex flex-col items-center justify-between'>
|
||||
<div className="-mt-3 w-1/4">
|
||||
<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}>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<Card className={props.className} id="patches" header={props.name}>
|
||||
<div className="flex flex-row justify-evenly">
|
||||
<Patch
|
||||
patch={parameters.patch1}
|
||||
onChange={(value) =>
|
||||
|
||||
@@ -9,11 +9,11 @@ export default function VCO(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<Card className='col-span-2' header={props.name}>
|
||||
<div className='-mt-2 flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Waveform</h3>
|
||||
<Card className="col-span-2" header={props.name}>
|
||||
<div className="-mt-2 flex items-center justify-between">
|
||||
<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'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>{`${props.dwgsOrModTypeName}`}</h3>
|
||||
<div className="-mt-4 flex items-center justify-between">
|
||||
<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='flex flex-col items-center w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
|
||||
<div className="mb-2 flex flex-row">
|
||||
<div className="flex flex-col items-center w-1/2">
|
||||
<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'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
|
||||
<div className="flex flex-col items-center w-1/2">
|
||||
<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='flex flex-row'>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<div className="-mt-3 flex flex-col items-stretch space-y-4">
|
||||
<div className="flex flex-row">
|
||||
<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-col items-center w-1/2'>
|
||||
<div className="flex flex-row">
|
||||
<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(
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 };
|
||||
|
||||
+34
-27
@@ -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='menu-patch-container'>
|
||||
<div className='patch-name'>
|
||||
<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="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'
|
||||
placeholder='Patch Name'
|
||||
type='text'
|
||||
maxLength='12'
|
||||
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"
|
||||
type="text"
|
||||
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'
|
||||
type='file'
|
||||
accept='.syx'
|
||||
className="hidden"
|
||||
type="file"
|
||||
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'>
|
||||
<span className='text-3xl pb-6'>Alapatch</span> <br /> A microKORG Patch
|
||||
<div className="w-full text-center text-xl font-semibold">
|
||||
<span className="text-3xl pb-6">Alapatch</span> <br /> A microKORG Patch
|
||||
Editor
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user