Merge branch 'master' into ml5
Esse commit está contido em:
@@ -11,6 +11,24 @@ To start, you can find all the open issues [here](https://github.com/kylemath/EE
|
||||
|
||||
At any point in time you can create a pull request, so others can see your changes and give you feedback.
|
||||
|
||||
# Setup
|
||||
|
||||
## Fork the Repository
|
||||
|
||||
Start with a fork of the repository so you can work worry-free on your own fork.
|
||||
|
||||
You will need to fork once. Then, you can call `git fetch upstream` and `git pull 'branch-name'` before you do your local changes to fetch the latest remote changes make sure your changes are being made on up-to-date source code.
|
||||
|
||||
## Make Development Environment and Change Away
|
||||
|
||||
Configure your Dev Environment and make your changes on your fork.
|
||||
|
||||
# Contributing
|
||||
|
||||
## Creating a Pull Request
|
||||
|
||||
Once you have made your changes, you can create a pull request, so others can see your changes and give you feedback. Create all pull requests on the master branch. If your PR is a work-in-progress, add a [WIP] at the start of the PR title. Example:[WIP] Heart Rate Monitor Module.
|
||||
|
||||
## Wait for Reviews
|
||||
|
||||
After each PR others will look into your feature, discuss the changes in the PR, and then merge into the master branch when changes are ready.
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 Kyle Mathewson
|
||||
Copyright (c) 2020 Kyle Mathewson
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
+153
-96
@@ -1,97 +1,19 @@
|
||||
# EEGEdu
|
||||
|
||||
EEGEdu is an educational website to learn about working with electroencephalogram (EEG) data. It is a teaching tool that allows for students to quickly interact with their own brain waves.
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
<a href="https://github.com/kylemath/EEGEdu/blob/master/CONTRIBUTING.md">
|
||||
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
||||
</a>
|
||||
|
||||
It is an interactive web page that you interact with multiple demonstrations of working with EEG data. It is partially inspired by [EEG101](https://github.com/NeuroTechX/eeg-101) but it is strictly web-based. This allows students to interact with EEG brain data without having to install any software.
|
||||
`EEGEdu` is an interactive educational website to learn about working with electroencephalogram (EEG) data. It is a teaching tool that allows for students to interact with their own brain waves.
|
||||
|
||||
This is a useful set of tools that has been inspired by multiple works that came before. Previously, others in the field have been using [Neurotech EEG-notebooks in python](https://github.com/NeuroTechX/eeg-notebooks) for data collection and analysis with [muse-lsl](https://github.com/alexandrebarachant/muse-lsl). These software support the Interaxon MUSE headset but required a bluetooth low-energey (BLE) dongle to work with Windows of Mac systems. It also required the editing of some pyglatt code to connect properly. These software are cumbersome, and serve as a barrier to entry for many students learning about EEG.
|
||||
`EEGEdu` has been inspired by multiple works that came before. It is inspired by [EEG101](https://github.com/NeuroTechX/eeg-101), but `EEGEdu` is web-based. Being web-based allows students to interact with EEG brain data without having to install any software. Others have used [Neurotech EEG-notebooks in python](https://github.com/NeuroTechX/eeg-notebooks) for data collection and analysis with [muse-lsl](https://github.com/alexandrebarachant/muse-lsl). These software support the Interaxon MUSE headset but require a bluetooth low-energey (BLE) dongle to work with common operating systems (e.g. Windows or Mac OSX). These tools also required the editing `pyglatt` code to connect to Muse headsets. Thus, previous software are cumbersome and serve as a barrier to entry for many students learning about EEG. `EEGEdu` aims to provide students with an accesible introduction to working with their own brain waves.
|
||||
|
||||
Visit [https://eegedu.com/](https://eegedu.com/]) for the live website.
|
||||
|
||||
# Installation for Development
|
||||
|
||||
If you are interested in developing EEGEdu, here are some instructions to get you started.
|
||||
|
||||
Note: Currently EEGEdu development requires a Mac OSX operating system.
|
||||
|
||||
To start, you will need to install [Homebrew](https://brew.sh) and [yarn](https://yarnpkg.com/lang/en/docs/install/#mac-stable). These are easy one-line installations for Mac users:
|
||||
|
||||
```sh
|
||||
# Install homebrew
|
||||
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
|
||||
|
||||
# Install yarn
|
||||
# NOTE: this will also install Node.js if it is not already installed.
|
||||
brew install yarn
|
||||
# Node.js must be version 10.x for Muse interaction
|
||||
# Thus, if you are getting version issues, install n and switch versions
|
||||
# sudo npm install -g n
|
||||
# sudo n 10.16.0
|
||||
```
|
||||
|
||||
Then, in terminal, clone the git repo and enter the folder:
|
||||
|
||||
```sh
|
||||
git clone https://github.com/kylemath/EEGEdu
|
||||
cd EEGEdu
|
||||
```
|
||||
|
||||
You then need to install the required packages for EEGEdu
|
||||
|
||||
```sh
|
||||
yarn install
|
||||
```
|
||||
|
||||
## Local Development Environment
|
||||
Then, you can run the *Development Environment* of EEGEdu:
|
||||
|
||||
```sh
|
||||
yarn start dev
|
||||
```
|
||||
|
||||
If it is working correctly, the EEGEdu application will open in a browser window at http://localhost:3000.
|
||||
|
||||
## Local Production Environment
|
||||
|
||||
To start the *Local Production Environment*, you can use the following commands:
|
||||
|
||||
```sh
|
||||
yarn cache clean
|
||||
yarn run build
|
||||
serve -s build
|
||||
```
|
||||
|
||||
## Deployment
|
||||
|
||||
[EEGEdu](https://eegedu.com) is running on [Firebase](https://firebase.google.com/) and deployment happens automagically using GitHub post-commit hooks, or [Actions](https://github.com/kylemath/EEGEdu/actions), as they are commonly called. You can see how the application is build and deployed by [inspecting the workflow](https://github.com/kylemath/EEGEdu/blob/master/.github/workflows/workflow.yml).
|
||||
|
||||
Currently this is not working and we are deploying locally with firebase
|
||||
|
||||
```sh
|
||||
firebase deploy
|
||||
```
|
||||
|
||||
after settings up one time with
|
||||
|
||||
```sh
|
||||
firebase init
|
||||
```
|
||||
options: Hosting Sites only
|
||||
public directory: build
|
||||
single-page app: No
|
||||
Overwrite - No
|
||||
Overwrite - No
|
||||
|
||||
|
||||
|
||||
# Contributing
|
||||
The guide for contributors can be found [here](https://github.com/kylemath/EEGEdu/blob/master/CONTRIBUTING.md). It covers everything you need to know to start contributing to EEGEdu.
|
||||
|
||||
# Development Roadmap
|
||||
|
||||
We are aiming to include chances for students to interact with EEG-based brain signals. So we might break down a curriculum into 10 lessons as follows:
|
||||
`EEGEdu` is served live at [https://eegedu.com/](https://eegedu.com). This website is served from the software in this repository. So, all you need to do to try the system out is head to [EEGEdu](https://eegedu.com/).
|
||||
|
||||
# EEGEdu Curriculum
|
||||
|
||||
EEGEdu provides an step-by-step incremental tutorial for students to interact with EEG-based brain signals. So, we break down the curriculum into 10 lessons as follows:
|
||||
|
||||
1. Connect + hardware
|
||||
Biophysics + signal viewing
|
||||
@@ -105,19 +27,154 @@ Biophysics + signal viewing
|
||||
9. Neurofeedback p5js demos
|
||||
10. BCI trainer
|
||||
|
||||
# References
|
||||
# Installation for Development
|
||||
|
||||
* https://github.com/urish/muse-js - based toolbox for interacting with muse
|
||||
* https://github.com/NeuroJS/angular-muse - demo with streaming data in Angular, record button,
|
||||
* https://github.com/tanvach/muse-fft - starting point react demo
|
||||
* https://github.com/neurosity/eeg-pipes - easy pipable operations on eeg data from muse-js
|
||||
* https://reactjs.org/ - React for web development
|
||||
* https://www.chartjs.org/docs/latest/ - interactive charts
|
||||
* https://github.com/urish/muse-lsl - maybe useful to stream to LSL
|
||||
If you are interested in developing EEGEdu, here are some instructions to get the software running on your system. *Note*: Currently EEGEdu development requires a Mac OSX operating system.
|
||||
|
||||
To start, you will need to install [Homebrew](https://brew.sh) and [yarn](https://yarnpkg.com/lang/en/docs/install/#mac-stable). These are easy to install with the following Terminal / `bash` commands:
|
||||
|
||||
```sh
|
||||
## Install homebrew
|
||||
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
|
||||
|
||||
## Install yarn
|
||||
# NOTE: this will also install Node.js if it is not already installed.
|
||||
brew install yarn
|
||||
|
||||
# NOTE: Node.js must be version 10.x for Muse interaction
|
||||
|
||||
# Thus, if you are getting version issues, install n, with the following command:
|
||||
# sudo npm install -g n
|
||||
|
||||
# Then, you can switch to version 10.x with the following command:
|
||||
# sudo n 10.16.0
|
||||
```
|
||||
|
||||
Then, in Terminal/`bash`, clone this Git repository and change directory into the newly cloned folder:
|
||||
|
||||
```sh
|
||||
git clone https://github.com/kylemath/EEGEdu
|
||||
cd EEGEdu
|
||||
```
|
||||
|
||||
Then, you can install the required `yarn` packages for EEGEdu:
|
||||
|
||||
```sh
|
||||
yarn install
|
||||
```
|
||||
|
||||
## Local Development Environment
|
||||
Then, you can run the *Local Development Environment* of EEGEdu:
|
||||
|
||||
```sh
|
||||
yarn start dev
|
||||
```
|
||||
|
||||
If it is working correctly, the EEGEdu application will automatically open in a browser window at http://localhost:3000.
|
||||
|
||||
## Local Production Environment
|
||||
|
||||
To start the *Local Production Environment*, you can use the following commands:
|
||||
|
||||
```sh
|
||||
yarn cache clean
|
||||
yarn run build
|
||||
serve -s build
|
||||
```
|
||||
|
||||
## Local Testing of Changes
|
||||
|
||||
1. Install any new packages `yarn install`
|
||||
1. Start the *Local Development Environment* `yarn start dev`
|
||||
1. Look for errors in terminal log
|
||||
1. Open's browser to http://localhost:3000
|
||||
1. Open Javascript console
|
||||
1. Look for errors in console
|
||||
1. Connect Mock data stream by clicking Connect button
|
||||
1. Run through the `checkFunction` below with Mock data.
|
||||
1. Disconnect Mock data stream
|
||||
1. Turn on Interaxon Muse headband
|
||||
1. Connect Muse data stream
|
||||
1. Repeat the `checkFunction` below with Muse data.
|
||||
|
||||
```sh
|
||||
# Pseudocode for checking EEGEdu functionality
|
||||
checkFunction = {
|
||||
view raw data
|
||||
change sliders
|
||||
make sure data changes and no errors
|
||||
click spectra
|
||||
move sliders
|
||||
make sure changes
|
||||
click bands
|
||||
move sliders
|
||||
make sure changes
|
||||
}
|
||||
```
|
||||
|
||||
## Deployment
|
||||
|
||||
[EEGEdu](https://eegedu.com) is running on [Firebase](https://firebase.google.com/) and deployment happens automagically using GitHub post-commit hooks, or [Actions](https://github.com/kylemath/EEGEdu/actions), as they are commonly called. You can see how the application is build and deployed by [inspecting the workflow](https://github.com/kylemath/EEGEdu/blob/master/.github/workflows/workflow.yml).
|
||||
|
||||
Currently this automagic deployment is not working, so we can deploy to firebase manually:
|
||||
|
||||
First, install the Firebase deployment tools:
|
||||
|
||||
```sh
|
||||
sudo brew install firebase
|
||||
sudo yarn global add firebase-tools
|
||||
sudo yarn global add firebase
|
||||
```
|
||||
|
||||
The first deployment requires login and initialization once:
|
||||
|
||||
```sh
|
||||
firebase login
|
||||
```
|
||||
|
||||
Browser opens, and login to Google account authorized for Firebase deployment:
|
||||
|
||||
```sh
|
||||
firebase init
|
||||
```
|
||||
|
||||
* options: Hosting Sites only
|
||||
* public directory: build
|
||||
* single-page app: No
|
||||
* Overwrite - No
|
||||
* Overwrite - No
|
||||
|
||||
Then, deployment to Firebase happens with the following commands:
|
||||
|
||||
```sh
|
||||
# clean the local cache to ensure most recent version is served
|
||||
yarn cache clean
|
||||
|
||||
# build the latest version of the site
|
||||
yarn run build
|
||||
|
||||
# deploy the latest version to firebase
|
||||
firebase deploy
|
||||
```
|
||||
|
||||
# References and Related Tools
|
||||
|
||||
* [Muse 2016 EEG Headset JavaScript Library (using Web Bluetooth)](https://github.com/urish/muse-js)
|
||||
* [Muse 2016 + Web Bluetooth demo app in Angular](https://github.com/NeuroJS/angular-muse)
|
||||
* [Explore Muse headband data in frequency domain](https://github.com/tanvach/muse-fft)
|
||||
* [Pipeable RxJS operators for working with EEG data in Node and the Browser](https://github.com/neurosity/eeg-pipes)
|
||||
* [React, A JavaScript library for building user interfaces](https://reactjs.org/)
|
||||
* [Simple yet flexible JavaScript charting for designers & developers](https://www.chartjs.org/docs/latest/)
|
||||
* [Muse 2016 EEG Headset LSL (NodeJS)](https://github.com/urish/muse-lsl)
|
||||
* [Electroencephalogram (EEG) Recording Protocol for Cognitive and Affective
|
||||
Human Neuroscience Research](https://static1.squarespace.com/static/5abefa62d274cb16de90e935/t/5df7db5956ec9170a9b402e1/1576524637645/Electrode_Application_Protocol_Final_Compressed.pdf)
|
||||
|
||||
# Contributing
|
||||
The guide for contributors can be found [here](https://github.com/kylemath/EEGEdu/blob/master/CONTRIBUTING.md). It covers everything you need to know to start contributing to EEGEdu.
|
||||
|
||||
# Credits
|
||||
|
||||
`EEGEdu` - An Interactive Electrophysiology Tutorial with the Interaxon Muse brought to you by Mathewson Sons
|
||||
`EEGEdu` - An Interactive Electrophysiology Tutorial with the Interaxon Muse brought to you by Mathewson Sons.
|
||||
|
||||
# License
|
||||
|
||||
|
||||
Diferenças do arquivo suprimidas por serem muito extensas
Carregar Diff
Diferenças do arquivo suprimidas por serem muito extensas
Carregar Diff
@@ -14,6 +14,7 @@
|
||||
"firebase": "^7.5.0",
|
||||
"firebase-tools": "^7.9.0",
|
||||
"ml5": "^0.4.3",
|
||||
"handlebars": "^4.3.0",
|
||||
"muse-js": "^3.0.1",
|
||||
"p5": "^0.10.2",
|
||||
"p5.js-widget": "https://github.com/toolness/p5.js-widget.git",
|
||||
|
||||
@@ -16,9 +16,6 @@
|
||||
|
||||
<!-- The core Firebase JS SDK is always required and must be listed first -->
|
||||
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
|
||||
|
||||
<!-- TODO: Add SDKs for Firebase products that you want to use
|
||||
https://firebase.google.com/docs/web/setup#available-libraries -->
|
||||
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
|
||||
<script>
|
||||
const firebaseConfig = {
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { App } from "./components/App/App";
|
||||
// import registerServiceWorker from "./workers/registerServiceWorker";
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
// registerServiceWorker();
|
||||
|
||||
@@ -1,117 +0,0 @@
|
||||
// In production, we register a service worker to serve assets from local cache.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||
// cached resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||
// This link also includes instructions on opting out of this behavior.
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export default function register() {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://goo.gl/SC7cgQ'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not local host. Just register service worker
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the old content will have been purged and
|
||||
// the fresh content will have been added to the cache.
|
||||
// It's the perfect time to display a "New content is
|
||||
// available; please refresh." message in your web app.
|
||||
console.log('New content is available; please refresh.');
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
if (
|
||||
response.status === 404 ||
|
||||
response.headers.get('content-type').indexOf('javascript') === -1
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -6772,7 +6772,7 @@ handle-thing@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
|
||||
integrity sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==
|
||||
|
||||
handlebars@^4.1.2:
|
||||
handlebars@^4.1.2, handlebars@^4.3.0:
|
||||
version "4.5.3"
|
||||
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
|
||||
integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
|
||||
|
||||
Referência em uma Nova Issue
Bloquear um usuário