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

add Parameter Section Headers

Browse Source
This commit is contained in:
Aoife
2020-11-20 21:50:35 -05:00
parent cf152e019a
commit 9ba5e1d01b
14 changed files with 313 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/timbre/Timbre.js
+11 -7
View File
@@ -16,6 +16,7 @@ export default function Timbre(props) {
return (
<div className={styles.timbreStyle}>
<VCO
name="VCO 1"
id={ids.vco1}
waveforms={[
{ value: 'Saw' },
@@ -96,6 +97,7 @@ export default function Timbre(props) {
]}
/>
<VCO
name="VCO 2"
id={ids.vco2}
waveforms={[
{ value: 'Saw' },
@@ -110,14 +112,15 @@ export default function Timbre(props) {
{ value: 'RingSync' },
]}
/>
<Mixer id={ids.mixer} />
<Pitch id={ids.pitch} />
<Filter id={ids.filter} />
<Amp id={ids.amp} />
<Mixer name="Mixer" id={ids.mixer} />
<Pitch name="Pitch" id={ids.pitch} />
<Filter name="Filter" id={ids.filter} />
<Amp name="Amp"id={ids.amp} />
<div className={styles.lineBreak} />
<EG id={ids.eg1} />
<EG id={ids.eg2} />
<EG name="EG 1" id={ids.eg1} />
<EG name="EG 2" id={ids.eg2} />
<LFO
name="LFO 1"
id={ids.lfo1}
waveforms={[
{ value: 'Saw' },
@@ -127,6 +130,7 @@ export default function Timbre(props) {
]}
/>
<LFO
name="LFO 2"
id={ids.lfo2}
waveforms={[
{ value: 'Saw' },
@@ -135,7 +139,7 @@ export default function Timbre(props) {
{ value: 'Sample & Hold' },
]}
/>
<Patches id={ids.patches} />
<Patches name="Patches" id={ids.patches} />
</div>
);
}
src/features/timbre/Vocoder.js
+14 -9
View File
@@ -8,6 +8,8 @@ import EG from './parameters/EG';
import LFO from './parameters/LFO';
import { VocoderFilter, FCMod } from './parameters/Filter';
import { VocoderAmp } from './parameters/Amp';
import Levels from './parameters/Levels'
import Pans from './parameters/Pans'
import styles from './Timbre.module.css';
export default function Vocoder(props) {
@@ -15,6 +17,7 @@ export default function Vocoder(props) {
return (
<div className={styles.timbreStyle}>
<VCO
name="VCO"
id={ids.vco}
waveforms={[
{ value: 'Saw' },
@@ -94,16 +97,18 @@ export default function Vocoder(props) {
{ value: 'Voice4' },
]}
/>
<AudioIn id={ids.audioIn} />
<Mixer id={ids.mixer} />
<Pitch id={ids.pitch} />
<VocoderFilter id={ids.filter} />
<FCMod id={ids.fcMod} />
<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} />
<div className={styles.lineBreak} />
<VocoderAmp id={ids.amp} />
<EG id={ids.eg} />
<LFO id={ids.lfo1} />
<LFO id={ids.lfo2} />
<VocoderAmp name="Amp" id={ids.amp} />
<EG name="EG" id={ids.eg} />
<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} />
</div>
);
}
src/features/timbre/parameters/Amp.js
+2
View File
@@ -10,6 +10,7 @@ export default function Amp(props) {
return (
<div className={styles.container}>
<span className={styles.header}>{`${props.name}`}</span>
Amp Level
<Slider
parameter={parameters.ampLevel}
@@ -74,6 +75,7 @@ export const VocoderAmp = (props) => {
return (
<div className={styles.container}>
<span className={styles.header}>{`${props.name}`}</span>
Amp Level
<Slider
parameter={parameters.ampLevel}
src/features/timbre/parameters/EG.js
+1
View File
@@ -10,6 +10,7 @@ export default function EG(props) {
return (
<div className={styles.container}>
<span className={styles.header}>{`${props.name}`}</span>
Attack
<Slider
parameter={parameters.attack}
src/features/timbre/parameters/Filter.js
+3
View File
@@ -10,6 +10,7 @@ export default function Filter(props) {
return (
<div className={styles.container}>
<span className={styles.header}>{`${props.name}`}</span>
Filter Type
<SelectList
value={parameters.filterType}
@@ -93,6 +94,7 @@ export const VocoderFilter = (props) => {
const dispatch = useDispatch();
return (
<div className={styles.container}>
<span className={styles.header}>{`${props.name}`}</span>
Cutoff
<Slider
parameter={parameters.cutoff}
@@ -144,6 +146,7 @@ export const FCMod = (props) => {
const dispatch = useDispatch();
return (
<div className={styles.container}>
<span className={styles.header}>{`${props.name}`}</span>
Source
<SelectList
value={parameters.source}
src/features/timbre/parameters/LFO.js
+1
View File
@@ -10,6 +10,7 @@ export default function LFO(props) {
return (
<div className={styles.container}>
<span className={styles.header}>{`${props.name}`}</span>
LFO Waveform
<SelectList
value={parameters.waveform}
src/features/timbre/parameters/Levels.js
+119 -2
View File
@@ -1,7 +1,7 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, SelectList } from '../../helpers/Helpers';
import { Slider} from '../../helpers/Helpers';
import styles from './Parameters.module.css';
export default function Levels(props) {
@@ -10,7 +10,124 @@ export default function Levels(props) {
return (
<div className={styles.horizontalContainer}>
<Slider />
<span className={styles.header}>{`${props.name}`}</span>
<div className={styles.container}>
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 },
})
)
}
/>
</div>
<div className={styles.divider}/>
<div className={styles.container}>
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>
</div>
);
}
src/features/timbre/parameters/Mixer.js
+1
View File
@@ -10,6 +10,7 @@ export default function Mixer(props) {
return (
<div className={styles.container}>
<span className={styles.header}>{`${props.name}`}</span>
Volume 1
<Slider
min={0}
src/features/timbre/parameters/Pans.js
+133
View File
@@ -0,0 +1,133 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider} from '../../helpers/Helpers';
import styles from './Parameters.module.css';
export default function Pans(props) {
const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch();
return (
<div className={styles.horizontalContainer}>
<span className={styles.header}>{`${props.name}`}</span>
<div className={styles.container}>
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 },
})
)
}
/>
</div>
<div className={styles.divider}/>
<div className={styles.container}>
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>
</div>
);
}
src/features/timbre/parameters/Patches.js
+1
View File
@@ -72,6 +72,7 @@ export default function Patches(props) {
return (
<div id="patches" className={styles.patchesContainer}>
<span className={styles.header}>{`${props.name}`}</span>
<Patch
patch={parameters.patch1}
onChange={(value) =>
src/features/timbre/parameters/Pitch.js
+1
View File
@@ -10,6 +10,7 @@ export default function Pitch(props) {
return (
<div className={styles.horizontalContainer}>
<span className={styles.header}>{`${props.name}`}</span>
<div className={styles.container}>
Voice Assign
<SelectList
src/features/timbre/parameters/VCO.js
+2
View File
@@ -10,6 +10,7 @@ export default function VCO(props) {
const dispatch = useDispatch();
return (
<div className={styles.container}>
<span className={styles.header}>{`${props.name}`}</span>
Waveform
<SelectList
value={parameters.waveform}
@@ -74,6 +75,7 @@ export const AudioIn = (props) => {
return (
<div className={styles.container}>
<span className={styles.header}>{`${props.name}`}</span>
Gate
<Slider
min={0}
src/features/timbre/parameters/parameterSlice.js
+22
View File
@@ -311,6 +311,28 @@ const parametersSlice = createSlice({
modIntensity: 0,
},
},
'levels': {
id: 'levels',
level1: 0,
level2: 0,
level3: 0,
level4: 0,
level5: 0,
level6: 0,
level7: 0,
level8: 0
},
'pans': {
id: 'pans',
pan1: 0,
pan2: 0,
pan3: 0,
pan4: 0,
pan5: 0,
pan6: 0,
pan7: 0,
pan8: 0
}
},
}),
reducers: {
src/features/timbre/timbreSlice.js
+2
View File
@@ -47,6 +47,8 @@ const timbreSlice = createSlice({
amp: 'amp3',
lfo1: 'lfo5',
lfo2: 'lfo6',
levels: 'levels',
pans: 'pans'
},
},
currentTimbre: 'timbre1',