add music training component

includes phaser

angular-cli-build.js

@@ -10,6 +10,8 @@ module.exports = function(defaults) {
       'chart.js/Chart.js',
       'ng2-charts/bundles/ng2-charts.js',
       'chroma-js/chroma.js',
+      'plotly.js/dist/plotly.js',
+      'phaser/dist/phaser.js',
       'systemjs/dist/system-polyfills.js',
       'systemjs/dist/system.src.js',
       'zone.js/dist/*.js',

package.json

@@ -31,6 +31,8 @@
     "ng2-charts": "^1.0.3",
     "nodemon": "^1.9.1",
     "openbci-sdk": "^0.3.4",
+    "phaser": "^2.4.7",
+    "plotly.js": "^1.10.2",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "smoothie": "^1.27.0",

src/app/dashboard.component.html

@@ -6,6 +6,7 @@
     <a [routerLink]="['/frequency/radar', { type: 'Radar' }]">Frequency Radar</a>
     <a [routerLink]="['/frequency/bands']">Frequency Bands</a>
     <a [routerLink]="['/topo']">Topo</a>
+    <a [routerLink]="['/music-training']">Music Training</a>
   </nav>
   <router-outlet></router-outlet>
 </main>

src/app/dashboard.component.ts

@@ -3,6 +3,7 @@ import { TimeSeriesComponent } from './time-series';
 import { FrequencyComponent } from './frequency';
 import { FrequencyBandsComponent } from './frequency-bands';
 import { TopoComponent } from './topo';
+import { MusicTrainingComponent } from './music-training';
 import { Routes, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES } from '@angular/router';
 
 @Component({
@@ -15,12 +16,13 @@ import { Routes, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES } from '@angular/ro
 })
 
 @Routes([
-  { path: '/', component: TimeSeriesComponent },
+  { path: '/', component: MusicTrainingComponent },
   { path: '/time-series', component: TimeSeriesComponent },
   { path: '/frequency/line', component: FrequencyComponent },
   { path: '/frequency/radar', component: FrequencyComponent },
   { path: '/frequency/bands', component: FrequencyBandsComponent },
-  { path: '/topo', component: TopoComponent }
+  { path: '/topo', component: TopoComponent },
+  { path: '/music-training', component: MusicTrainingComponent }
 ])
 
 export class DashboardComponent implements OnInit {

src/app/frequency-band/frequency-band.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import * as io from 'socket.io-client';
 import { ChartService } from '../shared';
 import { CHART_DIRECTIVES } from '../shared/ng2-charts';
@@ -16,10 +16,7 @@ import { Constants } from '../shared/constants';
 export class FrequencyBandComponent implements OnInit {
 
   socket: any;
-  constructor(private view: ElementRef, 
-              private chartService: ChartService, 
-              private constants: Constants) {
-    this.view = view;
+  constructor(private chartService: ChartService, private constants: Constants) {
     this.socket = io(constants.socket.url);
   }
   

src/app/frequency/frequency.component.ts

@@ -17,11 +17,9 @@ import { Constants } from '../shared/constants';
 export class FrequencyComponent implements OnInit {
 
   socket: any;
-  constructor(private view: ElementRef, 
-              private chartService: ChartService,
+  constructor(private chartService: ChartService,
               private segment: RouteSegment,
               private constants: Constants) {
-    this.view = view;
     this.socket = io(constants.socket.url);
     this.type = segment.getParam('type') || 'Line';
   }

src/app/music-training/index.ts

@@ -0,0 +1 @@
+export { MusicTrainingComponent } from './music-training.component';

src/app/music-training/music-training.component.css

@@ -0,0 +1,20 @@
+
+:host {
+  display: block;
+  margin: 20px;
+  padding: 20px;
+  box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  background-color: #333333;
+  position: relative;
+  height: 100%;
+  width: 70%;
+}
+
+h2 {
+  position: absolute;
+  margin: 0;
+  top: 10px;
+  right: 20px;
+  font-weight: 300;
+  z-index: 1;
+}

src/app/music-training/music-training.component.html

@@ -0,0 +1,4 @@
+<section class="music" [ngClass]="{ 'loading': !data }">
+    <h2>Music Training</h2>
+    <div id="phaser"></div>
+</section>

src/app/music-training/music-training.component.spec.ts

@@ -0,0 +1,46 @@
+import {
+  beforeEach,
+  beforeEachProviders,
+  describe,
+  expect,
+  it,
+  inject,
+} from '@angular/core/testing';
+import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { MusicTrainingComponent } from './music-training.component';
+
+describe('Component: MusicTraining', () => {
+  let builder: TestComponentBuilder;
+
+  beforeEachProviders(() => [MusicTrainingComponent]);
+  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
+    builder = tcb;
+  }));
+
+  it('should inject the component', inject([MusicTrainingComponent],
+      (component: MusicTrainingComponent) => {
+    expect(component).toBeTruthy();
+  }));
+
+  it('should create the component', inject([], () => {
+    return builder.createAsync(MusicTrainingComponentTestController)
+      .then((fixture: ComponentFixture<any>) => {
+        let query = fixture.debugElement.query(By.directive(MusicTrainingComponent));
+        expect(query).toBeTruthy();
+        expect(query.componentInstance).toBeTruthy();
+      });
+  }));
+});
+
+@Component({
+  selector: 'test',
+  template: `
+    <bci-music-training></bci-music-training>
+  `,
+  directives: [MusicTrainingComponent]
+})
+class MusicTrainingComponentTestController {
+}
+

src/app/music-training/music-training.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit, ElementRef } from '@angular/core';
+import * as io from 'socket.io-client';
+import { Constants } from '../shared/constants';
+
+declare var Phaser: any;
+
+@Component({
+  moduleId: module.id,
+  selector: 'bci-music-training',
+  templateUrl: 'music-training.component.html',
+  styleUrls: ['music-training.component.css'],
+  providers: [Constants]
+})
+export class MusicTrainingComponent implements OnInit {
+
+  game: any;
+  phaserElement: any;
+  socket: any;
+  constructor(private view: ElementRef, private constants: Constants) {
+    this.socket = io(constants.socket.url);
+  }
+
+  ngOnInit() {
+    this.phaserElement = this.view.nativeElement.querySelector('#phaser');
+    
+    this.game = new Phaser.Game(480, 480, Phaser.WEBGL, this.phaserElement.id, {
+        preload: this.preload, create: this.create, update: this.update
+    });
+    
+    this.socket.on(this.constants.socket.events.time, (data) => {
+      console.log('data from music component', data);
+    });
+  }
+  
+  preload () {
+    this.game.scale.scaleMode = Phaser.ScaleManager.NO_SCALE;
+    this.game.stage.backgroundColor = '#FF0000';
+  }
+  
+  create () {
+    this.game.physics.startSystem(Phaser.Physics.ARCADE);
+  }
+  
+  update () {
+    
+  }
+
+}

src/app/time-series/time-series.component.ts

@@ -18,7 +18,6 @@ export class TimeSeriesComponent implements OnInit {
   constructor(private view: ElementRef, 
               private chartService: ChartService, 
               private constants: Constants) {
-    this.view = view;
     this.socket = io(constants.socket.url);
     this.chartService = chartService;
   }

src/app/topo/topo.component.css

@@ -10,7 +10,7 @@
   background-color: #333333;
   position: relative;
   height: 100%;
-  width: 50%;
+  width: 70%;
 }
 
 h2 {
@@ -19,6 +19,7 @@ h2 {
   top: 10px;
   right: 20px;
   font-weight: 300;
+  z-index: 1;
 }
 
 .topoplot-wrapper {

src/app/topo/topo.component.html

@@ -1,22 +1,6 @@
-<section [ngClass]="{ loading: !grid }">
+<section [ngClass]="{ loading: !data }">
     <h2>Topo</h2>
-    <section class="topoplot-wrapper">
-
-      <article class="topoplot-c1 top left"></article>
-      <article class="topoplot-c2 top right"></article>
-      <article class="topoplot-c3 middle left"></article>
-      <article class="topoplot-c4 middle right"></article>
-      <article class="topoplot-c5 third left"></article>
-      <article class="topoplot-c6 third right"></article>
-      <article class="topoplot-c7 bottom left"></article>
-      <article class="topoplot-c8 bottom right"></article>
-
-      <aside class="topoplot-grid">
-        <div *ngFor="let pixel of grid, let i = index" 
-              [ngStyle]="getColor(i, pixel, grid)" 
-              [ngClass]="getClass(i)">
-        </div>
-      </aside>
-
+    <section class="topoplot">
+      <div id="topo"></div>
     </section>
 </section>

src/app/topo/topo.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ElementRef } from '@angular/core';
 import * as io from 'socket.io-client';
 import { Constants } from '../shared/constants';
 
-declare var chroma;
+declare var chroma: any;
+declare var Plotly: any;
 
 @Component({
   moduleId: module.id,
@@ -13,35 +14,117 @@ declare var chroma;
 })
 
 export class TopoComponent implements OnInit {
-
+  
   socket: any;
-  constructor(private constants: Constants) {
+  plotElement: any;
+  
+  constructor(private view: ElementRef, private constants: Constants) {
     this.socket = io(constants.socket.url);
   }
   
-  private grid:Array<any> = [];
+  private data: any = {
+    x: [],
+    y: [],
+    name: 'density',
+    ncontours: 15,
+    colorscale: [
+      [0, 'rgb(208, 0, 0)'], 
+      [.50, 'rgb(247, 192, 0)'], 
+      [.60, 'rgb(241, 255, 22)'], 
+      [.80, 'rgb(68, 255, 250)'], 
+      [.95, 'rgb(50, 0, 159)'], 
+      [1, 'rgb(51, 51, 51)']
+    ],
+    reversescale: true,
+    showscale: false,
+    type: 'histogram2dcontour',
+    line: {
+      width: 1
+    },
+    contours: {
+      //coloring: 'heatmap'
+    }
+  };
+    
+  private layout: any = {
+    autosize: true,
+    width: 600,
+    height: 450,
+    bargap: 0,
+    paper_bgcolor: 'rgba(0,0,0,0)',
+    plot_bgcolor: 'rgba(0,0,0,0)',
+    margin: { l: 0, r: 0, b: 0, t: 0 },
+    xaxis: {
+      autorange: true,
+      showgrid: false,
+      zeroline: false,
+      showline: false,
+      autotick: true,
+      ticks: '',
+      showticklabels: false
+    },
+    yaxis: {
+      autorange: true,
+      showgrid: false,
+      zeroline: false,
+      showline: false,
+      autotick: true,
+      ticks: '',
+      showticklabels: false
+    }
+  };
   
-  ngOnInit() {    
+  private options: any = {
+    staticPlot: true
+  };
+  
+  ngOnInit(): void {
+    this.plotElement = this.view.nativeElement.querySelector('#topo');
+    Plotly.newPlot(this.plotElement.id, [this.data], this.layout, this.options);
+
     this.socket.on(this.constants.socket.events.topo, (data) => {
-      this.grid = data.data;
+      console.log(data.plot);
+      this.data.x = data.plot.x; //this.getRandomData().x
+      this.data.y = data.plot.y; //this.getRandomData().y
+      Plotly.redraw(this.plotElement);
+      //Plotly.Plots.resize(this.plotElement);
     });
   }
   
-  ngOnDestroy () {
+  ngOnDestroy (): void {
     this.socket.removeListener(this.constants.socket.events.topo);
-  } 
+  }
   
-  getClass (index) {
-    return 'topoplot-u' + index;
-  }
+  getRandomData (): any {
+    function normal() {
+        var x = 0, y = 0, rds, c;
+        do {
+          x = Math.random() * 2 - 1;
+          y = Math.random() * 2 - 1;
+          rds = x * x + y * y;
+        } while (rds == 0 || rds > 1);
+        c = Math.sqrt(-2 * Math.log(rds) / rds);
+        return x * c;
+    }
 
-  getColor (index, pixel, grid) {
-      var min = Math.min.apply(Math, grid);
-      var max = Math.max.apply(Math, grid);
-      var f = chroma.scale('Spectral').domain([min, max]);
-      return { 
-        'background-color': f(pixel) 
-      }
-  }
+    var N = 2000,
+        a = -1,
+        b = Math.random();
 
+    var step = (b - a) / (N - 1);
+    var t = new Array(N), x = new Array(N), y = new Array(N);
+
+    for(var i = 0; i < N; i++){
+      t[i] = a + step * i;
+      x[i] = (Math.pow(t[i], 3)) + (0.3 * normal() );
+      y[i] = (Math.pow(t[i], 6)) + (0.3 * normal() );
+    }
+    
+    return {
+      x: x,
+      y: y
+    };
+    
+  }
+  
 }

src/index.html

@@ -35,6 +35,8 @@
 
   <script src="vendor/chart.js/Chart.js"></script>
   <script src="vendor/chroma-js/chroma.js"></script>
+  <script src="vendor/plotly.js/dist/plotly.js"></script>
+  <script src="vendor/phaser/dist/phaser.js"></script>
   <script src="vendor/es6-shim/es6-shim.js"></script>
   <script src="vendor/reflect-metadata/Reflect.js"></script>
   <script src="vendor/systemjs/dist/system.src.js"></script>

src/system-config.ts

@@ -6,7 +6,9 @@ const map: any = {
   'smoothie': 'vendor/smoothie/smoothie.js',
   'ng2-charts': 'vendor/ng2-charts/bundles/ng2-charts.js',
   'socket.io-client': 'vendor/socket.io-client/socket.io.js',
-  'chroma-js': 'vendor/chroma-js/chroma.js'
+  'chroma-js': 'vendor/chroma-js/chroma.js',
+  'plotly': 'vendor/plotly.js/dist/plotly.js',
+  'phaser': 'vendor/phaser/dist/phaser.js'
 };  
 
 /** User packages configuration. */
@@ -40,6 +42,7 @@ const barrels: string[] = [
   'app/frequency-bands',
   'app/frequency-band',
   'app/topo',
+  'app/music-training',
   /** @cli-barrel */
 ];
 

visualizer.js

@@ -214,9 +214,38 @@ function onSample (sample) {
 
         grid = topogrid.create(pos_x,pos_y,sample.channelData,grid_params);
         var grid_flat = [].concat.apply([], grid);
+        
+        //**********//
+        
+        var Xs = signals.map(function (channel, i) {
+            var x = [3,7,2,8,0,10,3,7]; 
+            return channel.map(function (volt) {
+                return volt + (x[i]);
+            });
+        });
+        
+        var Ys = signals.map(function (channel, i) {
+            var y = [0,0,3,3,8,8,10,10]; 
+            return channel.map(function (volt) {
+                return volt + (y[i]);
+            });
+        });
+        
+        var plotX = [].concat.apply([], Xs).sort(function (a, b) {
+            return a - b;
+        });
+        var plotY = [].concat.apply([], Ys).sort(function (a, b) {
+            return a - b;
+        });
+        
+        //**********//
 
         io.emit('bci:topo', {
-            data: grid_flat
+            data: grid_flat,
+            plot: {
+                x: plotX,
+                y: plotY
+            }
         });
     }