Created record timer for each page in seconds, using a slider beside the button to pick time

src/components/PageSwitcher/PageSwitcher.js

@@ -63,15 +63,15 @@ export function PageSwitcher() {
   // pipe settings
   const [introSettings] = useState(funIntro.getSettings);
   const [heartRawSettings] = useState(funHeartRaw.getSettings);
-  const [heartSpectraSettings] = useState(funHeartSpectra.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] = useState(funEvoked.getSettings);
+  const [evokedSettings, setEvokedSettings] = useState(funEvoked.getSettings);
   const [predictSettings, setPredictSettings] = useState(funPredict.getSettings);
 
   // connection status
@@ -349,35 +349,35 @@ export function PageSwitcher() {
         return null
       case heartSpectra:
         return (
-          funHeartSpectra.renderRecord(recordPopChange, recordPop, status, heartSpectraSettings)
+          funHeartSpectra.renderRecord(recordPopChange, recordPop, status, heartSpectraSettings, setHeartSpectraSettings)
         )
       case raw: 
         return (
-          funRaw.renderRecord(recordPopChange, recordPop, status, rawSettings)
+          funRaw.renderRecord(recordPopChange, recordPop, status, rawSettings, setRawSettings)
         )    
       case spectra:
         return (
-          funSpectra.renderRecord(recordPopChange, recordPop, status, spectraSettings)
+          funSpectra.renderRecord(recordPopChange, recordPop, status, spectraSettings, setSpectraSettings)
         )      
       case bands:
         return (
-          funBands.renderRecord(recordPopChange, recordPop, status, bandsSettings)
+          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)
+          funAlpha.renderRecord(recordPopChange, recordPop, status, alphaSettings, recordTwoPopChange, recordTwoPop, setAlphaSettings)
         )
       case ssvep:
         return (
-          funSsvep.renderRecord(recordPopChange, recordPop, status, ssvepSettings, recordTwoPopChange, recordTwoPop)
+          funSsvep.renderRecord(recordPopChange, recordPop, status, ssvepSettings, recordTwoPopChange, recordTwoPop, setSsvepSettings)
         )
       case evoked:
         return (
-          funEvoked.renderRecord(recordPopChange, recordPop, status, evokedSettings)
+          funEvoked.renderRecord(recordPopChange, recordPop, status, evokedSettings, setEvokedSettings)
         )
       case predict:
         return (

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

@@ -3,8 +3,8 @@ import { catchError, multicast } from "rxjs/operators";
 
 import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal } from "@shopify/polaris";
 import { saveAs } from 'file-saver';
-import { take } from "rxjs/operators";
-import { Subject } from "rxjs";
+import { take, takeUntil } from "rxjs/operators";
+import { Subject, timer } from "rxjs";
 
 import { channelNames } from "muse-js";
 import { Line } from "react-chartjs-2";
@@ -36,7 +36,8 @@ export function getSettings() {
     sliceFFTHigh: 30,
     duration: 1024,
     srate: 256,
-    name: 'Alpha'
+    name: 'Alpha',
+    secondsToSave: 10
   }
 };
 
@@ -247,10 +248,23 @@ export function renderSliders(setData, setSettings, status, Settings) {
   )
 }
 
