add Parameter Section Headers

src/features/timbre/Timbre.js

@@ -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} />
+            <Mixer name="Mixer" id={ids.mixer} />
-            <Pitch id={ids.pitch} />
+            <Pitch name="Pitch" id={ids.pitch} />
-            <Filter id={ids.filter} />
+            <Filter name="Filter" id={ids.filter} />
-            <Amp id={ids.amp} />
+            <Amp name="Amp"id={ids.amp} />
             <div className={styles.lineBreak} />
-            <EG id={ids.eg1} />
+            <EG name="EG 1" id={ids.eg1} />
-            <EG id={ids.eg2} />
+            <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

@@ -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} />
+            <AudioIn name="Audio In" id={ids.audioIn} />
-            <Mixer id={ids.mixer} />
+            <Mixer name="Mixer" id={ids.mixer} />
-            <Pitch id={ids.pitch} />
+            <Pitch name="Pitch" id={ids.pitch} />
-            <VocoderFilter id={ids.filter} />
+            <VocoderFilter name="Filter" id={ids.filter} />
-            <FCMod id={ids.fcMod} />
+            <FCMod name="FC Mod" id={ids.fcMod} />
             <div className={styles.lineBreak} />
-            <VocoderAmp id={ids.amp} />
+            <VocoderAmp name="Amp" id={ids.amp} />
-            <EG id={ids.eg} />
+            <EG name="EG" id={ids.eg} />
-            <LFO id={ids.lfo1} />
+            <LFO name="LFO 1" id={ids.lfo1} />
-            <LFO id={ids.lfo2} />
+            <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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -47,6 +47,8 @@ const timbreSlice = createSlice({
                 amp: 'amp3',
                 lfo1: 'lfo5',
                 lfo2: 'lfo6',
+                levels: 'levels',
+                pans: 'pans'
             },
         },
         currentTimbre: 'timbre1',