Make timbre layout responsive
This commit is contained in:
@@ -6,16 +6,6 @@
|
|||||||
"src": "favicon.ico",
|
"src": "favicon.ico",
|
||||||
"sizes": "64x64 32x32 24x24 16x16",
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
"type": "image/x-icon"
|
"type": "image/x-icon"
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "logo192.png",
|
|
||||||
"type": "image/png",
|
|
||||||
"sizes": "192x192"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "logo512.png",
|
|
||||||
"type": "image/png",
|
|
||||||
"sizes": "512x512"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"start_url": ".",
|
"start_url": ".",
|
||||||
|
|||||||
+1
-1
@@ -8,7 +8,7 @@ function App() {
|
|||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<div className='bg-gray-200 grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
|
<div className="bg-gray-200 grid grid-cols-6 grid-rows-1 gap-4">
|
||||||
<Menu />
|
<Menu />
|
||||||
<Editor />
|
<Editor />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -13,10 +13,10 @@ import { selectById } from './timbreSlice.js';
|
|||||||
export default function Timbre(props) {
|
export default function Timbre(props) {
|
||||||
const ids = useSelector((state) => selectById(state, props.id));
|
const ids = useSelector((state) => selectById(state, props.id));
|
||||||
return (
|
return (
|
||||||
<div className='h-screen grid grid-cols-8 grid-rows-3 gap-4 p-6 pr-10'>
|
<div className="flex flex-wrap justify-between py-6 px-4">
|
||||||
<VCO
|
<VCO
|
||||||
className='col-span-2'
|
name="VCO 1"
|
||||||
name='VCO 1'
|
className="flex-grow w-80"
|
||||||
id={ids.vco1}
|
id={ids.vco1}
|
||||||
waveforms={[
|
waveforms={[
|
||||||
{ value: 'Saw' },
|
{ value: 'Saw' },
|
||||||
@@ -28,7 +28,7 @@ export default function Timbre(props) {
|
|||||||
{ value: 'Noise' },
|
{ value: 'Noise' },
|
||||||
{ value: 'Audio In' },
|
{ value: 'Audio In' },
|
||||||
]}
|
]}
|
||||||
dwgsOrModTypeName='DWGS'
|
dwgsOrModTypeName="DWGS"
|
||||||
dwgsOrModType={[
|
dwgsOrModType={[
|
||||||
{ value: 'SynSine1' },
|
{ value: 'SynSine1' },
|
||||||
{ value: 'SynSine2' },
|
{ value: 'SynSine2' },
|
||||||
@@ -97,15 +97,15 @@ export default function Timbre(props) {
|
|||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<VCO
|
<VCO
|
||||||
className='col-span-2'
|
name="VCO 2"
|
||||||
name='VCO 2'
|
className="flex-grow w-80"
|
||||||
id={ids.vco2}
|
id={ids.vco2}
|
||||||
waveforms={[
|
waveforms={[
|
||||||
{ value: 'Saw' },
|
{ value: 'Saw' },
|
||||||
{ value: 'Square' },
|
{ value: 'Square' },
|
||||||
{ value: 'Triangle' },
|
{ value: 'Triangle' },
|
||||||
]}
|
]}
|
||||||
dwgsOrModTypeName='Mod Type'
|
dwgsOrModTypeName="Mod Type"
|
||||||
dwgsOrModType={[
|
dwgsOrModType={[
|
||||||
{ value: 'Off' },
|
{ value: 'Off' },
|
||||||
{ value: 'Ring' },
|
{ value: 'Ring' },
|
||||||
@@ -113,23 +113,21 @@ export default function Timbre(props) {
|
|||||||
{ value: 'Ring Sync' },
|
{ value: 'Ring Sync' },
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<Mixer className='col-span-1' name='Mixer' id={ids.mixer} />
|
<Mixer name="Mixer" id={ids.mixer} />
|
||||||
<Pitch className='col-span-3' name='Pitch' id={ids.pitch} />
|
<Pitch className="flex-grow w-3/6" name="Pitch" id={ids.pitch} />
|
||||||
<div className='col-span-8 grid grid-cols-9 grid-rows-1 gap-4'>
|
|
||||||
<div />
|
<Amp className="flex-grow w-80" name="Amp" id={ids.amp} />
|
||||||
<Amp className='col-span-2' name='Amp' id={ids.amp} />
|
<Filter className="flex-grow w-96" name="Filter" id={ids.filter} />
|
||||||
<Filter className='col-span-2' name='Filter' id={ids.filter} />
|
<EG
|
||||||
<EG
|
className="flex-grow w-1/2"
|
||||||
className='col-span-3'
|
name="EG 1 / 2"
|
||||||
name='EG 1 / 2'
|
id1={ids.eg1}
|
||||||
id1={ids.eg1}
|
id2={ids.eg2}
|
||||||
id2={ids.eg2}
|
/>
|
||||||
/>
|
|
||||||
<div />
|
|
||||||
</div>
|
|
||||||
<LFO
|
<LFO
|
||||||
className='col-span-2'
|
className="flex-grow"
|
||||||
name='LFO 1'
|
name="LFO 1"
|
||||||
id={ids.lfo1}
|
id={ids.lfo1}
|
||||||
waveforms={[
|
waveforms={[
|
||||||
{ value: 'Saw' },
|
{ value: 'Saw' },
|
||||||
@@ -139,8 +137,8 @@ export default function Timbre(props) {
|
|||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<LFO
|
<LFO
|
||||||
className='col-span-2'
|
className="flex-grow"
|
||||||
name='LFO 2'
|
name="LFO 2"
|
||||||
id={ids.lfo2}
|
id={ids.lfo2}
|
||||||
waveforms={[
|
waveforms={[
|
||||||
{ value: 'Saw' },
|
{ value: 'Saw' },
|
||||||
@@ -149,7 +147,7 @@ export default function Timbre(props) {
|
|||||||
{ value: 'Sample & Hold' },
|
{ value: 'Sample & Hold' },
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<Patches className='col-span-4' name='Patches' id={ids.patches} />
|
<Patches className="flex-grow" name="Patches" id={ids.patches} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,16 +1,17 @@
|
|||||||
export default function Card(props = { className: 'col-span-2' }) {
|
export default function Card(props) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
props.className +
|
props.className +
|
||||||
' flex flex-col justify-start border border-gray-300 rounded-md shadow-md bg-white'
|
' mb-4 mr-4 flex flex-col justify-start border border-gray-300 rounded-md shadow-md bg-white'
|
||||||
}>
|
}
|
||||||
<header className='flex items-start justify-between py-2 px-4 border-b border-solid border-gray-200'>
|
>
|
||||||
<h3 className='pointer-events-none text-xl font-semibold text-gray-900'>
|
<header className="flex items-start justify-between py-2 px-4 border-b border-solid border-gray-200">
|
||||||
|
<h3 className="pointer-events-none text-xl font-semibold text-gray-900">
|
||||||
{props.header}
|
{props.header}
|
||||||
</h3>
|
</h3>
|
||||||
</header>
|
</header>
|
||||||
<section className='flex-grow flex flex-col justify-evenly px-6'>
|
<section className="flex-grow flex flex-col justify-evenly my-3 px-6">
|
||||||
{props.children}
|
{props.children}
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import { useSelector } from 'react-redux';
|
|||||||
export default function Editor() {
|
export default function Editor() {
|
||||||
const activeTab = useSelector((state) => state.parameters.activeTab);
|
const activeTab = useSelector((state) => state.parameters.activeTab);
|
||||||
return (
|
return (
|
||||||
<div className="col-span-5 overflow-y-auto overscroll-contain">
|
<div className="h-screen col-span-5 overflow-y-auto overscroll-contain">
|
||||||
{activeTab === 'Timbre1' ? <Timbre id="timbre1" /> : null}
|
{activeTab === 'Timbre1' ? <Timbre id="timbre1" /> : null}
|
||||||
{activeTab === 'Timbre2' ? <Timbre id="timbre2" /> : null}
|
{activeTab === 'Timbre2' ? <Timbre id="timbre2" /> : null}
|
||||||
{activeTab === 'Vocoder' ? <Vocoder id="vocoder" /> : null}
|
{activeTab === 'Vocoder' ? <Vocoder id="vocoder" /> : null}
|
||||||
|
|||||||
@@ -10,8 +10,8 @@ export default function Amp(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={props.className} header={props.name}>
|
<Card className={props.className} header={props.name}>
|
||||||
<div className='flex flex-row '>
|
<div className="flex flex-row ">
|
||||||
<div className='flex flex-col items-center justify-evenly w-1/2'>
|
<div className="flex flex-col items-center justify-evenly w-1/2">
|
||||||
<h3>Amp Level</h3>
|
<h3>Amp Level</h3>
|
||||||
<Knob
|
<Knob
|
||||||
value={parameters.ampLevel}
|
value={parameters.ampLevel}
|
||||||
@@ -26,7 +26,7 @@ export default function Amp(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-col items-center justify-evenly w-1/2'>
|
<div className="flex flex-col items-center justify-evenly w-1/2">
|
||||||
<h3>Pan Pot</h3>
|
<h3>Pan Pot</h3>
|
||||||
<Knob
|
<Knob
|
||||||
value={parameters.panpot}
|
value={parameters.panpot}
|
||||||
@@ -43,8 +43,8 @@ export default function Amp(props) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-row'>
|
<div className="flex flex-row">
|
||||||
<div className='flex flex-col items-center justify-evenly w-1/2'>
|
<div className="flex flex-col items-center justify-evenly w-1/2">
|
||||||
<h3>Keyboard Track</h3>
|
<h3>Keyboard Track</h3>
|
||||||
<Knob
|
<Knob
|
||||||
value={parameters.ampTrack}
|
value={parameters.ampTrack}
|
||||||
@@ -60,7 +60,7 @@ export default function Amp(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-col items-center justify-start w-1/2'>
|
<div className="flex flex-col items-center justify-start w-1/2">
|
||||||
<h3>Distortion</h3>
|
<h3>Distortion</h3>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
value={parameters.distortion}
|
value={parameters.distortion}
|
||||||
@@ -85,8 +85,8 @@ export const VocoderAmp = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={props.className} header={props.name}>
|
<Card className={props.className} header={props.name}>
|
||||||
<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>Amp Level</h3>
|
<h3>Amp Level</h3>
|
||||||
<Knob
|
<Knob
|
||||||
value={parameters.ampLevel}
|
value={parameters.ampLevel}
|
||||||
@@ -101,7 +101,7 @@ export const VocoderAmp = (props) => {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-col items-center w-1/2'>
|
<div className="flex flex-col items-center w-1/2">
|
||||||
<h3>Direct Level</h3>
|
<h3>Direct Level</h3>
|
||||||
<Knob
|
<Knob
|
||||||
value={parameters.directLevel}
|
value={parameters.directLevel}
|
||||||
@@ -117,8 +117,8 @@ export const VocoderAmp = (props) => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</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>Keyboard Track</h3>
|
<h3>Keyboard Track</h3>
|
||||||
<Knob
|
<Knob
|
||||||
value={parameters.ampTrack}
|
value={parameters.ampTrack}
|
||||||
@@ -134,7 +134,7 @@ export const VocoderAmp = (props) => {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-col items-center w-1/2'>
|
<div className="flex flex-col items-center w-1/2">
|
||||||
<h3>Distortion</h3>
|
<h3>Distortion</h3>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
value={parameters.distortion}
|
value={parameters.distortion}
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ export default function Filter(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={props.className} header={props.name}>
|
<Card className={props.className} header={props.name}>
|
||||||
<div className="-mt-2 flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h3>Filter Type</h3>
|
<h3>Filter Type</h3>
|
||||||
<Select
|
<Select
|
||||||
className="select w-4/6"
|
className="select w-4/6"
|
||||||
@@ -31,7 +31,7 @@ export default function Filter(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-3 flex flex-row justify-evenly">
|
<div className="my-2 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>
|
||||||
|
|||||||
@@ -10,10 +10,10 @@ export default function LFO(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={props.className} header={props.name}>
|
<Card className={props.className} header={props.name}>
|
||||||
<div className='flex items-center justify-between'>
|
<div className="flex items-center justify-between">
|
||||||
<h3>LFO Waveform</h3>
|
<h3>LFO Waveform</h3>
|
||||||
<Select
|
<Select
|
||||||
className='select w-3/5'
|
className="select w-3/5"
|
||||||
value={parameters.waveform}
|
value={parameters.waveform}
|
||||||
list={props.waveforms}
|
list={props.waveforms}
|
||||||
onChange={(value) =>
|
onChange={(value) =>
|
||||||
@@ -26,10 +26,10 @@ export default function LFO(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-center justify-between'>
|
<div className="mt-2 flex items-center justify-between">
|
||||||
<h3>Key Sync</h3>
|
<h3>Key Sync</h3>
|
||||||
<Select
|
<Select
|
||||||
className='select w-3/5'
|
className="select w-3/5"
|
||||||
value={parameters.keySync}
|
value={parameters.keySync}
|
||||||
list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
|
list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
|
||||||
onChange={(value) =>
|
onChange={(value) =>
|
||||||
@@ -42,10 +42,10 @@ export default function LFO(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-row mb-4'>
|
<div className="mt-2 flex flex-row mb-4">
|
||||||
<div className='flex flex-col w-1/2'>
|
<div className="flex flex-col w-1/2">
|
||||||
<h3 className='self-center'>Tempo Sync</h3>
|
<h3 className="self-center">Tempo Sync</h3>
|
||||||
<div className='flex flex-row items-center justify-evenly'>
|
<div className="flex flex-row items-center justify-evenly">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
value={parameters.tempoSync}
|
value={parameters.tempoSync}
|
||||||
onChange={(value) =>
|
onChange={(value) =>
|
||||||
@@ -58,7 +58,7 @@ export default function LFO(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<Select
|
<Select
|
||||||
className='select mt-2 w-2/3'
|
className="select mt-2 w-2/3"
|
||||||
value={parameters.syncNote}
|
value={parameters.syncNote}
|
||||||
list={[
|
list={[
|
||||||
{ value: '1/1' },
|
{ value: '1/1' },
|
||||||
@@ -88,7 +88,7 @@ export default function LFO(props) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-col items-center w-1/2 space-y-1'>
|
<div className="flex flex-col items-center w-1/2 space-y-2">
|
||||||
<h3>Frequency</h3>
|
<h3>Frequency</h3>
|
||||||
<Knob
|
<Knob
|
||||||
value={parameters.frequency}
|
value={parameters.frequency}
|
||||||
|
|||||||
@@ -9,10 +9,10 @@ export default function Mixer(props) {
|
|||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card header={props.name}>
|
<Card className={props.className} header={props.name}>
|
||||||
<div className='-mt-3'>
|
<div className="-mt-3">
|
||||||
<div className='flex flex-col items-center'>
|
<div className="flex flex-col items-center">
|
||||||
<h3 className='text-lg font-semibold'>Volume 1</h3>
|
<h3 className="text-lg font-semibold">Volume 1</h3>
|
||||||
<Knob
|
<Knob
|
||||||
max={127}
|
max={127}
|
||||||
value={parameters.vol1}
|
value={parameters.vol1}
|
||||||
@@ -26,8 +26,8 @@ export default function Mixer(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-col items-center'>
|
<div className="flex flex-col items-center">
|
||||||
<h3 className='text-lg font-semibold'>Volume 2</h3>
|
<h3 className="text-lg font-semibold">Volume 2</h3>
|
||||||
<Knob
|
<Knob
|
||||||
max={127}
|
max={127}
|
||||||
value={parameters.vol2}
|
value={parameters.vol2}
|
||||||
@@ -41,8 +41,8 @@ export default function Mixer(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-col items-center'>
|
<div className="flex flex-col items-center">
|
||||||
<h3 className='text-lg font-semibold'>Volume 3</h3>
|
<h3 className="text-lg font-semibold">Volume 3</h3>
|
||||||
<Knob
|
<Knob
|
||||||
max={127}
|
max={127}
|
||||||
value={parameters.vol3}
|
value={parameters.vol3}
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import { Select, Knob } from '../../utils/components';
|
|||||||
|
|
||||||
const Patch = (props) => {
|
const Patch = (props) => {
|
||||||
return (
|
return (
|
||||||
<div className="-mt-3 w-1/4">
|
<div className="mb-2 w-1/4">
|
||||||
<div className="flex flex-col items-center justify-between">
|
<div className="flex flex-col items-center justify-between">
|
||||||
<h3>Source</h3>
|
<h3>Source</h3>
|
||||||
<Select
|
<Select
|
||||||
|
|||||||
@@ -10,11 +10,11 @@ export default function Pitch(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={props.className} header={props.name}>
|
<Card className={props.className} header={props.name}>
|
||||||
<div className='flex flex-row justify-evenly'>
|
<div className="mt-2 flex flex-row">
|
||||||
<div className='px-4 flex items-center justify-between w-1/2'>
|
<div className="mx-4 flex items-center justify-between w-1/2">
|
||||||
<h3 className='text-lg font-semibold text-gray-900'>Voice Assign</h3>
|
<h3 className="text-lg font-semibold text-gray-900">Voice Assign</h3>
|
||||||
<Select
|
<Select
|
||||||
className='select w-2/4'
|
className="select w-2/4"
|
||||||
value={parameters.voiceAssign}
|
value={parameters.voiceAssign}
|
||||||
list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
|
list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
|
||||||
onChange={(value) =>
|
onChange={(value) =>
|
||||||
@@ -27,10 +27,10 @@ export default function Pitch(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='px-4 flex items-center justify-between w-1/2'>
|
<div className="mx-4 flex items-center justify-between w-1/2">
|
||||||
<h3 className='text-lg font-semibold text-gray-900'>Trigger Mode</h3>
|
<h3 className="text-lg font-semibold text-gray-900">Trigger Mode</h3>
|
||||||
<Select
|
<Select
|
||||||
className='select w-2/4'
|
className="select w-2/4"
|
||||||
value={parameters.triggerMode}
|
value={parameters.triggerMode}
|
||||||
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
||||||
onChange={(value) =>
|
onChange={(value) =>
|
||||||
@@ -44,10 +44,10 @@ export default function Pitch(props) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-row'>
|
<div className="mt-2 mb-4 flex flex-row">
|
||||||
<section className='w-1/3'>
|
<section className="w-1/3">
|
||||||
<div className='flex flex-col items-center'>
|
<div className="flex flex-col items-center">
|
||||||
<h3 className='text-lg font-semibold text-gray-900'>Transpose</h3>
|
<h3 className="text-lg font-semibold text-gray-900">Transpose</h3>
|
||||||
<Knob
|
<Knob
|
||||||
value={parameters.transpose}
|
value={parameters.transpose}
|
||||||
dual={true}
|
dual={true}
|
||||||
@@ -62,8 +62,8 @@ export default function Pitch(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-col items-center'>
|
<div className="flex flex-col items-center">
|
||||||
<h3 className='text-lg font-semibold text-gray-900'>Tune</h3>
|
<h3 className="text-lg font-semibold text-gray-900">Tune</h3>
|
||||||
<Knob
|
<Knob
|
||||||
value={parameters.tune}
|
value={parameters.tune}
|
||||||
dual={true}
|
dual={true}
|
||||||
@@ -79,9 +79,9 @@ export default function Pitch(props) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section className='w-1/3'>
|
<section className="w-1/3">
|
||||||
<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">
|
||||||
Unison Detune
|
Unison Detune
|
||||||
</h3>
|
</h3>
|
||||||
<Knob
|
<Knob
|
||||||
@@ -97,8 +97,8 @@ export default function Pitch(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-col items-center'>
|
<div className="flex flex-col items-center">
|
||||||
<h3 className='text-lg font-semibold text-gray-900'>Portamento</h3>
|
<h3 className="text-lg font-semibold text-gray-900">Portamento</h3>
|
||||||
<Knob
|
<Knob
|
||||||
value={parameters.portamento}
|
value={parameters.portamento}
|
||||||
max={127}
|
max={127}
|
||||||
@@ -113,9 +113,9 @@ export default function Pitch(props) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section className='w-1/3'>
|
<section className="w-1/3">
|
||||||
<div className='flex flex-col items-center'>
|
<div className="flex flex-col items-center">
|
||||||
<h3 className='text-lg font-semibold text-gray-900'>Bend Range</h3>
|
<h3 className="text-lg font-semibold text-gray-900">Bend Range</h3>
|
||||||
<Knob
|
<Knob
|
||||||
value={parameters.bendRange}
|
value={parameters.bendRange}
|
||||||
dual={true}
|
dual={true}
|
||||||
@@ -130,8 +130,8 @@ export default function Pitch(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<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">
|
||||||
Vibrato Intensity
|
Vibrato Intensity
|
||||||
</h3>
|
</h3>
|
||||||
<Knob
|
<Knob
|
||||||
|
|||||||
@@ -9,8 +9,8 @@ export default function VCO(props) {
|
|||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="col-span-2" header={props.name}>
|
<Card className={props.className} header={props.name}>
|
||||||
<div className="-mt-2 flex items-center justify-between">
|
<div className="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
|
<Select
|
||||||
className="select w-4/6"
|
className="select w-4/6"
|
||||||
@@ -26,7 +26,7 @@ export default function VCO(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-4 flex items-center justify-between">
|
<div className="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
|
<Select
|
||||||
className="select w-4/6"
|
className="select w-4/6"
|
||||||
@@ -42,9 +42,11 @@ export default function VCO(props) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-2 flex flex-row">
|
<div className="my-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="ml-1 text-lg font-semibold text-gray-900">
|
||||||
|
Waveform Mod
|
||||||
|
</h3>
|
||||||
<Knob
|
<Knob
|
||||||
maxValue={127}
|
maxValue={127}
|
||||||
value={parameters.waveMod}
|
value={parameters.waveMod}
|
||||||
|
|||||||
@@ -10,7 +10,6 @@ export default function build_store(patch, timbre1, timbre2, vocoder) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function prepare_patch(object) {
|
function prepare_patch(object) {
|
||||||
console.log(object.voice_mode);
|
|
||||||
return {
|
return {
|
||||||
unusedPatch: {
|
unusedPatch: {
|
||||||
id: 'unusedPatch',
|
id: 'unusedPatch',
|
||||||
|
|||||||
@@ -67,7 +67,6 @@ function build_patch(patch) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function build_timbre(num, timbre) {
|
function build_timbre(num, timbre) {
|
||||||
console.log(timbre[0]);
|
|
||||||
return {
|
return {
|
||||||
[`t${num}_midi_channel`]: timbre[0],
|
[`t${num}_midi_channel`]: timbre[0],
|
||||||
[`t${num}_assign_mode`]: getBits(timbre[1], 6, 7),
|
[`t${num}_assign_mode`]: getBits(timbre[1], 6, 7),
|
||||||
|
|||||||
@@ -1,20 +1,24 @@
|
|||||||
import { fromBitArray, buildByte } from '../utils/functions';
|
import { fromBitArray, buildByte } from '../utils/functions';
|
||||||
|
|
||||||
export default function serialise(patch) {
|
export default function serialise(patch) {
|
||||||
const data = Array.from(serialise_patch(patch[0]));
|
let data = serialise_patch(patch[0]);
|
||||||
switch (patch[0].voice_mode) {
|
switch (patch[0].voice_mode) {
|
||||||
default:
|
default:
|
||||||
case 'Single':
|
case 0:
|
||||||
data.concat(serialise_timbre(1, patch[1]));
|
data = data.concat(serialise_timbre(1, patch[1]));
|
||||||
break;
|
break;
|
||||||
case 'Multiple':
|
case 2:
|
||||||
data.concat(serialise_timbre(1, patch[1]), serialise_timbre(2, patch[2]));
|
data = data.concat(
|
||||||
|
serialise_timbre(1, patch[1]),
|
||||||
|
serialise_timbre(2, patch[2])
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'Vocoder':
|
case 3:
|
||||||
data.concat(serialise_vocoder(patch[1]));
|
data = data.concat(serialise_vocoder(patch[1]));
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
return data;
|
return data;
|
||||||
|
//console.log(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
function serialise_patch(patch) {
|
function serialise_patch(patch) {
|
||||||
@@ -72,7 +76,7 @@ function serialise_timbre(num, timbre) {
|
|||||||
{ value: timbre[`t${num}_eg_2_reset`], start: 5 },
|
{ value: timbre[`t${num}_eg_2_reset`], start: 5 },
|
||||||
{ value: timbre[`t${num}_eg_1_reset`], start: 4 },
|
{ value: timbre[`t${num}_eg_1_reset`], start: 4 },
|
||||||
{ value: timbre[`t${num}_trigger_mode`], start: 3 },
|
{ value: timbre[`t${num}_trigger_mode`], start: 3 },
|
||||||
{ value: timbre[`t${num}_key_priority`], start: 0 }
|
{ value: timbre[`t${num}_key_priority`], start: 1 }
|
||||||
),
|
),
|
||||||
timbre[`t${num}_unison_detune`],
|
timbre[`t${num}_unison_detune`],
|
||||||
timbre[`t${num}_tune`],
|
timbre[`t${num}_tune`],
|
||||||
@@ -155,8 +159,7 @@ function serialise_timbre(num, timbre) {
|
|||||||
),
|
),
|
||||||
timbre[`t${num}_patch_4_intensity`],
|
timbre[`t${num}_patch_4_intensity`],
|
||||||
];
|
];
|
||||||
array.concat(Array(55).fill(0));
|
return array.concat(Array(55).fill(0));
|
||||||
return array;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function serialise_vocoder(vocoder) {
|
function serialise_vocoder(vocoder) {
|
||||||
@@ -242,6 +245,5 @@ function serialise_vocoder(vocoder) {
|
|||||||
vocoder.v_pan_7,
|
vocoder.v_pan_7,
|
||||||
vocoder.v_pan_8,
|
vocoder.v_pan_8,
|
||||||
];
|
];
|
||||||
array.concat(Array(174).fill(0));
|
return array.concat(Array(174).fill(0));
|
||||||
return array;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,7 +15,6 @@ export default function Menu() {
|
|||||||
const fileRef = useRef(null);
|
const fileRef = useRef(null);
|
||||||
const state = useSelector((state) => selectEntities(state));
|
const state = useSelector((state) => selectEntities(state));
|
||||||
const activeTab = useSelector((state) => state.parameters.activeTab);
|
const activeTab = useSelector((state) => state.parameters.activeTab);
|
||||||
console.log(activeTab);
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
const loadFile = (f) => {
|
const loadFile = (f) => {
|
||||||
@@ -41,7 +40,7 @@ export default function Menu() {
|
|||||||
}, [state.patch.mode, dispatch]);
|
}, [state.patch.mode, dispatch]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="col-span-1 flex flex-col justify-around border-solid border-r border-gray-300 bg-white px-4">
|
<div className="h-screen 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
|
<input
|
||||||
|
|||||||
Reference in New Issue
Block a user