From 31954e4a6211e679be58a6ed875b3b914d107634 Mon Sep 17 00:00:00 2001 From: Kyle Mathewson Date: Sun, 16 Feb 2020 00:28:32 -0700 Subject: [PATCH 01/18] removed everything to focus on two module switching --- src/components/PageSwitcher/PageSwitcher.js | 225 +------ .../components/EEGEduAlpha/EEGEduAlpha.js | 390 ----------- .../components/EEGEduAlpha/sketchFixation.js | 23 - .../EEGEduAlpha/translations/en.json | 12 - .../components/EEGEduAnimate/EEGEduAnimate.js | 273 -------- .../components/EEGEduAnimate/sketchBands.js | 80 --- .../components/EEGEduAnimate/sketchCube.js | 41 -- .../components/EEGEduAnimate/sketchDraw.js | 53 -- .../components/EEGEduAnimate/sketchFlock.js | 241 ------- .../components/EEGEduAnimate/sketchFlock3D.js | 540 --------------- .../components/EEGEduAnimate/sketchTone.js | 63 -- .../EEGEduAnimate/translations/en.json | 9 - .../components/EEGEduBands/EEGEduBands.js | 315 --------- .../EEGEduBands/translations/en.json | 11 - .../components/EEGEduEvoked/EEGEduEvoked.js | 316 --------- .../components/EEGEduEvoked/dataExample.png | Bin 229215 -> 0 bytes .../components/EEGEduEvoked/sketchEvoked.js | 79 --- .../EEGEduEvoked/translations/en.json | 12 - .../EEGEduHeartRaw/ECG_Principle_fast.gif | Bin 682936 -> 0 bytes .../EEGEduHeartRaw/EEGEduHeartRaw.js | 398 ------------ .../components/EEGEduHeartRaw/LeftHand.png | Bin 5846672 -> 0 bytes .../components/EEGEduHeartRaw/LimbLead.png | Bin 213704 -> 0 bytes .../EEGEduHeartRaw/PlotEKG_Sheets.png | Bin 249831 -> 0 bytes .../components/EEGEduHeartRaw/RightHand.png | Bin 2083713 -> 0 bytes .../EEGEduHeartRaw/electrodediagram2.png | Bin 55538 -> 0 bytes .../EEGEduHeartRaw/translations/en.json | 14 - .../EEGEduHeartSpectra/EEGEduHeartSpectra.js | 613 ------------------ .../EEGEduHeartSpectra/LeftHand.png | Bin 5846672 -> 0 bytes .../EEGEduHeartSpectra/RightHand.png | Bin 2083713 -> 0 bytes .../EEGEduHeartSpectra/electrodediagram2.png | Bin 55538 -> 0 bytes .../EEGEduHeartSpectra/exampleECG.png | Bin 97624 -> 0 bytes .../EEGEduHeartSpectra/exampleOutput.png | Bin 362361 -> 0 bytes .../EEGEduHeartSpectra/exampleSpectra.png | Bin 344663 -> 0 bytes .../EEGEduHeartSpectra/fft_animation.gif | Bin 408452 -> 0 bytes .../EEGEduHeartSpectra/translations/en.json | 5 - .../components/EEGEduIntro/EEGEduIntro.js | 345 ---------- .../EEGEduIntro/assets/DigitalDAQv2.png | Bin 417247 -> 0 bytes .../EEGEduIntro/assets/awakeasleep.gif | Bin 460262 -> 0 bytes .../EEGEduIntro/assets/electrodediagram.png | Bin 55397 -> 0 bytes .../EEGEduIntro/assets/electrodediagram1.png | Bin 55408 -> 0 bytes .../EEGEduIntro/assets/electrodelegend.png | Bin 11297 -> 0 bytes .../EEGEduIntro/assets/electrodelocations.png | Bin 40634 -> 0 bytes .../EEGEduIntro/assets/musepicture.png | Bin 2134784 -> 0 bytes .../EEGEduIntro/assets/neuronarrow.png | Bin 115204 -> 0 bytes .../EEGEduIntro/assets/neuronmultiarrow.png | Bin 166892 -> 0 bytes .../EEGEduIntro/translations/en.json | 129 ---- .../components/EEGEduPredict/EEGEduPredict.js | 251 ------- .../components/EEGEduPredict/sketchPredict.js | 44 -- .../EEGEduPredict/sketchPredictSound.js | 89 --- .../EEGEduPredict/translations/en.json | 13 - .../components/EEGEduRaw/EEGEduRaw.js | 225 +------ .../components/EEGEduRaw/artifact.png | Bin 35896 -> 0 bytes .../components/EEGEduRaw/blinks.png | Bin 676952 -> 0 bytes .../components/EEGEduRaw/drift.png | Bin 570588 -> 0 bytes .../EEGEduRaw/electrodelocations.png | Bin 40634 -> 0 bytes .../components/EEGEduRaw/horizontal.png | Bin 624839 -> 0 bytes .../components/EEGEduRaw/lineNoise.png | Bin 557986 -> 0 bytes .../components/EEGEduRaw/lineNoiseClose.png | Bin 1022528 -> 0 bytes .../components/EEGEduRaw/mechanical.png | Bin 506053 -> 0 bytes .../components/EEGEduRaw/muscle.png | Bin 756563 -> 0 bytes .../components/EEGEduRaw/muscleClose.png | Bin 799406 -> 0 bytes .../components/EEGEduRaw/vertical.png | Bin 566297 -> 0 bytes .../components/EEGEduSpectra/EEGEduSpectra.js | 149 +---- .../EEGEduSpectra/exampleOutput.png | Bin 362361 -> 0 bytes .../EEGEduSpectra/exampleRecording.png | Bin 922482 -> 0 bytes .../EEGEduSpectra/fft_animation.gif | Bin 408452 -> 0 bytes .../components/EEGEduSpectro/EEGEduSpectro.js | 223 ------- .../components/EEGEduSpectro/sketchSpectro.js | 45 -- .../EEGEduSpectro/translations/en.json | 12 - .../components/EEGEduSsvep/EEGEduSsvep.js | 397 ------------ .../components/EEGEduSsvep/sketchFlashFast.js | 43 -- .../components/EEGEduSsvep/sketchFlashSlow.js | 43 -- .../EEGEduSsvep/translations/en.json | 13 - .../PageSwitcher/translations/en.json | 12 +- 74 files changed, 8 insertions(+), 5738 deletions(-) delete mode 100644 src/components/PageSwitcher/components/EEGEduAlpha/EEGEduAlpha.js delete mode 100644 src/components/PageSwitcher/components/EEGEduAlpha/sketchFixation.js delete mode 100644 src/components/PageSwitcher/components/EEGEduAlpha/translations/en.json delete mode 100644 src/components/PageSwitcher/components/EEGEduAnimate/EEGEduAnimate.js delete mode 100644 src/components/PageSwitcher/components/EEGEduAnimate/sketchBands.js delete mode 100644 src/components/PageSwitcher/components/EEGEduAnimate/sketchCube.js delete mode 100644 src/components/PageSwitcher/components/EEGEduAnimate/sketchDraw.js delete mode 100644 src/components/PageSwitcher/components/EEGEduAnimate/sketchFlock.js delete mode 100644 src/components/PageSwitcher/components/EEGEduAnimate/sketchFlock3D.js delete mode 100644 src/components/PageSwitcher/components/EEGEduAnimate/sketchTone.js delete mode 100644 src/components/PageSwitcher/components/EEGEduAnimate/translations/en.json delete mode 100644 src/components/PageSwitcher/components/EEGEduBands/EEGEduBands.js delete mode 100644 src/components/PageSwitcher/components/EEGEduBands/translations/en.json delete mode 100644 src/components/PageSwitcher/components/EEGEduEvoked/EEGEduEvoked.js delete mode 100644 src/components/PageSwitcher/components/EEGEduEvoked/dataExample.png delete mode 100644 src/components/PageSwitcher/components/EEGEduEvoked/sketchEvoked.js delete mode 100644 src/components/PageSwitcher/components/EEGEduEvoked/translations/en.json delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartRaw/ECG_Principle_fast.gif delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartRaw/EEGEduHeartRaw.js delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartRaw/LeftHand.png delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartRaw/LimbLead.png delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartRaw/PlotEKG_Sheets.png delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartRaw/RightHand.png delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartRaw/electrodediagram2.png delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartRaw/translations/en.json delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartSpectra/EEGEduHeartSpectra.js delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartSpectra/LeftHand.png delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartSpectra/RightHand.png delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartSpectra/electrodediagram2.png delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartSpectra/exampleECG.png delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartSpectra/exampleOutput.png delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartSpectra/exampleSpectra.png delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartSpectra/fft_animation.gif delete mode 100644 src/components/PageSwitcher/components/EEGEduHeartSpectra/translations/en.json delete mode 100644 src/components/PageSwitcher/components/EEGEduIntro/EEGEduIntro.js delete mode 100644 src/components/PageSwitcher/components/EEGEduIntro/assets/DigitalDAQv2.png delete mode 100644 src/components/PageSwitcher/components/EEGEduIntro/assets/awakeasleep.gif delete mode 100644 src/components/PageSwitcher/components/EEGEduIntro/assets/electrodediagram.png delete mode 100644 src/components/PageSwitcher/components/EEGEduIntro/assets/electrodediagram1.png delete mode 100644 src/components/PageSwitcher/components/EEGEduIntro/assets/electrodelegend.png delete mode 100644 src/components/PageSwitcher/components/EEGEduIntro/assets/electrodelocations.png delete mode 100644 src/components/PageSwitcher/components/EEGEduIntro/assets/musepicture.png delete mode 100644 src/components/PageSwitcher/components/EEGEduIntro/assets/neuronarrow.png delete mode 100644 src/components/PageSwitcher/components/EEGEduIntro/assets/neuronmultiarrow.png delete mode 100644 src/components/PageSwitcher/components/EEGEduIntro/translations/en.json delete mode 100644 src/components/PageSwitcher/components/EEGEduPredict/EEGEduPredict.js delete mode 100644 src/components/PageSwitcher/components/EEGEduPredict/sketchPredict.js delete mode 100644 src/components/PageSwitcher/components/EEGEduPredict/sketchPredictSound.js delete mode 100644 src/components/PageSwitcher/components/EEGEduPredict/translations/en.json delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/artifact.png delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/blinks.png delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/drift.png delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/electrodelocations.png delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/horizontal.png delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/lineNoise.png delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/lineNoiseClose.png delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/mechanical.png delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/muscle.png delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/muscleClose.png delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/vertical.png delete mode 100644 src/components/PageSwitcher/components/EEGEduSpectra/exampleOutput.png delete mode 100644 src/components/PageSwitcher/components/EEGEduSpectra/exampleRecording.png delete mode 100644 src/components/PageSwitcher/components/EEGEduSpectra/fft_animation.gif delete mode 100644 src/components/PageSwitcher/components/EEGEduSpectro/EEGEduSpectro.js delete mode 100644 src/components/PageSwitcher/components/EEGEduSpectro/sketchSpectro.js delete mode 100644 src/components/PageSwitcher/components/EEGEduSpectro/translations/en.json delete mode 100644 src/components/PageSwitcher/components/EEGEduSsvep/EEGEduSsvep.js delete mode 100644 src/components/PageSwitcher/components/EEGEduSsvep/sketchFlashFast.js delete mode 100644 src/components/PageSwitcher/components/EEGEduSsvep/sketchFlashSlow.js delete mode 100644 src/components/PageSwitcher/components/EEGEduSsvep/translations/en.json diff --git a/src/components/PageSwitcher/PageSwitcher.js b/src/components/PageSwitcher/PageSwitcher.js index ca338094..b9130c57 100644 --- a/src/components/PageSwitcher/PageSwitcher.js +++ b/src/components/PageSwitcher/PageSwitcher.js @@ -7,31 +7,11 @@ import * as translations from "./translations/en.json"; import * as generalTranslations from "./components/translations/en"; import { emptyAuxChannelData } from "./components/chartOptions"; -import * as funIntro from "./components/EEGEduIntro/EEGEduIntro" -import * as funHeartRaw from "./components/EEGEduHeartRaw/EEGEduHeartRaw" -import * as funHeartSpectra from "./components/EEGEduHeartSpectra/EEGEduHeartSpectra" import * as funRaw from "./components/EEGEduRaw/EEGEduRaw"; import * as funSpectra from "./components/EEGEduSpectra/EEGEduSpectra"; -import * as funBands from "./components/EEGEduBands/EEGEduBands"; -import * as funAnimate from "./components/EEGEduAnimate/EEGEduAnimate"; -import * as funSpectro from "./components/EEGEduSpectro/EEGEduSpectro"; -import * as funAlpha from "./components/EEGEduAlpha/EEGEduAlpha"; -import * as funSsvep from "./components/EEGEduSsvep/EEGEduSsvep"; -import * as funEvoked from "./components/EEGEduEvoked/EEGEduEvoked"; -import * as funPredict from "./components/EEGEduPredict/EEGEduPredict"; -const intro = translations.types.intro; -const heartRaw = translations.types.heartRaw; -const heartSpectra = translations.types.heartSpectra; const raw = translations.types.raw; const spectra = translations.types.spectra; -const bands = translations.types.bands; -const animate = translations.types.animate; -const spectro = translations.types.spectro; -const alpha = translations.types.alpha; -const ssvep = translations.types.ssvep; -const evoked = translations.types.evoked; -const predict = translations.types.predict; export function PageSwitcher() { @@ -47,55 +27,25 @@ export function PageSwitcher() { let showAux = true; // if it is even available to press (to prevent in some modules) // data pulled out of multicast$ - const [introData, setIntroData] = useState(emptyAuxChannelData) - const [heartRawData, setHeartRawData] = useState(emptyAuxChannelData); - const [heartSpectraData, setHeartSpectraData] = useState(emptyAuxChannelData); const [rawData, setRawData] = useState(emptyAuxChannelData); const [spectraData, setSpectraData] = useState(emptyAuxChannelData); - const [bandsData, setBandsData] = useState(emptyAuxChannelData); - const [animateData, setAnimateData] = useState(emptyAuxChannelData); - const [spectroData, setSpectroData] = useState(emptyAuxChannelData); - const [alphaData, setAlphaData] = useState(emptyAuxChannelData); - const [ssvepData, setSsvepData] = useState(emptyAuxChannelData); - const [evokedData, setEvokedData] = useState(emptyAuxChannelData); - const [predictData, setPredictData] = useState(emptyAuxChannelData); // pipe settings - const [introSettings] = useState(funIntro.getSettings); - const [heartRawSettings] = useState(funHeartRaw.getSettings); - const [heartSpectraSettings, setHeartSpectraSettings] = useState(funHeartSpectra.getSettings); const [rawSettings, setRawSettings] = useState(funRaw.getSettings); const [spectraSettings, setSpectraSettings] = useState(funSpectra.getSettings); - const [bandsSettings, setBandsSettings] = useState(funBands.getSettings); - const [animateSettings, setAnimateSettings] = useState(funAnimate.getSettings); - const [spectroSettings, setSpectroSettings] = useState(funSpectro.getSettings); - const [alphaSettings, setAlphaSettings] = useState(funAlpha.getSettings); - const [ssvepSettings, setSsvepSettings] = useState(funSsvep.getSettings); - const [evokedSettings, setEvokedSettings] = useState(funEvoked.getSettings); - const [predictSettings, setPredictSettings] = useState(funPredict.getSettings); // connection status const [status, setStatus] = useState(generalTranslations.connect); // for picking a new module - const [selected, setSelected] = useState(intro); + const [selected, setSelected] = useState(raw); const handleSelectChange = useCallback(value => { setSelected(value); console.log("Switching to: " + value); - if (window.subscriptionIntro) window.subscriptionIntro.unsubscribe(); - if (window.subscriptionHeartRaw) window.subscriptionHeartRaw.unsubscribe(); - if (window.subscriptionHeartSpectra) window.subscriptionHeartSpectra.unsubscribe(); if (window.subscriptionRaw) window.subscriptionRaw.unsubscribe(); if (window.subscriptionSpectra) window.subscriptionSpectra.unsubscribe(); - if (window.subscriptionBands) window.subscriptionBands.unsubscribe(); - if (window.subscriptionAnimate) window.subscriptionAnimate.unsubscribe(); - if (window.subscriptionSpectro) window.subscriptionSpectro.unsubscribe(); - if (window.subscriptionAlpha) window.subscriptionAlpha.unsubscribe(); - if (window.subscriptionSsvep) window.subscriptionSsvep.unsubscribe(); - if (window.subscriptionEvoked) window.subscriptionEvoked.unsubscribe(); - if (window.subscriptionPredict) window.subscriptionPredict.unsubscribe(); subscriptionSetup(value); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -105,121 +55,36 @@ export function PageSwitcher() { const [recordPop, setRecordPop] = useState(false); const recordPopChange = useCallback(() => setRecordPop(!recordPop), [recordPop]); - // for popup flag when recording 2nd condition - const [recordTwoPop, setRecordTwoPop] = useState(false); - const recordTwoPopChange = useCallback(() => setRecordTwoPop(!recordTwoPop), [recordTwoPop]); - switch (selected) { - case intro: - showAux = false; - break - case heartRaw: - showAux = false; - break - case heartSpectra: - showAux = false; - break case raw: showAux = true; break case spectra: showAux = true; break - case bands: - showAux = true; - break - case animate: - showAux = false; - break - case spectro: - showAux = false; - break - case alpha: - showAux = true; - break - case ssvep: - showAux = true; - break - case evoked: - showAux = true; - break - case predict: - showAux = false; - break default: console.log("Error on showAux"); } const chartTypes = [ - { label: intro, value: intro }, - { label: heartRaw, value: heartRaw }, - { label: heartSpectra, value: heartSpectra }, { label: raw, value: raw }, - { label: spectra, value: spectra }, - { label: bands, value: bands }, - { label: animate, value: animate }, - { label: spectro, value: spectro }, - { label: alpha, value: alpha }, - { label: ssvep, value: ssvep }, - { label: evoked, value: evoked }, - { label: predict, value: predict } - + { label: spectra, value: spectra } ]; function buildPipes(value) { - funIntro.buildPipe(introSettings); - funHeartRaw.buildPipe(heartRawSettings); - funHeartSpectra.buildPipe(heartSpectraSettings); funRaw.buildPipe(rawSettings); funSpectra.buildPipe(spectraSettings); - funBands.buildPipe(bandsSettings); - funAnimate.buildPipe(animateSettings); - funSpectro.buildPipe(spectroSettings); - funAlpha.buildPipe(alphaSettings); - funSsvep.buildPipe(ssvepSettings); - funEvoked.buildPipe(evokedSettings); - funPredict.buildPipe(predictSettings); } function subscriptionSetup(value) { switch (value) { - case intro: - funIntro.setup(setIntroData, introSettings); - break; - case heartRaw: - funHeartRaw.setup(setHeartRawData, heartRawSettings); - break; - case heartSpectra: - funHeartSpectra.setup(setHeartSpectraData, heartSpectraSettings); - break; case raw: funRaw.setup(setRawData, rawSettings); break; case spectra: funSpectra.setup(setSpectraData, spectraSettings); break; - case bands: - funBands.setup(setBandsData, bandsSettings); - break; - case animate: - funAnimate.setup(setAnimateData, animateSettings); - break; - case spectro: - funSpectro.setup(setSpectroData, spectroSettings); - break; - case alpha: - funAlpha.setup(setAlphaData, alphaSettings); - break; - case ssvep: - funSsvep.setup(setSsvepData, ssvepSettings); - break; - case evoked: - funEvoked.setup(setEvokedData, evokedSettings); - break; - case predict: - funPredict.setup(setPredictData, predictSettings); - break; default: console.log( "Error on handle Subscriptions. Couldn't switch to: " + value @@ -266,12 +131,6 @@ export function PageSwitcher() { function pipeSettingsDisplay() { switch(selected) { - case intro: - return null - case heartRaw: - return null - case heartSpectra: - return null case raw: return ( funRaw.renderSliders(setRawData, setRawSettings, status, rawSettings) @@ -280,62 +139,16 @@ export function PageSwitcher() { return ( funSpectra.renderSliders(setSpectraData, setSpectraSettings, status, spectraSettings) ); - case bands: - return ( - funBands.renderSliders(setBandsData, setBandsSettings, status, bandsSettings) - ); - case animate: - return ( - funAnimate.renderSliders(setAnimateData, setAnimateSettings, status, animateSettings) - ); - case spectro: - return ( - funSpectro.renderSliders(setSpectroData, setSpectroSettings, status, spectroSettings) - ); - case alpha: - return ( - funAlpha.renderSliders(setAlphaData, setAlphaSettings, status, alphaSettings) - ); - case ssvep: - return ( - funSsvep.renderSliders(setSsvepData, setSsvepSettings, status, ssvepSettings) - ); - case evoked: - return null - case predict: - return ( - funPredict.renderSliders(setPredictData, setPredictSettings, status, predictSettings) - ); default: console.log('Error rendering settings display'); } } function renderModules() { switch (selected) { - case intro: - return ; - case heartRaw: - return ; - case heartSpectra: - return ; case raw: return ; case spectra: return ; - case bands: - return ; - case animate: - return ; - case spectro: - return ; - case alpha: - return ; - case ssvep: - return ; - case evoked: - return ; - case predict: - return ; default: console.log("Error on renderCharts switch."); } @@ -343,16 +156,6 @@ export function PageSwitcher() { function renderRecord() { switch (selected) { - case intro: - return null - case heartRaw: - return ( - funHeartRaw.renderRecord(recordPopChange, recordPop, status, heartRawSettings) - ) - case heartSpectra: - return ( - funHeartSpectra.renderRecord(recordPopChange, recordPop, status, heartSpectraSettings, setHeartSpectraSettings) - ) case raw: return ( funRaw.renderRecord(recordPopChange, recordPop, status, rawSettings, setRawSettings) @@ -361,30 +164,6 @@ export function PageSwitcher() { return ( funSpectra.renderRecord(recordPopChange, recordPop, status, spectraSettings, setSpectraSettings) ) - case bands: - return ( - funBands.renderRecord(recordPopChange, recordPop, status, bandsSettings, setBandsSettings) - ) - case animate: - return null - case spectro: - return null - case alpha: - return ( - funAlpha.renderRecord(recordPopChange, recordPop, status, alphaSettings, recordTwoPopChange, recordTwoPop, setAlphaSettings) - ) - case ssvep: - return ( - funSsvep.renderRecord(recordPopChange, recordPop, status, ssvepSettings, recordTwoPopChange, recordTwoPop, setSsvepSettings) - ) - case evoked: - return ( - funEvoked.renderRecord(recordPopChange, recordPop, status, evokedSettings, setEvokedSettings) - ) - case predict: - return ( - funPredict.renderRecord(recordPopChange, status) - ) default: console.log("Error on renderRecord."); } diff --git a/src/components/PageSwitcher/components/EEGEduAlpha/EEGEduAlpha.js b/src/components/PageSwitcher/components/EEGEduAlpha/EEGEduAlpha.js deleted file mode 100644 index 4204852b..00000000 --- a/src/components/PageSwitcher/components/EEGEduAlpha/EEGEduAlpha.js +++ /dev/null @@ -1,390 +0,0 @@ -import React from "react"; -import { catchError, multicast } from "rxjs/operators"; - -import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal } from "@shopify/polaris"; -import { saveAs } from 'file-saver'; -import { take, takeUntil } from "rxjs/operators"; -import { Subject, timer } from "rxjs"; - -import { channelNames } from "muse-js"; -import { Line } from "react-chartjs-2"; - -import { zipSamples } from "muse-js"; - -import { - bandpassFilter, - epoch, - fft, - sliceFFT -} from "@neurosity/pipes"; - -import { chartStyles, generalOptions } from "../chartOptions"; - -import * as generalTranslations from "../translations/en"; -import * as specificTranslations from "./translations/en"; - -import P5Wrapper from 'react-p5-wrapper'; -import sketchFixation from "./sketchFixation" - -export function getSettings() { - return { - cutOffLow: 2, - cutOffHigh: 20, - interval: 100, - bins: 256, - sliceFFTLow: 1, - sliceFFTHigh: 30, - duration: 1024, - srate: 256, - name: 'Alpha', - secondsToSave: 10 - } -}; - - -export function buildPipe(Settings) { - if (window.subscriptionAlpha) window.subscriptionAlpha.unsubscribe(); - - window.pipeAlpha$ = null; - window.multicastAlpha$ = null; - window.subscriptionAlpha = null; - - // Build Pipe - window.pipeAlpha$ = zipSamples(window.source.eegReadings$).pipe( - bandpassFilter({ - cutoffFrequencies: [Settings.cutOffLow, Settings.cutOffHigh], - nbChannels: window.nchans }), - epoch({ - duration: Settings.duration, - interval: Settings.interval, - samplingRate: Settings.srate - }), - fft({ bins: Settings.bins }), - sliceFFT([Settings.sliceFFTLow, Settings.sliceFFTHigh]), - catchError(err => { - console.log(err); - }) - ); - - window.multicastAlpha$ = window.pipeAlpha$.pipe( - multicast(() => new Subject()) - ); -} - -export function setup(setData, Settings) { - console.log("Subscribing to " + Settings.name); - - if (window.multicastAlpha$) { - window.subscriptionAlpha = window.multicastAlpha$.subscribe(data => { - setData(alphaData => { - Object.values(alphaData).forEach((channel, index) => { - channel.datasets[0].data = data.psd[index]; - channel.xLabels = data.freqs; - }); - - return { - ch0: alphaData.ch0, - ch1: alphaData.ch1, - ch2: alphaData.ch2, - ch3: alphaData.ch3, - ch4: alphaData.ch4 - }; - }); - }); - - window.multicastAlpha$.connect(); - console.log("Subscribed to " + Settings.name); - } -} - -export function renderModule(channels) { - function renderCharts() { - return Object.values(channels.data).map((channel, index) => { - if (index === 0) { - const options = { - ...generalOptions, - scales: { - xAxes: [ - { - scaleLabel: { - ...generalOptions.scales.xAxes[0].scaleLabel, - labelString: specificTranslations.xlabel - } - } - ], - yAxes: [ - { - scaleLabel: { - ...generalOptions.scales.yAxes[0].scaleLabel, - labelString: specificTranslations.ylabel - }, - ticks: { - max: 25, - min: 0 - } - } - ] - }, - elements: { - point: { - radius: 3 - } - }, - title: { - ...generalOptions.title, - text: generalTranslations.channel + channelNames[index] - } - }; - - return ( - - - - ); - } else { - return null - } - }); - } - - return ( - - - - -

{specificTranslations.description}

- - - - -
{renderCharts()}
- - - ); -} - -export function renderSliders(setData, setSettings, status, Settings) { - - function resetPipeSetup(value) { - buildPipe(Settings); - setup(setData, Settings) - } - - function handleIntervalRangeSliderChange(value) { - setSettings(prevState => ({...prevState, interval: value})); - resetPipeSetup(); - } - - function handleCutoffLowRangeSliderChange(value) { - setSettings(prevState => ({...prevState, cutOffLow: value})); - resetPipeSetup(); - } - - function handleCutoffHighRangeSliderChange(value) { - setSettings(prevState => ({...prevState, cutOffHigh: value})); - resetPipeSetup(); - } - - function handleSliceFFTLowRangeSliderChange(value) { - setSettings(prevState => ({...prevState, sliceFFTLow: value})); - resetPipeSetup(); - } - - function handleSliceFFTHighRangeSliderChange(value) { - setSettings(prevState => ({...prevState, sliceFFTHigh: value})); - resetPipeSetup(); - } - - function handleDurationRangeSliderChange(value) { - setSettings(prevState => ({...prevState, duration: value})); - resetPipeSetup(); - } - - return ( - - - - - - - - - ) -} - -export function renderRecord(recordPopChange, recordPop, status, Settings, recordTwoPopChange, recordTwoPop, setSettings) { - - function handleSecondsToSaveRangeSliderChange(value) { - setSettings(prevState => ({...prevState, secondsToSave: value})); - } - - return( - - - - - - - - - - - - - -

- Your data is currently recording, - once complete it will be downloaded as a .csv file - and can be opened with your favorite spreadsheet program. - Close this window once the download completes. -

- - - - - - - - - -

- Your data is currently recording, - once complete it will be downloaded as a .csv file - and can be opened with your favorite spreadsheet program. - Close this window once the download completes. -

- - - - - - ) -} - - -function saveToCSV(Settings, condition) { - console.log('Saving ' + Settings.secondsToSave + ' seconds...'); - var localObservable$ = null; - const dataToSave = []; - - console.log('making ' + Settings.name + ' headers') - - // take one sample from selected observable object for headers - localObservable$ = window.multicastAlpha$.pipe( - take(1) - ); - - localObservable$.subscribe({ - next(x) { - let freqs = Object.values(x.freqs); - dataToSave.push( - "Timestamp (ms),", - freqs.map(function(f) {return "ch0_" + f + "Hz"}) + ",", - freqs.map(function(f) {return "ch1_" + f + "Hz"}) + ",", - freqs.map(function(f) {return "ch2_" + f + "Hz"}) + ",", - freqs.map(function(f) {return "ch3_" + f + "Hz"}) + ",", - freqs.map(function(f) {return "chAux_" + f + "Hz"}) + ",", - freqs.map(function(f) {return "f_" + f + "Hz"}) + "," , - "info", - "\n" - ); - } - }); - - // setup timer - const timer$ = timer(Settings.secondsToSave * 1000) - - // put selected observable object into local and start taking samples - localObservable$ = window.multicastAlpha$.pipe( - takeUntil(timer$) - ); - - - // now with header in place subscribe to each epoch and log it - localObservable$.subscribe({ - next(x) { - dataToSave.push(Date.now() + "," + Object.values(x).join(",") + "\n"); - // logging is useful for debugging -yup - // console.log(x); - }, - error(err) { console.log(err); }, - complete() { - console.log('Trying to save') - var blob = new Blob( - dataToSave, - {type: "text/plain;charset=utf-8"} - ); - saveAs(blob, Settings.name + "_" + condition + "_Recording_" + Date.now() + ".csv"); - console.log('Completed'); - } - }); -} diff --git a/src/components/PageSwitcher/components/EEGEduAlpha/sketchFixation.js b/src/components/PageSwitcher/components/EEGEduAlpha/sketchFixation.js deleted file mode 100644 index 47f0c1bc..00000000 --- a/src/components/PageSwitcher/components/EEGEduAlpha/sketchFixation.js +++ /dev/null @@ -1,23 +0,0 @@ -export default function sketchFixation (p) { - - p.setup = function () { - p.createCanvas(300, 300); - }; - - p.windowResized = function() { - p.createCanvas(300, 300); - } - - - p.mousePressed = function () { - p.background(256); - } - - p.draw = function () { - p.background(255); - p.fill(255,0,0); - p.text("+", p.width/2, p.height/2); - - } - -}; \ No newline at end of file diff --git a/src/components/PageSwitcher/components/EEGEduAlpha/translations/en.json b/src/components/PageSwitcher/components/EEGEduAlpha/translations/en.json deleted file mode 100644 index b5f5edce..00000000 --- a/src/components/PageSwitcher/components/EEGEduAlpha/translations/en.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "title": "Eyes open vs. Eyes Closed Alpha Experiment", - "description": [ - "In the next demo we run our first experiment, comparing the spectra when eyes are open vs when they are closed. ", - "In this module you will first adjust the muse so the signal is good, and then record two sessions of data. ", - "In one, you will keep you eyes open and stare at a single point on the screen that pops up. ", - "In the other, you will close your eyes and the recording will begin. ", - "Alpha oscillations are found to be larger when the eyes are closed than when they are open." - ], - "xlabel": "Frequency (Hz)", - "ylabel": "Power (\u03BCV\u00B2)" -} diff --git a/src/components/PageSwitcher/components/EEGEduAnimate/EEGEduAnimate.js b/src/components/PageSwitcher/components/EEGEduAnimate/EEGEduAnimate.js deleted file mode 100644 index e5aaa969..00000000 --- a/src/components/PageSwitcher/components/EEGEduAnimate/EEGEduAnimate.js +++ /dev/null @@ -1,273 +0,0 @@ -import React, { useState, useCallback } from "react"; -import { catchError, multicast } from "rxjs/operators"; - -import { Card, Stack, TextContainer, RangeSlider, Select} from "@shopify/polaris"; -import { Subject } from "rxjs"; - -import { zipSamples } from "muse-js"; - -import { - bandpassFilter, - epoch, - fft, - powerByBand -} from "@neurosity/pipes"; - -import { chartStyles } from "../chartOptions"; - -import * as generalTranslations from "../translations/en"; -import * as specificTranslations from "./translations/en"; -import { bandLabels } from "../../utils/chartUtils"; - -import sketchBands from './sketchBands' -import sketchTone from './sketchTone' -import sketchCube from './sketchCube' -import sketchFlock from './sketchFlock' -import sketchDraw from './sketchDraw' -import sketchFlock3D from './sketchFlock3D' - -import P5Wrapper from 'react-p5-wrapper'; - -export function getSettings () { - return { - cutOffLow: 2, - cutOffHigh: 20, - interval: 16, - bins: 256, - duration: 128, - srate: 256, - name: 'Animate' - } -}; - -export function buildPipe(Settings) { - if (window.subscriptionAnimate) window.subscriptionAnimate.unsubscribe(); - - window.pipeAnimate$ = null; - window.multicastAnimate$ = null; - window.subscriptionAnimate = null; - - // Build Pipe - window.pipeAnimate$ = zipSamples(window.source.eegReadings$).pipe( - bandpassFilter({ - cutoffFrequencies: [Settings.cutOffLow, Settings.cutOffHigh], - nbChannels: window.nchans }), - epoch({ - duration: Settings.duration, - interval: Settings.interval, - samplingRate: Settings.srate - }), - fft({ bins: Settings.bins }), - powerByBand(), - catchError(err => { - console.log(err); - }) - ); - window.multicastAnimate$ = window.pipeAnimate$.pipe( - multicast(() => new Subject()) - ); -} - -export function setup(setData, Settings) { - console.log("Subscribing to " + Settings.name); - - if (window.multicastAnimate$) { - window.subscriptionAnimate = window.multicastAnimate$.subscribe(data => { - setData(animateData => { - Object.values(animateData).forEach((channel, index) => { - channel.datasets[0].data = [ - data.delta[index], - data.theta[index], - data.alpha[index], - data.beta[index], - data.gamma[index] - ]; - channel.xLabels = bandLabels; - }); - - return { - ch0: animateData.ch0, - ch1: animateData.ch1, - ch2: animateData.ch2, - ch3: animateData.ch3, - ch4: animateData.ch4 - }; - }); - }); - - window.multicastAnimate$.connect(); - console.log("Subscribed to " + Settings.name); - } -} - -export function renderModule(channels) { - function RenderCharts() { - - const bands = 'bands'; - const tone = 'tone'; - const cube = 'cube'; - const flock = 'flock'; - const draw = 'draw'; - const flock3d = 'flock3d'; - - const chartTypes = [ - { label: bands, value: bands }, - { label: tone, value: tone }, - { label: cube, value: cube }, - { label: flock, value: flock }, - { label: draw, value: draw }, - { label: flock3d, value: flock3d } - ]; - - // for picking a new animation - const [selectedAnimation, setSelectedAnimation] = useState(bands); - const handleSelectChangeAnimation = useCallback(value => { - setSelectedAnimation(value); - console.log("Switching to: " + value); - }, []); - - return Object.values(channels.data).map((channel, index) => { - if (channel.datasets[0].data) { - if (index === 1) { - // console.log( channel.datasets[0].data[2]) - window.delta = channel.datasets[0].data[0]; - window.theta = channel.datasets[0].data[1]; - window.alpha = channel.datasets[0].data[2]; - window.beta = channel.datasets[0].data[3]; - window.gamma = channel.datasets[0].data[4]; - } - } - - let thisSketch = sketchTone; - - switch (selectedAnimation) { - case bands: - thisSketch = sketchBands; - break - case tone: - thisSketch = sketchTone; - break - case cube: - thisSketch = sketchCube; - break - case flock: - thisSketch = sketchFlock; - break - case draw: - thisSketch = sketchDraw; - break - case flock3d: - thisSketch = sketchFlock3D; - break - default: console.log("Error on switch to " + selectedAnimation) - } - - //only left frontal channel - if (index === 1) { - return ( - - - {'Save to CSV'} diff --git a/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js b/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js index b4840438..1f97e8a0 100644 --- a/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js +++ b/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js @@ -1,28 +1,17 @@ import React from "react"; -import { catchError, multicast } from "rxjs/operators"; - import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal, } from "@shopify/polaris"; -import { saveAs } from 'file-saver'; +import { catchError, multicast } from "rxjs/operators"; import { take, takeUntil } from "rxjs/operators"; import { Subject, timer } from "rxjs"; - -import { channelNames } from "muse-js"; import { Line } from "react-chartjs-2"; - -import { zipSamples } from "muse-js"; - -import { - bandpassFilter, - epoch, - fft, - sliceFFT -} from "@neurosity/pipes"; - -import { chartStyles, generalOptions } from "../chartOptions"; - -import * as generalTranslations from "../translations/en"; +import { saveAs } from 'file-saver'; +import { channelNames, zipSamples } from "muse-js"; +import { chartStyles, generalOptions } from "../../utils/chartOptions"; +import * as connectionText from "../../utils/connectionText"; import * as specificTranslations from "./translations/en"; +import { bandpassFilter, epoch, fft, sliceFFT} from "@neurosity/pipes"; + export function getSettings() { return { cutOffLow: 1, @@ -252,42 +241,42 @@ export function renderSliders(setData, setSettings, status, Settings) { return ( {'Save to CSV'} diff --git a/src/components/PageSwitcher/translations/en.json b/src/components/PageSwitcher/translations/en.json deleted file mode 100644 index 65bc06d9..00000000 --- a/src/components/PageSwitcher/translations/en.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "title": "Choose your Module", - "types": { - "raw": "4. Raw and Filtered Data", - "spectra": "5. Frequency Spectra" - } -} diff --git a/src/components/PageSwitcher/components/chartOptions.js b/src/components/PageSwitcher/utils/chartOptions.js similarity index 90% rename from src/components/PageSwitcher/components/chartOptions.js rename to src/components/PageSwitcher/utils/chartOptions.js index c5ef4127..fb640e8a 100644 --- a/src/components/PageSwitcher/components/chartOptions.js +++ b/src/components/PageSwitcher/utils/chartOptions.js @@ -1,5 +1,3 @@ -import * as generalTranslations from "./translations/en"; - export const chartStyles = { wrapperStyle: { display: "flex", @@ -72,7 +70,7 @@ export const generalOptions = { }, title: { display: true, - text: generalTranslations.channel + text: 'Channel: ' }, responsive: true, tooltips: { enabled: false }, diff --git a/src/components/PageSwitcher/components/translations/en.json b/src/components/PageSwitcher/utils/connectionText.json similarity index 84% rename from src/components/PageSwitcher/components/translations/en.json rename to src/components/PageSwitcher/utils/connectionText.json index b88bd72a..809d17b7 100644 --- a/src/components/PageSwitcher/components/translations/en.json +++ b/src/components/PageSwitcher/utils/connectionText.json @@ -6,6 +6,5 @@ "connected": "Muse Headband Connected", "connectedMock": "Mock Data Connected", "connectionFailed": "Connection failed", - "disconnect": "Disconnect", - "channel": "Channel: " + "disconnect": "Disconnect" } From 6805263d498e764dae05c4858453cd1290d09cf4 Mon Sep 17 00:00:00 2001 From: Kyle Mathewson Date: Sun, 16 Feb 2020 12:11:46 -0700 Subject: [PATCH 03/18] more cleanup --- src/components/PageSwitcher/PageSwitcher.js | 65 ++++++++++++++------- 1 file changed, 43 insertions(+), 22 deletions(-) diff --git a/src/components/PageSwitcher/PageSwitcher.js b/src/components/PageSwitcher/PageSwitcher.js index 93255642..9abd6382 100644 --- a/src/components/PageSwitcher/PageSwitcher.js +++ b/src/components/PageSwitcher/PageSwitcher.js @@ -4,6 +4,7 @@ import { Select, Card, Stack, Button, ButtonGroup, Checkbox } from "@shopify/pol import { mockMuseEEG } from "./utils/mockMuseEEG"; import * as connectionText from "./utils/connectionText"; import { emptyAuxChannelData } from "./utils/chartOptions"; + import * as funRaw from "./components/EEGEduRaw/EEGEduRaw"; import * as funSpectra from "./components/EEGEduSpectra/EEGEduSpectra"; @@ -11,37 +12,36 @@ let modules = { "raw": "1. Raw and Filtered Data", "spectra": "2. Frequency Spectra" }; - const raw = modules.raw; -console.log(raw) const spectra = modules.spectra; +const chartTypes = [ + { label: raw, value: raw }, + { label: spectra, value: spectra } +]; + +let showAux = true; // if it is even available to press (to prevent in some modules) + + export function PageSwitcher() { - // For auxEnable settings - const [checked, setChecked] = useState(false); - const handleChange = useCallback((newChecked) => setChecked(newChecked), []); - window.enableAux = checked; - if (window.enableAux) { - window.nchans = 5; - } else { - window.nchans = 4; - } - let showAux = true; // if it is even available to press (to prevent in some modules) + //-----Setup Constants + + // connection status + const [status, setStatus] = useState(connectionText.connect); // data pulled out of multicast$ const [rawData, setRawData] = useState(emptyAuxChannelData); const [spectraData, setSpectraData] = useState(emptyAuxChannelData); + // for picking a new module + const [selected, setSelected] = useState(raw); + // pipe settings const [rawSettings, setRawSettings] = useState(funRaw.getSettings); const [spectraSettings, setSpectraSettings] = useState(funSpectra.getSettings); - // connection status - const [status, setStatus] = useState(connectionText.connect); - - // for picking a new module - const [selected, setSelected] = useState(raw); + // Whenever settings changed const handleSelectChange = useCallback(value => { setSelected(value); @@ -58,6 +58,20 @@ export function PageSwitcher() { const [recordPop, setRecordPop] = useState(false); const recordPopChange = useCallback(() => setRecordPop(!recordPop), [recordPop]); + // For auxEnable settings + const [checked, setChecked] = useState(false); + const handleChange = useCallback((newChecked) => setChecked(newChecked), []); + + + // ---- Manage Auxillary channel + + window.enableAux = checked; + if (window.enableAux) { + window.nchans = 5; + } else { + window.nchans = 4; + } + switch (selected) { case raw: showAux = true; @@ -69,11 +83,7 @@ export function PageSwitcher() { console.log("Error on showAux"); } - - const chartTypes = [ - { label: raw, value: raw }, - { label: spectra, value: spectra } - ]; + //---- Main functions to build and setup called once connect pressed function buildPipes(value) { funRaw.buildPipe(rawSettings); @@ -95,6 +105,8 @@ export function PageSwitcher() { } } + // --- Once connect button pressed + async function connect() { try { if (window.debugWithMock) { @@ -105,6 +117,7 @@ export function PageSwitcher() { window.source.connectionStatus.value = true; window.source.eegReadings$ = mockMuseEEG(256); setStatus(connectionText.connectedMock); + } else { // Connect with the Muse EEG Client setStatus(connectionText.connecting); @@ -114,24 +127,30 @@ export function PageSwitcher() { await window.source.start(); window.source.eegReadings$ = window.source.eegReadings; setStatus(connectionText.connected); + } if ( window.source.connectionStatus.value === true && window.source.eegReadings$ ) { + + //Build and Setup buildPipes(selected); subscriptionSetup(selected); } + } catch (err) { setStatus(connectionText.connect); console.log("Connection error: " + err); } } + // For disconnect button function refreshPage(){ window.location.reload(); } + // Display settings sliders function pipeSettingsDisplay() { switch(selected) { case raw: @@ -146,6 +165,7 @@ export function PageSwitcher() { } } + // Show the chart function renderModules() { switch (selected) { case raw: @@ -157,6 +177,7 @@ export function PageSwitcher() { } } + // Show the record button function renderRecord() { switch (selected) { case raw: From 22807ae43867a5aaeca6d43971d2d1d989ede9eb Mon Sep 17 00:00:00 2001 From: Kyle Mathewson Date: Sun, 16 Feb 2020 13:38:17 -0700 Subject: [PATCH 04/18] removing app translatoins --- src/components/App/App.js | 22 ++++++++++++++++--- src/components/App/translations/en.json | 21 ------------------ .../components/EEGEduSpectra/EEGEduSpectra.js | 2 -- 3 files changed, 19 insertions(+), 26 deletions(-) delete mode 100644 src/components/App/translations/en.json diff --git a/src/components/App/App.js b/src/components/App/App.js index 2cf2204f..08c85db6 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -2,15 +2,31 @@ import React from "react"; import { PageSwitcher } from "../PageSwitcher/PageSwitcher"; import { AppProvider, Card, Page, Link } from "@shopify/polaris"; import enTranslations from "@shopify/polaris/locales/en.json"; -import * as translations from "./translations/en.json"; export function App() { return ( - + -

{translations.footer} +

{"EEGEdu - An Interactive Electrophysiology Tutorial with the Muse brought to you by Mathewson Sons."} A Ky Kor diff --git a/src/components/App/translations/en.json b/src/components/App/translations/en.json deleted file mode 100644 index cbeee3ce..00000000 --- a/src/components/App/translations/en.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "title": "EEGEdu", - "subtitle": [ - "Welcome to the EEGEdu live EEG tutorial. ", - "This tutorial will help you learn about how neurons produce electrical activity we can measure. ", - "By sticking electrodes on the head we can pick up these changes in electricity. ", - "The tutorial will walk you through the basics of EEG signal generation, data collection, and analysis with a focus on live control based on physiological signals. ", - "All demos are done in this browser. ", - "This tutorial is designed to be used with the Muse and the Muse 2 headbands from Interaxon. ", - "If you do not have one handy, there is an option to stream mock data as well. ", - "Muse with two auxillary ports made in 2014 will not work. ", - "This tutorial has been tested on Android Pixels (Mobile) and Mac OSX (laptop) with the latest chrome browser. ", - "The first step will be to turn on your Muse headband and click the connect button. ", - "This will open a screen and will list available Muse devices. ", - "Select the serial number written on your Muse. ", - "If you do not have a Muse headband you can click the Mock Data button to use simluated data. ", - "Then scroll down to see you live brain activity!" - ], - "footer": "EEGEdu - An Interactive Electrophysiology Tutorial with the Muse brought to you by Mathewson Sons. " - -} diff --git a/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js b/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js index 1f97e8a0..633fb04d 100644 --- a/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js +++ b/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js @@ -24,11 +24,9 @@ export function getSettings() { srate: 256, name: 'Spectra', secondsToSave: 10 - } }; - export function buildPipe(Settings) { if (window.subscriptionSpectra) window.subscriptionSpectra.unsubscribe(); From 050bb4cb588465e2a9f017a12f31ef08b696582a Mon Sep 17 00:00:00 2001 From: Kyle Mathewson Date: Sun, 16 Feb 2020 17:08:16 -0700 Subject: [PATCH 05/18] simplifiy --- src/components/App/App.js | 15 +--------- src/components/PageSwitcher/PageSwitcher.js | 2 +- .../components/EEGEduRaw/EEGEduRaw.js | 17 +++-------- .../components/EEGEduRaw/translations/en.json | 1 - .../components/EEGEduSpectra/EEGEduSpectra.js | 28 ++----------------- .../EEGEduSpectra/translations/en.json | 1 - 6 files changed, 9 insertions(+), 55 deletions(-) diff --git a/src/components/App/App.js b/src/components/App/App.js index 08c85db6..8912586d 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -8,20 +8,7 @@ export function App() { diff --git a/src/components/PageSwitcher/PageSwitcher.js b/src/components/PageSwitcher/PageSwitcher.js index 9abd6382..2fe1ce65 100644 --- a/src/components/PageSwitcher/PageSwitcher.js +++ b/src/components/PageSwitcher/PageSwitcher.js @@ -243,8 +243,8 @@ export function PageSwitcher() { value={selected} /> - {pipeSettingsDisplay()} {renderModules()} + {pipeSettingsDisplay()} {renderRecord()} ); diff --git a/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js b/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js index 69b6d26f..ca3733bd 100644 --- a/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js +++ b/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js @@ -151,12 +151,11 @@ export function renderModule(channels) { } else { return( + -

{[ - "Press connect above to see the chart." - ]} -

- +

{'Press connect above to see the chart.'}

+ + ) } @@ -238,14 +237,6 @@ export function renderRecord(recordPopChange, recordPop, status, Settings, setSe return ( - -

- {"When you are recording raw data it is recommended you "} - {"first set the sampling point between epochs to 1, then set the epoch duration to 1. "} - {"Once the live chart disappears entirely you have done it correctly. "} - {"This will make it so every row of the output file is a single time point and make the data much easier to work with."} -

- ) } - - } return ( - - - - - -

{specificTranslations.description}

- - - - -
{renderCharts()}
- - - - + +
{renderCharts()}
+ ); } @@ -293,11 +279,6 @@ export function renderRecord(recordPopChange, recordPop, status, Settings, setSe return( - -

{[ - "Press the following button after adjusting the settings above in order to record the live spectra over time into a .csv file. " - ]}

- - - - Date: Mon, 17 Feb 2020 19:05:43 -0700 Subject: [PATCH 06/18] removed pipe variable, combined multicasts and subscriptions --- src/components/PageSwitcher/PageSwitcher.js | 58 +++++++++++++------ .../components/EEGEduRaw/EEGEduRaw.js | 48 +++++++-------- .../components/EEGEduSpectra/EEGEduSpectra.js | 50 +++++++--------- 3 files changed, 79 insertions(+), 77 deletions(-) diff --git a/src/components/PageSwitcher/PageSwitcher.js b/src/components/PageSwitcher/PageSwitcher.js index 2fe1ce65..b9713f0a 100644 --- a/src/components/PageSwitcher/PageSwitcher.js +++ b/src/components/PageSwitcher/PageSwitcher.js @@ -21,11 +21,22 @@ const chartTypes = [ ]; let showAux = true; // if it is even available to press (to prevent in some modules) +let source = {}; +window.multicasts = {} +window.subscriptions = {}; + +//-----Setup Constants +window.multicasts['Raw'] = null; +window.multicasts['Spectra'] = null; + +window.subscriptions['Raw'] = null; +window.subscriptions['Spectra'] = null; export function PageSwitcher() { - //-----Setup Constants + + // connection status const [status, setStatus] = useState(connectionText.connect); @@ -50,6 +61,7 @@ export function PageSwitcher() { if (window.subscriptionRaw) window.subscriptionRaw.unsubscribe(); if (window.subscriptionSpectra) window.subscriptionSpectra.unsubscribe(); + buildPipes(value); subscriptionSetup(value); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -61,7 +73,14 @@ export function PageSwitcher() { // For auxEnable settings const [checked, setChecked] = useState(false); const handleChange = useCallback((newChecked) => setChecked(newChecked), []); - + + // const [pipeRaw] = useState(); + // const [multicastRaw] = useState('0'); + // const [subscriptionRaw] = useState(); + + // const [pipeSpectra] = useState(); + // const [multicastSpectra] = useState(); + // const [subscriptionSpectra] = useState(); // ---- Manage Auxillary channel @@ -75,6 +94,7 @@ export function PageSwitcher() { switch (selected) { case raw: showAux = true; + break case spectra: showAux = true; @@ -86,17 +106,17 @@ export function PageSwitcher() { //---- Main functions to build and setup called once connect pressed function buildPipes(value) { - funRaw.buildPipe(rawSettings); - funSpectra.buildPipe(spectraSettings); + funRaw.buildPipe(source, rawSettings); + funSpectra.buildPipe(source, spectraSettings); } function subscriptionSetup(value) { switch (value) { case raw: - funRaw.setup(setRawData, rawSettings); + funRaw.setup(setRawData, rawSettings, rawData); break; case spectra: - funSpectra.setup(setSpectraData, spectraSettings); + funSpectra.setup(setSpectraData, spectraSettings, spectraData); break; default: console.log( @@ -112,26 +132,26 @@ export function PageSwitcher() { if (window.debugWithMock) { // Debug with Mock EEG Data setStatus(connectionText.connectingMock); - window.source = {}; - window.source.connectionStatus = {}; - window.source.connectionStatus.value = true; - window.source.eegReadings$ = mockMuseEEG(256); + source = {}; + source.connectionStatus = {}; + source.connectionStatus.value = true; + source.eegReadings$ = mockMuseEEG(256); setStatus(connectionText.connectedMock); } else { // Connect with the Muse EEG Client setStatus(connectionText.connecting); - window.source = new MuseClient(); - window.source.enableAux = window.enableAux; - await window.source.connect(); - await window.source.start(); - window.source.eegReadings$ = window.source.eegReadings; + source = new MuseClient(); + source.enableAux = window.enableAux; + await source.connect(); + await source.start(); + source.eegReadings$ = source.eegReadings; setStatus(connectionText.connected); } if ( - window.source.connectionStatus.value === true && - window.source.eegReadings$ + source.connectionStatus.value === true && + source.eegReadings$ ) { //Build and Setup @@ -155,11 +175,11 @@ export function PageSwitcher() { switch(selected) { case raw: return ( - funRaw.renderSliders(setRawData, setRawSettings, status, rawSettings) + funRaw.renderSliders(setRawData, setRawSettings, status, rawSettings, source) ); case spectra: return ( - funSpectra.renderSliders(setSpectraData, setSpectraSettings, status, spectraSettings) + funSpectra.renderSliders(setSpectraData, setSpectraSettings, status, spectraSettings, source) ); default: console.log('Error rendering settings display'); } diff --git a/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js b/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js index ca3733bd..97dc5cf1 100644 --- a/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js +++ b/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js @@ -1,6 +1,6 @@ import React from "react"; import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal, } from "@shopify/polaris"; -import { catchError, multicast } from "rxjs/operators"; +import { multicast } from "rxjs/operators"; import { take, takeUntil } from "rxjs/operators"; import { Subject, timer } from "rxjs"; import { Line } from "react-chartjs-2"; @@ -25,15 +25,12 @@ export function getSettings () { } }; -export function buildPipe(Settings) { - if (window.subscriptionRaw) window.subscriptionRaw.unsubscribe(); - - window.pipeRaw$ = null; - window.multicastRaw$ = null; - window.subscriptionRaw = null; - +export function buildPipe(source, Settings) { + if (window.subscriptions[Settings.name]) window.subscriptions[Settings.name].unsubscribe(); + + console.log("Building Multicast for " + Settings.name); // Build Pipe - window.pipeRaw$ = zipSamples(window.source.eegReadings$).pipe( + window.multicasts[Settings.name] = zipSamples(source.eegReadings$).pipe( bandpassFilter({ cutoffFrequencies: [Settings.cutOffLow, Settings.cutOffHigh], nbChannels: window.nchans }), @@ -41,39 +38,34 @@ export function buildPipe(Settings) { duration: Settings.duration, interval: Settings.interval, samplingRate: Settings.srate - }), - catchError(err => { - console.log(err); }) - ); - window.multicastRaw$ = window.pipeRaw$.pipe( - multicast(() => new Subject()) + ).pipe(multicast(() => new Subject()) ); } -export function setup(setData, Settings) { +export function setup(setData, Settings, inData) { console.log("Subscribing to " + Settings.name); - if (window.multicastRaw$) { - window.subscriptionRaw = window.multicastRaw$.subscribe(data => { - setData(rawData => { - Object.values(rawData).forEach((channel, index) => { + if (window.multicasts[Settings.name]) { + window.multicasts[Settings.name].connect(); + window.subscriptions[Settings.name] = window.multicasts[Settings.name].subscribe(data => { + setData(inData => { + Object.values(inData).forEach((channel, index) => { channel.datasets[0].data = data.data[index]; channel.xLabels = generateXTics(Settings.srate, Settings.duration); channel.datasets[0].qual = standardDeviation(data.data[index]) }); return { - ch0: rawData.ch0, - ch1: rawData.ch1, - ch2: rawData.ch2, - ch3: rawData.ch3, - ch4: rawData.ch4 + ch0: inData.ch0, + ch1: inData.ch1, + ch2: inData.ch2, + ch3: inData.ch3, + ch4: inData.ch4 }; }); }); - window.multicastRaw$.connect(); console.log("Subscribed to Raw"); } } @@ -168,10 +160,10 @@ export function renderModule(channels) { ); } -export function renderSliders(setData, setSettings, status, Settings) { +export function renderSliders(setData, setSettings, status, Settings, source) { function resetPipeSetup(value) { - buildPipe(Settings); + buildPipe(source, Settings); setup(setData, Settings) } diff --git a/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js b/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js index e126e4c7..71653ac4 100644 --- a/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js +++ b/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js @@ -1,6 +1,6 @@ import React from "react"; import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal, } from "@shopify/polaris"; -import { catchError, multicast } from "rxjs/operators"; +import { multicast } from "rxjs/operators"; import { take, takeUntil } from "rxjs/operators"; import { Subject, timer } from "rxjs"; import { Line } from "react-chartjs-2"; @@ -27,15 +27,12 @@ export function getSettings() { } }; -export function buildPipe(Settings) { - if (window.subscriptionSpectra) window.subscriptionSpectra.unsubscribe(); - - window.pipeSpectra$ = null; - window.multicastSpectra$ = null; - window.subscriptionSpectra = null; +export function buildPipe(source, Settings) { + if (window.subscriptions[Settings.name]) window.subscriptions[Settings.name].unsubscribe(); + console.log("Building Multicast for " + Settings.name); // Build Pipe - window.pipeSpectra$ = zipSamples(window.source.eegReadings$).pipe( + window.multicasts[Settings.name] = zipSamples(source.eegReadings$).pipe( bandpassFilter({ cutoffFrequencies: [Settings.cutOffLow, Settings.cutOffHigh], nbChannels: window.nchans }), @@ -45,39 +42,32 @@ export function buildPipe(Settings) { samplingRate: Settings.srate }), fft({ bins: Settings.bins }), - sliceFFT([Settings.sliceFFTLow, Settings.sliceFFTHigh]), - catchError(err => { - console.log(err); - }) - ); - - window.multicastSpectra$ = window.pipeSpectra$.pipe( - multicast(() => new Subject()) - ); + sliceFFT([Settings.sliceFFTLow, Settings.sliceFFTHigh]) + ).pipe(multicast(() => new Subject())); } -export function setup(setData, Settings) { +export function setup(setData, Settings, inData) { console.log("Subscribing to " + Settings.name); - if (window.multicastSpectra$) { - window.subscriptionSpectra = window.multicastSpectra$.subscribe(data => { - setData(spectraData => { - Object.values(spectraData).forEach((channel, index) => { + if (window.multicasts[Settings.name]) { + window.multicasts[Settings.name].connect(); + window.subscriptions[Settings.name] = window.multicasts[Settings.name].subscribe(data => { + setData(inData => { + Object.values(inData).forEach((channel, index) => { channel.datasets[0].data = data.psd[index]; channel.xLabels = data.freqs; }); return { - ch0: spectraData.ch0, - ch1: spectraData.ch1, - ch2: spectraData.ch2, - ch3: spectraData.ch3, - ch4: spectraData.ch4 + ch0: inData.ch0, + ch1: inData.ch1, + ch2: inData.ch2, + ch3: inData.ch3, + ch4: inData.ch4 }; }); }); - window.multicastSpectra$.connect(); console.log("Subscribed to " + Settings.name); } } @@ -185,10 +175,10 @@ export function renderModule(channels) { ); } -export function renderSliders(setData, setSettings, status, Settings) { +export function renderSliders(setData, setSettings, status, Settings, source) { function resetPipeSetup(value) { - buildPipe(Settings); + buildPipe(source, Settings); setup(setData, Settings) } From a3f2c176ce85cb601e90187d2c464a1c6478f0b7 Mon Sep 17 00:00:00 2001 From: Kyle Mathewson Date: Sat, 22 Feb 2020 22:42:19 -0700 Subject: [PATCH 07/18] work --- .../PageSwitcher/components/EEGEduRaw/EEGEduRaw.js | 8 +++----- .../components/EEGEduSpectra/EEGEduSpectra.js | 5 +++-- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js b/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js index 97dc5cf1..001f51e5 100644 --- a/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js +++ b/src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js @@ -21,19 +21,19 @@ export function getSettings () { srate: 256, duration: 1024, name: 'Raw', - secondsToSave: 10 + secondsToSave: 10, + nchans: 4 } }; export function buildPipe(source, Settings) { if (window.subscriptions[Settings.name]) window.subscriptions[Settings.name].unsubscribe(); - console.log("Building Multicast for " + Settings.name); // Build Pipe window.multicasts[Settings.name] = zipSamples(source.eegReadings$).pipe( bandpassFilter({ cutoffFrequencies: [Settings.cutOffLow, Settings.cutOffHigh], - nbChannels: window.nchans }), + nbChannels: Settings.nchans }), epoch({ duration: Settings.duration, interval: Settings.interval, @@ -45,7 +45,6 @@ export function buildPipe(source, Settings) { export function setup(setData, Settings, inData) { console.log("Subscribing to " + Settings.name); - if (window.multicasts[Settings.name]) { window.multicasts[Settings.name].connect(); window.subscriptions[Settings.name] = window.multicasts[Settings.name].subscribe(data => { @@ -65,7 +64,6 @@ export function setup(setData, Settings, inData) { }; }); }); - console.log("Subscribed to Raw"); } } diff --git a/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js b/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js index 71653ac4..c04c180c 100644 --- a/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js +++ b/src/components/PageSwitcher/components/EEGEduSpectra/EEGEduSpectra.js @@ -23,7 +23,8 @@ export function getSettings() { duration: 1024, srate: 256, name: 'Spectra', - secondsToSave: 10 + secondsToSave: 10, + nchans: 4 } }; @@ -35,7 +36,7 @@ export function buildPipe(source, Settings) { window.multicasts[Settings.name] = zipSamples(source.eegReadings$).pipe( bandpassFilter({ cutoffFrequencies: [Settings.cutOffLow, Settings.cutOffHigh], - nbChannels: window.nchans }), + nbChannels: Settings.nchans }), epoch({ duration: Settings.duration, interval: Settings.interval, From 60e593d225729aa873473320f25130b20edfa940 Mon Sep 17 00:00:00 2001 From: Kyle Mathewson Date: Sat, 7 Mar 2020 22:38:49 -0700 Subject: [PATCH 08/18] simplified all --- package.json | 3 +- public/index.html | 1 + src/components/PageSwitcher/PageSwitcher.js | 272 ++++++++------- .../components/EEGEduRaw/EEGEduRaw.js | 330 ------------------ .../components/EEGEduRaw/translations/en.json | 5 - .../components/EEGEduSpectra/EEGEduSpectra.js | 288 +-------------- yarn.lock | 229 +++++++++++- 7 files changed, 391 insertions(+), 737 deletions(-) delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/EEGEduRaw.js delete mode 100644 src/components/PageSwitcher/components/EEGEduRaw/translations/en.json diff --git a/package.json b/package.json index 1531b414..bd8e94a5 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "react-p5-wrapper": "^2.0.0", "react-scripts": "^3.2.0", "react-youtube": "^7.9.0", - "rxjs": "^6.5.3" + "rxjs": "^6.5.3", + "socket.io": "^2.3.0" }, "scripts": { "start": "react-scripts --max_old_space_size=4096 start", diff --git a/public/index.html b/public/index.html index be6c1d8d..e15e36d1 100644 --- a/public/index.html +++ b/public/index.html @@ -43,5 +43,6 @@ } }); + diff --git a/src/components/PageSwitcher/PageSwitcher.js b/src/components/PageSwitcher/PageSwitcher.js index b9713f0a..c8d03b12 100644 --- a/src/components/PageSwitcher/PageSwitcher.js +++ b/src/components/PageSwitcher/PageSwitcher.js @@ -1,70 +1,56 @@ import React, { useState, useCallback } from "react"; -import { MuseClient } from "muse-js"; -import { Select, Card, Stack, Button, ButtonGroup, Checkbox } from "@shopify/polaris"; +import { MuseClient, zipSamples } from "muse-js"; +import { Card, Stack, Button, ButtonGroup, Checkbox , RangeSlider, Modal, TextContainer,} from "@shopify/polaris"; import { mockMuseEEG } from "./utils/mockMuseEEG"; import * as connectionText from "./utils/connectionText"; import { emptyAuxChannelData } from "./utils/chartOptions"; +import { bandpassFilter, epoch, fft, sliceFFT} from "@neurosity/pipes"; +import { Subject } from "rxjs"; +import { multicast } from "rxjs/operators"; +import { takeUntil } from "rxjs/operators"; +import { timer } from "rxjs"; -import * as funRaw from "./components/EEGEduRaw/EEGEduRaw"; -import * as funSpectra from "./components/EEGEduSpectra/EEGEduSpectra"; +import { RenderModule } from "./components/EEGEduSpectra/EEGEduSpectra"; -let modules = { - "raw": "1. Raw and Filtered Data", - "spectra": "2. Frequency Spectra" -}; -const raw = modules.raw; -const spectra = modules.spectra; +const io = require('socket.io-client'); -const chartTypes = [ - { label: raw, value: raw }, - { label: spectra, value: spectra } -]; let showAux = true; // if it is even available to press (to prevent in some modules) let source = {}; -window.multicasts = {} -window.subscriptions = {}; + //-----Setup Constants -window.multicasts['Raw'] = null; -window.multicasts['Spectra'] = null; +let thisMulticast = null; +let subscription = null; + +function getSettings() { + return { + cutOffLow: 1, + cutOffHigh: 100, + interval: 100, + bins: 256, + sliceFFTLow: 1, + sliceFFTHigh: 100, + duration: 1024, + srate: 256, + name: 'Spectra', + secondsToSave: 1000, + nchans: 4 + } +}; -window.subscriptions['Raw'] = null; -window.subscriptions['Spectra'] = null; export function PageSwitcher() { - - - // connection status const [status, setStatus] = useState(connectionText.connect); // data pulled out of multicast$ - const [rawData, setRawData] = useState(emptyAuxChannelData); - const [spectraData, setSpectraData] = useState(emptyAuxChannelData); - - // for picking a new module - const [selected, setSelected] = useState(raw); + const [Data, setData] = useState(emptyAuxChannelData); // pipe settings - const [rawSettings, setRawSettings] = useState(funRaw.getSettings); - const [spectraSettings, setSpectraSettings] = useState(funSpectra.getSettings); - - // Whenever settings changed - const handleSelectChange = useCallback(value => { - setSelected(value); - - console.log("Switching to: " + value); - - if (window.subscriptionRaw) window.subscriptionRaw.unsubscribe(); - if (window.subscriptionSpectra) window.subscriptionSpectra.unsubscribe(); - - buildPipes(value); - subscriptionSetup(value); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + const [Settings, setSettings] = useState(getSettings); // for popup flag when recording const [recordPop, setRecordPop] = useState(false); @@ -74,14 +60,6 @@ export function PageSwitcher() { const [checked, setChecked] = useState(false); const handleChange = useCallback((newChecked) => setChecked(newChecked), []); - // const [pipeRaw] = useState(); - // const [multicastRaw] = useState('0'); - // const [subscriptionRaw] = useState(); - - // const [pipeSpectra] = useState(); - // const [multicastSpectra] = useState(); - // const [subscriptionSpectra] = useState(); - // ---- Manage Auxillary channel window.enableAux = checked; @@ -91,37 +69,51 @@ export function PageSwitcher() { window.nchans = 4; } - switch (selected) { - case raw: - showAux = true; - - break - case spectra: - showAux = true; - break - default: - console.log("Error on showAux"); - } + showAux = true; //---- Main functions to build and setup called once connect pressed - function buildPipes(value) { - funRaw.buildPipe(source, rawSettings); - funSpectra.buildPipe(source, spectraSettings); + function buildPipes() { + if (subscription) subscription.unsubscribe(); + + console.log("Building Multicast for " + Settings.name); + // Build Pipe + thisMulticast = zipSamples(source.eegReadings$).pipe( + bandpassFilter({ + cutoffFrequencies: [Settings.cutOffLow, Settings.cutOffHigh], + nbChannels: Settings.nchans }), + epoch({ + duration: Settings.duration, + interval: Settings.interval, + samplingRate: Settings.srate + }), + fft({ bins: Settings.bins }), + sliceFFT([Settings.sliceFFTLow, Settings.sliceFFTHigh]) + ).pipe(multicast(() => new Subject())); } - function subscriptionSetup(value) { - switch (value) { - case raw: - funRaw.setup(setRawData, rawSettings, rawData); - break; - case spectra: - funSpectra.setup(setSpectraData, spectraSettings, spectraData); - break; - default: - console.log( - "Error on handle Subscriptions. Couldn't switch to: " + value - ); + function subscriptionSetup() { + console.log("Subscribing to " + Settings.name); + + if (thisMulticast) { + thisMulticast.connect(); + subscription = thisMulticast.subscribe(data => { + setData(inData => { + Object.values(inData).forEach((channel, index) => { + channel.datasets[0].data = data.psd[index]; + channel.xLabels = data.freqs; + }); + + return { + ch0: inData.ch0, + ch1: inData.ch1, + ch2: inData.ch2, + ch3: inData.ch3, + ch4: inData.ch4 + }; + }); + }); + console.log("Subscribed to " + Settings.name); } } @@ -129,6 +121,8 @@ export function PageSwitcher() { async function connect() { try { + + if (window.debugWithMock) { // Debug with Mock EEG Data setStatus(connectionText.connectingMock); @@ -155,8 +149,8 @@ export function PageSwitcher() { ) { //Build and Setup - buildPipes(selected); - subscriptionSetup(selected); + buildPipes(); + subscriptionSetup(); } } catch (err) { @@ -170,49 +164,90 @@ export function PageSwitcher() { window.location.reload(); } - // Display settings sliders - function pipeSettingsDisplay() { - switch(selected) { - case raw: - return ( - funRaw.renderSliders(setRawData, setRawSettings, status, rawSettings, source) - ); - case spectra: - return ( - funSpectra.renderSliders(setSpectraData, setSpectraSettings, status, spectraSettings, source) - ); - default: console.log('Error rendering settings display'); - } - } - // Show the chart function renderModules() { - switch (selected) { - case raw: - return ; - case spectra: - return ; - default: - console.log("Error on renderCharts switch."); - } + return ; } // Show the record button function renderRecord() { - switch (selected) { - case raw: - return ( - funRaw.renderRecord(recordPopChange, recordPop, status, rawSettings, setRawSettings) - ) - case spectra: - return ( - funSpectra.renderRecord(recordPopChange, recordPop, status, spectraSettings, setSpectraSettings) - ) - default: - console.log("Error on renderRecord."); + function handleSecondsToSaveRangeSliderChange(value) { + setSettings(prevState => ({...prevState, secondsToSave: value})); } + + return( + + + + + + + + + +

+ Your data is currently recording, + once complete it will be downloaded as a .csv file + and can be opened with your favorite spreadsheet program. + Close this window once the download completes. +

+ + + + + + ) } + async function saveToCSV(Settings) { + var socket = await io.connect('75.152.213.182:8080'); + + console.log('Streaming ' + Settings.secondsToSave + ' seconds...'); + var localObservable$ = null; + + // Create timer + const timer$ = timer(Settings.secondsToSave * 1000); + + // put selected observable object into local and start taking samples + localObservable$ = thisMulticast.pipe( + takeUntil(timer$) + ); + + // now with header in place subscribe to each epoch and log it + localObservable$.subscribe({ + next(x) { + // console.log('Next packet: ', x) + socket.emit('data', x) + + }, + error(err) { console.log(err); }, + complete() { + console.log('Done streaming') + } + }); + } + + // Render the entire page using above functions return ( @@ -255,16 +290,7 @@ export function PageSwitcher() { /> - -