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/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: {