add music training component

includes phaser

angular-cli-build.js

@@ -11,6 +11,7 @@ module.exports = function(defaults) {
       '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,7 @@
     "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",

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: TopoComponent },
+  { 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/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/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.ts

@@ -26,16 +26,24 @@ export class TopoComponent implements OnInit {
     x: [],
     y: [],
     name: 'density',
-    ncontours: 40,
+    ncontours: 15,
     colorscale: [
-      [0,"rgb(0, 0, 0)"],
-      [0.3,"rgb(230,  0,  0)"],
-      [0.6,"rgb(255,210,  0)"],
-      [1,"rgb(255,255,255)"]
+      [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'
+    type: 'histogram2dcontour',
+    line: {
+      width: 1
+    },
+    contours: {
+      //coloring: 'heatmap'
+    }
   };
     
   private layout: any = {
@@ -45,7 +53,25 @@ export class TopoComponent implements OnInit {
     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 }
+    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
+    }
   };
   
   private options: any = {
@@ -57,11 +83,11 @@ export class TopoComponent implements OnInit {
     Plotly.newPlot(this.plotElement.id, [this.data], this.layout, this.options);
 
     this.socket.on(this.constants.socket.events.topo, (data) => {
-      console.log(data.data);
-      this.data.x = this.getRandomData().x; //data.data;
-      this.data.y = this.getRandomData().y; //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);
+      //Plotly.Plots.resize(this.plotElement);
     });
   }
   
@@ -77,8 +103,8 @@ export class TopoComponent implements OnInit {
           y = Math.random() * 2 - 1;
           rds = x * x + y * y;
         } while (rds == 0 || rds > 1);
-        c = Math.sqrt(-2 * Math.log(rds) / rds); // Box-Muller transform
-        return x * c; // throw away extra sample y * c
+        c = Math.sqrt(-2 * Math.log(rds) / rds);
+        return x * c;
     }
 
     var N = 2000,

src/index.html

@@ -36,6 +36,7 @@
   <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

@@ -7,7 +7,8 @@ const map: any = {
   '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',
-  'plotly': 'vendor/plotly.js/dist/plotly.js'
+  'plotly': 'vendor/plotly.js/dist/plotly.js',
+  'phaser': 'vendor/phaser/dist/phaser.js'
 };  
 
 /** User packages configuration. */
@@ -41,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
+            }
         });
     }