dashboard for realtime data visualization

[andrewheusser]

In order to calibrate the openbci device (i.e. make sure each electrode is connected, impedance is low), we need to stream data from the board to the 'dashboard' page of the app. The basic setup should include:

• realtime data stream of all channels
• topographic head plot
• fourier plot
• 'good connection' indication for each channel
• someway to display impedance.
• very basic filtering options

Ideally, this part of the app would be modular and customizable so that a programmer could easily write a custom 'plugin' and add it to the dashboard with little effort. The components listed above would come in a default layout, but that layout should be mutable (i.e. the size/position of each component should be flexible).

[tashoecraft]

Should it look similar to this? @pushtheworldllc and I are going to try and get the npm module hooked in, so this will be how we prove it's working

[andrewheusser]

Yep, in terms of the structure. I'd like to make it a little prettier than this. Let's make a list tonight of the functionality we need. It would be awesome if the various graphs could be movable and resizeable so users could customize their layout. It should also be easy to add custom components to this if we want to make additions in the future

[tashoecraft]

That'll be great. Once we have a list of everything we want this page to do we can ask @brennbanta and maybe get some good design in there. They will each be angular directives, and there is a library called ui-sortable, that extends jQuery's sortable library for angular. I used it in another project.

[andrewheusser]

I see that ui-sortable sorts lists very nicely. Do you know how it handles grids or multidimensional lists? The sorting functionality used in keep.google.com is kinda what I am thinking about, except with resizeable windows

[andrewheusser]

here's another option that may work as well:

http://rubaxa.github.io/Sortable/

[tashoecraft]

full resizable windows I believe will be difficult and add a lot of complexity. What I think would be a better strategy would be to define a set of layouts, and allow users to drag the whole windows around to replace which one is in each cell. So it is still customizable, but easy to program and lightens the page up. We can then plan the look and feel for those specific sizes, making sure each module is usable at the predetermined sizes.

[tashoecraft]

ng-sortable is anther option (https://github.com/a5hik/ng-sortable it is the angular version of sortable), might be a good idea. We'll compare the two, but I like not having to use jQuery :)

[andrewheusser]

sounds good. my one hold back with a template approach is that is the user wants to write a custom directive for a new visualization, it won't fit nicely into the scheme....maybe having a more complicated set of templates, or a lattice 'snap' structure would solve the problem

[andrewheusser]

another possibility is that custom visualizations could pop open a new window..but that might be more trouble than its worth...just an idea :)

[tashoecraft]

What I'm imagining for a template scheme is merely zoned sections for each visualizations. So for template for having only 1 graph show up, two split, three with one being large and the other two stacked...etc. We can always instruct people to build custom visualizations that fit into those guidelines.

[andrewheusser]

got it..and within each template, the graphs will be sortable or no? i.e. in the openBCI GUI above, you could drag the timeseries plot from the left to the right?

[andrewheusser]

here's a visualization npm module we could think about employing. might save us some work and i know the guy who put together the project. hes a great guy and huge proponent of open science

http://lightning-viz.org/

[andrewheusser]

if we build our visualizations within their framework, they could be useful to others as well

[andrewheusser]

another advantage is that we wouldn't have to support custom visualizations, because that would all be handled through lightning

[andrewheusser]

Made some progress on this front. Its SUPER easy to get streaming data into the browser using this package. See below for some code that simulates 8 chans of sinusoidal data:

var Lightning = require('lightning.js');

var lightning = new Lightning();

lightning.lineStreaming([[0],[0],[0],[0],[0],[0],[0],[0]])
    .then(function(viz) {
      var counter  = 0;
      var data = [[0],[0],[0],[0],[0],[0],[0],[0]];
        setInterval(function() {
          for(i=0; i<8; i++){
          data[i][0] = (Math.sin( counter ) / 2) + Math.random() + i;
          counter += .1
          }
            viz.appendData(data); // appends to existing data
            // console.log("appended")
            // or
            // viz.updateData([Math.random()]); // replaces existing data
        }, 50);
    });

This opens up a server that serves the data/visualization, which you can then place into HTML using iframes or the pym.js npm package

[andrewheusser]

and here's a nice tutorial on creating custom visualizations

https://www.youtube.com/watch?time_continue=832&v=3kZxNGj15-s

[andrewheusser]

Boom. streaming data in the browser from the simulator.

var Lightning = require('lightning.js');
var lightning = new Lightning();

var Board = require('openbci-sdk')
var board = new Board.OpenBCIBoard();

board.simulatorStart().then(function() {
  lightning.lineStreaming([[0],[0],[0],[0],[0],[0],[0],[0]])
      .then(function(viz) {
        var data=[[0],[0],[0],[0],[0],[0],[0],[0]];
        board.on('sample',function(sample) {
        //         /** Work with sample */
          console.log(data)
          for(i=0; i<8; i++){
          data[i][0]= sample.channelData[i+1];
        };
          viz.appendData(data);
          //console.log(sample.channelData[1]);
        });
    });
  });

have to be running a lightning server at ---> localhost:3000 @tashoecraft @teonlamont @pushtheworldllc

[andrewjaykeller]

Score! I should be a way to change the rate the data comes out at! Attach a pic!!

---

AJ Keller Founder & CEO Push The World LLC Work: (843) 471-0039 Cell: (203) 733-4538

Warning: The information transmitted is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient is prohibited. If you received this in error, please contact the sender and destroy this material.

On Jan 2, 2016, at 10:35 PM, Andy Heusser notifications@github.com wrote:

Boom. streaming data in the browser from the simulator.

var Lightning = require('lightning.js'); var lightning = new Lightning();

var Board = require('openbci-sdk') var board = new Board.OpenBCIBoard();

