update UI files
This commit is contained in:
[poww10s]
+59
-27
@@ -1,5 +1,6 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Grommet, Box } from "grommet";
|
import { Grommet, Box } from "grommet";
|
||||||
|
import css from "styled-components";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
|
|
||||||
import FileIOComponent from "./components/FileIOComponent";
|
import FileIOComponent from "./components/FileIOComponent";
|
||||||
@@ -44,16 +45,16 @@ const theme = {
|
|||||||
"light": "#000000",
|
"light": "#000000",
|
||||||
},
|
},
|
||||||
"text-weak": {
|
"text-weak": {
|
||||||
"dark": "#CCCCCC",
|
dark: "#CCCCCC",
|
||||||
"light": "#444444",
|
light: "#444444",
|
||||||
},
|
},
|
||||||
"text-xweak": {
|
"text-xweak": {
|
||||||
"dark": "#999999",
|
dark: "#999999",
|
||||||
"light": "#666666",
|
light: "#666666",
|
||||||
},
|
},
|
||||||
"border": {
|
border: {
|
||||||
"dark": "#444444",
|
dark: "#444444",
|
||||||
"light": "#CCCCCC",
|
light: "#CCCCCC",
|
||||||
},
|
},
|
||||||
"control": "brand",
|
"control": "brand",
|
||||||
"active-background": "background-contrast",
|
"active-background": "background-contrast",
|
||||||
@@ -68,35 +69,66 @@ const theme = {
|
|||||||
"graph-0": "brand",
|
"graph-0": "brand",
|
||||||
"graph-1": "status-warning",
|
"graph-1": "status-warning",
|
||||||
},
|
},
|
||||||
"font": {
|
font: {
|
||||||
"family": "Fira Mono",
|
family: "Fira Mono",
|
||||||
},
|
},
|
||||||
"active": {
|
active: {
|
||||||
"background": "active-background",
|
background: "active-background",
|
||||||
"color": "active-text",
|
color: "active-text",
|
||||||
},
|
},
|
||||||
"hover": {
|
hover: {
|
||||||
"background": "active-background",
|
background: "active-background",
|
||||||
"color": "active-text",
|
color: "active-text",
|
||||||
},
|
},
|
||||||
"selected": {
|
selected: {
|
||||||
"background": "selected-background",
|
background: "selected-background",
|
||||||
"color": "selected-text",
|
color: "selected-text",
|
||||||
},
|
},
|
||||||
"focus": {
|
focus: {
|
||||||
"outline": {
|
outline: {
|
||||||
"size": "0",
|
size: "0",
|
||||||
},
|
},
|
||||||
"shadow:": {
|
shadow: {
|
||||||
"size": 0,
|
size: 0,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
"chart": {},
|
tab: {
|
||||||
"diagram": {
|
background: {
|
||||||
"line": {},
|
color: "light-1",
|
||||||
|
},
|
||||||
|
color: "dark",
|
||||||
|
border: undefined,
|
||||||
|
active: {
|
||||||
|
background: "brand",
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
background: "brand",
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
pad: "small",
|
||||||
|
extend: () =>
|
||||||
|
`
|
||||||
|
transition: background 0.5s ease, color 0.5s ease;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
|
||||||
|
`,
|
||||||
},
|
},
|
||||||
"meter": {},
|
tabs: {
|
||||||
|
header: {
|
||||||
|
background: "dark-1",
|
||||||
|
extend: () => `
|
||||||
|
padding: 10px;
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
background: "light-3",
|
||||||
|
},
|
||||||
|
chart: {},
|
||||||
|
diagram: {
|
||||||
|
line: {},
|
||||||
|
},
|
||||||
|
meter: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
// converts SYSEX file to the dump format the system uses (and the implementation refers to)
|
// converts SYSEX file to the dump format the system uses (and the implementation refers to)
|
||||||
|
|||||||
@@ -1,7 +1,11 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React from "react";
|
||||||
import { Collapsible, Tab, Tabs, Grid, Box } from "grommet";
|
import { Tab, Tabs, Box } from "grommet";
|
||||||
|
|
||||||
import TimbreComponent from "./TimbreComponent";
|
import {
|
||||||
|
TimbreComponent,
|
||||||
|
VocoderComponent,
|
||||||
|
EffectsComponent,
|
||||||
|
} from "./EditorTabComponent";
|
||||||
|
|
||||||
function EditorComponent(props) {
|
function EditorComponent(props) {
|
||||||
return (
|
return (
|
||||||
@@ -11,15 +15,46 @@ function EditorComponent(props) {
|
|||||||
fill
|
fill
|
||||||
direction="column"
|
direction="column"
|
||||||
overflow="hidden">
|
overflow="hidden">
|
||||||
<Tabs>
|
<Tabs fill="horizontal">
|
||||||
<Tab title="Timbre 1">
|
<Tab title="Timbre 1">
|
||||||
<Box pad="medium" align="center" justify="center">
|
<Box
|
||||||
<TimbreComponent />
|
key="timbre1"
|
||||||
|
pad="medium"
|
||||||
|
align="center"
|
||||||
|
justify="center"
|
||||||
|
animation={{ type: "zoomIn", duration: 200 }}>
|
||||||
|
<TimbreComponent key={1} />
|
||||||
</Box>
|
</Box>
|
||||||
</Tab>
|
</Tab>
|
||||||
<Tab title="Timbre 2"></Tab>
|
<Tab title="Timbre 2">
|
||||||
<Tab title="Vocoder"></Tab>
|
<Box
|
||||||
<Tab title="Effects"></Tab>
|
key="timbre2"
|
||||||
|
pad="medium"
|
||||||
|
align="center"
|
||||||
|
justify="center"
|
||||||
|
animation={{ type: "zoomIn", duration: 200 }}>
|
||||||
|
<TimbreComponent key={2} />
|
||||||
|
</Box>
|
||||||
|
</Tab>
|
||||||
|
<Tab title="Vocoder">
|
||||||
|
<Box
|
||||||
|
pad="medium"
|
||||||
|
align="center"
|
||||||
|
justify="center"
|
||||||
|
animation={{ type: "zoomIn", duration: 200 }}>
|
||||||
|
<VocoderComponent key={3} />
|
||||||
|
</Box>
|
||||||
|
</Tab>
|
||||||
|
<Tab title="Effects">
|
||||||
|
<Box
|
||||||
|
pad="medium"
|
||||||
|
align="center"
|
||||||
|
justify="center"
|
||||||
|
animation={{ type: "zoomIn", duration: 200 }}>
|
||||||
|
<EffectsComponent key={4} />
|
||||||
|
</Box>
|
||||||
|
</Tab>
|
||||||
|
|
||||||
<Tab title="Arpeggio"></Tab>
|
<Tab title="Arpeggio"></Tab>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,13 +1,33 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
const Form = styled.form`
|
||||||
|
position: absolute;
|
||||||
|
padding: 25px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledLabel = styled.label`
|
||||||
|
color: #333333;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.25s ease, color 0.25s ease;
|
||||||
|
&:hover {
|
||||||
|
background: #6600cc;
|
||||||
|
color: #eeeeee;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
function FileIOComponent(props) {
|
function FileIOComponent(props) {
|
||||||
const fileInput = React.useRef();
|
const fileInput = React.useRef(null);
|
||||||
|
const [text, setText] = useState("Upload a Sysex File");
|
||||||
// on file load, verify correct file format
|
// on file load, verify correct file format
|
||||||
const getFile = (event) => {
|
const getFile = (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
let reader = new FileReader();
|
let reader = new FileReader();
|
||||||
reader.onload = (e) => {
|
reader.onload = (e) => {
|
||||||
|
setText("File Loaded");
|
||||||
props.getBinaryData(new Uint8Array(e.target.result));
|
props.getBinaryData(new Uint8Array(e.target.result));
|
||||||
};
|
};
|
||||||
reader.readAsArrayBuffer(fileInput.current.files[0]);
|
reader.readAsArrayBuffer(fileInput.current.files[0]);
|
||||||
@@ -16,12 +36,26 @@ function FileIOComponent(props) {
|
|||||||
// on submit button press, pass the file to the parent component
|
// on submit button press, pass the file to the parent component
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form>
|
<Form>
|
||||||
<label>
|
<StyledLabel htmlFor="file">
|
||||||
Upload a Sysex File:
|
{fileInput.current !== null ? text : "Upload a Sysex File"}
|
||||||
<input type="file" ref={fileInput} onChange={getFile} />
|
</StyledLabel>
|
||||||
</label>
|
<input
|
||||||
</form>
|
style={{
|
||||||
|
width: "0.1px",
|
||||||
|
height: "0.1px",
|
||||||
|
opacity: 0,
|
||||||
|
overflow: "hidden",
|
||||||
|
position: "absolute",
|
||||||
|
zIndex: "-1",
|
||||||
|
}}
|
||||||
|
name="file"
|
||||||
|
type="file"
|
||||||
|
id="file"
|
||||||
|
ref={fileInput}
|
||||||
|
onChange={getFile}
|
||||||
|
/>
|
||||||
|
</Form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,426 +0,0 @@
|
|||||||
import React, { useReducer } from "react";
|
|
||||||
import { Text, Stack, Heading, RangeInput, Select, Box, Grid } from "grommet";
|
|
||||||
|
|
||||||
const reducer = (state, action) => action;
|
|
||||||
|
|
||||||
const LabeledSlider = (props) => (
|
|
||||||
<Grid
|
|
||||||
columns={["xsmall", "small"]}
|
|
||||||
rows={["xxxsmall"]}
|
|
||||||
areas={[
|
|
||||||
{ "name": "text", "start": [0, 0], "end": [0, 0] },
|
|
||||||
{ "name": "sliders", "start": [1, 0], "end": [1, 0] },
|
|
||||||
]}>
|
|
||||||
<Box align="center" justify="stretch" direction="row" gridArea="text">
|
|
||||||
<Text size="small" textAlign="start" weight="bold" truncate={false}>
|
|
||||||
{props.label}
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
align="center"
|
|
||||||
justify="center"
|
|
||||||
direction="row"
|
|
||||||
fill="horizontal"
|
|
||||||
gridArea="sliders">
|
|
||||||
<RangeInput
|
|
||||||
max={props.max}
|
|
||||||
min={props.min}
|
|
||||||
step={props.step}
|
|
||||||
value={props.value}
|
|
||||||
onChange={(e) => props.onChange(e.target.value)}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Grid>
|
|
||||||
);
|
|
||||||
|
|
||||||
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" }}>
|
|
||||||
<Box
|
|
||||||
align="center"
|
|
||||||
justify="start"
|
|
||||||
fill="horizontal"
|
|
||||||
direction="row"
|
|
||||||
gap="small">
|
|
||||||
<LabeledSlider
|
|
||||||
label="Waveform"
|
|
||||||
max={127}
|
|
||||||
min={0}
|
|
||||||
step={1}
|
|
||||||
value={waveform}
|
|
||||||
onChange={wfDispatch}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
align="center"
|
|
||||||
justify="start"
|
|
||||||
direction="row"
|
|
||||||
fill="horizontal"
|
|
||||||
gap="small">
|
|
||||||
<LabeledSlider
|
|
||||||
label="LFO Mod"
|
|
||||||
max={127}
|
|
||||||
min={0}
|
|
||||||
step={1}
|
|
||||||
value={mod}
|
|
||||||
onChange={modDispatch}
|
|
||||||
/>
|
|
||||||
</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"
|
|
||||||
direction="column"
|
|
||||||
gap="medium"
|
|
||||||
fill="horizontal"
|
|
||||||
margin={{ "top": "medium" }}>
|
|
||||||
<Box
|
|
||||||
align="center"
|
|
||||||
justify="start"
|
|
||||||
fill="horizontal"
|
|
||||||
direction="row"
|
|
||||||
gap="small">
|
|
||||||
<LabeledSlider
|
|
||||||
label="Waveform"
|
|
||||||
max={127}
|
|
||||||
min={0}
|
|
||||||
step={1}
|
|
||||||
value={waveform}
|
|
||||||
onChange={wfDispatch}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<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>
|
|
||||||
<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" }}
|
|
||||||
direction="column"
|
|
||||||
elevation="small"
|
|
||||||
round="small"
|
|
||||||
pad={{ "top": "large", "bottom": "medium" }}>
|
|
||||||
<Box
|
|
||||||
align="center"
|
|
||||||
justify="center"
|
|
||||||
pad={{ "top": "small", "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) {
|
|
||||||
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 (
|
|
||||||
<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={["Mono", "Poly", "Unison"]}
|
|
||||||
plain={false}
|
|
||||||
multiple={false}
|
|
||||||
name="voice-assign"
|
|
||||||
placeholder="Voice Assign"
|
|
||||||
/>
|
|
||||||
<Select
|
|
||||||
options={["Single", "Multi"]}
|
|
||||||
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>
|
|
||||||
<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;
|
|
||||||
@@ -1,5 +1,4 @@
|
|||||||
body {
|
body {
|
||||||
overflow: hidden;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
|
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
|
||||||
|
|||||||
Reference in New Issue
Block a user