migrate topo component/route

angular-cli-build.js

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

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "2.0.0-rc.1",
     "@angular/router": "2.0.0-rc.1",
     "chart.js": "^1.0.2",
+    "chroma-js": "^1.1.1",
     "dsp.js": "neurojs/dsp.js",
     "es6-shim": "^0.35.0",
     "express": "^4.13.4",

src/app/dashboard.component.html

@@ -5,7 +5,7 @@
     <a [routerLink]="['/frequency/line', { type: 'Line' }]">Frequency Line</a>
     <a [routerLink]="['/frequency/radar', { type: 'Radar' }]">Frequency Radar</a>
     <a [routerLink]="['/frequency/bands']">Frequency Bands</a>
-    <a ng-click="">Topo</a>
+    <a [routerLink]="['/topo']">Topo</a>
   </nav>
   <router-outlet></router-outlet>
 </main>

src/app/dashboard.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { TimeSeriesComponent } from './time-series';
 import { FrequencyComponent } from './frequency';
 import { FrequencyBandsComponent } from './frequency-bands';
+import { TopoComponent } from './topo';
 import { Routes, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES } from '@angular/router';
 
 @Component({
@@ -17,7 +18,8 @@ import { Routes, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES } from '@angular/ro
   { path: '/time-series', component: TimeSeriesComponent },
   { path: '/frequency/line', component: FrequencyComponent },
   { path: '/frequency/radar', component: FrequencyComponent },
-  { path: '/frequency/bands', component: FrequencyBandsComponent }
+  { path: '/frequency/bands', component: FrequencyBandsComponent },
+  { path: '/topo', component: TopoComponent }
 ])
 
 export class DashboardComponent implements OnInit {

src/app/shared/constants.ts

@@ -9,7 +9,8 @@ export class Constants {
         url: 'http://localhost:8080',
         events: {
             fft: 'bci:fft',
-            time: 'bci:time'
+            time: 'bci:time',
+            topo: 'bci:topo'
         }
     };  
   }

src/app/topo/index.ts

@@ -0,0 +1 @@
+export { TopoComponent } from './topo.component';

src/app/topo/topo.component.css

@@ -0,0 +1,100 @@
+* {
+  box-sizing: border-box;
+}
+
+: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: 50%;
+}
+
+h2 {
+  position: absolute;
+  margin: 0;
+  top: 10px;
+  right: 20px;
+  font-weight: 300;
+}
+
+.topoplot-wrapper {
+  width: 300px;
+  height: 300px;
+  border: 3px solid black;
+  border-radius: 50%;
+  position: relative;
+}
+
+[class*='topoplot-c'] {
+  z-index: 2;
+  background-color: black;
+  border: 1px solid black;
+  width: 5%;
+  height: 5%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.top {
+  top: 2%
+}
+.middle {
+  top: calc(50% - 50px);
+}
+.third {
+  top: 70%;
+}
+.bottom {
+  bottom: 2%;
+}
+
+.top.left,
+.bottom.left {
+  left: 32%;
+}
+
+.top.right,
+.bottom.right {
+  right: 32%;
+}
+
+.middle.left {
+  left: 25%;
+}
+
+.middle.right {
+  right: 25%;
+}
+
+.third.left {
+  left: 8%;
+}
+
+.third.right {
+  right: 8%;
+}
+
+
+/* Grid */
+
+.topoplot-grid {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  -webkit-clip-path: circle(50%);
+  border-radius: 50%;
+  -webkit-filter: blur(10px);
+}
+
+[class*='topoplot-u'] {
+  float: left;
+  /*border: 1px solid lightgray;*/
+  width: 9.09%;
+  height: 9.09%;
+  /*background: lightblue;*/
+}

src/app/topo/topo.component.html

@@ -0,0 +1,22 @@
+<section [ngClass]="{ loading: !grid }">
+    <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>
+</section>

src/app/topo/topo.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 { TopoComponent } from './topo.component';
+
+describe('Component: Topo', () => {
+  let builder: TestComponentBuilder;
+
+  beforeEachProviders(() => [TopoComponent]);
+  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
+    builder = tcb;
+  }));
+
+  it('should inject the component', inject([TopoComponent],
+      (component: TopoComponent) => {
+    expect(component).toBeTruthy();
+  }));
+
+  it('should create the component', inject([], () => {
+    return builder.createAsync(TopoComponentTestController)
+      .then((fixture: ComponentFixture<any>) => {
+        let query = fixture.debugElement.query(By.directive(TopoComponent));
+        expect(query).toBeTruthy();
+        expect(query.componentInstance).toBeTruthy();
+      });
+  }));
+});
+
+@Component({
+  selector: 'test',
+  template: `
+    <bci-topo></bci-topo>
+  `,
+  directives: [TopoComponent]
+})
+class TopoComponentTestController {
+}
+

src/app/topo/topo.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import * as io from 'socket.io-client';
+import { Constants } from '../shared/constants';
+
+declare var chroma;
+
+@Component({
+  moduleId: module.id,
+  selector: 'bci-topo',
+  templateUrl: 'topo.component.html',
+  styleUrls: ['topo.component.css'],
+  providers: [Constants]
+})
+
+export class TopoComponent implements OnInit {
+
+  socket: any;
+  constructor(private constants: Constants) {
+    this.socket = io(constants.socket.url);
+  }
+  
+  private grid:Array<any> = [];
+  
+  ngOnInit() {    
+    this.socket.on(this.constants.socket.events.topo, (data) => {
+      this.grid = data.data;
+    });
+  }
+  
+  ngOnDestroy () {
+    this.socket.removeListener(this.constants.socket.events.topo);
+  } 
+  
+  getClass (index) {
+    return 'topoplot-u' + index;
+  }
+
+  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) 
+      }
+  }
+
+}

src/index.html

@@ -34,6 +34,7 @@
   <bci-dashboard>Loading...</bci-dashboard>
 
   <script src="vendor/chart.js/Chart.js"></script>
+  <script src="vendor/chroma-js/chroma.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

@@ -5,7 +5,8 @@
 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'
+  'socket.io-client': 'vendor/socket.io-client/socket.io.js',
+  'chroma-js': 'vendor/chroma-js/chroma.js'
 };  
 
 /** User packages configuration. */
@@ -38,6 +39,7 @@ const barrels: string[] = [
   'app/nav',
   'app/frequency-bands',
   'app/frequency-band',
+  'app/topo',
   /** @cli-barrel */
 ];
 

typings.json

@@ -6,6 +6,7 @@
   },
   "ambientDependencies": {
     "chart": "registry:dt/chart#0.0.0+20160316155526",
+    "chroma-js": "registry:dt/chroma-js#0.5.6+20160317120654",
     "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
     "smoothie": "registry:dt/smoothie#1.25.0+20160316155526",
     "socket.io-client": "registry:dt/socket.io-client#1.4.4+20160317120654"