From 7393c0603bc092e2335b6dff9b3f7c877794f557 Mon Sep 17 00:00:00 2001 From: Alex Castillo Date: Fri, 13 May 2016 16:42:23 -0400 Subject: [PATCH] migrate topo component/route --- angular-cli-build.js | 1 + package.json | 1 + src/app/dashboard.component.html | 2 +- src/app/dashboard.component.ts | 4 +- src/app/shared/constants.ts | 3 +- src/app/topo/index.ts | 1 + src/app/topo/topo.component.css | 100 ++++++++++++++++++++++++++++ src/app/topo/topo.component.html | 22 ++++++ src/app/topo/topo.component.spec.ts | 46 +++++++++++++ src/app/topo/topo.component.ts | 47 +++++++++++++ src/index.html | 1 + src/system-config.ts | 4 +- typings.json | 1 + 13 files changed, 229 insertions(+), 4 deletions(-) create mode 100644 src/app/topo/index.ts create mode 100644 src/app/topo/topo.component.css create mode 100644 src/app/topo/topo.component.html create mode 100644 src/app/topo/topo.component.spec.ts create mode 100644 src/app/topo/topo.component.ts diff --git a/angular-cli-build.js b/angular-cli-build.js index 8386741..2159049 100644 --- a/angular-cli-build.js +++ b/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', diff --git a/package.json b/package.json index 70c9b0b..08a805b 100644 --- a/package.json +++ b/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", diff --git a/src/app/dashboard.component.html b/src/app/dashboard.component.html index 0b68817..7fd9e33 100644 --- a/src/app/dashboard.component.html +++ b/src/app/dashboard.component.html @@ -5,7 +5,7 @@ Frequency Line Frequency Radar Frequency Bands - Topo + Topo \ No newline at end of file diff --git a/src/app/dashboard.component.ts b/src/app/dashboard.component.ts index 98de778..4cead82 100644 --- a/src/app/dashboard.component.ts +++ b/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 { diff --git a/src/app/shared/constants.ts b/src/app/shared/constants.ts index 7e0edb0..050e17c 100644 --- a/src/app/shared/constants.ts +++ b/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' } }; } diff --git a/src/app/topo/index.ts b/src/app/topo/index.ts new file mode 100644 index 0000000..cb5b375 --- /dev/null +++ b/src/app/topo/index.ts @@ -0,0 +1 @@ +export { TopoComponent } from './topo.component'; diff --git a/src/app/topo/topo.component.css b/src/app/topo/topo.component.css new file mode 100644 index 0000000..0b8785e --- /dev/null +++ b/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;*/ +} \ No newline at end of file diff --git a/src/app/topo/topo.component.html b/src/app/topo/topo.component.html new file mode 100644 index 0000000..1329136 --- /dev/null +++ b/src/app/topo/topo.component.html @@ -0,0 +1,22 @@ +
+

Topo

+
+ +
+
+
+
+
+
+
+
+ + + +
+
\ No newline at end of file diff --git a/src/app/topo/topo.component.spec.ts b/src/app/topo/topo.component.spec.ts new file mode 100644 index 0000000..391ca9d --- /dev/null +++ b/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) => { + let query = fixture.debugElement.query(By.directive(TopoComponent)); + expect(query).toBeTruthy(); + expect(query.componentInstance).toBeTruthy(); + }); + })); +}); + +@Component({ + selector: 'test', + template: ` + + `, + directives: [TopoComponent] +}) +class TopoComponentTestController { +} + diff --git a/src/app/topo/topo.component.ts b/src/app/topo/topo.component.ts new file mode 100644 index 0000000..278b058 --- /dev/null +++ b/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 = []; + + 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) + } + } + +} diff --git a/src/index.html b/src/index.html index e118bf8..dbfdf60 100644 --- a/src/index.html +++ b/src/index.html @@ -34,6 +34,7 @@ Loading... + diff --git a/src/system-config.ts b/src/system-config.ts index 3a2fec8..e1bf7e0 100644 --- a/src/system-config.ts +++ b/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 */ ]; diff --git a/typings.json b/typings.json index 24c9299..539c087 100644 --- a/typings.json +++ b/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"