-export function renderRecord(recordPopChange, recordPop, status, Settings, recordTwoPopChange, recordTwoPop) {
+export function renderRecord(recordPopChange, recordPop, status, Settings, recordTwoPopChange, recordTwoPop, setSettings) {
+
+  function handleSecondsToSaveRangeSliderChange(value) {
+    setSettings(prevState => ({...prevState, secondsToSave: value}));
+  }
+
   return(
     <Card title={'Record ' + Settings.name +' Data'} sectioned>
       <Stack>
+        <RangeSlider 
+          disabled={status === generalTranslations.connect} 
+          min={2}
+          max={180}
+          label={'Recording Length: ' + Settings.secondsToSave + ' Seconds'} 
+          value={Settings.secondsToSave} 
+          onChange={handleSecondsToSaveRangeSliderChange} 
+        />
         <ButtonGroup>
           <Button 
             onClick={() => {
@@ -318,8 +332,7 @@ export function renderRecord(recordPopChange, recordPop, status, Settings, recor
 
 
 function saveToCSV(Settings, condition) {
-  const numSamplesToSave = 50;
-  console.log('Saving ' + numSamplesToSave + ' samples...');
+  console.log('Saving ' + Settings.secondsToSave + ' seconds...');
   var localObservable$ = null;
   const dataToSave = [];
 
@@ -346,9 +359,13 @@ function saveToCSV(Settings, condition) {
       );   
     }
   });
+
+  // setup timer
+  const timer$ = timer(Settings.secondsToSave * 1000)
+
   // put selected observable object into local and start taking samples
   localObservable$ = window.multicastAlpha$.pipe(
-    take(numSamplesToSave)
+    takeUntil(timer$)
   );   
 
 

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

@@ -3,8 +3,8 @@ import { catchError, multicast } from "rxjs/operators";
 
 import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal } from "@shopify/polaris";
 import { saveAs } from 'file-saver';
-import { take } from "rxjs/operators";
-import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import { Subject, timer } from "rxjs";
 
 import { channelNames } from "muse-js";
 import { Bar } from "react-chartjs-2";
@@ -32,7 +32,8 @@ export function getSettings () {
     bins: 256,
     duration: 1024,
     srate: 256,
-    name: 'Bands'
+    name: 'Bands',
+    secondsToSave: 10 
   }
 };
 
@@ -218,10 +219,23 @@ export function renderSliders(setData, setSettings, status, Settings) {
   )
 }
 
-export function renderRecord(recordPopChange, recordPop, status, Settings) {
+export function renderRecord(recordPopChange, recordPop, status, Settings, setSettings) {
+
+  function handleSecondsToSaveRangeSliderChange(value) {
+    setSettings(prevState => ({...prevState, secondsToSave: value}));
+  }
+
   return (
     <Card title={'Record Data'} sectioned>
       <Stack>
+        <RangeSlider 
+          disabled={status === generalTranslations.connect} 
+          min={2}
+          max={180}
+          label={'Recording Length: ' + Settings.secondsToSave + ' Seconds'} 
+          value={Settings.secondsToSave} 
+          onChange={handleSecondsToSaveRangeSliderChange} 
+        />
         <ButtonGroup>
           <Button 
             onClick={() => {
@@ -257,8 +271,7 @@ export function renderRecord(recordPopChange, recordPop, status, Settings) {
 
 
 function saveToCSV(Settings) {
-  const numSamplesToSave = 50;
-  console.log('Saving ' + numSamplesToSave + ' samples...');
+  console.log('Saving ' + Settings.secondsToSave + ' seconds...');
   var localObservable$ = null;
   const dataToSave = [];
 
@@ -272,9 +285,13 @@ function saveToCSV(Settings) {
     "beta0,beta1,beta2,beta3,betaAux,", 
     "delta0,delta1,delta2,delta3,deltaAux\n"
   );
+
+  // Create timer 
+  const timer$ = timer(Settings.secondsToSave * 1000);
+
   // put selected observable object into local and start taking samples
   localObservable$ = window.multicastBands$.pipe(
-    take(numSamplesToSave)
+    takeUntil(timer$)
   );
 
   // now with header in place subscribe to each epoch and log it

src/components/PageSwitcher/components/EEGEduEvoked/EEGEduEvoked.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { catchError, multicast } from "rxjs/operators";
-import { Subject } from "rxjs";
+import { Subject, timer } from "rxjs";
 
 import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal } from "@shopify/polaris";
 import { saveAs } from 'file-saver';
-import { take } from "rxjs/operators";
+import { take, takeUntil } from "rxjs/operators";
 
 
 import { zipSamples } from "muse-js";
@@ -31,7 +31,8 @@ export function getSettings () {
     interval: 1,
     srate: 256,
     duration: 1,
-    name: 'Evoked'
+    name: 'Evoked',
+    secondsToSave: 10
   }
 };
 
@@ -171,7 +172,12 @@ export function renderSliders(setData, setSettings, status, Settings) {
   )
 }
 
-export function renderRecord(recordPopChange, recordPop, status, Settings) {
+export function renderRecord(recordPopChange, recordPop, status, Settings, setSettings) {
+
+  function handleSecondsToSaveRangeSliderChange(value) {
+    setSettings(prevState => ({...prevState, secondsToSave: value}));
+  }
+
   return (
     <Card title={'Run ERP experiment'} sectioned>
       <Card.Section>
@@ -196,6 +202,14 @@ export function renderRecord(recordPopChange, recordPop, status, Settings) {
         </p>     
       </Card.Section>
       <Stack>
+         <RangeSlider 
+          disabled={status === generalTranslations.connect} 
+          min={2}
+          max={180}
+          label={'Recording Length: ' + Settings.secondsToSave + ' Seconds'} 
+          value={Settings.secondsToSave} 
+          onChange={handleSecondsToSaveRangeSliderChange} 
+        />   
         <ButtonGroup>
           <Button 
             onClick={() => {
@@ -235,8 +249,7 @@ export function renderRecord(recordPopChange, recordPop, status, Settings) {
 }
 
 function saveToCSV(Settings) {
-  const numSamplesToSave = 10000;
-  console.log('Saving ' + numSamplesToSave + ' samples...');
+  console.log('Saving ' + Settings.secondsToSave + ' seconds...');
   var localObservable$ = null;
   const dataToSave = [];
   window.marker = 0;
@@ -268,9 +281,13 @@ function saveToCSV(Settings) {
     );   
   }
   });
+
+  //create timer
+  const timer$ = timer(Settings.secondsToSave * 1000)
+
   // put selected observable object into local and start taking samples
   localObservable$ = window.multicastEvoked$.pipe(
-  take(numSamplesToSave)
+    takeUntil(timer$)
   );
 
   // now with header in place subscribe to each epoch and log it

src/components/PageSwitcher/components/EEGEduEvoked/sketchEvoked.js

@@ -1,8 +1,8 @@
 export default function sketchEvoked (p) {
 
+ const targProp = 0.2;
  let x = 0;
  let thisRand = 0.5; //for random choice of target type
- let targProp = 0.25;
  let isTarget = false;
 
 

src/components/PageSwitcher/components/EEGEduHeartSpectra/EEGEduHeartSpectra.js

@@ -3,8 +3,8 @@ import { catchError, multicast } from "rxjs/operators";
 
 import { TextContainer, Card, Stack, RangeSlider, Button, ButtonGroup, Modal } from "@shopify/polaris";
 import { saveAs } from 'file-saver';
-import { take } from "rxjs/operators";
-import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import { Subject, timer  } from "rxjs";
 
 import { channelNames } from "muse-js";
 import { Line } from "react-chartjs-2";
@@ -33,7 +33,8 @@ export function getSettings() {
     sliceFFTHigh: 2,
     duration: 4096,
     srate: 256,
-    name: 'HeartSpectra'
+    name: 'HeartSpectra',
+    secondsToSave: 10
   }
 };
 
@@ -239,10 +240,24 @@ export function renderSliders(setData, setSettings, status, Settings) {
   )
 }
 
-export function renderRecord(recordPopChange, recordPop, status, Settings) {
+export function renderRecord(recordPopChange, recordPop, status, Settings, setSettings) {
+
+  function handleSecondsToSaveRangeSliderChange(value) {
+    setSettings(prevState => ({...prevState, secondsToSave: value}));
+  }
+
+
   return(
     <Card title={'Record ' + Settings.name +' Data'} sectioned>
       <Stack>
+        <RangeSlider 
+          disabled={status === generalTranslations.connect} 
+          min={2}
+          max={180}
+          label={'Recording Length: ' + Settings.secondsToSave + ' Seconds'} 
+          value={Settings.secondsToSave} 
+          onChange={handleSecondsToSaveRangeSliderChange} 
+        />
         <ButtonGroup>
           <Button 
             onClick={() => {
@@ -278,8 +293,7 @@ export function renderRecord(recordPopChange, recordPop, status, Settings) {
 
 
 function saveToCSV(Settings) {
-  const numSamplesToSave = 100;
-  console.log('Saving ' + numSamplesToSave + ' samples...');
+  console.log('Saving ' + Settings.secondsToSave + ' seconds...');
   var localObservable$ = null;
   const dataToSave = [];
 
@@ -291,9 +305,12 @@ function saveToCSV(Settings) {
     "\n"
   );   
 
+  // Create timer 
+  const timer$ = timer(Settings.secondsToSave * 1000);
+
   // put selected observable object into local and start taking samples
   localObservable$ = window.multicastHeartSpectra$.pipe(
-    take(numSamplesToSave)
+    takeUntil(timer$)
   );   
 
   // now with header in place subscribe to each epoch and log it