finish Timbre display

src/features/editor/Timbre.js

@@ -115,10 +115,18 @@ export default function Timbre(props) {
       />
       <Mixer className='col-span-1' name='Mixer' id={ids.mixer} />
       <Pitch className='col-span-3' name='Pitch' id={ids.pitch} />
-      <Filter className='col-span-2' name='Filter' id={ids.filter} />
+      <div className='col-span-8 grid grid-cols-9 grid-rows-1 gap-4'>
+        <div />
         <Amp className='col-span-2' name='Amp' id={ids.amp} />
-      <EG className='col-span-2' name='EG 1' id={ids.eg1} />
-      <EG className='col-span-2' name='EG 2' id={ids.eg2} />
+        <Filter className='col-span-2' name='Filter' id={ids.filter} />
+        <EG
+          className='col-span-3'
+          name='EG 1 / 2'
+          id1={ids.eg1}
+          id2={ids.eg2}
+        />
+        <div />
+      </div>
       <LFO
         className='col-span-2'
         name='LFO 1'
@@ -141,7 +149,7 @@ export default function Timbre(props) {
           { value: 'Sample & Hold' },
         ]}
       />
-      <Patches className='col-span-2' name='Patches' id={ids.patches} />
+      <Patches className='col-span-4' name='Patches' id={ids.patches} />
     </div>
   );
 }

src/features/editor/parameters/Amp.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Knob } from '../../utils/components';
+import { Knob, Checkbox } from '../../utils/components';
 import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, Checkbox } from '../../helpers/Helpers';
 
 export default function Amp(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
@@ -11,6 +10,8 @@ export default function Amp(props) {
 
   return (
     <Card className={props.className} header={props.name}>
+      <div className='flex flex-row '>
+        <div className='flex flex-col items-center justify-evenly w-1/2'>
           <h3>Amp Level</h3>
           <Knob
             value={parameters.ampLevel}
@@ -24,6 +25,8 @@ export default function Amp(props) {
               )
             }
           />
+        </div>
+        <div className='flex flex-col items-center justify-evenly w-1/2'>
           <h3>Pan Pot</h3>
           <Knob
             value={parameters.panpot}
@@ -38,7 +41,78 @@ export default function Amp(props) {
               )
             }
           />
-      <h3>Amp Keyboard Tracking</h3>
+        </div>
+      </div>
+      <div className='flex flex-row'>
+        <div className='flex flex-col items-center justify-evenly w-1/2'>
+          <h3>Keyboard Track</h3>
+          <Knob
+            value={parameters.ampTrack}
+            dual={true}
+            max={63}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { ampTrack: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center justify-start w-1/2'>
+          <h3>Distortion</h3>
+          <Checkbox
+            value={parameters.distortion}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { distortion: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export const VocoderAmp = (props) => {
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
+
+  return (
+    <div className={props.className}>
+      <span>{`${props.name}`}</span>
+      Amp Level
+      <Knob
+        value={parameters.ampLevel}
+        max={127}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { ampLevel: value },
+            })
+          )
+        }
+      />
+      Direct Level
+      <Knob
+        value={parameters.directLevel}
+        max={127}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { directLevel: value },
+            })
+          )
+        }
+      />
+      Amp Keyboard Tracking
       <Knob
         value={parameters.ampTrack}
         dual={true}
@@ -53,72 +127,7 @@ export default function Amp(props) {
         }
       />
       <Checkbox
