Skip to content

Commit 5e4de04

Browse files
kylemathkylemath
authored
Merge pull request #116 from kylemath/aux2
[ready to deploy] Auxillary channel toggle
2 parents d819ef6 + 02f2aee commit 5e4de04

File tree

15 files changed

+322
-251
lines changed

15 files changed

+322
-251
lines changed

‎src/components/PageSwitcher/PageSwitcher.js‎

Lines changed: 76 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useState, useCallback } from "react";
22
import { MuseClient } from "muse-js";
3-
import { Select, Card, Stack, Button, ButtonGroup } from "@shopify/polaris";
3+
import { Select, Card, Stack, Button, ButtonGroup, Checkbox } from "@shopify/polaris";
44

55
import { mockMuseEEG } from "./utils/mockMuseEEG";
66
import * as translations from "./translations/en.json";
77
import * as generalTranslations from "./components/translations/en";
8-
import { emptyChannelData, emptySingleChannelData } from "./components/chartOptions";
8+
import { emptyAuxChannelData } from "./components/chartOptions";
99

1010
import * as funIntro from "./components/EEGEduIntro/EEGEduIntro"
1111
import * as funHeartRaw from "./components/EEGEduHeartRaw/EEGEduHeartRaw"
@@ -35,19 +35,30 @@ const predict = translations.types.predict;
3535

