fix formatting; add to pitch section
This commit is contained in:
[poww10s]
@@ -4,28 +4,33 @@ import { Text, Stack, Heading, RangeInput, Select, Box, Grid } from "grommet";
|
|||||||
const reducer = (state, action) => action;
|
const reducer = (state, action) => action;
|
||||||
|
|
||||||
const LabeledSlider = (props) => (
|
const LabeledSlider = (props) => (
|
||||||
<Box
|
<Grid
|
||||||
align="center"
|
columns={["xsmall", "small"]}
|
||||||
justify="start"
|
rows={["xxxsmall"]}
|
||||||
direction="row"
|
areas={[
|
||||||
fill="horizontal"
|
{ "name": "text", "start": [0, 0], "end": [0, 0] },
|
||||||
wrap={false}
|
{ "name": "sliders", "start": [1, 0], "end": [1, 0] },
|
||||||
gap={props.gap}>
|
]}>
|
||||||
<Text
|
<Box align="center" justify="stretch" direction="row" gridArea="text">
|
||||||
weight="bold"
|
<Text size="small" textAlign="start" weight="bold" truncate={false}>
|
||||||
truncate={false}
|
{props.label}
|
||||||
style={{ "whiteSpace": "nowrap" }}
|
</Text>
|
||||||
margin="xsmall">
|
</Box>
|
||||||
{props.label}
|
<Box
|
||||||
</Text>
|
align="center"
|
||||||
<RangeInput
|
justify="center"
|
||||||
max={props.max}
|
direction="row"
|
||||||
min={props.min}
|
fill="horizontal"
|
||||||
step={props.step}
|
gridArea="sliders">
|
||||||
value={props.value}
|
<RangeInput
|
||||||
onChange={(e) => props.onChange(e.target.value)}
|
max={props.max}
|
||||||
/>
|
min={props.min}
|
||||||
</Box>
|
step={props.step}
|
||||||
|
value={props.value}
|
||||||
|
onChange={(e) => props.onChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
);
|
);
|
||||||
|
|
||||||
function VCO1(props) {
|
function VCO1(props) {
|
||||||
@@ -87,24 +92,20 @@ function VCO1(props) {
|
|||||||
direction="column"
|
direction="column"
|
||||||
gap="medium"
|
gap="medium"
|
||||||
fill="horizontal"
|
fill="horizontal"
|
||||||
margin={{ "top": "medium" }}
|
margin={{ "top": "medium" }}>
|
||||||
pad="xsmall">
|
|
||||||
<Box
|
<Box
|
||||||
align="center"
|
align="center"
|
||||||
justify="start"
|
justify="start"
|
||||||
fill="horizontal"
|
fill="horizontal"
|
||||||
direction="row"
|
direction="row"
|
||||||
gap="small">
|
gap="small">
|
||||||
<Text weight="bold">Waveform</Text>
|
<LabeledSlider
|
||||||
<RangeInput
|
label="Waveform"
|
||||||
style={{ "spacing": 16 }}
|
|
||||||
max={127}
|
max={127}
|
||||||
min={0}
|
min={0}
|
||||||
step={1}
|
step={1}
|
||||||
value={waveform}
|
value={waveform}
|
||||||
onChange={(e) => {
|
onChange={wfDispatch}
|
||||||
wfDispatch(e.target.value);
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
<Box
|
<Box
|
||||||
@@ -112,23 +113,14 @@ function VCO1(props) {
|
|||||||
justify="start"
|
justify="start"
|
||||||
direction="row"
|
direction="row"
|
||||||
fill="horizontal"
|
fill="horizontal"
|
||||||
wrap={false}
|
gap="small">
|
||||||
gap="medium">
|
<LabeledSlider
|
||||||
<Text
|
label="LFO Mod"
|
||||||
textAlign="start"
|
|
||||||
weight="bold"
|
|
||||||
truncate={false}
|
|
||||||
style={{ "whiteSpace": "nowrap" }}>
|
|
||||||
LFO Mod
|
|
||||||
</Text>
|
|
||||||
<RangeInput
|
|
||||||
max={127}
|
max={127}
|
||||||
min={0}
|
min={0}
|
||||||
step={1}
|
step={1}
|
||||||
value={mod}
|
value={mod}
|
||||||
onChange={(e) => {
|
onChange={modDispatch}
|
||||||
modDispatch(e.target.value);
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
@@ -185,26 +177,41 @@ function VCO2(props) {
|
|||||||
<Box
|
<Box
|
||||||
align="center"
|
align="center"
|
||||||
justify="center"
|
justify="center"
|
||||||
gap="small"
|
direction="column"
|
||||||
|
gap="medium"
|
||||||
fill="horizontal"
|
fill="horizontal"
|
||||||
flex>
|
margin={{ "top": "medium" }}>
|
||||||
<LabeledSlider
|
<Box
|
||||||
label="Waveform"
|
align="center"
|
||||||
max={127}
|
justify="start"
|
||||||
min={0}
|
fill="horizontal"
|
||||||
step={1}
|
direction="row"
|
||||||
value={waveform}
|
gap="small">
|
||||||
onChange={wfDispatch}
|
<LabeledSlider
|
||||||
/>
|
label="Waveform"
|
||||||
<LabeledSlider
|
max={127}
|
||||||
label="LFO Mod"
|
min={0}
|
||||||
gap="small"
|
step={1}
|
||||||
max={127}
|
value={waveform}
|
||||||
min={0}
|
onChange={wfDispatch}
|
||||||
step={1}
|
/>
|
||||||
value={mod}
|
</Box>
|
||||||
onChange={modDispatch}
|
<Box
|
||||||
/>
|
align="center"
|
||||||
|
justify="start"
|
||||||
|
fill="horizontal"
|
||||||
|
direction="row"
|
||||||
|
gap="small">
|
||||||
|
<LabeledSlider
|
||||||
|
label="LFO Mod"
|
||||||
|
gap="small"
|
||||||
|
max={127}
|
||||||
|
min={0}
|
||||||
|
step={1}
|
||||||
|
value={mod}
|
||||||
|
onChange={modDispatch}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
@@ -232,16 +239,14 @@ function Mixer(props) {
|
|||||||
align="center"
|
align="center"
|
||||||
justify="center"
|
justify="center"
|
||||||
background={{ "color": "background" }}
|
background={{ "color": "background" }}
|
||||||
pad="medium"
|
|
||||||
gap="medium"
|
|
||||||
direction="column"
|
direction="column"
|
||||||
elevation="small"
|
elevation="small"
|
||||||
round="small">
|
round="small"
|
||||||
|
pad={{ "top": "large", "bottom": "medium" }}>
|
||||||
<Box
|
<Box
|
||||||
align="center"
|
align="center"
|
||||||
justify="center"
|
justify="center"
|
||||||
pad={{ "horizontal": "medium" }}
|
pad={{ "top": "small", "horizontal": "medium" }}
|
||||||
margin={{ "top": "medium", "horizontal": "medium" }}
|
|
||||||
fill="horizontal"
|
fill="horizontal"
|
||||||
gap="small">
|
gap="small">
|
||||||
<LabeledSlider
|
<LabeledSlider
|
||||||
@@ -284,23 +289,100 @@ function Mixer(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function Pitch(props) {
|
function Pitch(props) {
|
||||||
|
const [uniTune, setUniTune] = useReducer(reducer, 0);
|
||||||
|
const [tune, setTune] = useReducer(reducer, 0);
|
||||||
|
const [transpose, setTranspose] = useReducer(reducer, 0);
|
||||||
|
const [portamento, setPortamento] = useReducer(reducer, 0);
|
||||||
|
const [bend, setBend] = useReducer(reducer, 0);
|
||||||
|
const [vInt, setVInt] = useReducer(reducer, 0);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack fill anchor="top-left" guidingChild="first">
|
<Stack fill anchor="top-left" guidingChild="first">
|
||||||
<Box
|
<Box
|
||||||
align="center"
|
align="center"
|
||||||
justify="center"
|
justify="center"
|
||||||
|
background={{ "color": "background" }}
|
||||||
|
gridArea="VCO2"
|
||||||
|
pad="large"
|
||||||
|
gap="medium"
|
||||||
|
direction="column"
|
||||||
elevation="small"
|
elevation="small"
|
||||||
round="small"
|
round="small"
|
||||||
fill>
|
fill>
|
||||||
<Box align="center" justify="center" gap="medium">
|
<Box
|
||||||
|
align="center"
|
||||||
|
justify="center"
|
||||||
|
fill="horizontal"
|
||||||
|
gap="small">
|
||||||
<Select
|
<Select
|
||||||
options={["Mono", "Poly", "Unison"]}
|
options={["Mono", "Poly", "Unison"]}
|
||||||
|
plain={false}
|
||||||
|
multiple={false}
|
||||||
|
name="voice-assign"
|
||||||
placeholder="Voice Assign"
|
placeholder="Voice Assign"
|
||||||
/>
|
/>
|
||||||
<Select
|
<Select
|
||||||
options={["Single", "Multi"]}
|
options={["Single", "Multi"]}
|
||||||
placeholder="Trigger Assign"
|
plain={false}
|
||||||
|
multiple={false}
|
||||||
|
name="trigger-mode"
|
||||||
|
placeholder="Trigger Mode"
|
||||||
/>
|
/>
|
||||||
|
<Box
|
||||||
|
align="center"
|
||||||
|
justify="start"
|
||||||
|
direction="column"
|
||||||
|
fill="horizontal"
|
||||||
|
gap="small">
|
||||||
|
<LabeledSlider
|
||||||
|
label="Transpose"
|
||||||
|
max={24}
|
||||||
|
min={-24}
|
||||||
|
step={1}
|
||||||
|
value={transpose}
|
||||||
|
onChange={setTranspose}
|
||||||
|
/>
|
||||||
|
<LabeledSlider
|
||||||
|
label="Tune"
|
||||||
|
max={50}
|
||||||
|
min={-50}
|
||||||
|
step={1}
|
||||||
|
value={tune}
|
||||||
|
onChange={setTune}
|
||||||
|
/>
|
||||||
|
<LabeledSlider
|
||||||
|
label="Unison Detune"
|
||||||
|
max={99}
|
||||||
|
min={0}
|
||||||
|
step={1}
|
||||||
|
value={uniTune}
|
||||||
|
onChange={setUniTune}
|
||||||
|
/>
|
||||||
|
<LabeledSlider
|
||||||
|
label="Portamento"
|
||||||
|
max={127}
|
||||||
|
min={0}
|
||||||
|
step={1}
|
||||||
|
value={portamento}
|
||||||
|
onChange={setPortamento}
|
||||||
|
/>
|
||||||
|
<LabeledSlider
|
||||||
|
label="Bend Range"
|
||||||
|
max={12}
|
||||||
|
min={-12}
|
||||||
|
step={1}
|
||||||
|
value={bend}
|
||||||
|
onChange={setBend}
|
||||||
|
/>
|
||||||
|
<LabeledSlider
|
||||||
|
label="Vibrato Int"
|
||||||
|
max={63}
|
||||||
|
min={-63}
|
||||||
|
step={1}
|
||||||
|
value={vInt}
|
||||||
|
onChange={setVInt}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
<Heading
|
<Heading
|
||||||
|
|||||||
Reference in New Issue
Block a user