Allow Chrome Extensions to Work on your Local Environment using Ngrok

Aline is a Chrome Extension that gives you Photoshop-style guides in your browser. Unfortunately, if you are developing a visual web product on localhost, you will not have access to this handy tool because Chrome Extensions do not work on local environments.

Here is a way around that pesky limitation using Ngrok. Ngrok allows you to serve your localhost through a private tunnel to a public URL. On this public URL, you can use Chrome Extensions. Here is how to set the servers up:

Download Ngrok from its website .
Extract the download into your project folder
Open 2 terminals into your project folder
In Terminal A, run ‘python -m SimpleHTTPServer’, which will serve to localhost:8000
In Terminal B, run ‘./ngrok http 8000’
The log from Terminal B should look like the above image
Navigate to the ‘http’ protocol URL, and you should see your localhost:8000 content. The private tunnel is complete!
Now you can use that handy Aline Chrome Extension for your layout.

Thanks for reading!

Brain 2 Boxes: Build a Three.JS BCI

EEG tools are much easier to get your hands on these days. For this project, let’s connect a Mindwave Mobile EEG Headset to a 3D rendered environment in your web-browser: Brain-2-Boxes!

Specifically YOUR Brain to these Three.js Boxes:

Screen Shot 2017-12-15 at 11.09.56 PM This project maps the ‘Attention’ value from the headset into an input that controls the Number of Boxes that render in Three.js’s Draggable Cubes example. Once per second, the headset outputs an ‘Attention’ value, the view clears and re-renders using the Updated Value.

Okay! Let’s assemble this thing:

Drop into the terminal, and create a directory to hold your project.

Change directory into your project and add the dependencies using Yarn:

‘yarn add express http kefir mindwave serialport socket.io three’

Create an app.js and an index.html file that references it in a script tag.

Next, create a file that runs a server that connects the Mindwave Headset to the FrontEnd called example.js.

Now open Second Terminal for the same directory and run a simple server on your local host. This serves ‘index.html’ to http://127.0.0.1:8000/:

‘python -m SimpleHTTPServer’

Now turn on your Headset and Connect it to your computer.

Finally go back to the First Terminal and run the server:

‘node example’

In that terminal, EEG data should begin to print out in the following form:

Screen Shot 2017-11-25 at 6.26.29 PM

Note the ‘eeg’ object’s ‘signal’ key. A good signal is ‘0’. ‘200’ is totally disconnected. Hair can cause interference, so hold it back. Also make sure the electrode is above your left brow on a clean skin surface, and clip the grounder to your left earlobe. Hold really still. If the signal doesn’t come down, try restarting the server. If you’re still having trouble, check the Bluetooth connection again. There could be any number of issues I’m missing here you may need to troubleshoot based on the system you’re using, so this list is by no means exhaustive.

Okay! Now that that’s out of the way, open your web browser to http://127.0.0.1:8000/. If you open the Developer Tools, you will see ‘Attention’ data printing out in the console. Additionally, each second, the number of cubes that render in the space is linearly linked to the ‘Attention’ value. The harder you think, the more cubes you get! Try doing math in your head or recollecting and visualizing a dream to make this value rise. To get it to drop, close your eyes, take several slow deep breaths. When you open your eyes, you’ll see a leaner pack of cubes before you.

Thanks for reading!

Mindwave Mobile EEG Headset Data Object Stream on MacOS Sierra Version 10.12.6 Node.js

Here’s a quick-and-dirty way to test your Mindwave Mobile EEG Headset on Mac OS Sierra (v10.12.6). The ‘mindwave’ npm module provides an out-of-the-box example that I’ve tested on the current platform. At the end of this brief tutorial, you should see data in the following format printing out once per second:

Screen Shot 2017-11-25 at 6.26.29 PM.png

Requires: Node.js, yarn(npm upgraded), Mindwave Mobile EEG headset, Mindwave Mobile EEG Dongle

Open your terminal and follow these steps:

Make a folder, cd into it
run ‘yarn add mindwave’
copy the example from the node module into your root: ‘cp node_modules/mindwave/example.js ./example.js’
run ‘yarn add kefir’ (this lib doesn’t come down automatically)
run ‘node example.js’

That, if you can believe it, is it.

Thanks for reading!