finish vocoder page redesign
This commit is contained in:
Aoife
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user