finish vocoder page redesign
This commit is contained in:
Aoife
@@ -4,7 +4,7 @@ import { selectById } from './timbreSlice';
|
||||
import VCO, { AudioIn } from './parameters/VCO';
|
||||
import Mixer from './parameters/Mixer';
|
||||
import Pitch from './parameters/Pitch';
|
||||
import EG from './parameters/EG';
|
||||
import { VocoderEG } from './parameters/EG';
|
||||
import LFO from './parameters/LFO';
|
||||
import { VocoderFilter, FCMod } from './parameters/Filter';
|
||||
import { VocoderAmp } from './parameters/Amp';
|
||||
@@ -14,8 +14,9 @@ import Pans from './parameters/Pans';
|
||||
export default function Vocoder(props) {
|
||||
const ids = useSelector((state) => selectById(state, props.id));
|
||||
return (
|
||||
<div>
|
||||
<div className='h-screen grid grid-cols-8 grid-rows-3 gap-4 p-6'>
|
||||
<VCO
|
||||
className='col-span-2'
|
||||
name='VCO'
|
||||
id={ids.vco}
|
||||
waveforms={[
|
||||
@@ -96,18 +97,40 @@ export default function Vocoder(props) {
|
||||
{ value: 'Voice4' },
|
||||
]}
|
||||
/>
|
||||
<AudioIn name='Audio In' id={ids.audioIn} />
|
||||
<Mixer name='Mixer' id={ids.mixer} />
|
||||
<Pitch name='Pitch' id={ids.pitch} />
|
||||
<VocoderFilter name='Filter' id={ids.filter} />
|
||||
<FCMod name='FC Mod' id={ids.fcMod} />
|
||||
<VocoderAmp name='Amp' id={ids.amp} />
|
||||
<EG name='EG' id={ids.eg} />
|
||||
<div />
|
||||
<LFO name='LFO 1' id={ids.lfo1} />
|
||||
<LFO name='LFO 2' id={ids.lfo2} />
|
||||
<Levels name='Levels' id={ids.levels} />
|
||||
<Pans name='Pans' id={ids.pans} />
|
||||
<AudioIn className='col-span-2' name='Audio In' id={ids.audioIn} />
|
||||
<Mixer className='col-span-1' name='Mixer' id={ids.mixer} />
|
||||
<Pitch className='col-span-3' name='Pitch' id={ids.pitch} />
|
||||
<div className='col-span-8 grid grid-cols-9 grid-rows-1 gap-4'>
|
||||
<div />
|
||||
<VocoderFilter name='Filter' id={ids.filter} />
|
||||
<FCMod name='FC Mod' id={ids.fcMod} />
|
||||
<VocoderAmp className='col-span-2' name='Amp' id={ids.amp} />
|
||||
<VocoderEG className='col-span-3' name='EG' id1={ids.eg} />
|
||||
</div>
|
||||
<LFO
|
||||
className='col-span-2'
|
||||
name='LFO 1'
|
||||
id={ids.lfo1}
|
||||
waveforms={[
|
||||
{ value: 'Saw' },
|
||||
{ value: 'Square 1' },
|
||||
{ value: 'Triangle' },
|
||||
{ value: 'Sample & Hold' },
|
||||
]}
|
||||
/>
|
||||
<LFO
|
||||
className='col-span-2'
|
||||
name='LFO 2'
|
||||
id={ids.lfo2}
|
||||
waveforms={[
|
||||
{ value: 'Saw' },
|
||||
{ value: 'Square 2' },
|
||||
{ value: 'Sine' },
|
||||
{ value: 'Sample & Hold' },
|
||||
]}
|
||||
/>
|
||||
<Levels className='col-span-2' name='Levels' id={ids.levels} />
|
||||
<Pans className='col-span-2' name='Pans' id={ids.pans} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -84,59 +84,71 @@ export const VocoderAmp = (props) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Amp Level
|
||||
<Knob
|
||||
value={parameters.ampLevel}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Direct Level
|
||||
<Knob
|
||||
value={parameters.directLevel}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { directLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Amp Keyboard Tracking
|
||||
<Knob
|
||||
value={parameters.ampTrack}
|
||||
dual={true}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampTrack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
value={parameters.distortion}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { distortion: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>Amp Level</h3>
|
||||
<Knob
|
||||
value={parameters.ampLevel}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>Direct Level</h3>
|
||||
<Knob
|
||||
value={parameters.directLevel}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { directLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>Keyboard Track</h3>
|
||||
<Knob
|
||||
value={parameters.ampTrack}
|
||||
dual={true}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampTrack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>Distortion</h3>
|
||||
<Checkbox
|
||||
value={parameters.distortion}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { distortion: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -168,3 +168,90 @@ export default function EG(props) {
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function VocoderEG(props) {
|
||||
const parameters_eg_1 = useSelector((state) => selectById(state, props.id1));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='-mt-1 flex flex-row justify-evenly'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Attack</h3>
|
||||
<Knob
|
||||
value={parameters_eg_1.attack}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { attack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Decay</h3>
|
||||
<Knob
|
||||
value={parameters_eg_1.decay}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { decay: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Sustain</h3>
|
||||
<Knob
|
||||
value={parameters_eg_1.sustain}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { sustain: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Release</h3>
|
||||
<Knob
|
||||
value={parameters_eg_1.release}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { release: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='-mt-8 flex flex-col items-center'>
|
||||
<h3>EG Reset</h3>
|
||||
<Checkbox
|
||||
className='checkbox'
|
||||
value={parameters_eg_1.egReset}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { egReset: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import Card from '../card';
|
||||
import { Select, Knob } from '../../utils/components';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList } from '../../helpers/Helpers';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
|
||||
export default function Filter(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
@@ -38,7 +38,7 @@ export default function Filter(props) {
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3>
|
||||
<Knob
|
||||
value={parameters.cutoff}
|
||||
maxValue={127}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
@@ -74,7 +74,7 @@ export default function Filter(props) {
|
||||
<Knob
|
||||
value={parameters.egIntensity}
|
||||
dual={true}
|
||||
maxValue={63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
@@ -113,51 +113,55 @@ export const VocoderFilter = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Cutoff
|
||||
<Slider
|
||||
parameter={parameters.cutoff}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { cutoff: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Resonance
|
||||
<Slider
|
||||
parameter={parameters.resonance}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { resonance: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
EF Sense
|
||||
<Slider
|
||||
parameter={parameters.efSense}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { efSense: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='-mt-3 flex flex-col justify-around'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Cutoff</h3>
|
||||
<Knob
|
||||
value={parameters.cutoff}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { cutoff: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Resonance</h3>
|
||||
<Knob
|
||||
value={parameters.resonance}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { resonance: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>EF Sense</h3>
|
||||
<Knob
|
||||
value={parameters.efSense}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { efSense: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -165,43 +169,48 @@ export const FCMod = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
Source
|
||||
<SelectList
|
||||
value={parameters.source}
|
||||
list={[
|
||||
{ value: 'Amp EG' },
|
||||
{ value: 'LFO 1' },
|
||||
{ value: 'LFO 2' },
|
||||
{ value: 'Velocity' },
|
||||
{ value: 'Keyboard Track' },
|
||||
{ value: 'Pitch Bend' },
|
||||
{ value: 'Mod Wheel' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { source: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Intensity
|
||||
<Slider
|
||||
parameter={parameters.intensity}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { intensity: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<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'>
|
||||
<h3>Source</h3>
|
||||
<Select
|
||||
className='select w-full'
|
||||
value={parameters.source}
|
||||
list={[
|
||||
{ value: 'Amp EG' },
|
||||
{ value: 'LFO 1' },
|
||||
{ value: 'LFO 2' },
|
||||
{ value: 'Velocity' },
|
||||
{ value: 'Keyboard Track' },
|
||||
{ value: 'Pitch Bend' },
|
||||
{ value: 'Mod Wheel' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { source: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Intensity</h3>
|
||||
<Knob
|
||||
value={parameters.intensity}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { intensity: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -88,7 +88,7 @@ export default function LFO(props) {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<div className='flex flex-col items-center w-1/2 space-y-1'>
|
||||
<h3>Frequency</h3>
|
||||
<Knob
|
||||
value={parameters.frequency}
|
||||
|
||||
@@ -1,132 +1,139 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import Card from '../card';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
import { Knob } from '../../utils/components';
|
||||
|
||||
export default function Levels(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
<div>
|
||||
Level 1
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level1: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Level 2
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level2: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Level 3
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Level 4
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level4}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level4: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Level 1</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.level1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level1: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Level 2</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.level2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level2: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Level 3</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.level3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Level 4</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.level4}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level4: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
<div>
|
||||
Level 5
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level5}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level5: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Level 6
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level6}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level6: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Level 7
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level7}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level7: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Level 8
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level8}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level8: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Level 5</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.level5}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level5: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Level 6</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.level6}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level6: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Level 7</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.level7}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level7: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Level 8</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.level8}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level8: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,132 +1,147 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
import Card from '../card';
|
||||
import { Knob } from '../../utils/components';
|
||||
|
||||
export default function Pans(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
<div>
|
||||
Pan 1
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan1: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Pan 2
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan2: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Pan 3
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Pan 4
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan4}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan4: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Pan 1</h3>
|
||||
<Knob
|
||||
dual={true}
|
||||
max={63}
|
||||
value={parameters.pan1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan1: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Pan 2</h3>
|
||||
<Knob
|
||||
dual={true}
|
||||
max={63}
|
||||
value={parameters.pan2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan2: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Pan 3</h3>
|
||||
<Knob
|
||||
dual={true}
|
||||
max={63}
|
||||
value={parameters.pan3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Pan 4</h3>
|
||||
<Knob
|
||||
dual={true}
|
||||
max={63}
|
||||
value={parameters.pan4}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan4: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
<div>
|
||||
Pan 5
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan5}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan5: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Pan 6
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan6}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan6: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Pan 7
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan7}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan7: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Pan 8
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan8}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan8: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Pan 5</h3>
|
||||
<Knob
|
||||
dual={true}
|
||||
max={63}
|
||||
value={parameters.pan5}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan5: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Pan 6</h3>
|
||||
<Knob
|
||||
dual={true}
|
||||
max={63}
|
||||
value={parameters.pan6}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan6: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Pan 7</h3>
|
||||
<Knob
|
||||
dual={true}
|
||||
max={63}
|
||||
value={parameters.pan7}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan7: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/4'>
|
||||
<h3>Pan 8</h3>
|
||||
<Knob
|
||||
dual={true}
|
||||
max={63}
|
||||
value={parameters.pan8}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan8: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,8 +2,7 @@ import React from 'react';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Select, Knob } from '../../utils/components';
|
||||
import { Slider, Checkbox } from '../../helpers/Helpers';
|
||||
import { Select, Knob, Checkbox } from '../../utils/components';
|
||||
|
||||
export default function VCO(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
@@ -84,62 +83,73 @@ export const AudioIn = (props) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Gate
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.gate}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { gate: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Threshold
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.threshold}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { threshold: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
HPF Level
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.hpfLevel}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { hpfLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name='HPF Gate'
|
||||
parameter={parameters.hpfGate}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { hpfGate: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<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'>
|
||||
<h3>Gate Sense</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.gate}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { gate: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>Threshold</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.threshold}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { threshold: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>HPF Level</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.hpfLevel}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { hpfLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>HPF Gate</h3>
|
||||
<Checkbox
|
||||
className='checkbox'
|
||||
value={parameters.hpfGate}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { hpfGate: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -275,7 +275,8 @@ const defaultState = {
|
||||
waveform: 'Saw',
|
||||
keySync: 'Off',
|
||||
tempoSync: false,
|
||||
frequency: '1/1',
|
||||
frequency: 0,
|
||||
syncNote: '1/1',
|
||||
},
|
||||
patches1: {
|
||||
id: 'patches1',
|
||||
|
||||
@@ -44,6 +44,7 @@ const timbreSlice = createSlice({
|
||||
filter: 'filter3',
|
||||
fcMod: 'fcMod',
|
||||
eg: 'eg5',
|
||||
eg2: 'unusedVocoder',
|
||||
amp: 'amp3',
|
||||
lfo1: 'lfo5',
|
||||
lfo2: 'lfo6',
|
||||
|
||||
@@ -14,6 +14,8 @@ export default function Menu() {
|
||||
const [file, setFile] = useState(null);
|
||||
const fileRef = useRef(null);
|
||||
const state = useSelector((state) => selectEntities(state));
|
||||
const activeTab = useSelector((state) => state.parameters.activeTab);
|
||||
console.log(activeTab);
|
||||
const dispatch = useDispatch();
|
||||
const reader = new FileReader();
|
||||
const loadFile = (f) => {
|
||||
@@ -29,6 +31,15 @@ export default function Menu() {
|
||||
}
|
||||
}, [file, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (state.patch.mode === 'Vocoder') {
|
||||
dispatch(parameterUpdateTab('Vocoder'));
|
||||
}
|
||||
if (state.patch.mode === 'Single' || state.patch.mode === 'Multiple') {
|
||||
dispatch(parameterUpdateTab('Timbre1'));
|
||||
}
|
||||
}, [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'>
|
||||
@@ -104,7 +115,7 @@ export default function Menu() {
|
||||
<div className='my-1 flex flex-col items-center space-y-2'>
|
||||
<button
|
||||
disabled={state.patch.mode === 'Vocoder'}
|
||||
className='btn'
|
||||
className={activeTab === 'Timbre1' ? `btn btn-active` : `btn`}
|
||||
onClick={() => {
|
||||
dispatch(parameterUpdateTab('Timbre1'));
|
||||
}}>
|
||||
@@ -112,7 +123,7 @@ export default function Menu() {
|
||||
</button>
|
||||
<button
|
||||
disabled={state.patch.mode !== 'Multiple'}
|
||||
className='btn'
|
||||
className={activeTab === 'Timbre2' ? `btn btn-active` : `btn`}
|
||||
onClick={() => {
|
||||
dispatch(parameterUpdateTab('Timbre2'));
|
||||
}}>
|
||||
@@ -120,21 +131,21 @@ export default function Menu() {
|
||||
</button>
|
||||
<button
|
||||
disabled={state.patch.mode !== 'Vocoder'}
|
||||
className='btn'
|
||||
className={activeTab === 'Vocoder' ? `btn btn-active` : `btn`}
|
||||
onClick={() => {
|
||||
dispatch(parameterUpdateTab('Vocoder'));
|
||||
}}>
|
||||
Vocoder
|
||||
</button>
|
||||
<button
|
||||
className='btn'
|
||||
className={activeTab === 'Effects' ? `btn btn-active` : `btn`}
|
||||
onClick={() => {
|
||||
dispatch(parameterUpdateTab('Effects'));
|
||||
}}>
|
||||
Effects
|
||||
</button>
|
||||
<button
|
||||
className='btn'
|
||||
className={activeTab === 'Arpeggio' ? `btn btn-active` : `btn`}
|
||||
onClick={() => {
|
||||
dispatch(parameterUpdateTab('Arpeggio'));
|
||||
}}>
|
||||
|
||||
@@ -83,14 +83,14 @@ function getKnobValue(dragStart, currentY, bipolar) {
|
||||
let knob_id = 0;
|
||||
|
||||
function Knob({
|
||||
maxValue = 127,
|
||||
max = 127,
|
||||
dual = false,
|
||||
size = 42,
|
||||
value = 0,
|
||||
fillWidth = 4,
|
||||
onChange,
|
||||
}) {
|
||||
value = value / maxValue;
|
||||
value = value / max;
|
||||
const uid = useMemo(() => knob_id++, []);
|
||||
const radius = size / 2;
|
||||
const dial_zero = dual ? Math.PI / 2 : START_ANGLE;
|
||||
@@ -115,9 +115,9 @@ function Knob({
|
||||
if (!dragStart) return;
|
||||
|
||||
const newValue = getKnobValue(dragStart, e.clientY, dual);
|
||||
onChange(Math.round(newValue * maxValue));
|
||||
onChange(Math.round(newValue * max));
|
||||
},
|
||||
[dragStart, onChange, dual, maxValue]
|
||||
[dragStart, onChange, dual, max]
|
||||
);
|
||||
const onMouseDown = useCallback(
|
||||
(e) => {
|
||||
@@ -158,19 +158,21 @@ function Knob({
|
||||
{/* TOOLTIP */}
|
||||
<div
|
||||
className={` ${
|
||||
isDragging ? 'opacity-100' : 'opacity-0'
|
||||
isDragging ? 'opacity-100' : 'opacity-0 hidden'
|
||||
} transition duration-75 ease-in select-none pointer-events-none absolute -mt-6 bg-gray-800 text-white truncate text-xs box-content rounded text-center w-8 py-0.5`}>
|
||||
{Math.round(value * maxValue)}
|
||||
{Math.round(value * max)}
|
||||
</div>
|
||||
<svg
|
||||
className={` ${
|
||||
isDragging ? 'opacity-100' : 'opacity-0'
|
||||
isDragging ? 'opacity-100' : 'opacity-0 hidden'
|
||||
} transition duration-75 ease-in absolute text-gray-800 w-full h-2 -mt-1`}
|
||||
x='0px'
|
||||
y='0px'
|
||||
viewBox='0 0 255 255'
|
||||
xmlSpace='preserve'>
|
||||
<polygon class='fill-current' points='0,0 127.5,127.5 255,0'></polygon>
|
||||
<polygon
|
||||
className='fill-current'
|
||||
points='0,0 127.5,127.5 255,0'></polygon>
|
||||
</svg>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -31,6 +31,9 @@ code {
|
||||
.btn:disabled {
|
||||
@apply line-through opacity-50 hover:bg-white cursor-default;
|
||||
}
|
||||
.btn-active {
|
||||
@apply ring ring-blue-500;
|
||||
}
|
||||
.select {
|
||||
@apply select-none block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user