finish Timbre display
This commit is contained in:
Aoife
@@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Knob } from '../../utils/components';
|
||||
import { Knob, Checkbox } from '../../utils/components';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, Checkbox } from '../../helpers/Helpers';
|
||||
|
||||
export default function Amp(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
@@ -11,7 +10,83 @@ export default function Amp(props) {
|
||||
|
||||
return (
|
||||
<Card className={props.className} header={props.name}>
|
||||
<h3>Amp Level</h3>
|
||||
<div className='flex flex-row '>
|
||||
<div className='flex flex-col items-center justify-evenly 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 justify-evenly w-1/2'>
|
||||
<h3>Pan Pot</h3>
|
||||
<Knob
|
||||
value={parameters.panpot}
|
||||
dual={true}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { panpot: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex flex-col items-center justify-evenly 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 justify-start w-1/2'>
|
||||
<h3>Distortion</h3>
|
||||
<Checkbox
|
||||
value={parameters.distortion}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { distortion: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export const VocoderAmp = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Amp Level
|
||||
<Knob
|
||||
value={parameters.ampLevel}
|
||||
max={127}
|
||||
@@ -24,21 +99,20 @@ export default function Amp(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3>PanPot</h3>
|
||||
Direct Level
|
||||
<Knob
|
||||
value={parameters.panpot}
|
||||
dual={true}
|
||||
max={63}
|
||||
value={parameters.directLevel}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { panpot: value },
|
||||
changes: { directLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3>Amp Keyboard Tracking</h3>
|
||||
Amp Keyboard Tracking
|
||||
<Knob
|
||||
value={parameters.ampTrack}
|
||||
dual={true}
|
||||
@@ -53,72 +127,7 @@ export default function Amp(props) {
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
parameter={parameters.distortion}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { distortion: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export const VocoderAmp = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Amp Level
|
||||
<Slider
|
||||
parameter={parameters.ampLevel}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Direct Level
|
||||
<Slider
|
||||
parameter={parameters.directLevel}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { directLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Amp Keyboard Tracking
|
||||
<Slider
|
||||
parameter={parameters.ampTrack}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampTrack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name='Distortion'
|
||||
parameter={parameters.distortion}
|
||||
value={parameters.distortion}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
|
||||
@@ -1,83 +1,170 @@
|
||||
import React from 'react';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, Checkbox } from '../../helpers/Helpers';
|
||||
import { Knob, Checkbox } from '../../utils/components';
|
||||
|
||||
export default function EG(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const parameters_eg_1 = useSelector((state) => selectById(state, props.id1));
|
||||
const parameters_eg_2 = useSelector((state) => selectById(state, props.id2));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Attack
|
||||
<Slider
|
||||
parameter={parameters.attack}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { attack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Decay
|
||||
<Slider
|
||||
parameter={parameters.decay}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { decay: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Sustain
|
||||
<Slider
|
||||
parameter={parameters.sustain}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { sustain: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Release
|
||||
<Slider
|
||||
parameter={parameters.release}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { release: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name='EG Reset'
|
||||
parameter={parameters.egReset}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { egReset: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='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 className='flex flex-col items-center'>
|
||||
<h3>EG 1 Reset</h3>
|
||||
<Checkbox
|
||||
className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
|
||||
value={parameters_eg_1.egReset}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { egReset: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Attack</h3>
|
||||
<Knob
|
||||
value={parameters_eg_2.attack}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { attack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Decay</h3>
|
||||
<Knob
|
||||
value={parameters_eg_2.decay}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { decay: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Sustain</h3>
|
||||
<Knob
|
||||
value={parameters_eg_2.sustain}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { sustain: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Release</h3>
|
||||
<Knob
|
||||
value={parameters_eg_2.release}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { release: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>EG 2 Reset</h3>
|
||||
<Checkbox
|
||||
className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
|
||||
value={parameters_eg_2.egReset}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { egReset: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,8 +11,8 @@ export default function Filter(props) {
|
||||
|
||||
return (
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='-mt-4 flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Filter Type</h3>
|
||||
<div className='-mt-2 flex items-center justify-between'>
|
||||
<h3>Filter Type</h3>
|
||||
<Select
|
||||
className='select w-4/6'
|
||||
value={parameters.filterType}
|
||||
@@ -32,9 +32,9 @@ export default function Filter(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<div className='-mt-3 flex flex-row justify-evenly'>
|
||||
<div className='flex flex-col w-1/2'>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3>
|
||||
<Knob
|
||||
value={parameters.cutoff}
|
||||
@@ -49,7 +49,7 @@ export default function Filter(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='pt-3'>
|
||||
<div className='pt-3 flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Resonance</h3>
|
||||
<Knob
|
||||
value={parameters.resonance}
|
||||
@@ -67,7 +67,7 @@ export default function Filter(props) {
|
||||
</div>
|
||||
<div className='px-4'></div>
|
||||
<div className='flex flex-col w-1/2'>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
EG Intensity
|
||||
</h3>
|
||||
@@ -85,9 +85,9 @@ export default function Filter(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='pt-3'>
|
||||
<div className='pt-3 flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Keyboard Tracking
|
||||
Keyboard Track
|
||||
</h3>
|
||||
<Knob
|
||||
value={parameters.keyboardTrack}
|
||||
|
||||
@@ -1,95 +1,109 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
|
||||
import Card from '../card';
|
||||
import { Select, Knob, Checkbox } from '../../utils/components';
|
||||
|
||||
export default function LFO(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
LFO Waveform
|
||||
<SelectList
|
||||
value={parameters.waveform}
|
||||
list={props.waveforms}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { waveform: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Key Sync
|
||||
<SelectList
|
||||
value={parameters.keySync}
|
||||
list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { keySync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className='check-list'>
|
||||
<Checkbox
|
||||
name='Tempo Sync'
|
||||
parameter={parameters.tempoSync}
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3>LFO Waveform</h3>
|
||||
<Select
|
||||
className='select w-3/5'
|
||||
value={parameters.waveform}
|
||||
list={props.waveforms}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tempoSync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<SelectList
|
||||
value={parameters.syncNote}
|
||||
list={[
|
||||
{ value: '1/1' },
|
||||
{ value: '3/4' },
|
||||
{ value: '2/3' },
|
||||
{ value: '1/2' },
|
||||
{ value: '3/8' },
|
||||
{ value: '1/3' },
|
||||
{ value: '1/4' },
|
||||
{ value: '3/16' },
|
||||
{ value: '1/6' },
|
||||
{ value: '1/8' },
|
||||
{ value: '3/32' },
|
||||
{ value: '1/12' },
|
||||
{ value: '1/16' },
|
||||
{ value: '1/24' },
|
||||
{ value: '1/32' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { syncNote: value },
|
||||
changes: { waveform: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
Frequency
|
||||
<Slider
|
||||
parameter={parameters.frequency}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { frequency: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3>Key Sync</h3>
|
||||
<Select
|
||||
className='select w-3/5'
|
||||
value={parameters.keySync}
|
||||
list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { keySync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row mb-4'>
|
||||
<div className='flex flex-col w-1/2'>
|
||||
<h3 className='self-center'>Tempo Sync</h3>
|
||||
<div className='flex flex-row items-center justify-evenly'>
|
||||
<Checkbox
|
||||
value={parameters.tempoSync}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tempoSync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
className='select mt-2 w-2/3'
|
||||
value={parameters.syncNote}
|
||||
list={[
|
||||
{ value: '1/1' },
|
||||
{ value: '3/4' },
|
||||
{ value: '2/3' },
|
||||
{ value: '1/2' },
|
||||
{ value: '3/8' },
|
||||
{ value: '1/3' },
|
||||
{ value: '1/4' },
|
||||
{ value: '3/16' },
|
||||
{ value: '1/6' },
|
||||
{ value: '1/8' },
|
||||
{ value: '3/32' },
|
||||
{ value: '1/12' },
|
||||
{ value: '1/16' },
|
||||
{ value: '1/24' },
|
||||
{ value: '1/32' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { syncNote: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>Frequency</h3>
|
||||
<Knob
|
||||
value={parameters.frequency}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { frequency: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
import { Knob } from '../../utils/components';
|
||||
|
||||
export default function Mixer(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
@@ -11,12 +11,11 @@ export default function Mixer(props) {
|
||||
return (
|
||||
<Card header={props.name}>
|
||||
<div className='-mt-3'>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold'>Volume 1</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
<Knob
|
||||
max={127}
|
||||
parameter={parameters.vol1}
|
||||
value={parameters.vol1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
@@ -27,12 +26,11 @@ export default function Mixer(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold'>Volume 2</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
<Knob
|
||||
max={127}
|
||||
parameter={parameters.vol2}
|
||||
value={parameters.vol2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
@@ -43,12 +41,11 @@ export default function Mixer(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold'>Volume 3</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
<Knob
|
||||
max={127}
|
||||
parameter={parameters.vol3}
|
||||
value={parameters.vol3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
|
||||
@@ -1,66 +1,75 @@
|
||||
import React from 'react';
|
||||
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>
|
||||
Source
|
||||
<SelectList
|
||||
value={props.patch.source}
|
||||
list={[
|
||||
{ value: 'Filter EG' },
|
||||
{ value: 'Amp Eg' },
|
||||
{ value: 'LFO 1' },
|
||||
{ value: 'LFO 2' },
|
||||
{ value: 'Velocity' },
|
||||
{ value: 'Keyboard Track' },
|
||||
{ value: 'Pitch Bend' },
|
||||
{ value: 'Mod Wheel' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: value,
|
||||
destination: props.patch.destination,
|
||||
modIntensity: props.patch.modIntensity,
|
||||
})
|
||||
}
|
||||
/>
|
||||
Destination
|
||||
<SelectList
|
||||
value={props.patch.destination}
|
||||
list={[
|
||||
{ value: 'Pitch' },
|
||||
{ value: 'OSC 2 Tune' },
|
||||
{ value: 'OSC 1 Control 1' },
|
||||
{ value: 'Noise Level' },
|
||||
{ value: 'Cutoff' },
|
||||
{ value: 'Amp' },
|
||||
{ value: 'Pan' },
|
||||
{ value: 'LFO 2 Frequency' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: props.patch.source,
|
||||
destination: value,
|
||||
modIntensity: props.patch.modIntensity,
|
||||
})
|
||||
}
|
||||
/>
|
||||
Mod Intensity
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={props.patch.modIntensity}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: props.patch.source,
|
||||
destination: props.patch.destination,
|
||||
modIntensity: value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<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'
|
||||
value={props.patch.source}
|
||||
list={[
|
||||
{ value: 'Filter EG' },
|
||||
{ value: 'Amp Eg' },
|
||||
{ value: 'LFO 1' },
|
||||
{ value: 'LFO 2' },
|
||||
{ value: 'Velocity' },
|
||||
{ value: 'Keyboard Track' },
|
||||
{ value: 'Pitch Bend' },
|
||||
{ value: 'Mod Wheel' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: value,
|
||||
destination: props.patch.destination,
|
||||
modIntensity: props.patch.modIntensity,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-1 flex flex-col items-center justify-between'>
|
||||
<h3>Destination</h3>
|
||||
<Select
|
||||
className='select w-2/3'
|
||||
value={props.patch.destination}
|
||||
list={[
|
||||
{ value: 'Pitch' },
|
||||
{ value: 'OSC 2 Tune' },
|
||||
{ value: 'OSC 1 Control 1' },
|
||||
{ value: 'Noise Level' },
|
||||
{ value: 'Cutoff' },
|
||||
{ value: 'Amp' },
|
||||
{ value: 'Pan' },
|
||||
{ value: 'LFO 2 Frequency' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: props.patch.source,
|
||||
destination: value,
|
||||
modIntensity: props.patch.modIntensity,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-1 flex flex-col items-center'>
|
||||
<h3>Mod Intensity</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={props.patch.modIntensity}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: props.patch.source,
|
||||
destination: props.patch.destination,
|
||||
modIntensity: value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -70,59 +79,57 @@ export default function Patches(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className={props.className} id='patches'>
|
||||
<span>{`${props.name}`}</span>
|
||||
<Patch
|
||||
patch={parameters.patch1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: {
|
||||
patch1: value,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div />
|
||||
<Patch
|
||||
patch={parameters.patch2}
|
||||
onChange={(value, parameter) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: {
|
||||
patch2: value,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div />
|
||||
<Patch
|
||||
patch={parameters.patch3}
|
||||
onChange={(value, parameter) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { patch3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div />
|
||||
<Patch
|
||||
patch={parameters.patch4}
|
||||
onChange={(value, parameter) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { patch4: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Card className={props.className} id='patches' header={props.name}>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<Patch
|
||||
patch={parameters.patch1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: {
|
||||
patch1: value,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Patch
|
||||
patch={parameters.patch2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: {
|
||||
patch2: value,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Patch
|
||||
patch={parameters.patch3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { patch3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Patch
|
||||
patch={parameters.patch4}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { patch4: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Select } from '../../utils/components';
|
||||
import { Select, Knob } from '../../utils/components';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
|
||||
export default function Pitch(props) {
|
||||
@@ -11,31 +11,47 @@ export default function Pitch(props) {
|
||||
|
||||
return (
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='flex flex-row justify-evenly -mt-4'>
|
||||
<div className='w-1/2'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Voice Assign
|
||||
</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.voiceAssign}
|
||||
list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { voiceAssign: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-2'>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<div className='px-4 flex items-center justify-between w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Voice Assign</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.voiceAssign}
|
||||
list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { voiceAssign: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='px-4 flex items-center justify-between w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Trigger Mode</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.triggerMode}
|
||||
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { triggerMode: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
<section className='w-1/3'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Transpose</h3>
|
||||
<Slider
|
||||
parameter={parameters.transpose}
|
||||
min={-24}
|
||||
<Knob
|
||||
value={parameters.transpose}
|
||||
dual={true}
|
||||
max={24}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -47,11 +63,11 @@ export default function Pitch(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Tune</h3>
|
||||
<Slider
|
||||
parameter={parameters.tune}
|
||||
min={-50}
|
||||
<Knob
|
||||
value={parameters.tune}
|
||||
dual={true}
|
||||
max={50}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -63,13 +79,14 @@ export default function Pitch(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
</section>
|
||||
<section className='w-1/3'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Unison Detune
|
||||
</h3>
|
||||
<Slider
|
||||
parameter={parameters.unisonDetune}
|
||||
min={0}
|
||||
<Knob
|
||||
value={parameters.unisonDetune}
|
||||
max={99}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -81,32 +98,10 @@ export default function Pitch(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4'></div>
|
||||
<div className='w-1/2'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Trigger Mode
|
||||
</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.triggerMode}
|
||||
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { triggerMode: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-2'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Portamento</h3>
|
||||
<Slider
|
||||
parameter={parameters.portamento}
|
||||
min={0}
|
||||
<Knob
|
||||
value={parameters.portamento}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -118,11 +113,13 @@ export default function Pitch(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
</section>
|
||||
<section className='w-1/3'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Bend Range</h3>
|
||||
<Slider
|
||||
parameter={parameters.bendRange}
|
||||
min={-12}
|
||||
<Knob
|
||||
value={parameters.bendRange}
|
||||
dual={true}
|
||||
max={12}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -134,13 +131,13 @@ export default function Pitch(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
Vibrato Intensity
|
||||
</h3>
|
||||
<Slider
|
||||
parameter={parameters.vibratoIntensity}
|
||||
min={-63}
|
||||
<Knob
|
||||
value={parameters.vibratoIntensity}
|
||||
dual={true}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -152,7 +149,7 @@ export default function Pitch(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -44,7 +44,7 @@ export default function VCO(props) {
|
||||
/>
|
||||
</div>
|
||||
<div className='mb-2 flex flex-row'>
|
||||
<div className='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>
|
||||
<Knob
|
||||
maxValue={127}
|
||||
@@ -59,7 +59,7 @@ export default function VCO(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='w-1/2'>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
|
||||
<Knob
|
||||
maxValue={127}
|
||||
|
||||
Reference in New Issue
Block a user