cvancau/alapatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finish Timbre display

Browse Source
This commit is contained in:
Aoife
2021-04-06 13:44:07 -04:00
parent b1047e91ee
commit 3d8b11c44c
13 changed files with 737 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/editor/parameters/Pitch.js
+64 -67
View File
@@ -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>
);