3636
export function PageSwitcher() {
3737

38+
// For auxEnable settings
39+
const [checked, setChecked] = useState(false);
40+
const handleChange = useCallback((newChecked) => setChecked(newChecked), []);
41+
window.enableAux = checked;
42+
if (window.enableAux) {
43+
window.nchans = 5;
44+
} else {
45+
window.nchans = 4;
46+
}
47+
let showAux = true; // if it is even available to press (to prevent in some modules)
48+
3849
// data pulled out of multicast$
39-
const [introData, setIntroData] = useState(emptyChannelData)
40-
const [heartRawData, setHeartRawData] = useState(emptyChannelData);
41-
const [heartSpectraData, setHeartSpectraData] = useState(emptySingleChannelData);
42-
const [rawData, setRawData] = useState(emptyChannelData);
43-
const [spectraData, setSpectraData] = useState(emptyChannelData);
44-
const [bandsData, setBandsData] = useState(emptyChannelData);
45-
const [animateData, setAnimateData] = useState(emptyChannelData);
46-
const [spectroData, setSpectroData] = useState(emptyChannelData);
47-
const [alphaData, setAlphaData] = useState(emptyChannelData);
48-
const [ssvepData, setSsvepData] = useState(emptyChannelData);
49-
const [evokedData, setEvokedData] = useState(emptyChannelData);
50-
const [predictData, setPredictData] = useState(emptyChannelData);
50+
const [introData, setIntroData] = useState(emptyAuxChannelData)
51+
const [heartRawData, setHeartRawData] = useState(emptyAuxChannelData);
52+
const [heartSpectraData, setHeartSpectraData] = useState(emptyAuxChannelData);
53+
const [rawData, setRawData] = useState(emptyAuxChannelData);
54+
const [spectraData, setSpectraData] = useState(emptyAuxChannelData);
55+
const [bandsData, setBandsData] = useState(emptyAuxChannelData);
56+
const [animateData, setAnimateData] = useState(emptyAuxChannelData);
57+
const [spectroData, setSpectroData] = useState(emptyAuxChannelData);
58+
const [alphaData, setAlphaData] = useState(emptyAuxChannelData);
59+
const [ssvepData, setSsvepData] = useState(emptyAuxChannelData);
60+
const [evokedData, setEvokedData] = useState(emptyAuxChannelData);
61+
const [predictData, setPredictData] = useState(emptyAuxChannelData);
5162

5263
// pipe settings
5364
const [introSettings] = useState(funIntro.getSettings);
@@ -98,6 +109,48 @@ export function PageSwitcher() {
98109
const [recordTwoPop, setRecordTwoPop] = useState(false);
99110
const recordTwoPopChange = useCallback(() => setRecordTwoPop(!recordTwoPop), [recordTwoPop]);
100111

112+
switch (selected) {
113+
case intro:
114+
showAux = false;
115+
break
116+
case heartRaw:
117+
showAux = false;
118+
break
119+
case heartSpectra:
120+
showAux = false;
121+
break
122+
case raw:
123+
showAux = true;
124+
break
125+
case spectra:
126+
showAux = true;
127+
break
128+
case bands:
129+
showAux = true;
130+
break
131+
case animate:
132+
showAux = false;
133+
break
134+
case spectro:
135+
showAux = false;
136+
break
137+
case alpha:
138+
showAux = true;
139+
break
140+
case ssvep:
141+
showAux = true;
142+
break
143+
case evoked:
144+
showAux = true;
145+
break
146+
case predict:
147+
showAux = false;
148+
break
149+
default:
150+
console.log("Error on showAux");
151+
}
152+
153+
101154
const chartTypes = [
102155
{ label: intro, value: intro },
103156
{ label: heartRaw, value: heartRaw },
@@ -188,6 +241,7 @@ export function PageSwitcher() {
188241
// Connect with the Muse EEG Client
189242
setStatus(generalTranslations.connecting);
190243
window.source = new MuseClient();
244+
window.source.enableAux = window.enableAux;
191245
await window.source.connect();
192246
await window.source.start();
193247
window.source.eegReadings$ = window.source.eegReadings;
@@ -256,7 +310,7 @@ export function PageSwitcher() {
256310
}
257311
}
258312

259-
function renderCharts() {
313+
function renderModules() {
260314
switch (selected) {
261315
case intro:
262316
return <funIntro.renderModule data={introData} />;
@@ -368,6 +422,12 @@ export function PageSwitcher() {
368422
{generalTranslations.disconnect}
369423
</Button>
370424
</ButtonGroup>
425+
<Checkbox
426+
label="Enable Muse Auxillary Channel"
427+
checked={checked}
428+
onChange={handleChange}
429+
disabled={!showAux || status !== generalTranslations.connect}
430+
/>
371431
</Stack>
372432
</Card>
373433
<Card title={translations.title} sectioned>
@@ -379,7 +439,7 @@ export function PageSwitcher() {
379439
/>
380440
</Card>
381441
{pipeSettingsDisplay()}
382-
{renderCharts()}
442+
{renderModules()}
383443
{renderRecord()}
384444
</React.Fragment>
385445
);

‎src/components/PageSwitcher/components/EEGEduAlpha/EEGEduAlpha.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export function getSettings() {
3030
return {
3131
cutOffLow: 2,
3232
cutOffHigh: 20,
33-
nbChannels: 4,
3433
interval: 100,
3534
bins: 256,
3635
sliceFFTLow: 1,
@@ -53,7 +52,7 @@ export function buildPipe(Settings) {
5352
window.pipeAlpha$ = zipSamples(window.source.eegReadings$).pipe(
5453
bandpassFilter({
5554
cutoffFrequencies: [Settings.cutOffLow, Settings.cutOffHigh],
56-
nbChannels: Settings.nbChannels }),
55+
nbChannels: window.nchans }),
5756
epoch({
5857
duration: Settings.duration,
5958
interval: Settings.interval,
@@ -78,17 +77,16 @@ export function setup(setData, Settings) {
7877
window.subscriptionAlpha = window.multicastAlpha$.subscribe(data => {
7978
setData(alphaData => {
8079
Object.values(alphaData).forEach((channel, index) => {
81-
if (index < 4) {
82-
channel.datasets[0].data = data.psd[index];
83-
channel.xLabels = data.freqs;
84-
}
80+
channel.datasets[0].data = data.psd[index];
81+
channel.xLabels = data.freqs;
8582
});
8683

8784
return {
8885
ch0: alphaData.ch0,
8986
ch1: alphaData.ch1,
9087
ch2: alphaData.ch2,
91-
ch3: alphaData.ch3
88+
ch3: alphaData.ch3,
89+
ch4: alphaData.ch4
9290
};
9391
});
9492
});
@@ -101,6 +99,7 @@ export function setup(setData, Settings) {
10199
export function renderModule(channels) {
102100
function renderCharts() {
103101
return Object.values(channels.data).map((channel, index) => {
102+
if (index === 0) {
104103
const options = {
105104
...generalOptions,
106105
scales: {
@@ -136,7 +135,6 @@ export function renderModule(channels) {
136135
}
137136
};
138137

139-
if (index === 0) {
140138
return (
141139
<Card.Section key={"Card_" + index}>
142140
<Line key={"Line_" + index} data={channel} options={options} />

‎src/components/PageSwitcher/components/EEGEduAnimate/EEGEduAnimate.js‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export function getSettings () {
3232
return {
3333
cutOffLow: 2,
3434
cutOffHigh: 20,
35-
nbChannels: 4,
3635
interval: 16,
3736
bins: 256,
3837
duration: 128,
@@ -52,7 +51,7 @@ export function buildPipe(Settings) {
5251
window.pipeAnimate$ = zipSamples(window.source.eegReadings$).pipe(
5352
bandpassFilter({
5453
cutoffFrequencies: [Settings.cutOffLow, Settings.cutOffHigh],
55-
nbChannels: Settings.nbChannels }),
54+
nbChannels: window.nchans }),
5655
epoch({
5756
duration: Settings.duration,
5857
interval: Settings.interval,
@@ -76,7 +75,6 @@ export function setup(setData, Settings) {
7675
window.subscriptionAnimate = window.multicastAnimate$.subscribe(data => {
7776
setData(animateData => {
7877
Object.values(animateData).forEach((channel, index) => {
79-
if (index < 4) {
8078
channel.datasets[0].data = [
8179
data.delta[index],
8280
data.theta[index],
@@ -85,14 +83,14 @@ export function setup(setData, Settings) {
8583
data.gamma[index]
8684
];
8785
channel.xLabels = bandLabels;
88-
}
8986
});
9087

9188
return {
9289
ch0: animateData.ch0,
9390
ch1: animateData.ch1,
9491
ch2: animateData.ch2,
95-
ch3: animateData.ch3
92+
ch3: animateData.ch3,
93+
ch4: animateData.ch4
9694
};
9795
});
9896
});
@@ -129,14 +127,15 @@ export function renderModule(channels) {
129127
}, []);
130128

131129
return Object.values(channels.data).map((channel, index) => {
132-
// console.log(channel)
133130
if (channel.datasets[0].data) {
134-
// console.log( channel.datasets[0].data[2])
135-
window.delta = channel.datasets[0].data[0];
136-
window.theta = channel.datasets[0].data[1];
137-
window.alpha = channel.datasets[0].data[2];
138-
window.beta = channel.datasets[0].data[3];
139-
window.gamma = channel.datasets[0].data[4];
131+
if (index === 1) {
132+
// console.log( channel.datasets[0].data[2])
133+
window.delta = channel.datasets[0].data[0];
134+
window.theta = channel.datasets[0].data[1];
135+
window.alpha = channel.datasets[0].data[2];
136+
window.beta = channel.datasets[0].data[3];
137+
window.gamma = channel.datasets[0].data[4];
138+
}
140139
}
141140

142141
let thisSketch = sketchTone;

‎src/components/PageSwitcher/components/EEGEduBands/EEGEduBands.js‎

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ export function getSettings () {
2828
return {
2929
cutOffLow: 2,
3030
cutOffHigh: 20,
31-
nbChannels: 4,
3231
interval: 100,
3332
bins: 256,
3433
duration: 1024,
@@ -48,7 +47,7 @@ export function buildPipe(Settings) {
4847
window.pipeBands$ = zipSamples(window.source.eegReadings$).pipe(
4948
bandpassFilter({
5049
cutoffFrequencies: [Settings.cutOffLow, Settings.cutOffHigh],
51-
nbChannels: Settings.nbChannels }),
50+
nbChannels: window.nchans }),
5251
epoch({
5352
duration: Settings.duration,
5453
interval: Settings.interval,
@@ -72,23 +71,22 @@ export function setup(setData, Settings) {
7271
window.subscriptionBands = window.multicastBands$.subscribe(data => {
7372
setData(bandsData => {
7473
Object.values(bandsData).forEach((channel, index) => {
75-
if (index < 4) {
76-
channel.datasets[0].data = [
77-
data.delta[index],
78-
data.theta[index],
79-
data.alpha[index],
80-
data.beta[index],
81-
data.gamma[index]
82-
];
83-
channel.xLabels = bandLabels;
84-
}
74+
channel.datasets[0].data = [
75+
data.delta[index],
76+
data.theta[index],
77+
data.alpha[index],
78+
data.beta[index],
79+
data.gamma[index]
80+
];
81+
channel.xLabels = bandLabels;
8582
});
8683

8784
return {
8885
ch0: bandsData.ch0,
8986
ch1: bandsData.ch1,
9087
ch2: bandsData.ch2,
91-
ch3: bandsData.ch3
88+
ch3: bandsData.ch3,
89+
ch4: bandsData.ch4
9290
};
9391
});
9492
});
@@ -101,41 +99,45 @@ export function setup(setData, Settings) {
10199
export function renderModule(channels) {
102100
function renderCharts() {
103101
return Object.values(channels.data).map((channel, index) => {
104-
const options = {
105-
...generalOptions,
106-
scales: {
107-
xAxes: [
108-
{
109-
scaleLabel: {
110-
...generalOptions.scales.xAxes[0].scaleLabel,
111-
labelString: specificTranslations.xlabel
102+
if (index < window.nchans) {
103+
const options = {
104+
...generalOptions,
105+
scales: {
106+
xAxes: [
107+
{
108+
scaleLabel: {
109+
...generalOptions.scales.xAxes[0].scaleLabel,
110+
labelString: specificTranslations.xlabel
111+
}
112112
}
113-
}
114-
],
115-
yAxes: [
116-
{
117-
scaleLabel: {
118-
...generalOptions.scales.yAxes[0].scaleLabel,
119-
labelString: specificTranslations.ylabel
120-
},
121-
ticks: {
122-
max: 25,
123-
min: 0
113+
],
114+
yAxes: [
115+
{
116+
scaleLabel: {
117+
...generalOptions.scales.yAxes[0].scaleLabel,
118+
labelString: specificTranslations.ylabel
119+
},
120+
ticks: {
121+
max: 25,
122+
min: 0
123+
}
124124
}
125-
}
126-
]
127-
},
128-
title: {
129-
...generalOptions.title,
130-
text: generalTranslations.channel + channelNames[index]
131-
}
132-
};
125+
]
126+
},
127+
title: {
128+
...generalOptions.title,
129+
text: generalTranslations.channel + channelNames[index]
130+
}
131+
};
133132

134-
return (
135-
<Card.Section key={"Card_" + index}>
136-
<Bar key={"Line_" + index} data={channel} options={options} />
137-
</Card.Section>
138-
);
133+
return (
134+
<Card.Section key={"Card_" + index}>
135+
<Bar key={"Line_" + index} data={channel} options={options} />
136+
</Card.Section>
137+
);
138+
} else {
139+
return null
140+
}
139141
});
140142
}
141143

0 commit comments

Comments
 (0)