-        parameter={parameters.distortion}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { distortion: value },
-            })
-          )
-        }
-      />
-    </Card>
-  );
-}
-
-export const VocoderAmp = (props) => {
-  const parameters = useSelector((state) => selectById(state, props.id));
-  const dispatch = useDispatch();
-
-  return (
-    <div className={props.className}>
-      <span>{`${props.name}`}</span>
-      Amp Level
-      <Slider
-        parameter={parameters.ampLevel}
-        min={0}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { ampLevel: value },
-            })
-          )
-        }
-      />
-      Direct Level
-      <Slider
-        parameter={parameters.directLevel}
-        min={0}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { directLevel: value },
-            })
-          )
-        }
-      />
-      Amp Keyboard Tracking
-      <Slider
-        parameter={parameters.ampTrack}
-        min={-63}
-        max={63}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { ampTrack: value },
-            })
-          )
-        }
-      />
-      <Checkbox
-        name='Distortion'
-        parameter={parameters.distortion}
+        value={parameters.distortion}
         onChange={(value) =>
           dispatch(
             parameterUpdated({

src/features/editor/parameters/EG.js

@@ -1,83 +1,170 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, Checkbox } from '../../helpers/Helpers';
+import { Knob, Checkbox } from '../../utils/components';
 
 export default function EG(props) {
-  const parameters = useSelector((state) => selectById(state, props.id));
+  const parameters_eg_1 = useSelector((state) => selectById(state, props.id1));
+  const parameters_eg_2 = useSelector((state) => selectById(state, props.id2));
   const dispatch = useDispatch();
 
   return (
-    <div className={props.className}>
-      <span>{`${props.name}`}</span>
-      Attack
-      <Slider
-        parameter={parameters.attack}
-        min={0}
+    <Card className={props.className} header={props.name}>
+      <div className='flex flex-row justify-evenly'>
+        <div className='flex flex-col items-center'>
+          <h3>Attack</h3>
+          <Knob
+            value={parameters_eg_1.attack}
             max={127}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
-              id: props.id,
+                  id: props.id1,
                   changes: { attack: value },
                 })
               )
             }
           />
-      Decay
-      <Slider
-        parameter={parameters.decay}
-        min={0}
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Decay</h3>
+          <Knob
+            value={parameters_eg_1.decay}
             max={127}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
-              id: props.id,
+                  id: props.id1,
                   changes: { decay: value },
                 })
               )
             }
           />
-      Sustain
-      <Slider
-        parameter={parameters.sustain}
-        min={0}
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Sustain</h3>
+          <Knob
+            value={parameters_eg_1.sustain}
             max={127}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
-              id: props.id,
+                  id: props.id1,
                   changes: { sustain: value },
                 })
               )
             }
           />
-      Release
-      <Slider
-        parameter={parameters.release}
-        min={0}
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Release</h3>
+          <Knob
+            value={parameters_eg_1.release}
             max={127}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
-              id: props.id,
+                  id: props.id1,
                   changes: { release: value },
                 })
               )
             }
           />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>EG 1 Reset</h3>
           <Checkbox
-        name='EG Reset'
-        parameter={parameters.egReset}
+            className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
+            value={parameters_eg_1.egReset}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
-              id: props.id,
+                  id: props.id1,
                   changes: { egReset: value },
                 })
               )
             }
           />
         </div>
