cvancau/alapatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create SettingSelect Component

Browse Source
This commit is contained in:
[poww10s]
2020-09-05 05:08:35 -04:00
parent 60f69a269f
commit 4182330f0e
5 changed files with 104 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+6
View File
@@ -10293,6 +10293,12 @@
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
},
"prettier": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.1.tgz",
"integrity": "sha512-9bY+5ZWCfqj3ghYBLxApy2zf6m+NJo5GzmLTpr9FsApsfjriNnS2dahWReHMi7qNPhhHl9SYHJs2cHZLgexNIw==",
"dev": true
},
"pretty-bytes": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.4.0.tgz",
package.json
+3
View File
@@ -31,5 +31,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"prettier": "2.1.1"
}
}
src/App.js
+18 -12
View File
@@ -1,10 +1,10 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { makeStyles } from '@material-ui/styles'
import Slider from '@material-ui/core/Slider'
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { makeStyles } from "@material-ui/styles";
import Slider from "@material-ui/core/Slider";
import MidiComponent from './components/MidiComponent'
import MidiComponent from "./components/MidiComponent";
const useStyles = makeStyles({
root: {
@@ -17,16 +17,22 @@ function valuetext(value) {
}
function SettingSlider() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleEvent = (event, newValue) => {
setValue(newValue);
}
};
return(
return (
<div className={classes.root}>
<Slider value={value} getAriaValueText={valuetext} valueLabelDisplay="auto" onChange={handleEvent} min={0} max={127}/>
<Slider
value={value}
getAriaValueText={valuetext}
valueLabelDisplay="auto"
onChange={handleEvent}
min={0}
max={127}
/>
</div>
);
}
@@ -37,8 +43,8 @@ function App() {
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<div>
<SettingSlider/>
<MidiComponent/>
<SettingSlider />
<MidiComponent />
</div>
<a
className="App-link"
src/components/InputComponents.js
+39
View File
@@ -0,0 +1,39 @@
import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/styles";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
export default function SettingSelect(props) {
const classes = useStyles();
const [setting, updateSetting] = useState("");
const handleChange = (e) => {
updateSetting(e.target.value);
};
return (
<FormControl className={classes.formControl}>
<InputLabel id="simple-select-filled">{props.name}</InputLabel>
<Select
labelId="simple-select-filled"
id="simple-select-filled"
value={setting}
onChange={handleChange}
>
<MenuItem value={props.options}></MenuItem>
</Select>
</FormControl>
);
}
src/components/MidiComponent.js
+38 -45
View File
@@ -1,4 +1,4 @@
import React, {useState, useEffect} from 'react';
import React, { useState, useEffect } from "react";
// this will pass true to enable SYSEX
@@ -12,7 +12,7 @@ function onMIDISuccess(access) {
//Failure Callback
function onMIDIFailure() {
console.log('Could not access MIDI devices!');
console.log("Could not access MIDI devices!");
}
function recieveMIDIMessage(message) {
@@ -24,7 +24,7 @@ function isValidSysex(data) {
console.log("incorrect file length");
return false;
}
if (data[0] !== 0xF0) {
if (data[0] !== 0xf0) {
console.log("first byte is not SYSEX byte");
return false;
}
@@ -32,12 +32,12 @@ function isValidSysex(data) {
console.log("manufacturer code is not KORG");
return false;
}
if (data[data.length-1] !== 0xF7) {
if (data[data.length - 1] !== 0xf7) {
console.log("last byte is does not end SYSEX message");
return false;
}
if (data[4] !== 0x40) {
console.log("not a program dump")
console.log("not a program dump");
return false;
}
@@ -49,43 +49,39 @@ function loadSysex(input) {
console.log(file);
let reader = new FileReader();
reader.onload = (e) => {
let data = new Uint8ClampedArray(e.target.result)
let data = new Uint8ClampedArray(e.target.result);
console.log(data);
if (isValidSysex(data)) {
console.log("read in as valid sysex file");
return data;
}
else {
} else {
console.log("could not verify sysex");
return null;
}
}
};
reader.readAsArrayBuffer(file);
}
// converts SYSEX file to the dump format the system uses (and the implementation refers to)
function dumpBufferFromSysexFile(array) {
// remove the header and footer bytes
let dump = array.slice(5, -1);
let dump = array.slice(5, -1);
// quick test for verification;
if (dump[0] !== 0x00) {
console.log("incorrect byte");
return;
}
console.log('trimmed file', dump);
console.log("trimmed file", dump);
// convert from 291 bytes to 254 (ala the implementation)
dump = dump.filter(
function(num, index, array) {
return index % 8;
}
);
console.log('dump format', dump);
dump = dump.filter(function (num, index, array) {
return index % 8;
});
console.log("dump format", dump);
return dump;
}
// load a SYSEX File into the MIDI component
function LoadSYSEXFile (props) {
// Component to load a SYSEX File into the MIDI component
function LoadSYSEXFile(props) {
const fileInput = React.useRef();
const [data, updateData] = useState(new Uint8ClampedArray());
@@ -104,67 +100,64 @@ function LoadSYSEXFile (props) {
let l_data = new Uint8ClampedArray(e.target.result);
// updata state with dump format
updateData(dumpBufferFromSysexFile(l_data));
}
};
reader.readAsArrayBuffer(fileInput.current.files[0]);
}
else {
} else {
alert("Please load a SYSEX File");
return null;
}
}
};
// on submit button press, convert the file to correct Dump Format, as per microKORG MIDI Implementation Doc
// on submit button press, pass the file to the parent component
const handleInput = (event) => {
if (!fileLoaded()) {
event.preventDefault();
}
else {
} else {
event.preventDefault();
props.sendFileData(data);
}
}
};
const fileLoaded = () => {
console.log(data.length);
return (
data.length === 254
);
}
return data.length === 254;
};
return(
return (
<form onSubmit={handleInput}>
<label>
Upload a Sysex File:
<input type='file' ref={fileInput} onChange={getFile}/>
<input type="file" ref={fileInput} onChange={getFile} />
</label>
<br />
<button disabled={!fileLoaded()} type="submit">Submit</button>
<button disabled={!fileLoaded()} type="submit">
Submit
</button>
</form>
);
}
function MIDIComponent () {
function fileToObject() {}
function MIDIComponent() {
const [loadedFile, loadFile] = useState(null);
// request midi access
useEffect(() => {
navigator.requestMIDIAccess({sysex: true}).then(onMIDISuccess, onMIDIFailure);
navigator
.requestMIDIAccess({ sysex: true })
.then(onMIDISuccess, onMIDIFailure);
}, []);
useEffect(() => {
console.log(loadedFile);
}, [loadedFile]);
const getChildFile = (childData) => {
loadFile(childData);
}
return(
<LoadSYSEXFile sendFileData={getChildFile} />
);
};
return <LoadSYSEXFile sendFileData={getChildFile} />;
}
export default MIDIComponent;
export default MIDIComponent;