update UI files
This commit is contained in:
[poww10s]
+59
-27
@@ -1,5 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
import { Grommet, Box } from "grommet";
|
||||
import css from "styled-components";
|
||||
import "./App.css";
|
||||
|
||||
import FileIOComponent from "./components/FileIOComponent";
|
||||
@@ -44,16 +45,16 @@ const theme = {
|
||||
"light": "#000000",
|
||||
},
|
||||
"text-weak": {
|
||||
"dark": "#CCCCCC",
|
||||
"light": "#444444",
|
||||
dark: "#CCCCCC",
|
||||
light: "#444444",
|
||||
},
|
||||
"text-xweak": {
|
||||
"dark": "#999999",
|
||||
"light": "#666666",
|
||||
dark: "#999999",
|
||||
light: "#666666",
|
||||
},
|
||||
"border": {
|
||||
"dark": "#444444",
|
||||
"light": "#CCCCCC",
|
||||
border: {
|
||||
dark: "#444444",
|
||||
light: "#CCCCCC",
|
||||
},
|
||||
"control": "brand",
|
||||
"active-background": "background-contrast",
|
||||
@@ -68,35 +69,66 @@ const theme = {
|
||||
"graph-0": "brand",
|
||||
"graph-1": "status-warning",
|
||||
},
|
||||
"font": {
|
||||
"family": "Fira Mono",
|
||||
font: {
|
||||
family: "Fira Mono",
|
||||
},
|
||||
"active": {
|
||||
"background": "active-background",
|
||||
"color": "active-text",
|
||||
active: {
|
||||
background: "active-background",
|
||||
color: "active-text",
|
||||
},
|
||||
"hover": {
|
||||
"background": "active-background",
|
||||
"color": "active-text",
|
||||
hover: {
|
||||
background: "active-background",
|
||||
color: "active-text",
|
||||
},
|
||||
"selected": {
|
||||
"background": "selected-background",
|
||||
"color": "selected-text",
|
||||
selected: {
|
||||
background: "selected-background",
|
||||
color: "selected-text",
|
||||
},
|
||||
"focus": {
|
||||
"outline": {
|
||||
"size": "0",
|
||||
focus: {
|
||||
outline: {
|
||||
size: "0",
|
||||
},
|
||||
"shadow:": {
|
||||
"size": 0,
|
||||
shadow: {
|
||||
size: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
"chart": {},
|
||||
"diagram": {
|
||||
"line": {},
|
||||
tab: {
|
||||
background: {
|
||||
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)
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Collapsible, Tab, Tabs, Grid, Box } from "grommet";
|
||||
import React from "react";
|
||||
import { Tab, Tabs, Box } from "grommet";
|
||||
|
||||
import TimbreComponent from "./TimbreComponent";
|
||||
import {
|
||||
TimbreComponent,
|
||||
VocoderComponent,
|
||||
EffectsComponent,
|
||||
} from "./EditorTabComponent";
|
||||
|
||||
function EditorComponent(props) {
|
||||
return (
|
||||
@@ -11,15 +15,46 @@ function EditorComponent(props) {
|
||||
fill
|
||||
direction="column"
|
||||
overflow="hidden">
|
||||
<Tabs>
|
||||
<Tabs fill="horizontal">
|
||||
<Tab title="Timbre 1">
|
||||
<Box pad="medium" align="center" justify="center">
|
||||
<TimbreComponent />
|
||||
<Box
|
||||
key="timbre1"
|
||||
pad="medium"
|
||||
align="center"
|
||||
justify="center"
|
||||
animation={{ type: "zoomIn", duration: 200 }}>
|
||||
<TimbreComponent key={1} />
|
||||
</Box>
|
||||
</Tab>
|
||||
<Tab title="Timbre 2"></Tab>
|
||||
<Tab title="Vocoder"></Tab>
|
||||
<Tab title="Effects"></Tab>
|
||||
<Tab title="Timbre 2">
|
||||
<Box
|
||||
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>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,13 +1,33 @@
|
||||
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) {
|
||||
const fileInput = React.useRef();
|
||||
|
||||
const fileInput = React.useRef(null);
|
||||
const [text, setText] = useState("Upload a Sysex File");
|
||||
// on file load, verify correct file format
|
||||
const getFile = (event) => {
|
||||
event.preventDefault();
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
setText("File Loaded");
|
||||
props.getBinaryData(new Uint8Array(e.target.result));
|
||||
};
|
||||
reader.readAsArrayBuffer(fileInput.current.files[0]);
|
||||
@@ -16,12 +36,26 @@ function FileIOComponent(props) {
|
||||
// on submit button press, pass the file to the parent component
|
||||
|
||||
return (
|
||||
<form>
|
||||
<label>
|
||||
Upload a Sysex File:
|
||||
<input type="file" ref={fileInput} onChange={getFile} />
|
||||
</label>
|
||||
</form>
|
||||
<Form>
|
||||
<StyledLabel htmlFor="file">
|
||||
{fileInput.current !== null ? text : "Upload a Sysex File"}
|
||||
</StyledLabel>
|
||||
<input
|
||||
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 {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
|
||||
|
||||
Reference in New Issue
Block a user