Squashed commit of the following:
commit 1c83bf85b13a426c9b74d3e7d4ec2613b2aaff39 Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 22:12:31 2020 -0500 Styling Timbre Sections commit e662f36f78e0d89a2f4ef195b768e955a0130094 Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 21:08:12 2020 -0500 update styling commit f9a87e5749799406e9a00a45c0c02f1b5e8c8f2d Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 20:54:36 2020 -0500 fix initialState for dwgsOrModType commit 15b89fa96f224fec3d5df982433536951e99ba21 Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 20:47:38 2020 -0500 implemented react-select commit 23dddc2d6bcd25ed01ef68e3040d9d7375761e5f Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 15:23:47 2020 -0500 add react-select commit 47b74abadfd125b90c883d43786149a51bb7cdba Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 14:15:03 2020 -0500 custom rc-slider style and include commit b2d1161cbc7eabb6a2c512606b66104084c25754 Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 14:14:45 2020 -0500 include rc-slider package commit fca611edc959935b09dcd70cfaa737680f22d559 Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 03:09:47 2020 -0500 add styled-components commit 86bec44f1ea5f631107aad0c561a5788728946c8 Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 01:13:09 2020 -0500 added timbre2 to App commit d1c275b9915861fde8ca9225e5dcb591c707949d Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 01:13:00 2020 -0500 updated parameterSlice with correct ID's commit 3e694c135722c4c63c489e6c2691b18fea4f977a Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 01:12:30 2020 -0500 added timbre reducer to store commit 251693a3fd35aca039de51dda79a17e4154afb89 Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 01:12:11 2020 -0500 added support for seperate timbres commit a2b24c1e6f7cf1b95bfeffb828418319932658ec Author: [poww10s] <[theironminer@gmail.com]> Date: Thu Nov 19 01:11:54 2020 -0500 added timbreSlice
This commit is contained in:
[poww10s]
+1
-1
@@ -7,7 +7,7 @@ function App() {
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<Timbre id="timbre1" />
|
||||
<Timbre id="timbre2" />
|
||||
{/*<Timbre id="timbre2" />*/}
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
import React from 'react';
|
||||
import RCSlider, { createSliderWithTooltip } from 'rc-slider';
|
||||
import './index.css';
|
||||
import Select from 'react-select';
|
||||
import './rcSelectTheme.css';
|
||||
|
||||
const SliderWithToolTip = createSliderWithTooltip(RCSlider);
|
||||
|
||||
const SelectStyle = {
|
||||
control: (provided) => ({
|
||||
...provided,
|
||||
width: '100%',
|
||||
}),
|
||||
};
|
||||
|
||||
const Slider = (props) => {
|
||||
return (
|
||||
<SliderWithToolTip
|
||||
@@ -17,17 +25,22 @@ const Slider = (props) => {
|
||||
};
|
||||
|
||||
const SelectList = (props) => {
|
||||
const options = props.list.map((option, index) => (
|
||||
<option value={option} key={index}>
|
||||
{option}
|
||||
</option>
|
||||
));
|
||||
return (
|
||||
<<<<<<< HEAD
|
||||
<select
|
||||
value={props.value}
|
||||
onChange={(e) => props.onChange(e.target.value)}>
|
||||
{options}
|
||||
</select>
|
||||
=======
|
||||
<Select
|
||||
value={{ value: props.value }}
|
||||
options={props.list}
|
||||
getOptionLabel={(option) => `${option.value}`}
|
||||
onChange={(e) => props.onChange(e.value)}
|
||||
styles={SelectStyle}
|
||||
/>
|
||||
>>>>>>> v2-styling-react-select
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,251 @@
|
||||
.rc-slider {
|
||||
position: relative;
|
||||
height: 14px;
|
||||
padding: 5px 0;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
touch-action: none;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
margin: 5px 0;
|
||||
}
|
||||
.rc-slider * {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.rc-slider-rail {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: lightgray;
|
||||
height: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.rc-slider-track {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
border-radius: 6px;
|
||||
background-color: lightgrey;
|
||||
}
|
||||
.rc-slider-handle {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
cursor: -webkit-grab;
|
||||
margin-top: -5px;
|
||||
cursor: grab;
|
||||
border-radius: 50%;
|
||||
background-color: slategrey;
|
||||
touch-action: pan-x;
|
||||
}
|
||||
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
|
||||
background-color: slateblue;
|
||||
}
|
||||
.rc-slider-handle:focus {
|
||||
outline: none;
|
||||
}
|
||||
.rc-slider-handle-click-focused:focus {
|
||||
background-color: slateblue;
|
||||
}
|
||||
.rc-slider-handle:hover {
|
||||
background-color: slateblue;
|
||||
}
|
||||
.rc-slider-handle:active {
|
||||
background-color: slateblue;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
.rc-slider-mark {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
.rc-slider-mark-text {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
}
|
||||
.rc-slider-mark-text-active {
|
||||
color: #666;
|
||||
}
|
||||
.rc-slider-step {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
.rc-slider-dot {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
margin-left: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid #e9e9e9;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.rc-slider-dot-active {
|
||||
border-color: #96dbfa;
|
||||
}
|
||||
.rc-slider-dot-reverse {
|
||||
margin-right: -4px;
|
||||
}
|
||||
.rc-slider-disabled {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.rc-slider-disabled .rc-slider-track {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.rc-slider-disabled .rc-slider-handle,
|
||||
.rc-slider-disabled .rc-slider-dot {
|
||||
border-color: #ccc;
|
||||
box-shadow: none;
|
||||
background-color: #fff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.rc-slider-disabled .rc-slider-mark-text,
|
||||
.rc-slider-disabled .rc-slider-dot {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
.rc-slider-vertical {
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-rail {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-track {
|
||||
left: 5px;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-handle {
|
||||
margin-left: -5px;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-mark {
|
||||
top: 0;
|
||||
left: 18px;
|
||||
height: 100%;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-step {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-dot {
|
||||
left: 2px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-dot:first-child {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-dot:last-child {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-enter,
|
||||
.rc-slider-tooltip-zoom-down-appear {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-leave {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
|
||||
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
|
||||
animation-name: rcSliderTooltipZoomDownIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
|
||||
animation-name: rcSliderTooltipZoomDownOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-enter,
|
||||
.rc-slider-tooltip-zoom-down-appear {
|
||||
transform: scale(0, 0);
|
||||
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-leave {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
}
|
||||
@keyframes rcSliderTooltipZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
@keyframes rcSliderTooltipZoomDownOut {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
.rc-slider-tooltip {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
visibility: visible;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.rc-slider-tooltip * {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.rc-slider-tooltip-hidden {
|
||||
display: none;
|
||||
}
|
||||
.rc-slider-tooltip-placement-top {
|
||||
padding: 4px 0 8px 0;
|
||||
}
|
||||
.rc-slider-tooltip-inner {
|
||||
padding: 6px 2px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: #6c6c6c;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 4px #d9d9d9;
|
||||
}
|
||||
.rc-slider-tooltip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
margin-left: -4px;
|
||||
border-width: 4px 4px 0;
|
||||
border-top-color: #6c6c6c;
|
||||
}
|
||||
+116
-75
@@ -9,114 +9,155 @@ import Amp from './parameters/Amp';
|
||||
import LFO from './parameters/LFO';
|
||||
import { selectById } from './timbreSlice.js';
|
||||
|
||||
const style = {
|
||||
const timbreStyle = {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
};
|
||||
|
||||
const lineBreak = {
|
||||
width: '100%',
|
||||
};
|
||||
|
||||
export function Timbre(props) {
|
||||
const ids = useSelector((state) => selectById(state, props.id));
|
||||
return (
|
||||
<div style={style}>
|
||||
<div style={timbreStyle}>
|
||||
<VCO
|
||||
id={ids.vco1}
|
||||
waveforms={[
|
||||
'Saw',
|
||||
'Square',
|
||||
'Triangle',
|
||||
'Sine',
|
||||
'Vox Wave',
|
||||
'DWGS',
|
||||
'Noise',
|
||||
'Audio In',
|
||||
{ value: 'Saw' },
|
||||
{ value: 'Square' },
|
||||
{ value: 'Triangle' },
|
||||
{ value: 'Sine' },
|
||||
{ value: 'Vox Wave' },
|
||||
{ value: 'DWGS' },
|
||||
{ value: 'Noise' },
|
||||
{ value: 'Audio In' },
|
||||
]}
|
||||
dwgsOrModTypeName="DWGS"
|
||||
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',
|
||||
{ value: 'SynSine1' },
|
||||
{ value: 'SynSine2' },
|
||||
{ value: 'SynSine3' },
|
||||
{ value: 'SynSine4' },
|
||||
{ value: 'SynSine5' },
|
||||
{ value: 'SynSine6' },
|
||||
{ value: 'SynSine7' },
|
||||
{ value: 'SynBass1' },
|
||||
{ value: 'SynBass2' },
|
||||
{ value: 'SynBass3' },
|
||||
{ value: 'SynBass4' },
|
||||
{ value: 'SynBass5' },
|
||||
{ value: 'SynBass6' },
|
||||
{ value: 'SynBass7' },
|
||||
{ value: 'SynWave1' },
|
||||
{ value: 'SynWave2' },
|
||||
{ value: 'SynWave3' },
|
||||
{ value: 'SynWave4' },
|
||||
{ value: 'SynWave5' },
|
||||
{ value: 'SynWave6' },
|
||||
{ value: 'SynWave7' },
|
||||
{ value: 'SynWave8' },
|
||||
{ value: 'SynWave9' },
|
||||
{ value: '5thWave1' },
|
||||
{ value: '5thWave2' },
|
||||
{ value: '5thWave3' },
|
||||
{ value: 'Digi1' },
|
||||
{ value: 'Digi2' },
|
||||
{ value: 'Digi3' },
|
||||
{ value: 'Digi4' },
|
||||
{ value: 'Digi5' },
|
||||
{ value: 'Digi6' },
|
||||
{ value: 'Digi7' },
|
||||
{ value: 'Digi8' },
|
||||
{ value: 'Endless' },
|
||||
{ value: 'E.Piano1' },
|
||||
{ value: 'E.Piano2' },
|
||||
{ value: 'E.Piano3' },
|
||||
{ value: 'E.Piano4' },
|
||||
{ value: 'Organ1' },
|
||||
{ value: 'Organ2' },
|
||||
{ value: 'Organ3' },
|
||||
{ value: 'Organ4' },
|
||||
{ value: 'Organ5' },
|
||||
{ value: 'Organ6' },
|
||||
{ value: 'Organ7' },
|
||||
{ value: 'Clav1' },
|
||||
{ value: 'Clav2' },
|
||||
{ value: 'Guitar1' },
|
||||
{ value: 'Guitar2' },
|
||||
{ value: 'Guitar3' },
|
||||
{ value: 'Bass1' },
|
||||
{ value: 'Bass2' },
|
||||
{ value: 'Bass3' },
|
||||
{ value: 'Bass4' },
|
||||
{ value: 'Bass5' },
|
||||
{ value: 'Bell1' },
|
||||
{ value: 'Bell2' },
|
||||
{ value: 'Bell3' },
|
||||
{ value: 'Bell4' },
|
||||
{ value: 'Voice1' },
|
||||
{ value: 'Voice2' },
|
||||
{ value: 'Voice3' },
|
||||
{ value: 'Voice4' },
|
||||
]}
|
||||
/>
|
||||
<VCO
|
||||
id={ids.vco2}
|
||||
<<<<<<< HEAD
|
||||
waveforms={['Saw', 'Square', 'Triangle']}
|
||||
=======
|
||||
waveforms={[
|
||||
{ value: 'Saw' },
|
||||
{ value: 'Square' },
|
||||
{ value: 'Triangle' },
|
||||
]}
|
||||
>>>>>>> v2-styling-react-select
|
||||
dwgsOrModTypeName="Mod Type"
|
||||
dwgsOrModType={['Off', 'Ring', 'Sync', 'RingSync']}
|
||||
dwgsOrModType={[
|
||||
{ value: 'Off' },
|
||||
{ value: 'Ring' },
|
||||
{ value: 'Sync' },
|
||||
{ value: 'RingSync' },
|
||||
]}
|
||||
/>
|
||||
<Mixer id={ids.mixer} />
|
||||
<Pitch id={ids.pitch} />
|
||||
<Filter id={ids.filter} />
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
<div className="linebreak" style={lineBreak} />
|
||||
>>>>>>> v2-styling-react-select
|
||||
<EG id={ids.eg1} />
|
||||
<Amp id={ids.amp} />
|
||||
<EG id={ids.eg2} />
|
||||
<LFO
|
||||
id={ids.lfo1}
|
||||
<<<<<<< HEAD
|
||||
waveforms={['Saw', 'Square 1', 'Triangle', 'Sample & Hold']}
|
||||
/>
|
||||
<LFO
|
||||
id={ids.lfo2}
|
||||
waveforms={['Saw', 'Square 2', 'Sine', 'Sample & Hold']}
|
||||
=======
|
||||
waveforms={[
|
||||
{ value: 'Saw' },
|
||||
{ value: 'Square 1' },
|
||||
{ value: 'Triangle' },
|
||||
{ value: 'Sample & Hold' },
|
||||
]}
|
||||
/>
|
||||
<LFO
|
||||
id={ids.lfo2}
|
||||
waveforms={[
|
||||
{ value: 'Saw' },
|
||||
{ value: 'Square 2' },
|
||||
{ value: 'Sine' },
|
||||
{ value: 'Sample & Hold' },
|
||||
]}
|
||||
>>>>>>> v2-styling-react-select
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -10,6 +10,7 @@ export default function Amp(props) {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
Amp Level
|
||||
<Slider
|
||||
parameter={parameters.ampLevel}
|
||||
min={0}
|
||||
@@ -23,6 +24,7 @@ export default function Amp(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
PanPot
|
||||
<Slider
|
||||
parameter={parameters.panpot}
|
||||
min={-63}
|
||||
@@ -36,6 +38,7 @@ export default function Amp(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Amp Keyboard Tracking
|
||||
<Slider
|
||||
parameter={parameters.ampTrack}
|
||||
min={-63}
|
||||
@@ -49,6 +52,7 @@ export default function Amp(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Distortion
|
||||
<Checkbox
|
||||
parameter={parameters.distortion}
|
||||
onChange={(value) =>
|
||||
|
||||
@@ -10,6 +10,7 @@ export default function EG(props) {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
Attack
|
||||
<Slider
|
||||
parameter={parameters.attack}
|
||||
min={0}
|
||||
@@ -23,6 +24,7 @@ export default function EG(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Decay
|
||||
<Slider
|
||||
parameter={parameters.decay}
|
||||
min={0}
|
||||
@@ -36,6 +38,7 @@ export default function EG(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Sustain
|
||||
<Slider
|
||||
parameter={parameters.sustain}
|
||||
min={0}
|
||||
@@ -49,6 +52,7 @@ export default function EG(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Release
|
||||
<Slider
|
||||
parameter={parameters.release}
|
||||
min={0}
|
||||
@@ -62,6 +66,7 @@ export default function EG(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
EG Reset
|
||||
<Checkbox
|
||||
parameter={parameters.egReset}
|
||||
onChange={(value) =>
|
||||
|
||||
@@ -10,13 +10,14 @@ export default function Filter(props) {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
Filter Type
|
||||
<SelectList
|
||||
value={parameters.filterType}
|
||||
list={[
|
||||
'-24db Low Pass',
|
||||
'-12db Low Pass',
|
||||
'Band Pass',
|
||||
'High Pass',
|
||||
{ value: '-24db Low Pass' },
|
||||
{ value: '-12db Low Pass' },
|
||||
{ value: 'Band Pass' },
|
||||
{ value: 'High Pass' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
@@ -27,6 +28,7 @@ export default function Filter(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Cutoff
|
||||
<Slider
|
||||
parameter={parameters.cutoff}
|
||||
min={0}
|
||||
@@ -40,6 +42,7 @@ export default function Filter(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Resonance
|
||||
<Slider
|
||||
parameter={parameters.resonance}
|
||||
min={0}
|
||||
@@ -53,6 +56,7 @@ export default function Filter(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
EG Intensity
|
||||
<Slider
|
||||
parameter={parameters.egIntensity}
|
||||
min={-63}
|
||||
@@ -66,6 +70,7 @@ export default function Filter(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Keyboard Tracking
|
||||
<Slider
|
||||
parameter={parameters.keyboardTrack}
|
||||
min={-63}
|
||||
|
||||
@@ -10,6 +10,7 @@ export default function LFO(props) {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
LFO Waveform
|
||||
<SelectList
|
||||
value={parameters.waveform}
|
||||
list={props.waveforms}
|
||||
@@ -22,6 +23,7 @@ export default function LFO(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Key Sync
|
||||
<SelectList
|
||||
value={parameters.keySync}
|
||||
list={['Off', 'Timbre', 'Voice']}
|
||||
@@ -34,6 +36,7 @@ export default function LFO(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Tempo Sync
|
||||
<Checkbox
|
||||
parameter={parameters.tempoSync}
|
||||
onChange={(value) =>
|
||||
@@ -45,6 +48,7 @@ export default function LFO(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Frequency
|
||||
<Slider
|
||||
parameter={parameters.frequency}
|
||||
onChange={(value) =>
|
||||
|
||||
@@ -10,6 +10,7 @@ export default function Mixer(props) {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
Volume 1
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
@@ -23,6 +24,7 @@ export default function Mixer(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Volume 2
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
@@ -36,6 +38,7 @@ export default function Mixer(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
Volume 3
|
||||
<Slider
|
||||
className={styles.slider}
|
||||
min={0}
|
||||
|
||||
@@ -3,12 +3,39 @@
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10pt;
|
||||
margin: 2pt;
|
||||
padding: 16pt;
|
||||
margin: 10pt;
|
||||
border: solid 1pt black;
|
||||
width: 120px;
|
||||
flex-basis: 100%;
|
||||
width: 160px;
|
||||
height: 214px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.container > * {
|
||||
margin: 2.5pt 0;
|
||||
}
|
||||
|
||||
.pitchContainer {
|
||||
font-size: small;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 16pt 8pt 16pt 8pt;
|
||||
margin: 10pt;
|
||||
border: solid 1pt black;
|
||||
width: 420px;
|
||||
height: 214px;
|
||||
}
|
||||
.pitchContainer > .container {
|
||||
padding: 0 16pt;
|
||||
width: 100%;
|
||||
margin: 10pt 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 214px;
|
||||
width: 1px;
|
||||
background-color: black;
|
||||
margin: 0 4pt;
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ export default function Pitch(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<<<<<<< HEAD
|
||||
<div className={styles.container}>
|
||||
<SelectList
|
||||
value={parameters.voiceAssign}
|
||||
@@ -112,6 +113,128 @@ export default function Pitch(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
=======
|
||||
<div className={styles.pitchContainer}>
|
||||
<div className={styles.container}>
|
||||
Voice Assign
|
||||
<SelectList
|
||||
value={parameters.voiceAssign}
|
||||
list={[
|
||||
{ value: 'Mono' },
|
||||
{ value: 'Poly' },
|
||||
{ value: 'Unison' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { voiceAssign: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Trigger Mode
|
||||
<SelectList
|
||||
value={parameters.triggerMode}
|
||||
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { triggerMode: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Transpose
|
||||
<Slider
|
||||
parameter={parameters.transpose}
|
||||
min={-24}
|
||||
max={24}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { transpose: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.divider} />
|
||||
<div className={styles.container}>
|
||||
Tune
|
||||
<Slider
|
||||
parameter={parameters.tune}
|
||||
min={-50}
|
||||
max={50}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tune: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Unisone Detune
|
||||
<Slider
|
||||
parameter={parameters.unisonDetune}
|
||||
min={0}
|
||||
max={99}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { unisonDetune: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Portamento
|
||||
<Slider
|
||||
parameter={parameters.portamento}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { portamento: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Bend Range
|
||||
<Slider
|
||||
parameter={parameters.bendRange}
|
||||
min={-12}
|
||||
max={12}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { bendRange: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Vibrato Intensity
|
||||
<Slider
|
||||
parameter={parameters.vibratoIntensity}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vibratoIntensity: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
>>>>>>> v2-styling-react-select
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -33,28 +33,36 @@ const parametersSlice = createSlice({
|
||||
'vco1': {
|
||||
id: 'vco1',
|
||||
waveform: 'Saw',
|
||||
dwgsOrModType: 0,
|
||||
dwgsOrModType: 'SynWave1',
|
||||
waveMod: 0,
|
||||
lfoMod: 0,
|
||||
},
|
||||
'vco2': {
|
||||
id: 'vco2',
|
||||
waveform: 'Square',
|
||||
dwgsOrModType: 0,
|
||||
dwgsOrModType: 'Off',
|
||||
waveMod: 0,
|
||||
lfoMod: 0,
|
||||
},
|
||||
'vco3': {
|
||||
id: 'vco3',
|
||||
waveform: 'Sine',
|
||||
<<<<<<< HEAD
|
||||
dwgsOrModType: 0,
|
||||
=======
|
||||
dwgsOrModType: 'SynWave1',
|
||||
>>>>>>> v2-styling-react-select
|
||||
waveMod: 100,
|
||||
lfoMod: 0,
|
||||
},
|
||||
'vco4': {
|
||||
id: 'vco4',
|
||||
waveform: 'Triangle',
|
||||
<<<<<<< HEAD
|
||||
dwgsOrModType: 0,
|
||||
=======
|
||||
dwgsOrModType: 'Off',
|
||||
>>>>>>> v2-styling-react-select
|
||||
waveMod: 0,
|
||||
lfoMod: 100,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user