board.simulatorStart().then(function() { lightning.lineStreaming([[0],[0],[0],[0],[0],[0],[0],[0]]) .then(function(viz) { var data=[[0],[0],[0],[0],[0],[0],[0],[0]]; board.on('sample',function(sample) { // /* Work with sample / console.log(data) for(i=0; i<8; i++){ data[i][0]= sample.channelData[i+1]; }; viz.appendData(data); //console.log(sample.channelData[1]); }); }); }); have to be running a lightning server at ---> localhost:3000 @tashoecraft @teonlamont @pushtheworldllc

— Reply to this email directly or view it on GitHub.

[andrewheusser]

this is the default viz, we can customize it i.e. line width color etc

[teonbrooks]

wow! :) :+1:

[tashoecraft]

My only fear would be getting caught in a library that isn't widely used. There isn't nearly as many resources available for lightning as compared to d3. Checkout d3 here: http://d3js.org. It's by far the leading library used for visualizations. It does have more of a learning curve, but it is powerful enough to accomplish anything we want to do.

I don't quite understand the custom visualizations portion, as any type of graphing library should handle the custom portions that could give problems, and there will be other examples people can take on how t make their own.

[andrewheusser]

I definitely sympathize with that. However, lightning is pretty new and growing quickly. Also, It wouldn't replace D3 as a graphics library, they support d3 and other viz packages. Basically, they are providing a visualization server to connect to and interact with via an API (write now they have clients for javascript, python, scala and R). I think it would cut out a bunch of work to just have OpenEXP running a lightning server, which handles all the real-time data, and any future graphics we'd like to implement.

Here's their blurb about it:

Lightning is a data-visualization server providing API-based access to reproducible, web-based, interactive visualizations. It includes a core set of visualization types, but is built for extendability and customization. Lightning supports modern libraries like d3.js, three.js, and leaflet, and is designed for interactivity over large data sets and continuously updating data streams.

[andrewheusser]

for example, here is literally all the code i needed to get realtime streaming data into OpenEXP:

<iframe src="http://localhost:3000/visualizations/ccd1bd8b-1ae4-43fe-82a5-5b527e4e098b/iframe/" width="600" height="600" >

[tashoecraft]

Do you know how to get the server running without having to install it globally? I'm trying to think of the startup process, but they either say install node locally and run the server, or run off heroku/docker (which would require an internet connection). I installed it into the node modules and I may be able to just run it off there, it's just a really big node module, it doubles the size of the app with this one install.

[andrewheusser]

i wasn't successful at getting it to run from the npm module, but i didn't futz with it too much. I downloaded the standalone app and hosted that way. for OpenEXP, if we do end up using lightning, we would want the node module going so it doesn't require internet.

do you think the app size is that critical? maybe we could strip down the module if that is an issue.

also, im open to doing the viz other ways, this way just seems flexible and very easy to implement

[tashoecraft]

It's just a very large library, app size isn't critical, but it shouldn't be ignored. It does seem like a pretty solid library that would help with the constant reloading. I'll try and explore it and see if I can get it working and also look at the alternatives to try and make a more educated guess.

[andrewheusser]

sounds good! let me know if I can be of some help, otherwise, I'll do the same

[andrewheusser]

I talked to the lightning creator on their gitter:

andyh616 14:20 @mathisonian or anybody else in the gitter, I was hoping to get a sense for what flexibility / utility would be gained by going with a lightning server as opposed to writing data directly to a DOM with a D3 visualization or something like that. I'm building an open-source app for EEG visualization / running psych experiments and our team is debating whether to go directly from our node server to the app, vs. initializing a lightning server via node, and sending the data through that to the app. I like the idea of going through a lightning server because connecting the data to the visualization in the browser is super easy with an iframe/pym.js. Also, the viz could be shared publicly if desired. Are there other features I am not considering? Sorry for the convoluted question, I'm just trying to get the full scope of the package and see whether it makes sense for us to use

mathisonian 14:22 the advantages i see are 1) no hassle with DOM manipulation / management of piping data into the browser 2) its easy to put new (potentially external) data into the visualization at any time, especially good if this is a generic EEG visualization 3) other people can use it it may be the case that you just want to go straight to the browser though I would note that its straightforward to use a “lightning” visualization straight in the DOM so if you build it with the lightning spec then it could go either way

[tashoecraft]

I would question about it being used in an offline electron app.

[mathisonian]

Hey all!

Very cool project. If you do end up using lightning, I'm happy to help guide and figure things out like integrating in the most efficient way. Excited to see where this goes!

[tashoecraft]

@mathisonian What would be a good process of starting up the server when used inside of an electron app that needs to be able to be run offline. So preferably it will fire up the lightning server each time the app is launched.

[andrewheusser]

@tashoecraft, re the offline app. I think the app should be able to run seamlessly offline, but shouldn't be limited to that. It would be awesome if we had the flexibility to port in experiments from the internet, connect with remote databases, or share visualizations with others.

[tashoecraft]

@andyh616 I know, just the majority of features need to be able to handle offline use, like visualizations. I have to imagine the number of people who will be forced to be offline entirely will be small, it's just a good goal.

[mathisonian]

@tashoecraft you could either require('lightning-server') directly in your app, or have it spawn another process that ran the executable (node_modules/lightning-server/bin/lightning-server.js if you install locally).

We distribute as an electron app too, so it shouldn't be a problem there (although compiling sqlite can be a pain)

[teonbrooks]

An update here:

• [ ] viz is being worked on by @tashoecraft in D3
• [ ] @andyh616 is going to work on making it lightning-friendly
• [ ] each viz should be modular to allow for customization of layout
• [ ] built-in viz have defaults and limited customization similar to lightning