update timbre-ui
This commit is contained in:
[poww10s]
@@ -0,0 +1,344 @@
|
||||
import React, { useReducer } from "react";
|
||||
import { Text, Stack, Heading, RangeInput, Select, Box, Grid } from "grommet";
|
||||
|
||||
const reducer = (state, action) => action;
|
||||
|
||||
const LabeledSlider = (props) => (
|
||||
<Box
|
||||
align="center"
|
||||
justify="start"
|
||||
direction="row"
|
||||
fill="horizontal"
|
||||
wrap={false}
|
||||
gap={props.gap}>
|
||||
<Text
|
||||
weight="bold"
|
||||
truncate={false}
|
||||
style={{ "whiteSpace": "nowrap" }}
|
||||
margin="xsmall">
|
||||
{props.label}
|
||||
</Text>
|
||||
<RangeInput
|
||||
max={props.max}
|
||||
min={props.min}
|
||||
step={props.step}
|
||||
value={props.value}
|
||||
onChange={(e) => props.onChange(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
function VCO1(props) {
|
||||
const [waveform, wfDispatch] = useReducer(reducer, 0);
|
||||
const [mod, modDispatch] = useReducer(reducer, 0);
|
||||
return (
|
||||
<Stack fill anchor="top-left" guidingChild="first">
|
||||
<Box
|
||||
align="center"
|
||||
justify="center"
|
||||
background={{ "color": "background" }}
|
||||
gridArea="VCO1"
|
||||
pad="large"
|
||||
gap="medium"
|
||||
direction="column"
|
||||
elevation="small"
|
||||
round="small"
|
||||
fill>
|
||||
<Box
|
||||
align="center"
|
||||
justify="center"
|
||||
fill="horizontal"
|
||||
gap="small">
|
||||
<Select
|
||||
options={[
|
||||
"Saw",
|
||||
"Square",
|
||||
"Triangle",
|
||||
"Sine",
|
||||
"Vox Wave",
|
||||
"DWGS",
|
||||
"Noise",
|
||||
"Audio In",
|
||||
]}
|
||||
plain={false}
|
||||
multiple={false}
|
||||
name="Wave-Select"
|
||||
placeholder="Wave Type"
|
||||
/>
|
||||
<Select
|
||||
options={[
|
||||
"Saw",
|
||||
"Square",
|
||||
"Triangle",
|
||||
"Sine",
|
||||
"Vox Wave",
|
||||
"DWGS",
|
||||
"Noise",
|
||||
"Audio In",
|
||||
]}
|
||||
plain={false}
|
||||
multiple={false}
|
||||
name="DWGS-Wave-Select"
|
||||
placeholder="DWGS Wave"
|
||||
/>
|
||||
<Box
|
||||
align="center"
|
||||
justify="center"
|
||||
direction="column"
|
||||
gap="medium"
|
||||
fill="horizontal"
|
||||
margin={{ "top": "medium" }}
|
||||
pad="xsmall">
|
||||
<Box
|
||||
align="center"
|
||||
justify="start"
|
||||
fill="horizontal"
|
||||
direction="row"
|
||||
gap="small">
|
||||
<Text weight="bold">Waveform</Text>
|
||||
<RangeInput
|
||||
style={{ "spacing": 16 }}
|
||||
max={127}
|
||||
min={0}
|
||||
step={1}
|
||||
value={waveform}
|
||||
onChange={(e) => {
|
||||
wfDispatch(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
align="center"
|
||||
justify="start"
|
||||
direction="row"
|
||||
fill="horizontal"
|
||||
wrap={false}
|
||||
gap="medium">
|
||||
<Text
|
||||
textAlign="start"
|
||||
weight="bold"
|
||||
truncate={false}
|
||||
style={{ "whiteSpace": "nowrap" }}>
|
||||
LFO Mod
|
||||
</Text>
|
||||
<RangeInput
|
||||
max={127}
|
||||
min={0}
|
||||
step={1}
|
||||
value={mod}
|
||||
onChange={(e) => {
|
||||
modDispatch(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Heading
|
||||
level="2"
|
||||
size="small"
|
||||
textAlign="start"
|
||||
truncate={false}
|
||||
margin={{ "left": "small", "top": "xsmall" }}
|
||||
color="text">
|
||||
VCO 1
|
||||
</Heading>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function VCO2(props) {
|
||||
const [waveform, wfDispatch] = useReducer(reducer, 0);
|
||||
const [mod, modDispatch] = useReducer(reducer, 0);
|
||||
return (
|
||||
<Stack fill anchor="top-left" guidingChild="first">
|
||||
<Box
|
||||
align="center"
|
||||
justify="center"
|
||||
background={{ "color": "background" }}
|
||||
gridArea="VCO2"
|
||||
pad="large"
|
||||
gap="medium"
|
||||
direction="column"
|
||||
elevation="small"
|
||||
round="small"
|
||||
fill>
|
||||
<Box
|
||||
align="center"
|
||||
justify="center"
|
||||
fill="horizontal"
|
||||
gap="small">
|
||||
<Select
|
||||
options={["Saw", "Square", "Triangle"]}
|
||||
plain={false}
|
||||
multiple={false}
|
||||
name="Wave Select"
|
||||
placeholder="Wave Type"
|
||||
/>
|
||||
<Select
|
||||
options={["Off", "Ring", "Sync", "Ring-Sync"]}
|
||||
plain={false}
|
||||
multiple={false}
|
||||
name="Mod Select"
|
||||
placeholder="Mod Select"
|
||||
/>
|
||||
<Box
|
||||
align="center"
|
||||
justify="center"
|
||||
gap="small"
|
||||
fill="horizontal"
|
||||
flex>
|
||||
<LabeledSlider
|
||||
label="Waveform"
|
||||
max={127}
|
||||
min={0}
|
||||
step={1}
|
||||
value={waveform}
|
||||
onChange={wfDispatch}
|
||||
/>
|
||||
<LabeledSlider
|
||||
label="LFO Mod"
|
||||
gap="small"
|
||||
max={127}
|
||||
min={0}
|
||||
step={1}
|
||||
value={mod}
|
||||
onChange={modDispatch}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Heading
|
||||
level="2"
|
||||
size="small"
|
||||
textAlign="start"
|
||||
truncate={false}
|
||||
margin={{ "left": "small", "top": "xsmall" }}
|
||||
color="text">
|
||||
VCO 2
|
||||
</Heading>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function Mixer(props) {
|
||||
const [vol1, setVol1] = useReducer(reducer, 127);
|
||||
const [vol2, setVol2] = useReducer(reducer, 0);
|
||||
const [vol3, setVol3] = useReducer(reducer, 0);
|
||||
|
||||
return (
|
||||
<Stack anchor="top-left" guidingChild="first" fill>
|
||||
<Box
|
||||
align="center"
|
||||
justify="center"
|
||||
background={{ "color": "background" }}
|
||||
pad="medium"
|
||||
gap="medium"
|
||||
direction="column"
|
||||
elevation="small"
|
||||
round="small">
|
||||
<Box
|
||||
align="center"
|
||||
justify="center"
|
||||
pad={{ "horizontal": "medium" }}
|
||||
margin={{ "top": "medium", "horizontal": "medium" }}
|
||||
fill="horizontal"
|
||||
gap="small">
|
||||
<LabeledSlider
|
||||
label="OSC 1"
|
||||
max={127}
|
||||
min={0}
|
||||
step={1}
|
||||
value={vol1}
|
||||
onChange={setVol1}
|
||||
/>
|
||||
<LabeledSlider
|
||||
label="OSC 2"
|
||||
max={127}
|
||||
min={0}
|
||||
step={1}
|
||||
value={vol2}
|
||||
onChange={setVol2}
|
||||
/>
|
||||
<LabeledSlider
|
||||
label="Noise"
|
||||
max={127}
|
||||
min={0}
|
||||
step={1}
|
||||
value={vol3}
|
||||
onChange={setVol3}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Heading
|
||||
level="2"
|
||||
size="small"
|
||||
textAlign="start"
|
||||
truncate={false}
|
||||
margin={{ "left": "small", "top": "xsmall" }}
|
||||
color="text">
|
||||
Mixer
|
||||
</Heading>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function Pitch(props) {
|
||||
return (
|
||||
<Stack fill anchor="top-left" guidingChild="first">
|
||||
<Box
|
||||
align="center"
|
||||
justify="center"
|
||||
elevation="small"
|
||||
round="small"
|
||||
fill>
|
||||
<Box align="center" justify="center" gap="medium">
|
||||
<Select
|
||||
options={["Mono", "Poly", "Unison"]}
|
||||
placeholder="Voice Assign"
|
||||
/>
|
||||
<Select
|
||||
options={["Single", "Multi"]}
|
||||
placeholder="Trigger Assign"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Heading
|
||||
textAlign="start"
|
||||
size="small"
|
||||
level="2"
|
||||
margin={{ "top": "xsmall", "left": "small" }}>
|
||||
Timbre/Pitch
|
||||
</Heading>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
const TimbreComponent = (props) => (
|
||||
<Grid
|
||||
rows={["small", "xsmall", "small", "xsmall", "small", "small"]}
|
||||
columns={["medium", "medium", "medium", "medium"]}
|
||||
areas={[
|
||||
{ "name": "VCO1", "start": [0, 0], "end": [0, 1] },
|
||||
{ "name": "VCO2", "start": [0, 2], "end": [0, 3] },
|
||||
{ "name": "Mixer", "start": [1, 0], "end": [1, 0] },
|
||||
{ "name": "Pitch", "start": [1, 1], "end": [1, 3] },
|
||||
]}
|
||||
gap="medium"
|
||||
fill="vertical">
|
||||
<Box align="center" justify="center" gridArea="VCO1">
|
||||
<VCO1 />
|
||||
</Box>
|
||||
<Box align="center" justify="center" gridArea="VCO2">
|
||||
<VCO2 />
|
||||
</Box>
|
||||
<Box align="center" justify="center" gridArea="Mixer">
|
||||
<Mixer />
|
||||
</Box>
|
||||
<Box align="center" justify="center" gridArea="Pitch">
|
||||
<Pitch></Pitch>
|
||||
</Box>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
export default TimbreComponent;
|
||||
Reference in New Issue
Block a user