Reformatted EEG recording structure and added ability to start, stop, and download recordings

Author: abhinavpottabathula

package-lock.json

@@ -18,6 +18,7 @@
     "papaparse": "^5.3.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "rxjs": "^6.6.3",
     "socket.io": "^2.3.0",
     "socket.io-client": "^2.3.0",
     "typescript": "^4.0.2"

package.json

@@ -2,50 +2,64 @@ import React, { useState, useEffect } from 'react';
 import Head from 'next/head'
 import Link from 'next/link'
 import Layout from '../components/layout'
-import { channelNames, EEGReading, MuseClient } from 'muse-js';
+import { channelNames, EEGReading, zipSamples, EEGSample, MuseClient } from 'muse-js';
+import { Observable, Subject } from 'rxjs';
 import io from 'socket.io-client';
 import * as Papa from 'papaparse';
 
 const socket = io('http://localhost:5000');
 const museClient = new MuseClient();
 
 function Visualizations() {
-  const [testEEGData, setTestEEGData] = useState("");
   const [blink_state, setBlinkState] = useState("");
 
-  var fileList
+  var fileList;
+
+  var recording = false;
+  var recordingSamples;
+  var subscription;
 
   async function startMuseConnection(e) {
     await museClient.connect()
     await museClient.start()
-    museClient.eegReadings.subscribe(reading => {
-      socket.emit('eeg-stream', JSON.stringify(reading))
-      console.log(reading);
-    });
-    museClient.telemetryData.subscribe(telemetry => {
-      console.log(telemetry);
-    });
-    museClient.accelerometerData.subscribe(acceleration => {
-      console.log(acceleration);
-    });
+    // zipSamples(museClient.eegReadings).subscribe(sample => {
+    //   socket.emit('eeg-stream', [sample.timestamp, ...sample.data]);
+    // });
+    // museClient.telemetryData.subscribe(telemetry => {
+    //   console.log(telemetry);
+    // });
+    // museClient.accelerometerData.subscribe(acceleration => {
+    //   console.log(acceleration);
+    // });
   }
 
-  async function streamCSVData(e) {
-    Papa.parse(fileList[0], {
-	    complete: function(results) {
-        var rows = results.data
-        var i = 0
-        var interval = setInterval(function() {
-          socket.emit('eeg-stream', rows[i]); 
-          i++; 
-          if(i >= rows.length) {
-            clearInterval(interval)
-          }
-        }, 3.90625)
-	    }
+  function startRecording() {
+    recording = true;
+    recordingSamples = [];
+    subscription = zipSamples(museClient.eegReadings).subscribe(sample => {
+      sample = [sample.timestamp, ...sample.data]
+      recordingSamples.push(sample);
+      socket.emit('eeg-stream', sample);
     });
   }
 
+  function stopRecording() {
+    recording = false;
+    subscription.unsubscribe();
+  }
+
+  function downloadRecording(e) {
+    const a = document.createElement('a');
+    const headers = ['time', ...channelNames].join(',');
+    const csvData = headers + '\n' + recordingSamples.map(item => item.join(',')).join('\n');
+    const file = new Blob([csvData], { type: 'text/csv' });
+    a.href = URL.createObjectURL(file);
+    document.body.appendChild(a);
+    a.download = 'recording.csv';
+    a.click();
+    document.body.removeChild(a);
+  }
+
   useEffect(() => {
     socket.on('connect', (msg) => {
       console.log("Connected!")
@@ -67,10 +81,20 @@ function Visualizations() {
   }, []);
 
 
-  function sendTestEEGData(evt) {
-    evt.preventDefault();
-    const data = '{"data":"' + testEEGData + '"}'
-    socket.emit('test', data);
+  async function streamCSVData(e) {
+    Papa.parse(fileList[0], {
+	    complete: function(results) {
+        var rows = results.data
+        var i = 0
+        var interval = setInterval(function() {
+          socket.emit('eeg-stream', rows[i]); 
+          i++; 
+          if(i >= rows.length) {
+            clearInterval(interval)
+          }
+        }, 3.90625)
+	    }
+    });
   }
 
   return (
@@ -86,21 +110,28 @@ function Visualizations() {
       <br></br>
       <br></br>
 
+      <button onClick={startRecording}>
+        Start Recording
+      </button>
+
+      <button onClick={stopRecording}>
+        Stop Recording
+      </button>
+
+      <button onClick={downloadRecording}>
+        Download Recording
+      </button>
+
+      <br></br>
+      <br></br>
+
       <input type="file" id="file-selector"></input>
       <button onClick={streamCSVData}>
         TEST!
       </button>
-
-      <br></br>
+      
       <br></br>
 
-      <form onSubmit={sendTestEEGData}>
-        <label>
-        Send Test Message to Flask: <tab></tab>
-          <input type="text" name={testEEGData} onChange={e => setTestEEGData(e.target.value)}/>
-        </label>
-        <input type="submit" value="Send"/>
-      </form>
       <p>Blink State: {blink_state}</p>
     </Layout>
   );