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

add LFO component and add prop lists

Browse Source
This commit is contained in:
[poww10s]
2020-11-18 17:59:20 -05:00
parent 68d6471357
commit 71cfe8a16e
5 changed files with 193 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/timbre/Timbre.js
+95 -2
View File
@@ -4,17 +4,110 @@ import Mixer from './parameters/Mixer';
import Pitch from './parameters/Pitch'; import Pitch from './parameters/Pitch';
import Filter from './parameters/Filter'; import Filter from './parameters/Filter';
import EG from './parameters/EG'; import EG from './parameters/EG';
import Amp from './parameters/Amp';
import LFO from './parameters/LFO';
export function Timbre(props) { export function Timbre(props) {
return ( return (
<div> <div>
<VCO id="vco1" /> <VCO
<VCO id="vco2" /> id="vco1"
waveforms={[
'Saw',
'Square',
'Triangle',
'Sine',
'Vox Wave',
'DWGS',
'Noise',
'Audio In',
]}
dwgsOrModType={[
'SynSine1',
'SynSine2',
'SynSine3',
'SynSine4',
'SynSine5',
'SynSine6',
'SynSine7',
'SynBass1',
'SynBass2',
'SynBass3',
'SynBass4',
'SynBass5',
'SynBass6',
'SynBass7',
'SynWave1',
'SynWave2',
'SynWave3',
'SynWave4',
'SynWave5',
'SynWave6',
'SynWave7',
'SynWave8',
'SynWave9',
'5thWave1',
'5thWave2',
'5thWave3',
'Digi1',
'Digi2',
'Digi3',
'Digi4',
'Digi5',
'Digi6',
'Digi7',
'Digi8',
'Endless',
'E.Piano1',
'E.Piano2',
'E.Piano3',
'E.Piano4',
'Organ1',
'Organ2',
'Organ3',
'Organ4',
'Organ5',
'Organ6',
'Organ7',
'Clav1',
'Clav2',
'Guitar1',
'Guitar2',
'Guitar3',
'Bass1',
'Bass2',
'Bass3',
'Bass4',
'Bass5',
'Bell1',
'Bell2',
'Bell3',
'Bell4',
'Voice1',
'Voice2',
'Voice3',
'Voice4',
]}
/>
<VCO
id="vco2"
waveforms={['Saw', 'Square', 'Triangle']}
dwgsOrModType={['Off', 'Ring', 'Sync', 'RingSync']}
/>
<Mixer id="mixer1" /> <Mixer id="mixer1" />
<Pitch id="pitch1" /> <Pitch id="pitch1" />
<Filter id="filter1" /> <Filter id="filter1" />
<EG id="eg1" /> <EG id="eg1" />
<Amp id="amp1" />
<EG id="eg2" /> <EG id="eg2" />
<LFO
id="lfo1"
waveforms={['Saw', 'Square 1', 'Triangle', 'Sample & Hold']}
/>
<LFO
id="lfo2"
waveforms={['Saw', 'Square 2', 'Sine', 'Sample & Hold']}
/>
</div> </div>
); );
} }
src/features/timbre/parameters/LFO.js
+60
View File
@@ -0,0 +1,60 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
export default function LFO(props) {
const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch();
return (
<div>
<SelectList
value={parameters.waveform}
list={props.waveforms}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { waveform: value },
})
)
}
/>
<SelectList
value={parameters.keySync}
list={['Off', 'Timbre', 'Voice']}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { keySync: value },
})
)
}
/>
<Checkbox
parameter={parameters.tempoSync}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { tempoSync: value },
})
)
}
/>
<Slider
parameter={parameters.frequency}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { frequency: value },
})
)
}
/>
</div>
);
}
src/features/timbre/parameters/Mixer.js
+1 -12
View File
@@ -1,18 +1,7 @@
import React from 'react'; import React from 'react';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider } from '../../helpers/Helpers';
const Slider = (props) => {
return (
<input
type="range"
min="0"
max="127"
value={props.parameter}
onChange={(e) => props.onChange(e.target.value)}
/>
);
};
export default function Mixer(props) { export default function Mixer(props) {
const parameters = useSelector((state) => selectById(state, props.id)); const parameters = useSelector((state) => selectById(state, props.id));
src/features/timbre/parameters/VCO.js
+29 -4
View File
@@ -9,6 +9,30 @@ export default function VCO(props) {
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div> <div>
<SelectList
value={parameters.waveform}
list={props.waveforms}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { waveform: value },
})
)
}
/>
<SelectList
value={parameters.dwgsOrModType}
list={props.dwgsOrModType}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { dwgsOrModType: value },
})
)
}
/>
<Slider <Slider
min="0" min="0"
max="100" max="100"
@@ -22,14 +46,15 @@ export default function VCO(props) {
) )
} }
/> />
<SelectList <Slider
value={parameters.waveform} min="0"
list={['Saw', 'Square', 'Triangle']} max="100"
parameter={parameters.lfoMod}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { waveform: value }, changes: { lfoMod: value },
}) })
) )
} }
src/features/timbre/parameters/parameterSlice.js
+8
View File
@@ -83,9 +83,17 @@ const parametersSlice = createSlice({
}, },
'lfo1': { 'lfo1': {
id: 'lfo1', id: 'lfo1',
waveform: 'Saw',
keySync: 'Off',
tempoSync: false,
frequency: 0,
}, },
'lfo2': { 'lfo2': {
id: 'lfo2', id: 'lfo2',
waveform: 'Saw',
keySync: 'Off',
tempoSync: false,
frequency: 0,
}, },
}, },
}), }),