diff --git a/package-lock.json b/package-lock.json index 4e425a8..4f6842b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 4fd6896..6b58fe4 100644 --- a/package.json +++ b/package.json @@ -31,5 +31,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "prettier": "2.1.1" } } diff --git a/src/App.js b/src/App.js index 0561a3b..25b1ed5 100644 --- a/src/App.js +++ b/src/App.js @@ -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 (
- +
); } @@ -37,8 +43,8 @@ function App() {
logo
- - + +
({ + 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 ( + + {props.name} + + + ); +} diff --git a/src/components/MidiComponent.js b/src/components/MidiComponent.js index b461924..33fcbd3 100644 --- a/src/components/MidiComponent.js +++ b/src/components/MidiComponent.js @@ -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 (

- +
); } -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( - - ); - + }; + return ; } -export default MIDIComponent; \ No newline at end of file +export default MIDIComponent;