+      </div>
+      <div className='flex flex-row justify-evenly'>
+        <div className='flex flex-col items-center'>
+          <h3>Attack</h3>
+          <Knob
+            value={parameters_eg_2.attack}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id2,
+                  changes: { attack: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Decay</h3>
+          <Knob
+            value={parameters_eg_2.decay}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id2,
+                  changes: { decay: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Sustain</h3>
+          <Knob
+            value={parameters_eg_2.sustain}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id2,
+                  changes: { sustain: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Release</h3>
+          <Knob
+            value={parameters_eg_2.release}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id2,
+                  changes: { release: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>EG 2 Reset</h3>
+          <Checkbox
+            className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
+            value={parameters_eg_2.egReset}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id2,
+                  changes: { egReset: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+    </Card>
   );
 }

src/features/editor/parameters/Filter.js

@@ -11,8 +11,8 @@ export default function Filter(props) {
 
   return (
     <Card className={props.className} header={props.name}>
-      <div className='-mt-4 flex items-center justify-between'>
-        <h3 className='text-lg font-semibold text-gray-900'>Filter Type</h3>
+      <div className='-mt-2 flex items-center justify-between'>
+        <h3>Filter Type</h3>
         <Select
           className='select w-4/6'
           value={parameters.filterType}
@@ -32,9 +32,9 @@ export default function Filter(props) {
           }
         />
       </div>
-      <div className='flex flex-row justify-evenly'>
+      <div className='-mt-3 flex flex-row justify-evenly'>
         <div className='flex flex-col w-1/2'>
-          <div>
+          <div className='flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3>
             <Knob
               value={parameters.cutoff}
@@ -49,7 +49,7 @@ export default function Filter(props) {
               }
             />
           </div>
-          <div className='pt-3'>
+          <div className='pt-3 flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>Resonance</h3>
             <Knob
               value={parameters.resonance}
@@ -67,7 +67,7 @@ export default function Filter(props) {
         </div>
         <div className='px-4'></div>
         <div className='flex flex-col w-1/2'>
-          <div>
+          <div className='flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>
               EG Intensity
             </h3>
@@ -85,9 +85,9 @@ export default function Filter(props) {
               }
             />
           </div>
-          <div className='pt-3'>
+          <div className='pt-3 flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>
-              Keyboard Tracking
+              Keyboard Track
             </h3>
             <Knob
               value={parameters.keyboardTrack}

src/features/editor/parameters/LFO.js

@@ -1,17 +1,19 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
+import Card from '../card';
+import { Select, Knob, Checkbox } from '../../utils/components';
 
 export default function LFO(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div className={props.className}>
-      <span>{`${props.name}`}</span>
-      LFO Waveform
-      <SelectList
+    <Card className={props.className} header={props.name}>
+      <div className='flex items-center justify-between'>
+        <h3>LFO Waveform</h3>
+        <Select
+          className='select w-3/5'
           value={parameters.waveform}
           list={props.waveforms}
           onChange={(value) =>
@@ -23,8 +25,11 @@ export default function LFO(props) {
             )
           }
         />
-      Key Sync
-      <SelectList
+      </div>
+      <div className='flex items-center justify-between'>
+        <h3>Key Sync</h3>
+        <Select
+          className='select w-3/5'
           value={parameters.keySync}
           list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
           onChange={(value) =>
@@ -36,10 +41,13 @@ export default function LFO(props) {
             )
           }
         />
-      <div className='check-list'>
+      </div>
+      <div className='flex flex-row mb-4'>
+        <div className='flex flex-col w-1/2'>
+          <h3 className='self-center'>Tempo Sync</h3>
+          <div className='flex flex-row items-center justify-evenly'>
             <Checkbox
-          name='Tempo Sync'
-          parameter={parameters.tempoSync}
+              value={parameters.tempoSync}
               onChange={(value) =>
                 dispatch(
                   parameterUpdated({
@@ -49,7 +57,8 @@ export default function LFO(props) {
                 )
               }
             />
-        <SelectList
+            <Select
+              className='select mt-2 w-2/3'
               value={parameters.syncNote}
               list={[
                 { value: '1/1' },
@@ -78,9 +87,12 @@ export default function LFO(props) {
               }
             />
           </div>
-      Frequency
-      <Slider
-        parameter={parameters.frequency}
+        </div>
+        <div className='flex flex-col items-center w-1/2'>
+          <h3>Frequency</h3>
+          <Knob
+            value={parameters.frequency}
+            max={127}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
@@ -91,5 +103,7 @@ export default function LFO(props) {
             }
           />
         </div>
+      </div>
+    </Card>
   );
 }

src/features/editor/parameters/Mixer.js

@@ -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 { Slider } from '../../helpers/Helpers';
+import { Knob } from '../../utils/components';
 
 export default function Mixer(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
@@ -11,12 +11,11 @@ export default function Mixer(props) {
   return (
     <Card header={props.name}>
       <div className='-mt-3'>
-        <div>
+        <div className='flex flex-col items-center'>
           <h3 className='text-lg font-semibold'>Volume 1</h3>
-          <Slider
-            min={0}
+          <Knob
             max={127}
-            parameter={parameters.vol1}
+            value={parameters.vol1}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
@@ -27,12 +26,11 @@ export default function Mixer(props) {
             }
           />
         </div>
-        <div>
+        <div className='flex flex-col items-center'>
           <h3 className='text-lg font-semibold'>Volume 2</h3>
-          <Slider
-            min={0}
+          <Knob
             max={127}
-            parameter={parameters.vol2}
+            value={parameters.vol2}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
@@ -43,12 +41,11 @@ export default function Mixer(props) {
             }
           />
         </div>
-        <div>
+        <div className='flex flex-col items-center'>
           <h3 className='text-lg font-semibold'>Volume 3</h3>
-          <Slider
-            min={0}
+          <Knob
             max={127}
-            parameter={parameters.vol3}
+            value={parameters.vol3}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({

src/features/editor/parameters/Patches.js

@@ -1,13 +1,17 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
+import Card from '../card';
+import { Select, Knob } from '../../utils/components';
 import { Slider, SelectList } from '../../helpers/Helpers';
 
 const Patch = (props) => {
   return (
-    <div>
-      Source
-      <SelectList
+    <div className='-mt-3 w-1/4'>
+      <div className='flex flex-col items-center justify-between'>
+        <h3>Source</h3>
+        <Select
+          className='select w-2/3'
           value={props.patch.source}
           list={[
             { value: 'Filter EG' },
@@ -27,8 +31,11 @@ const Patch = (props) => {
             })
           }
         />
-      Destination
-      <SelectList
+      </div>
+      <div className='mt-1 flex flex-col items-center justify-between'>
+        <h3>Destination</h3>
+        <Select
+          className='select w-2/3'
           value={props.patch.destination}
           list={[
             { value: 'Pitch' },
@@ -48,11 +55,12 @@ const Patch = (props) => {
             })
           }
         />
-      Mod Intensity
-      <Slider
-        min={0}
+      </div>
+      <div className='mt-1 flex flex-col items-center'>
+        <h3>Mod Intensity</h3>
+        <Knob
           max={127}
-        parameter={props.patch.modIntensity}
+          value={props.patch.modIntensity}
           onChange={(value) =>
             props.onChange({
               source: props.patch.source,
@@ -62,6 +70,7 @@ const Patch = (props) => {
           }
         />
       </div>
+    </div>
   );
 };
 
@@ -70,8 +79,8 @@ export default function Patches(props) {
   const dispatch = useDispatch();
 
   return (
-    <div className={props.className} id='patches'>
-      <span>{`${props.name}`}</span>
+    <Card className={props.className} id='patches' header={props.name}>
+      <div className='flex flex-row justify-evenly'>
         <Patch
           patch={parameters.patch1}
           onChange={(value) =>
@@ -85,10 +94,9 @@ export default function Patches(props) {
             )
           }
         />
-      <div />
         <Patch
           patch={parameters.patch2}
-        onChange={(value, parameter) =>
+          onChange={(value) =>
             dispatch(
               parameterUpdated({
                 id: props.id,
@@ -99,10 +107,9 @@ export default function Patches(props) {
             )
           }
         />
-      <div />
         <Patch
           patch={parameters.patch3}
-        onChange={(value, parameter) =>
+          onChange={(value) =>
             dispatch(
               parameterUpdated({
                 id: props.id,
@@ -111,10 +118,9 @@ export default function Patches(props) {
             )
           }
         />
-      <div />
         <Patch
           patch={parameters.patch4}
-        onChange={(value, parameter) =>
+          onChange={(value) =>
             dispatch(
               parameterUpdated({
                 id: props.id,
@@ -124,5 +130,6 @@ export default function Patches(props) {
           }
         />
       </div>
+    </Card>
   );
 }

src/features/editor/parameters/Pitch.js

@@ -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,12 +11,9 @@ 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>
+      <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}
@@ -31,63 +28,8 @@ export default function Pitch(props) {
             }
           />
         </div>
-          <div className='mt-2'>
-            <h3 className='text-lg font-semibold text-gray-900'>Transpose</h3>
-            <Slider
-              parameter={parameters.transpose}
-              min={-24}
-              max={24}
-              onChange={(value) =>
-                dispatch(
-                  parameterUpdated({
-                    id: props.id,
-                    changes: { transpose: value },
-                  })
-                )
-              }
-            />
-          </div>
-          <div>
-            <h3 className='text-lg font-semibold text-gray-900'>Tune</h3>
-            <Slider
-              parameter={parameters.tune}
-              min={-50}
-              max={50}
-              onChange={(value) =>
-                dispatch(
-                  parameterUpdated({
-                    id: props.id,
-                    changes: { tune: value },
-                  })
-                )
-              }
-            />
-          </div>
-          <div>
-            <h3 className='text-lg font-semibold text-gray-900'>
-              Unison Detune
-            </h3>
-            <Slider
-              parameter={parameters.unisonDetune}
-              min={0}
-              max={99}
-              onChange={(value) =>
-                dispatch(
-                  parameterUpdated({
-                    id: props.id,
-                    changes: { unisonDetune: value },
-                  })
-                )
-              }
-            />
-          </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>
+        <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}
@@ -102,11 +44,64 @@ export default function Pitch(props) {
             }
           />
         </div>
-          <div className='mt-2'>
+      </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>
+            <Knob
+              value={parameters.transpose}
+              dual={true}
+              max={24}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id,
+                    changes: { transpose: value },
+                  })
+                )
+              }
+            />
+          </div>
+          <div className='flex flex-col items-center'>
+            <h3 className='text-lg font-semibold text-gray-900'>Tune</h3>
+            <Knob
+              value={parameters.tune}
+              dual={true}
+              max={50}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id,
+                    changes: { tune: value },
+                  })
+                )
+              }
+            />
+          </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>
+            <Knob
+              value={parameters.unisonDetune}
+              max={99}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id,
+                    changes: { unisonDetune: value },
+                  })
+                )
+              }
+            />
+          </div>
+          <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>
   );

src/features/editor/parameters/VCO.js

@@ -44,7 +44,7 @@ export default function VCO(props) {
         />
       </div>
       <div className='mb-2 flex flex-row'>
-        <div className='w-1/2'>
+        <div className='flex flex-col items-center w-1/2'>
           <h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
           <Knob
             maxValue={127}
@@ -59,7 +59,7 @@ export default function VCO(props) {
             }
           />
         </div>
-        <div className='w-1/2'>
+        <div className='flex flex-col items-center w-1/2'>
           <h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
           <Knob
             maxValue={127}

src/features/helpers/rcSelectTheme.css

@@ -253,12 +253,3 @@ span {
   font-size: 1em;
   line-height: 1.5em;
 }
-[type="checkbox"]:not(:checked),
-[type="checkbox"]:checked {
-    transform: matrix(1.5, 0, 0, 1.5, 0, 1.5);
-    margin: 0.75em 1em;
-}
-[type="checkbox"]:checked {
-    filter: hue-rotate(40deg);
-}
-

src/features/menu/index.js

@@ -34,7 +34,7 @@ export default function Menu() {
       <div className='menu-patch-container'>
         <div className='patch-name'>
           <input
-            className='block w-full rounded-md bg-gray-100 border-transparent hover:bg-gray-200 focus:bg-white focus:ring-1'
+            className='block w-full rounded-md rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
             placeholder='Patch Name'
             type='text'
             maxLength='12'
@@ -49,7 +49,7 @@ export default function Menu() {
             }}
           />
         </div>
-        <div className='my-1 flex flex-col items-center'>
+        <div className='my-3 flex flex-col items-center space-y-2'>
           <button
             className='btn'
             onClick={() => {
@@ -101,7 +101,7 @@ export default function Menu() {
           />
         </div>
       </div>
-      <div className='my-1 flex flex-col items-center'>
+      <div className='my-1 flex flex-col items-center space-y-2'>
         <button
           disabled={state.patch.mode === 'Vocoder'}
           className='btn'

src/features/utils/components.js

@@ -17,6 +17,21 @@ const Select = (props) => {
   );
 };
 
+const Checkbox = (props) => {
+  return (
+    <input
+      className={
+        props.className + ' rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
+      }
+      style={props.style}
+      type='checkbox'
+      onChange={(e) => props.onChange(e.target.checked)}
+      defaultChecked={props.value}
+      value={props.value}
+    />
+  );
+};
+
 const RAD = Math.PI / 180;
 const START_ANGLE = Math.PI * 1.5 - (RAD * 45) / 2;
 const END_ANGLE = Math.PI * -0.5 + (RAD * 45) / 2;
@@ -54,7 +69,7 @@ function getKnobValue(dragStart, currentY, bipolar) {
   const slope = 0.01;
   let newValue = value + deltaY * slope;
   if (bipolar) {
-    const zeroCrossingResistance = 0; //0.3
+    const zeroCrossingResistance = 0.2; //0.3
     if (value >= 0 && newValue < 0) {
       newValue += Math.min(zeroCrossingResistance, -newValue);
     } else if (value < 0 && newValue > 0) {
@@ -169,15 +184,15 @@ function Knob({
           cx={size / 2}
           cy={size / 2}
           r={size / 2}
-          className='opacity-50'
-          style={{ mask: `url(#value-track-mask-${uid})`, fill: 'black' }}
+          className='fill-current text-blue-900 opacity-50'
+          style={{ mask: `url(#value-track-mask-${uid})` }}
         />
         {/* Value fill */}
         <circle
           cx={size / 2}
           cy={size / 2}
           r={size / 2}
-          className='fill-current text-indigo-500'
+          className='fill-current text-blue-500'
           style={{ mask: `url(#value-mask-${uid})` }}
         />
       </svg>
@@ -192,9 +207,7 @@ function Knob({
           cx={radius}
           cy={radius}
           r={radius - fillWidth}
-          style={{
-            fill: 'white',
-          }}
+          className='fill-current text-gray-300'
         />
         {/* Highlight */}
         <circle
@@ -220,12 +233,12 @@ function Knob({
               x2={size / 2}
               y2={size / 2}
               strokeLinecap='round'
-              strokeWidth='2'
-              className='stroke-current text-indigo-900'></line>
+              strokeWidth='3'
+              className='stroke-current text-blue-500'></line>
           }
         </svg>
       </svg>
     </div>
   );
 }
-export { Select, Knob };
+export { Select, Knob, Checkbox };

src/index.css

@@ -20,18 +20,21 @@ code {
 
 @layer base {
   h3 {
-    @apply pointer-events-none select-none;
+    @apply pointer-events-none select-none text-lg font-semibold text-gray-900;
   }
 }
 
 @layer components {
   .btn {
-    @apply mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200;
+    @apply w-2/3 font-semibold text-gray-700 rounded-md border px-2 py-2 border-gray-300 shadow-sm hover:bg-gray-50 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500;
   }
   .btn:disabled {
-    @apply opacity-60 hover:bg-gray-100 cursor-default;
+    @apply line-through opacity-50 hover:bg-white cursor-default;
   }
   .select {
     @apply select-none block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
   }
+  .checkbox {
+    @apply rounded-md border-2 text-blue-500 mt-2 w-6 h-6;
+  }
 }