angular 2 upgrade failed miserably

split into separate components

.gitignore

@@ -1,2 +1,5 @@
 .idea
-node_modules
+node_modules
+npm-debug.log
+app/*.js
+app/*.js.map

README.md

@@ -11,7 +11,7 @@ This project is under development, this is just a first draft.
 
 ```bash
 npm install
-node visualizer
+npm start
 ```
 
 * Go to: http://localhost:3036
@@ -19,7 +19,7 @@ node visualizer
 ## Simulating data
 
 ```bash
-node visualizer simulate
+npm run simulate
 ```
 
 ## Support

app/components/alpha/alpha.html

@@ -1,9 +0,0 @@
-<section>
-    <h2>Alpha</h2>
-    <canvas id="alpha"
-            class="chart chart-bar"
-            chart-data="$ctrl.data"
-            chart-labels="$ctrl.series"
-            chart-series="$ctrl.series">
-    </canvas>
-</section>

app/components/alpha/alpha.js

@@ -1,17 +0,0 @@
-
-angular.module('openbciVisualizer')
-    .component('bciAlpha', {
-        templateUrl: 'components/alpha/alpha.html',
-        controller: function ($timeout) {
-            var $ctrl = this;
-            var socket = io();
-            $ctrl.series = ['Channel 1','Channel 2','Channel 3','Channel 4','Channel 5','Channel 6','Channel 7','Channel 8'];
-            socket.on('openBCIData', function (data) {
-                var alphaRange = EEGSpectrumUtils.filterBand(data.spectrums.data, data.spectrums.labels, [8, 12]);
-                $timeout(function () {
-                    $ctrl.labels = alphaRange.labels;
-                    $ctrl.data = alphaRange.spectrums;
-                });
-            });
-        }
-    });

app/components/beta/beta.html

@@ -1,9 +0,0 @@
-<section>
-    <h2>Beta</h2>
-    <canvas id="beta"
-        class="chart chart-bar"
-        chart-data="$ctrl.data"
-        chart-labels="$ctrl.series"
-        chart-series="$ctrl.series">
-    </canvas>
-</section>

app/components/beta/beta.js

@@ -1,17 +0,0 @@
-
-angular.module('openbciVisualizer')
-    .component('bciBeta', {
-        templateUrl: 'components/beta/beta.html',
-        controller: function ($timeout) {
-            var $ctrl = this;
-            var socket = io();
-            $ctrl.series = ['Channel 1','Channel 2','Channel 3','Channel 4','Channel 5','Channel 6','Channel 7','Channel 8'];
-            socket.on('openBCIData', function (data) {
-                var betaRange = EEGSpectrumUtils.filterBand(data.spectrums.data, data.spectrums.labels, [12, 40]);
-                $timeout(function () {
-                    $ctrl.labels = betaRange.labels;
-                    $ctrl.data = betaRange.spectrums;
-                });
-            });
-        }
-    });

app/components/dashboard/dashboard.component.js

@@ -0,0 +1,45 @@
+System.register(['@angular2/core', '../frequency/frequency.component', '../time-series/time-series.component'], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    var __metadata = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+    };
+    var core_1, frequency_component_1, time_series_component_1;
+    var DashboardComponent;
+    return {
+        setters:[
+            function (core_1_1) {
+                core_1 = core_1_1;
+            },
+            function (frequency_component_1_1) {
+                frequency_component_1 = frequency_component_1_1;
+            },
+            function (time_series_component_1_1) {
+                time_series_component_1 = time_series_component_1_1;
+            }],
+        execute: function() {
+            DashboardComponent = (function () {
+                function DashboardComponent() {
+                }
+                DashboardComponent = __decorate([
+                    core_1.Component({
+                        selector: 'bci-dashboard',
+                        templateUrl: 'app/components/dashboard/dashboard.html',
+                        styleUrls: ['app/components/dashboard/dashboard.css'],
+                        directives: [frequency_component_1.FrequencyComponent, time_series_component_1.TimeSeriesComponent]
+                    }), 
+                    __metadata('design:paramtypes', [])
+                ], DashboardComponent);
+                return DashboardComponent;
+            }());
+            exports_1("DashboardComponent", DashboardComponent);
+        }
+    }
+});
+//# sourceMappingURL=dashboard.component.js.map

app/components/dashboard/dashboard.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.component.js","sourceRoot":"","sources":["dashboard.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;YAWA;gBAAA;gBAEA,CAAC;gBATD;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,eAAe;wBACzB,WAAW,EAAE,yCAAyC;wBACtD,SAAS,EAAE,CAAC,wCAAwC,CAAC;wBACrD,UAAU,EAAE,CAAC,wCAAkB,EAAE,2CAAmB,CAAC;qBACxD,CAAC;;sCAAA;gBAIF,yBAAC;YAAD,CAAC,AAFD,IAEC;YAFD,mDAEC,CAAA"}

app/components/dashboard/dashboard.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular2/core';
+import { FrequencyComponent } from '../frequency/frequency.component';
+import { TimeSeriesComponent } from '../time-series/time-series.component';
+
+@Component({
+    selector: 'bci-dashboard',
+    templateUrl: 'app/components/dashboard/dashboard.html',
+    styleUrls: ['app/components/dashboard/dashboard.css'],
+    directives: [FrequencyComponent, TimeSeriesComponent]
+})
+
+export class DashboardComponent {
+
+}

app/components/dashboard/dashboard.css

@@ -0,0 +1,69 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
+
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  display: flex;
+  font-family: 'Roboto', sans-serif;
+  color: #ffffff;
+  background-color: #222222;
+  margin: 0;
+}
+
+.dashboard {
+  width: 100%;
+}
+
+h1 {
+  margin: 20px;
+  font-weight: 300;
+}
+
+:host::shadow .chart {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.row {
+  display: flex;
+}
+
+.block {
+  display: block;
+  margin: 20px;
+  padding: 20px;
+  box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  background-color: #333333;
+  position: relative;
+}
+
+.block h2 {
+  position: absolute;
+  margin: 0;
+  top: 10px;
+  right: 20px;
+  font-weight: 300;
+}
+
+.block-25 {
+  width: 25%;
+}
+
+.block-33 {
+  width: 33%;
+}
+
+.block-50 {
+  width: 50%;
+}
+
+.block-75 {
+  width: 75%;
+}
+
+.block-100 {
+  width: 100%;
+}

app/components/dashboard/dashboard.html

@@ -0,0 +1,11 @@
+<section class="dashboard">
+
+    <h1>BCI Dashboard</h1>
+
+    <article class="row">
+        <time-series class="block-50"></time-series>
+        <!--<frequency class="block-50"></frequency>-->
+    </article>
+
+</section>
+

app/components/delta/delta.html

@@ -1,9 +0,0 @@
-<section>
-    <h2>Delta</h2>
-    <canvas id="delta"
-        class="chart chart-bar"
-        chart-data="$ctrl.data"
-        chart-labels="$ctrl.series"
-        chart-series="$ctrl.series">
-    </canvas>
-</section>

app/components/delta/delta.js

@@ -1,17 +0,0 @@
-
-angular.module('openbciVisualizer')
-    .component('bciDelta', {
-        templateUrl: 'components/delta/delta.html',
-        controller: function ($timeout) {
-            var $ctrl = this;
-            var socket = io();
-            $ctrl.series = ['Channel 1','Channel 2','Channel 3','Channel 4','Channel 5','Channel 6','Channel 7','Channel 8'];
-            socket.on('openBCIData', function (data) {
-                var deltaRange = EEGSpectrumUtils.filterBand(data.spectrums.data, data.spectrums.labels, [0.5, 4]);
-                $timeout(function () {
-                    $ctrl.labels = deltaRange.labels;
-                    $ctrl.data = deltaRange.spectrums;
-                });
-            });
-        }
-    });

app/components/frequency/frequency.component.js

@@ -0,0 +1,80 @@
+System.register(['@angular2/core', '../../services/ng2-charts'], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    var __metadata = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+    };
+    var core_1, ng2_charts_1;
+    var FrequencyComponent;
+    return {
+        setters:[
+            function (core_1_1) {
+                core_1 = core_1_1;
+            },
+            function (ng2_charts_1_1) {
+                ng2_charts_1 = ng2_charts_1_1;
+            }],
+        execute: function() {
+            FrequencyComponent = (function () {
+                function FrequencyComponent() {
+                    var _this = this;
+                    this.lineChartType = 'Line';
+                    this.lineChartData = [[]];
+                    this.lineChartColours = [
+                        { strokeColor: 'rgba(112,185,252,1)' },
+                        { strokeColor: 'rgba(116,150,161,1)' },
+                        { strokeColor: 'rgba(162,86,178,1)' },
+                        { strokeColor: 'rgba(144,132,246,1)' },
+                        { strokeColor: 'rgba(138,219,229,1)' },
+                        { strokeColor: 'rgba(232,223,133,1)' },
+                        { strokeColor: 'rgba(148,159,177,1)' },
+                        { strokeColor: 'rgba(77,83,96,1)' }
+                    ];
+                    this.lineChartLabels = [];
+                    this.lineChartSeries = this.generateChannels();
+                    this.lineChartOptions = {
+                        animation: false,
+                        responsive: true,
+                        pointDot: false,
+                        pointDotRadius: 1,
+                        pointDotStrokeWidth: 0,
+                        datasetFill: false,
+                        scaleOverride: true,
+                        scaleStartValue: -2,
+                        scaleStepWidth: 1,
+                        scaleSteps: 6,
+                        barShowStroke: false,
+                        barValueSpacing: 1
+                    };
+                    this.socket = io('http://localhost:8080');
+                    this.socket.on('bci:fft', function (data) {
+                        console.log('fft:data', data);
+                        _this.lineChartData = data.data;
+                        _this.lineChartLabels = data.labels;
+                    });
+                }
+                FrequencyComponent.prototype.generateChannels = function () {
+                    return Array(8).fill('Channel ').map(function (item, index) { return item + (index + 1); });
+                };
+                FrequencyComponent = __decorate([
+                    core_1.Component({
+                        selector: 'frequency',
+                        templateUrl: 'app/components/frequency/frequency.html',
+                        encapsulation: core_1.ViewEncapsulation.None,
+                        directives: [ng2_charts_1.CHART_DIRECTIVES]
+                    }), 
+                    __metadata('design:paramtypes', [])
+                ], FrequencyComponent);
+                return FrequencyComponent;
+            }());
+            exports_1("FrequencyComponent", FrequencyComponent);
+        }
+    }
+});
+//# sourceMappingURL=frequency.component.js.map

app/components/frequency/frequency.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frequency.component.js","sourceRoot":"","sources":["frequency.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;YAYA;gBAII;oBAJJ,iBAkDC;oBArCW,kBAAa,GAAU,MAAM,CAAC;oBAE9B,kBAAa,GAAc,CAAC,EAAE,CAAC,CAAC;oBAEhC,qBAAgB,GAAc;wBAClC,EAAE,WAAW,EAAE,qBAAqB,EAAE;wBACtC,EAAE,WAAW,EAAE,qBAAqB,EAAE;wBACtC,EAAE,WAAW,EAAE,oBAAoB,EAAE;wBACrC,EAAE,WAAW,EAAE,qBAAqB,EAAE;wBACtC,EAAE,WAAW,EAAE,qBAAqB,EAAE;wBACtC,EAAE,WAAW,EAAE,qBAAqB,EAAE;wBACtC,EAAE,WAAW,EAAE,qBAAqB,EAAE;wBACtC,EAAE,WAAW,EAAE,kBAAkB,EAAE;qBACtC,CAAC;oBAEM,oBAAe,GAAc,EAAE,CAAC;oBAChC,oBAAe,GAAc,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBAErD,qBAAgB,GAAO;wBAC3B,SAAS,EAAE,KAAK;wBAChB,UAAU,EAAE,IAAI;wBAChB,QAAQ,EAAE,KAAK;wBACf,cAAc,EAAE,CAAC;wBACjB,mBAAmB,EAAE,CAAC;wBACtB,WAAW,EAAE,KAAK;wBAClB,aAAa,EAAE,IAAI;wBACnB,eAAe,EAAE,CAAC,CAAC;wBACnB,cAAc,EAAE,CAAC;wBACjB,UAAU,EAAE,CAAC;wBACb,aAAa,EAAE,KAAK;wBACpB,eAAe,EAAE,CAAC;qBACrB,CAAC;oBAvCE,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,uBAAuB,CAAC,CAAC;oBAC1C,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,UAAC,IAAI;wBAC3B,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;wBAC9B,KAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC;wBAC/B,KAAI,CAAC,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC;oBACvC,CAAC,CAAC,CAAC;gBACP,CAAC;gBAmCD,6CAAgB,GAAhB;oBACI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,EAAlB,CAAkB,CAAC,CAAC;gBAC9E,CAAC;gBAvDL;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,WAAW;wBACrB,WAAW,EAAE,yCAAyC;wBACtD,aAAa,EAAE,wBAAiB,CAAC,IAAI;wBACrC,UAAU,EAAE,CAAC,6BAAgB,CAAC;qBACjC,CAAC;;sCAAA;gBAoDF,yBAAC;YAAD,CAAC,AAlDD,IAkDC;YAlDD,mDAkDC,CAAA"}

app/components/frequency/frequency.component.ts

@@ -0,0 +1,63 @@
+import { Component, ViewEncapsulation} from '@angular2/core';
+import { CHART_DIRECTIVES } from '../../services/ng2-charts';
+
+declare var io: any;
+
+@Component({
+    selector: 'frequency',
+    templateUrl: 'app/components/frequency/frequency.html',
+    encapsulation: ViewEncapsulation.None,
+    directives: [CHART_DIRECTIVES]
+})
+
+export class FrequencyComponent {
+
+    socket: any;
+
+    constructor() {
+        this.socket = io('http://localhost:8080');
+        this.socket.on('bci:fft', (data) => {
+            console.log('fft:data', data);
+            this.lineChartData = data.data;
+            this.lineChartLabels = data.labels;
+        });
+    }
+
+    private lineChartType:string = 'Line';
+
+    private lineChartData:Array<any> = [[]];
+
+    private lineChartColours:Array<any> = [
+        { strokeColor: 'rgba(112,185,252,1)' },
+        { strokeColor: 'rgba(116,150,161,1)' },
+        { strokeColor: 'rgba(162,86,178,1)' },
+        { strokeColor: 'rgba(144,132,246,1)' },
+        { strokeColor: 'rgba(138,219,229,1)' },
+        { strokeColor: 'rgba(232,223,133,1)' },
+        { strokeColor: 'rgba(148,159,177,1)' },
+        { strokeColor: 'rgba(77,83,96,1)' }
+    ];
+
+    private lineChartLabels:Array<any> = [];
+    private lineChartSeries:Array<any> = this.generateChannels();
+
+    private lineChartOptions:any = {
+        animation: false,
+        responsive: true,
+        pointDot: false,
+        pointDotRadius: 1,
+        pointDotStrokeWidth: 0,
+        datasetFill: false,
+        scaleOverride: true,
+        scaleStartValue: -2,
+        scaleStepWidth: 1,
+        scaleSteps: 6,
+        barShowStroke: false,
+        barValueSpacing: 1
+    };
+
+    generateChannels () {
+        return Array(8).fill('Channel ').map((item, index) => item + (index + 1));
+    }
+
+}

app/components/frequency/frequency.html

@@ -1,10 +1,8 @@
-<section>
-    <h2>Frequency</h2>
-    <canvas id="frequency"
-            class="chart chart-line"
-            chart-data="$ctrl.data"
-            chart-labels="$ctrl.labels"
-            chart-series="$ctrl.series"
-            chart-options="{ responsive: true }">
-    </canvas>
-</section>
+<base-chart class="chart"
+            [data]="lineChartData"
+            [labels]="lineChartLabels"
+            [options]="lineChartOptions"
+            [colours]="lineChartColours"
+            [series]="lineChartSeries"
+            [chartType]="lineChartType">
+</base-chart>

app/components/frequency/frequency.js

@@ -1,16 +0,0 @@
-
-angular.module('openbciVisualizer')
-    .component('bciFrequency', {
-        templateUrl: 'components/frequency/frequency.html',
-        controller: function ($timeout) {
-            var $ctrl = this;
-            var socket = io();
-            $ctrl.series = ['Channel 1','Channel 2','Channel 3','Channel 4','Channel 5','Channel 6','Channel 7','Channel 8'];
-            socket.on('openBCIData', function (data) {
-                $timeout(function () {
-                    $ctrl.data = data.spectrums.data;
-                    $ctrl.labels = data.spectrums.labels;
-                });
-            });
-        }
-    });

app/components/theta/theta.html

@@ -1,9 +0,0 @@
-<section>
-    <h2>Theta</h2>
-    <canvas id="theta"
-            class="chart chart-bar"
-            chart-data="$ctrl.data"
-            chart-labels="$ctrl.series"
-            chart-series="$ctrl.series">
-    </canvas>
-</section>

app/components/theta/theta.js

@@ -1,17 +0,0 @@
-
-angular.module('openbciVisualizer')
-    .component('bciTheta', {
-        templateUrl: 'components/theta/theta.html',
-        controller: function ($timeout) {
-            var $ctrl = this;
-            var socket = io();
-            $ctrl.series = ['Channel 1','Channel 2','Channel 3','Channel 4','Channel 5','Channel 6','Channel 7','Channel 8'];
-            socket.on('openBCIData', function (data) {
-                var thetaRange = EEGSpectrumUtils.filterBand(data.spectrums.data, data.spectrums.labels, [4, 8]);
-                $timeout(function () {
-                    $ctrl.labels = thetaRange.labels;
-                    $ctrl.data = thetaRange.spectrums;
-                });
-            });
-        }
-    });

app/components/time-series/time-series.component.js

@@ -0,0 +1,84 @@
+System.register(['@angular/core'], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    var __metadata = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+    };
+    var core_1;
+    var TimeSeriesComponent;
+    return {
+        setters:[
+            function (core_1_1) {
+                core_1 = core_1_1;
+            }],
+        execute: function() {
+            TimeSeriesComponent = (function () {
+                function TimeSeriesComponent(element) {
+                    this.channels = Array(8).fill().map(function () {
+                        return new TimeSeries();
+                    });
+                    this.colors = [
+                        { strokeColor: 'rgba(112,185,252,1)' },
+                        { strokeColor: 'rgba(116,150,161,1)' },
+                        { strokeColor: 'rgba(162,86,178,1)' },
+                        { strokeColor: 'rgba(144,132,246,1)' },
+                        { strokeColor: 'rgba(138,219,229,1)' },
+                        { strokeColor: 'rgba(232,223,133,1)' },
+                        { strokeColor: 'rgba(148,159,177,1)' },
+                        { strokeColor: 'rgba(182,224,53,1)' }
+                    ];
+                    this.smoothie = new SmoothieChart({
+                        millisPerLine: 3000,
+                        grid: {
+                            fillStyle: '#333333',
+                            strokeStyle: 'rgba(255,255,255,0.05)',
+                            sharpLines: false,
+                            verticalSections: this.channels.length,
+                            borderVisible: true
+                        },
+                        labels: {
+                            disabled: true
+                        },
+                        maxValue: this.channels.length * 2,
+                        minValue: 0
+                    });
+                    console.log(element);
+                    this.channels.forEach(function (channel, i) {
+                        smoothie.addTimeSeries(channel, { strokeStyle: this.colors[i].strokeColor });
+                    });
+                    smoothie.streamTo(element.nativeElement.querySelector('canvas'), 40);
+                    this.socket = io('http://localhost:8080');
+                    this.socket.on('bci:time', function (data) {
+                        updateTimeSeries(data);
+                    });
+                }
+                TimeSeriesComponent.prototype.updateTimeSeries = function (data) {
+                    this.amplitudes = data.amplitudes;
+                    this.timeline = data.timeline;
+                    this.channels.forEach(function (channel, channelNumber) {
+                        data.data[channelNumber].forEach(function (amplitude) {
+                            channel.append(new Date().getTime(), amplitude);
+                        });
+                    });
+                };
+                TimeSeriesComponent = __decorate([
+                    core_1.Component({
+                        selector: 'time-series',
+                        templateUrl: 'app/components/time-series/time-series.html',
+                        encapsulation: core_1.ViewEncapsulation.None,
+                    }), 
+                    __metadata('design:paramtypes', [Object])
+                ], TimeSeriesComponent);
+                return TimeSeriesComponent;
+            }());
+            exports_1("TimeSeriesComponent", TimeSeriesComponent);
+        }
+    }
+});
+//# sourceMappingURL=time-series.component.js.map

app/components/time-series/time-series.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-series.component.js","sourceRoot":"","sources":["time-series.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;YAaA;gBAII,6BAAY,OAAmB;oBA2BvB,aAAQ,GAAe,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC;wBAC/C,MAAM,CAAC,IAAI,UAAU,EAAE,CAAC;oBAC5B,CAAC,CAAC,CAAC;oBAEK,WAAM,GAAe;wBACzB,EAAE,WAAW,EAAE,qBAAqB,EAAE;wBACtC,EAAE,WAAW,EAAE,qBAAqB,EAAE;wBACtC,EAAE,WAAW,EAAE,oBAAoB,EAAG;wBACtC,EAAE,WAAW,EAAE,qBAAqB,EAAE;wBACtC,EAAE,WAAW,EAAE,qBAAqB,EAAE;wBACtC,EAAE,WAAW,EAAE,qBAAqB,EAAE;wBACtC,EAAE,WAAW,EAAE,qBAAqB,EAAE;wBACtC,EAAE,WAAW,EAAE,oBAAoB,EAAG;qBACzC,CAAC;oBAEM,aAAQ,GAAQ,IAAI,aAAa,CAAC;wBACtC,aAAa,EAAE,IAAI;wBACnB,IAAI,EAAE;4BACF,SAAS,EAAE,SAAS;4BACpB,WAAW,EAAE,wBAAwB;4BACrC,UAAU,EAAE,KAAK;4BACjB,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM;4BACtC,aAAa,EAAE,IAAI;yBACtB;wBACD,MAAM,EAAE;4BACJ,QAAQ,EAAE,IAAI;yBACjB;wBACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;wBAClC,QAAQ,EAAE,CAAC;qBACd,CAAC,CAAC;oBAtDC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;oBAErB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,OAAO,EAAE,CAAC;wBACtC,QAAQ,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;oBACjF,CAAC,CAAC,CAAC;oBAEH,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC;oBAErE,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,uBAAuB,CAAC,CAAC;oBAC1C,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,UAAC,IAAI;wBAC5B,gBAAgB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,CAAC,CAAC;gBACP,CAAC;gBAED,8CAAgB,GAAhB,UAAkB,IAAI;oBAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;oBAClC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;oBAE9B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,OAAO,EAAE,aAAa;wBAClD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,UAAU,SAAS;4BAChD,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC;wBACpD,CAAC,CAAC,CAAC;oBACP,CAAC,CAAC,CAAC;gBACP,CAAC;gBAnCL;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,aAAa;wBACvB,WAAW,EAAE,6CAA6C;wBAC1D,aAAa,EAAE,wBAAiB,CAAC,IAAI;qBACxC,CAAC;;uCAAA;gBAiEF,0BAAC;YAAD,CAAC,AA/DD,IA+DC;YA/DD,qDA+DC,CAAA"}

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

@@ -0,0 +1,77 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+declare var io: any;
+declare var SmoothieChart: any;
+declare var TimeSeries: any;
+declare var smoothie: any;
+
+@Component({
+    selector: 'time-series',
+    templateUrl: 'app/components/time-series/time-series.html',
+    encapsulation: ViewEncapsulation.None,
+})
+
+export class TimeSeriesComponent {
+
+    socket: any;
+
+    constructor(element: ElementRef) {
+
+        console.log(element);
+
+        this.channels.forEach(function (channel, i) {
+            smoothie.addTimeSeries(channel, { strokeStyle: this.colors[i].strokeColor });
+        });
+
+        smoothie.streamTo(element.nativeElement.querySelector('canvas'), 40);
+
+        this.socket = io('http://localhost:8080');
+        this.socket.on('bci:time', (data) => {
+            updateTimeSeries(data);
+        });
+    }
+
+    updateTimeSeries (data) {
+        this.amplitudes = data.amplitudes;
+        this.timeline = data.timeline;
+
+        this.channels.forEach(function (channel, channelNumber) {
+            data.data[channelNumber].forEach(function (amplitude) {
+                channel.append(new Date().getTime(), amplitude);
+            });
+        });
+    }
+
+    private channels: Array<any> = Array(8).fill().map(function () {
+        return new TimeSeries();
+    });
+
+    private colors: Array<any> = [
+        { strokeColor: 'rgba(112,185,252,1)' },
+        { strokeColor: 'rgba(116,150,161,1)' },
+        { strokeColor: 'rgba(162,86,178,1)'  },
+        { strokeColor: 'rgba(144,132,246,1)' },
+        { strokeColor: 'rgba(138,219,229,1)' },
+        { strokeColor: 'rgba(232,223,133,1)' },
+        { strokeColor: 'rgba(148,159,177,1)' },
+        { strokeColor: 'rgba(182,224,53,1)'  }
+    ];
+
+    private smoothie: any = new SmoothieChart({
+        millisPerLine: 3000,
+        grid: {
+            fillStyle: '#333333',
+            strokeStyle: 'rgba(255,255,255,0.05)',
+            sharpLines: false,
+            verticalSections: this.channels.length,
+            borderVisible: true
+        },
+        labels: {
+            disabled: true
+        },
+        maxValue: this.channels.length * 2,
+        minValue: 0
+    });
+
+
+}

app/components/time-series/time-series.html

@@ -0,0 +1,14 @@
+<section class="time-series">
+    <h2>Time Series</h2>
+    <aside class="time-series-amplitudes">
+        <ul>
+            <li *ngFor="amplitude of amplitudes">{{ amplitude }}</li>
+        </ul>
+    </aside>
+    <canvas id="timeSeries" width="1000" height="500" style="margin: 40px 0;"></canvas>
+    <footer class="time-series-duration">
+        <time *ngFor="second of timeline" datetime="P1M">
+            <span [hidden]="!second">-</span>{{ second }}
+        </time>
+    </footer>
+</section>

app/components/time/time.html

@@ -1,10 +0,0 @@
-<section>
-    <h2>Time</h2>
-    <canvas id="time"
-            class="chart chart-line"
-            chart-data="$ctrl.data"
-            chart-labels="$ctrl.labels"
-            chart-series="$ctrl.series"
-            chart-options="{ responsive: true, scaleOverride: false }">
-    </canvas>
-</section>

app/components/time/time.js

@@ -1,17 +0,0 @@
-
-angular.module('openbciVisualizer')
-    .component('bciTime', {
-        templateUrl: 'components/time/time.html',
-        controller: function ($timeout) {
-            var $ctrl = this;
-            var socket = io();
-            $ctrl.series = ['Channel 1','Channel 2','Channel 3','Channel 4','Channel 5','Channel 6','Channel 7','Channel 8'];
-            socket.on('openBCIData', function (data) {
-                $timeout(function () {
-                    console.log(data.timeSeries);
-                    $ctrl.labels = data.timeSeries.labels;
-                    $ctrl.data = data.timeSeries.data;
-                });
-            });
-        }
-    });

app/index.html

@@ -1,55 +0,0 @@
-<!doctype html>
-<html ng-app="openbciVisualizer">
-    <head>
-        <title>OpenBCI Visualizer</title>
-
-        <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css">
-
-        <script src="node_modules/socket.io-client/socket.io.js"></script>
-
-        <script src="/node_modules/angular/angular.js"></script>
-        <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
-        <script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
-
-        <script src="visualizer.js"></script>
-
-        <script src="lib/EEGSpectrumUtils.js"></script>
-
-        <script src="components/frequency/frequency.js"></script>
-        <script src="components/time/time.js"></script>
-        <script src="components/alpha/alpha.js"></script>
-        <script src="components/delta/delta.js"></script>
-        <script src="components/beta/beta.js"></script>
-        <script src="components/theta/theta.js"></script>
-
-        <style>
-            @import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
-            body {
-                font-family: 'Roboto', sans-serif;
-            }
-            .flex {
-                display: flex;
-            }
-        </style>
-
-    </head>
-    <body>
-
-        <main>
-
-            <h1>OpenBCI Visualizer</h1>
-
-            <bci-time></bci-time>
-            <bci-frequency></bci-frequency>
-
-            <section class="flex">
-                <bci-alpha></bci-alpha>
-                <bci-delta></bci-delta>
-                <bci-beta></bci-beta>
-                <bci-theta></bci-theta>
-            </section>
-
-        </main>
-
-    </body>
-</html>

app/lib/EEGSpectrumUtils.js

@@ -1,28 +0,0 @@
-
-var EEGSpectrumUtils = {
-
-    /**
-     * filterBand: Give spectrums and labels, it filters the spectrums based on the labels within the range
-     * @param spectrums
-     * @param labels
-     * @param range
-     * @returns {{spectrums: Array, labels: *}}
-     */
-    filterBand: function (spectrums, labels, range) {
-        //if (!spectrums ) return console.log();
-        spectrums = spectrums.map(function (channel) {
-            return channel.filter(function (spectrum, index) {
-                return labels[index] >= range[0] && labels[index] <= range[1];
-            });
-        });
-        spectrums =  [spectrums.map(function (channel) {
-            return channel.reduce(function (a, b) {
-                    return a + b;
-                }) / channel.length;
-        })];
-        return {
-            spectrums: spectrums,
-            labels: labels
-        }
-    }
-};

app/main.ts

@@ -0,0 +1,8 @@
+
+import { bootstrap } from '@angular2/platform/browser'
+import { DashboardComponent } from './components/dashboard/dashboard.component';
+import { enableProdMode } from '@angular/core';
+
+enableProdMode();
+
+bootstrap(DashboardComponent);

app/services/ng2-charts.js

@@ -0,0 +1,293 @@
+System.register(['angular2/core', 'angular2/common'], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    var __metadata = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+    };
+    var core_1, common_1;
+    var Charts, BaseChart, CHART_DIRECTIVES;
+    return {
+        setters:[
+            function (core_1_1) {
+                core_1 = core_1_1;
+            },
+            function (common_1_1) {
+                common_1 = common_1_1;
+            }],
+        execute: function() {
+            Charts = (function () {
+                function Charts(element) {
+                }
+                Charts = __decorate([
+                    core_1.Component({
+                        selector: 'chart, canvas[chart]',
+                        template: "<canvas></canvas>",
+                        directives: [common_1.CORE_DIRECTIVES, common_1.NgClass]
+                    }), 
+                    __metadata('design:paramtypes', [(typeof (_a = typeof core_1.ElementRef !== 'undefined' && core_1.ElementRef) === 'function' && _a) || Object])
+                ], Charts);
+                return Charts;
+                var _a;
+            }());
+            exports_1("Charts", Charts);
+            BaseChart = (function () {
+                function BaseChart(element) {
+                    this.element = element;
+                    this.data = [];
+                    this.labels = [];
+                    this.options = { responsive: true };
+                    this.series = [];
+                    this.colours = [];
+                    this.initFlag = false;
+                    this.chartClick = new core_1.EventEmitter();
+                    this.chartHover = new core_1.EventEmitter();
+                    this.defaultsColours = [
+                        {
+                            fillColor: 'rgba(151,187,205,0.2)',
+                            strokeColor: 'rgba(151,187,205,1)',
+                            pointColor: 'rgba(151,187,205,1)',
+                            pointStrokeColor: '#fff',
+                            pointHighlightFill: '#fff',
+                            pointHighlightStroke: 'rgba(151,187,205,0.8)',
+                            color: 'rgba(151,187,205,1)',
+                            highlight: 'rgba(151,187,205,0.8)'
+                        }, {
+                            fillColor: 'rgba(220,220,220,0.2)',
+                            strokeColor: 'rgba(220,220,220,1)',
+                            pointColor: 'rgba(220,220,220,1)',
+                            pointStrokeColor: '#fff',
+                            pointHighlightFill: '#fff',
+                            pointHighlightStroke: 'rgba(220,220,220,0.8)',
+                            color: 'rgba(220,220,220,1)',
+                            highlight: 'rgba(220,220,220,0.8)'
+                        }, {
+                            fillColor: 'rgba(247,70,74,0.2)',
+                            strokeColor: 'rgba(247,70,74,1)',
+                            pointColor: 'rgba(247,70,74,1)',
+                            pointStrokeColor: '#fff',
+                            pointHighlightFill: '#fff',
+                            pointHighlightStroke: 'rgba(247,70,74,0.8)',
+                            color: 'rgba(247,70,74,1)',
+                            highlight: 'rgba(247,70,74,0.8)'
+                        }, {
+                            fillColor: 'rgba(70,191,189,0.2)',
+                            strokeColor: 'rgba(70,191,189,1)',
+                            pointColor: 'rgba(70,191,189,1)',
+                            pointStrokeColor: '#fff',
+                            pointHighlightFill: '#fff',
+                            pointHighlightStroke: 'rgba(70,191,189,0.8)',
+                            color: 'rgba(70,191,189,1)',
+                            highlight: 'rgba(70,191,189,0.8)'
+                        }, {
+                            fillColor: 'rgba(253,180,92,0.2)',
+                            strokeColor: 'rgba(253,180,92,1)',
+                            pointColor: 'rgba(253,180,92,1)',
+                            pointStrokeColor: '#fff',
+                            pointHighlightFill: '#fff',
+                            pointHighlightStroke: 'rgba(253,180,92,0.8)',
+                            color: 'rgba(253,180,92,1)',
+                            highlight: 'rgba(253,180,92,0.8)'
+                        }, {
+                            fillColor: 'rgba(148,159,177,0.2)',
+                            strokeColor: 'rgba(148,159,177,1)',
+                            pointColor: 'rgba(148,159,177,1)',
+                            pointStrokeColor: '#fff',
+                            pointHighlightFill: '#fff',
+                            pointHighlightStroke: 'rgba(148,159,177,0.8)',
+                            color: 'rgba(148,159,177,1)',
+                            highlight: 'rgba(148,159,177,0.8)'
+                        }, {
+                            fillColor: 'rgba(77,83,96,0.2)',
+                            strokeColor: 'rgba(77,83,96,1)',
+                            pointColor: 'rgba(77,83,96,1)',
+                            pointStrokeColor: '#fff',
+                            pointHighlightFill: '#fff',
+                            pointHighlightStroke: 'rgba(77,83,96,0.8)',
+                            color: 'rgba(77,83,96,1)',
+                            highlight: 'rgba(77,83,96,0.8)'
+                        }];
+                }
+                BaseChart.prototype.ngOnInit = function () {
+                    this.ctx = this.element.nativeElement.children[0].getContext('2d');
+                    this.cvs = this.element.nativeElement.children[0];
+                    this.parent = this.element.nativeElement;
+                    this.refresh();
+                    this.initFlag = true;
+                };
+                BaseChart.prototype.ngOnChanges = function () {
+                    if (this.initFlag) {
+                        this.refresh();
+                    }
+                };
+                BaseChart.prototype.ngOnDestroy = function () {
+                    if (this.chart) {
+                        this.chart.destroy();
+                        this.chart = null;
+                    }
+                    if (this.legendTemplate) {
+                        this.legendTemplate.destroy();
+                        this.legendTemplate = null;
+                    }
+                };
+                BaseChart.prototype.setLegend = function () {
+                    var list = this.parent.getElementsByTagName('ul');
+                    if (list.length) {
+                        list[0].remove();
+                        this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
+                    }
+                    else {
+                        this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
+                    }
+                };
+                BaseChart.prototype.getColour = function (colour) {
+                    return {
+                        fillColor: this.rgba(colour, 0.2),
+                        strokeColor: this.rgba(colour, 1),
+                        pointColor: this.rgba(colour, 1),
+                        pointStrokeColor: '#fff',
+                        pointHighlightFill: '#fff',
+                        pointHighlightStroke: this.rgba(colour, 0.8),
+                        color: this.rgba(colour, 1),
+                        highlight: this.rgba(colour, 0.8)
+                    };
+                };
+                BaseChart.prototype.getRandomInt = function (min, max) {
+                    return Math.floor(Math.random() * (max - min + 1)) + min;
+                };
+                BaseChart.prototype.rgba = function (colour, alpha) {
+                    return 'rgba(' + colour.concat(alpha).join(',') + ')';
+                };
+                BaseChart.prototype.click = function (evt) {
+                    var atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
+                    var activePoints = atEvent.call(this.chart, evt);
+                    if (activePoints.length > 0) {
+                        var activeLabel = activePoints[0].label;
+                        this.chartClick.emit({ activePoints: activePoints, activeLabel: activeLabel });
+                    }
+                };
+                BaseChart.prototype.hover = function (evt) {
+                    var atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
+                    var activePoints = atEvent.call(this.chart, evt);
+                    if (activePoints.length > 0) {
+                        var activeLabel = activePoints[0].label;
+                        var activePoint = activePoints[0].value;
+                        this.chartHover.emit({ activePoints: activePoints, activePoint: activePoint, activeLabel: activeLabel });
+                    }
+                };
+                BaseChart.prototype.getChartBuilder = function (ctx, data, options) {
+                    return new Chart(ctx)[this.chartType](data, options);
+                };
+                BaseChart.prototype.getDataObject = function (label, value) {
+                    if (this.chartType === 'Line'
+                        || this.chartType === 'Bar'
+                        || this.chartType === 'Radar') {
+                        return {
+                            label: label,
+                            data: value
+                        };
+                    }
+                    if (this.chartType === 'Pie'
+                        || this.chartType === 'Doughnut'
+                        || this.chartType === 'PolarArea') {
+                        return {
+                            label: label,
+                            value: value
+                        };
+                    }
+                    return null;
+                };
+                BaseChart.prototype.getChartData = function (labels, dataObject) {
+                    if (this.chartType === 'Line'
+                        || this.chartType === 'Bar'
+                        || this.chartType === 'Radar') {
+                        return {
+                            labels: labels,
+                            datasets: dataObject
+                        };
+                    }
+                    if (this.chartType === 'Pie'
+                        || this.chartType === 'Doughnut'
+                        || this.chartType === 'PolarArea') {
+                        return dataObject;
+                    }
+                };
+                BaseChart.prototype.refresh = function () {
+                    var _this = this;
+                    if (this.options.responsive && this.parent.clientHeight === 0) {
+                        return setTimeout(function () { return _this.refresh(); }, 50);
+                    }
+                    this.ngOnDestroy();
+                    var dataset = [];
+                    for (var i = 0; i < this.data.length; i++) {
+                        var colourDesc = [this.getRandomInt(0, 255), this.getRandomInt(0, 255), this.getRandomInt(0, 255)];
+                        var colour = i < this.colours.length ? this.colours[i] : this.defaultsColours[i] || this.getColour(colourDesc);
+                        var data_1 = Object.assign(colour, this.getDataObject(this.series[i] || this.labels[i], this.data[i]));
+                        dataset.push(data_1);
+                    }
+                    var data = this.getChartData(this.labels, dataset);
+                    this.chart = this.getChartBuilder(this.ctx, data, this.options);
+                    if (this.legend) {
+                        this.setLegend();
+                    }
+                };
+                __decorate([
+                    core_1.Input(), 
+                    __metadata('design:type', Array)
+                ], BaseChart.prototype, "data", void 0);
+                __decorate([
+                    core_1.Input(), 
+                    __metadata('design:type', Array)
+                ], BaseChart.prototype, "labels", void 0);
+                __decorate([
+                    core_1.Input(), 
+                    __metadata('design:type', Object)
+                ], BaseChart.prototype, "options", void 0);
+                __decorate([
+                    core_1.Input(), 
+                    __metadata('design:type', String)
+                ], BaseChart.prototype, "chartType", void 0);
+                __decorate([
+                    core_1.Input(), 
+                    __metadata('design:type', Array)
+                ], BaseChart.prototype, "series", void 0);
+                __decorate([
+                    core_1.Input(), 
+                    __metadata('design:type', Array)
+                ], BaseChart.prototype, "colours", void 0);
+                __decorate([
+                    core_1.Input(), 
+                    __metadata('design:type', Boolean)
+                ], BaseChart.prototype, "legend", void 0);
+                BaseChart = __decorate([
+                    core_1.Component({
+                        selector: 'base-chart',
+                        properties: [
+                            'data',
+                            'labels',
+                            'series',
+                            'colours',
+                            'chartType',
+                            'legend',
+                            'options'
+                        ],
+                        events: ['chartClick', 'chartHover'],
+                        template: "\n  <canvas style=\"width: 100%; height: 100%;\" (click)=\"click($event)\" (mousemove)=\"hover($event)\"></canvas>\n  ",
+                        directives: [common_1.CORE_DIRECTIVES, common_1.FORM_DIRECTIVES, common_1.NgClass]
+                    }), 
+                    __metadata('design:paramtypes', [(typeof (_a = typeof core_1.ElementRef !== 'undefined' && core_1.ElementRef) === 'function' && _a) || Object])
+                ], BaseChart);
+                return BaseChart;
+                var _a;
+            }());
+            exports_1("BaseChart", BaseChart);
+            exports_1("CHART_DIRECTIVES", CHART_DIRECTIVES = [Charts, BaseChart]);
+        }
+    }
+});
+//# sourceMappingURL=ng2-charts.js.map

app/services/ng2-charts.ts

@@ -0,0 +1,270 @@
+import {
+    Component, OnDestroy, OnInit, OnChanges,
+    EventEmitter, ElementRef, Input
+} from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
+
+declare var Chart:any;
+
+@Component({
+    selector: 'chart, canvas[chart]',
+    template: `<canvas></canvas>`,
+    directives: [CORE_DIRECTIVES, NgClass]
+})
+export class Charts {
+    constructor(element:ElementRef) {
+    }
+
+}
+
+@Component({
+    selector: 'base-chart',
+    properties: [
+        'data',
+        'labels',
+        'series',
+        'colours',
+        'chartType',
+        'legend',
+        'options'
+    ],
+    events: ['chartClick', 'chartHover'],
+    template: `
+  <canvas style="width: 100%; height: 100%;" (click)="click($event)" (mousemove)="hover($event)"></canvas>
+  `,
+    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass]
+})
+export class BaseChart implements OnInit, OnDestroy, OnChanges {
+    @Input() data:Array<any> = [];
+    @Input() labels:Array<any> = [];
+    @Input() options:any = {responsive: true};
+    @Input() chartType:string;
+    @Input() series:Array<any> = [];
+    @Input() colours:Array<any> = [];
+    @Input() legend:boolean;
+
+    private ctx:any;
+    private cvs:any;
+    private parent:any;
+    private chart:any;
+    private legendTemplate:any;
+    private initFlag:boolean = false;
+    private chartClick:EventEmitter<any> = new EventEmitter();
+    private chartHover:EventEmitter<any> = new EventEmitter();
+    private defaultsColours:Array<any> = [
+        {
+            fillColor: 'rgba(151,187,205,0.2)',
+            strokeColor: 'rgba(151,187,205,1)',
+            pointColor: 'rgba(151,187,205,1)',
+            pointStrokeColor: '#fff',
+            pointHighlightFill: '#fff',
+            pointHighlightStroke: 'rgba(151,187,205,0.8)',
+            color: 'rgba(151,187,205,1)',
+            highlight: 'rgba(151,187,205,0.8)'
+        }, {
+            fillColor: 'rgba(220,220,220,0.2)',
+            strokeColor: 'rgba(220,220,220,1)',
+            pointColor: 'rgba(220,220,220,1)',
+            pointStrokeColor: '#fff',
+            pointHighlightFill: '#fff',
+            pointHighlightStroke: 'rgba(220,220,220,0.8)',
+            color: 'rgba(220,220,220,1)',
+            highlight: 'rgba(220,220,220,0.8)'
+        }, {
+            fillColor: 'rgba(247,70,74,0.2)',
+            strokeColor: 'rgba(247,70,74,1)',
+            pointColor: 'rgba(247,70,74,1)',
+            pointStrokeColor: '#fff',
+            pointHighlightFill: '#fff',
+            pointHighlightStroke: 'rgba(247,70,74,0.8)',
+            color: 'rgba(247,70,74,1)',
+            highlight: 'rgba(247,70,74,0.8)'
+        }, {
+            fillColor: 'rgba(70,191,189,0.2)',
+            strokeColor: 'rgba(70,191,189,1)',
+            pointColor: 'rgba(70,191,189,1)',
+            pointStrokeColor: '#fff',
+            pointHighlightFill: '#fff',
+            pointHighlightStroke: 'rgba(70,191,189,0.8)',
+            color: 'rgba(70,191,189,1)',
+            highlight: 'rgba(70,191,189,0.8)'
+        }, {
+            fillColor: 'rgba(253,180,92,0.2)',
+            strokeColor: 'rgba(253,180,92,1)',
+            pointColor: 'rgba(253,180,92,1)',
+            pointStrokeColor: '#fff',
+            pointHighlightFill: '#fff',
+            pointHighlightStroke: 'rgba(253,180,92,0.8)',
+            color: 'rgba(253,180,92,1)',
+            highlight: 'rgba(253,180,92,0.8)'
+        }, {
+            fillColor: 'rgba(148,159,177,0.2)',
+            strokeColor: 'rgba(148,159,177,1)',
+            pointColor: 'rgba(148,159,177,1)',
+            pointStrokeColor: '#fff',
+            pointHighlightFill: '#fff',
+            pointHighlightStroke: 'rgba(148,159,177,0.8)',
+            color: 'rgba(148,159,177,1)',
+            highlight: 'rgba(148,159,177,0.8)'
+        }, {
+            fillColor: 'rgba(77,83,96,0.2)',
+            strokeColor: 'rgba(77,83,96,1)',
+            pointColor: 'rgba(77,83,96,1)',
+            pointStrokeColor: '#fff',
+            pointHighlightFill: '#fff',
+            pointHighlightStroke: 'rgba(77,83,96,0.8)',
+            color: 'rgba(77,83,96,1)',
+            highlight: 'rgba(77,83,96,0.8)'
+        }];
+
+
+    constructor(private element:ElementRef) {
+    }
+
+    ngOnInit() {
+        this.ctx = this.element.nativeElement.children[0].getContext('2d');
+        this.cvs = this.element.nativeElement.children[0];
+        this.parent = this.element.nativeElement;
+        this.refresh();
+        this.initFlag = true;
+    }
+
+    ngOnChanges() {
+        if (this.initFlag) {
+            this.refresh();
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.chart) {
+            this.chart.destroy();
+            this.chart = null;
+        }
+        if (this.legendTemplate) {
+            this.legendTemplate.destroy();
+            this.legendTemplate = null;
+        }
+    }
+
+    setLegend() {
+        let list = this.parent.getElementsByTagName('ul');
+        if (list.length) {
+            list[0].remove();
+            this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
+        } else {
+            this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
+        }
+    }
+
+    getColour(colour:Array<number>):any {
+        return {
+            fillColor: this.rgba(colour, 0.2),
+            strokeColor: this.rgba(colour, 1),
+            pointColor: this.rgba(colour, 1),
+            pointStrokeColor: '#fff',
+            pointHighlightFill: '#fff',
+            pointHighlightStroke: this.rgba(colour, 0.8),
+            color: this.rgba(colour, 1),
+            highlight: this.rgba(colour, 0.8)
+        };
+    }
+
+    getRandomInt(min:number, max:number) {
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    rgba(colour:Array<number>, alpha:number) {
+        return 'rgba(' + colour.concat(alpha).join(',') + ')';
+    }
+
+    public click(evt:any) {
+        let atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
+        let activePoints = atEvent.call(this.chart, evt);
+        if (activePoints.length > 0) {
+            let activeLabel = activePoints[0].label;
+            this.chartClick.emit({activePoints: activePoints, activeLabel: activeLabel});
+        }
+    }
+
+    public hover(evt:any) {
+        let atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
+        let activePoints = atEvent.call(this.chart, evt);
+        if (activePoints.length > 0) {
+            let activeLabel = activePoints[0].label;
+            let activePoint = activePoints[0].value;
+            this.chartHover.emit({activePoints: activePoints, activePoint: activePoint, activeLabel: activeLabel});
+        }
+    }
+
+    getChartBuilder(ctx:any, data:Array<any>, options:any) {
+        return new Chart(ctx)[this.chartType](data, options);
+    }
+
+    getDataObject(label:string, value:any):any {
+        if (this.chartType === 'Line'
+            || this.chartType === 'Bar'
+            || this.chartType === 'Radar') {
+            return {
+                label: label,
+                data: value
+            };
+        }
+
+        if (this.chartType === 'Pie'
+            || this.chartType === 'Doughnut'
+            || this.chartType === 'PolarArea') {
+            return {
+                label: label,
+                value: value
+            };
+        }
+
+        return null;
+    }
+
+    getChartData(labels:any, dataObject:any) {
+        if (this.chartType === 'Line'
+            || this.chartType === 'Bar'
+            || this.chartType === 'Radar') {
+            return {
+                labels: labels,
+                datasets: dataObject
+            };
+        }
+        if (this.chartType === 'Pie'
+            || this.chartType === 'Doughnut'
+            || this.chartType === 'PolarArea') {
+            return dataObject;
+        }
+
+    }
+
+    private refresh() {
+        if (this.options.responsive && this.parent.clientHeight === 0) {
+            return setTimeout(() => this.refresh(), 50);
+        }
+
+        this.ngOnDestroy();
+        let dataset:Array<any> = [];
+
+        for (let i = 0; i < this.data.length; i++) {
+            let colourDesc:Array<number> = [this.getRandomInt(0, 255), this.getRandomInt(0, 255), this.getRandomInt(0, 255)];
+            let colour = i < this.colours.length ? this.colours[i] : this.defaultsColours[i] || this.getColour(colourDesc);
+
+            let data:any = (<any>Object).assign(colour,
+                this.getDataObject(this.series[i] || this.labels[i], this.data[i]));
+
+            dataset.push(data);
+        }
+
+        let data:any = this.getChartData(this.labels, dataset);
+        this.chart = this.getChartBuilder(this.ctx, data, this.options);
+
+        if (this.legend) {
+            this.setLegend();
+        }
+    }
+}
+
+
+export const CHART_DIRECTIVES:Array<any> = [Charts, BaseChart];

app/visualizer.js

@@ -1,14 +0,0 @@
-
-angular.module('openbciVisualizer', ['chart.js'])
-    .config(function (ChartJsProvider) {
-        ChartJsProvider.setOptions({
-            chartColors: ['#F7464A', '#46BFBD','#FDB45C', '#949FB1','#4D5360', '#803690','#00ADF9', '#FF0000'],
-            responsive: false,
-            pointDot: false,
-            datasetFill: false,
-            scaleOverride: true,
-            scaleStartValue: -2,
-            scaleStepWidth: 1,
-            scaleSteps: 6
-        });
-    });

index.html

@@ -0,0 +1,37 @@
+<html>
+<head>
+    <title>BCI Visualizer</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <script src="node_modules/socket.io-client/socket.io.js"></script>
+    <!--<script src="node_modules/chart.js/dist/Chart.js"></script>-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
+
+    <style>body { margin: 0; }</style>
+    <!-- 1. Load libraries -->
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+    <!-- 2. Configure SystemJS -->
+    <script>
+        System.config({
+            packages: {
+                app: {
+                    format: 'register',
+                    defaultExtension: 'js'
+                }
+            }
+        });
+        System.import('app/main')
+                .then(null, console.error.bind(console));
+    </script>
+</head>
+<body>
+    <bci-dashboard>Loading...</bci-dashboard>
+</body>
+</html>

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "openbci-visualizer",
+  "name": "openbci-dashboard",
   "private": false,
   "version": "0.0.1",
   "description": "A fullstack javascript app for capturing and visualizing OpenBCI EEG data",
@@ -11,17 +11,42 @@
     "chartjs"
   ],
   "author": "Alex Castillo",
-  "scripts": {},
+  "scripts": {
+    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"node --max-old-space-size=2048 visualizer\" ",
+    "simulate": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"node --max-old-space-size=2048 visualizer simulate\" ",
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    "lite": "lite-server",
+    "typings": "typings",
+    "docker-build": "docker build -t ng2-quickstart .",
+    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
+    "postinstall": "typings install"
+  },
   "dependencies": {
-    "angular": "^1.5.3",
-    "angular-chartjs": "0.0.5",
+    "@angular/common": "0.0.0-0",
+    "@angular/compiler": "0.0.0-0",
+    "@angular/core": "0.0.0-0",
+    "@angular/platform-browser": "0.0.0-0",
+    "@angular/platform-browser-dynamic": "0.0.0-0",
+    "reflect-metadata": "^0.1.3",
+    "rxjs": "5.0.0-beta.2",
+    "rxjs-es": "5.0.0-beta.2",
+    "zone.js": "^0.6.12",
     "chart.js": "^2.0.0",
-    "dsp.js": "neurojs/dsp.js",
+    "dsp.js": "github:neurojs/dsp.js",
     "express": "^4.13.4",
+    "ng2-charts": "^1.0.3",
     "nodemon": "^1.9.1",
-    "openbci-sdk": "^0.2.0",
+    "openbci-sdk": "^0.3.0",
+    "smoothie": "^1.27.0",
     "socket.io": "^1.4.5",
     "socket.io-client": "^1.4.5",
     "yargs": "^4.3.2"
+  },
+  "devDependencies": {
+    "concurrently": "^2.0.0",
+    "lite-server": "^2.2.0",
+    "typescript": "^1.8.9",
+    "typings": "^0.7.12"
   }
 }

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "system",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": false
+  },
+  "exclude": [
+    "node_modules",
+    "typings/main",
+    "typings/main.d.ts"
+  ]
+}

typings.json

@@ -0,0 +1,6 @@
+{
+  "ambientDependencies": {
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
+    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
+  }
+}

typings/browser.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="browser/ambient/es6-shim/index.d.ts" />
+/// <reference path="browser/ambient/jasmine/index.d.ts" />

typings/browser/ambient/es6-shim/index.d.ts

@@ -0,0 +1,670 @@
+// Generated by typings
+// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/es6-shim/es6-shim.d.ts
+// Type definitions for es6-shim v0.31.2
+// Project: https://github.com/paulmillr/es6-shim
+// Definitions by: Ron Buckton <http://github.com/rbuckton>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare type PropertyKey = string | number | symbol;
+
+interface IteratorResult<T> {
+    done: boolean;
+    value?: T;
+}
+
+interface IterableShim<T> {
+    /**
+      * Shim for an ES6 iterable. Not intended for direct use by user code.
+      */
+    "_es6-shim iterator_"(): Iterator<T>;
+}
+
+interface Iterator<T> {
+    next(value?: any): IteratorResult<T>;
+    return?(value?: any): IteratorResult<T>;
+    throw?(e?: any): IteratorResult<T>;
+}
+
+interface IterableIteratorShim<T> extends IterableShim<T>, Iterator<T> {
+    /**
+      * Shim for an ES6 iterable iterator. Not intended for direct use by user code.
+      */
+    "_es6-shim iterator_"(): IterableIteratorShim<T>;
+}
+
+interface StringConstructor {
+    /**
+      * Return the String value whose elements are, in order, the elements in the List elements.
+      * If length is 0, the empty string is returned.
+      */
+    fromCodePoint(...codePoints: number[]): string;
+
+    /**
+      * String.raw is intended for use as a tag function of a Tagged Template String. When called
+      * as such the first argument will be a well formed template call site object and the rest
+      * parameter will contain the substitution values.
+      * @param template A well-formed template string call site representation.
+      * @param substitutions A set of substitution values.
+      */
+    raw(template: TemplateStringsArray, ...substitutions: any[]): string;
+}
+
+interface String {
+    /**
+      * Returns a nonnegative integer Number less than 1114112 (0x110000) that is the code point
+      * value of the UTF-16 encoded code point starting at the string element at position pos in
+      * the String resulting from converting this object to a String.
+      * If there is no element at that position, the result is undefined.
+      * If a valid UTF-16 surrogate pair does not begin at pos, the result is the code unit at pos.
+      */
+    codePointAt(pos: number): number;
+
+    /**
+      * Returns true if searchString appears as a substring of the result of converting this
+      * object to a String, at one or more positions that are
+      * greater than or equal to position; otherwise, returns false.
+      * @param searchString search string
+      * @param position If position is undefined, 0 is assumed, so as to search all of the String.
+      */
+    includes(searchString: string, position?: number): boolean;
+
+    /**
+      * Returns true if the sequence of elements of searchString converted to a String is the
+      * same as the corresponding elements of this object (converted to a String) starting at
+      * endPosition – length(this). Otherwise returns false.
+      */
+    endsWith(searchString: string, endPosition?: number): boolean;
+
+    /**
+      * Returns a String value that is made from count copies appended together. If count is 0,
+      * T is the empty String is returned.
+      * @param count number of copies to append
+      */
+    repeat(count: number): string;
+
+    /**
+      * Returns true if the sequence of elements of searchString converted to a String is the
+      * same as the corresponding elements of this object (converted to a String) starting at
+      * position. Otherwise returns false.
+      */
+    startsWith(searchString: string, position?: number): boolean;
+
+    /**
+      * Returns an <a> HTML anchor element and sets the name attribute to the text value
+      * @param name
+      */
+    anchor(name: string): string;
+
+    /** Returns a <big> HTML element */
+    big(): string;
+
+    /** Returns a <blink> HTML element */
+    blink(): string;
+
+    /** Returns a <b> HTML element */
+    bold(): string;
+
+    /** Returns a <tt> HTML element */
+    fixed(): string
+
+    /** Returns a <font> HTML element and sets the color attribute value */
+    fontcolor(color: string): string
+
+    /** Returns a <font> HTML element and sets the size attribute value */
+    fontsize(size: number): string;
+
+    /** Returns a <font> HTML element and sets the size attribute value */
+    fontsize(size: string): string;
+
+    /** Returns an <i> HTML element */
+    italics(): string;
+
+    /** Returns an <a> HTML element and sets the href attribute value */
+    link(url: string): string;
+
+    /** Returns a <small> HTML element */
+    small(): string;
+
+    /** Returns a <strike> HTML element */
+    strike(): string;
+
+    /** Returns a <sub> HTML element */
+    sub(): string;
+
+    /** Returns a <sup> HTML element */
+    sup(): string;
+
+    /**
+      * Shim for an ES6 iterable. Not intended for direct use by user code.
+      */
+    "_es6-shim iterator_"(): IterableIteratorShim<string>;
+}
+
+interface ArrayConstructor {
+    /**
+      * Creates an array from an array-like object.
+      * @param arrayLike An array-like object to convert to an array.
+      * @param mapfn A mapping function to call on every element of the array.
+      * @param thisArg Value of 'this' used to invoke the mapfn.
+      */
+    from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): Array<U>;
+
+    /**
+      * Creates an array from an iterable object.
+      * @param iterable An iterable object to convert to an array.
+      * @param mapfn A mapping function to call on every element of the array.
+      * @param thisArg Value of 'this' used to invoke the mapfn.
+      */
+    from<T, U>(iterable: IterableShim<T>, mapfn: (v: T, k: number) => U, thisArg?: any): Array<U>;
+
+    /**
+      * Creates an array from an array-like object.
+      * @param arrayLike An array-like object to convert to an array.
+      */
+    from<T>(arrayLike: ArrayLike<T>): Array<T>;
+
+    /**
+      * Creates an array from an iterable object.
+      * @param iterable An iterable object to convert to an array.
+      */
+    from<T>(iterable: IterableShim<T>): Array<T>;
+
+    /**
+      * Returns a new array from a set of elements.
+      * @param items A set of elements to include in the new array object.
+      */
+    of<T>(...items: T[]): Array<T>;
+}
+
+interface Array<T> {
+    /**
+      * Returns the value of the first element in the array where predicate is true, and undefined
+      * otherwise.
+      * @param predicate find calls predicate once for each element of the array, in ascending
+      * order, until it finds one where predicate returns true. If such an element is found, find
+      * immediately returns that element value. Otherwise, find returns undefined.
+      * @param thisArg If provided, it will be used as the this value for each invocation of
+      * predicate. If it is not provided, undefined is used instead.
+      */
+    find(predicate: (value: T, index: number, obj: Array<T>) => boolean, thisArg?: any): T;
+
+    /**
+      * Returns the index of the first element in the array where predicate is true, and undefined
+      * otherwise.
+      * @param predicate find calls predicate once for each element of the array, in ascending
+      * order, until it finds one where predicate returns true. If such an element is found, find
+      * immediately returns that element value. Otherwise, find returns undefined.
+      * @param thisArg If provided, it will be used as the this value for each invocation of
+      * predicate. If it is not provided, undefined is used instead.
+      */
+    findIndex(predicate: (value: T) => boolean, thisArg?: any): number;
+
+    /**
+      * Returns the this object after filling the section identified by start and end with value
+      * @param value value to fill array section with
+      * @param start index to start filling the array at. If start is negative, it is treated as
+      * length+start where length is the length of the array.
+      * @param end index to stop filling the array at. If end is negative, it is treated as
+      * length+end.
+      */
+    fill(value: T, start?: number, end?: number): T[];
+
+    /**
+      * Returns the this object after copying a section of the array identified by start and end
+      * to the same array starting at position target
+      * @param target If target is negative, it is treated as length+target where length is the
+      * length of the array.
+      * @param start If start is negative, it is treated as length+start. If end is negative, it
+      * is treated as length+end.
+      * @param end If not specified, length of the this object is used as its default value.
+      */
+    copyWithin(target: number, start: number, end?: number): T[];
+
+    /**
+      * Returns an array of key, value pairs for every entry in the array
+      */
+    entries(): IterableIteratorShim<[number, T]>;
+
+    /**
+      * Returns an list of keys in the array
+      */
+    keys(): IterableIteratorShim<number>;
+
+    /**
+      * Returns an list of values in the array
+      */
+    values(): IterableIteratorShim<T>;
+
+    /**
+      * Shim for an ES6 iterable. Not intended for direct use by user code.
+      */
+    "_es6-shim iterator_"(): IterableIteratorShim<T>;
+}
+
+interface NumberConstructor {
+    /**
+      * The value of Number.EPSILON is the difference between 1 and the smallest value greater than 1
+      * that is representable as a Number value, which is approximately:
+      * 2.2204460492503130808472633361816 x 10‍−‍16.
+      */
+    EPSILON: number;
+
+    /**
+      * Returns true if passed value is finite.
+      * Unlike the global isFininte, Number.isFinite doesn't forcibly convert the parameter to a
+      * number. Only finite values of the type number, result in true.
+      * @param number A numeric value.
+      */
+    isFinite(number: number): boolean;
+
+    /**
+      * Returns true if the value passed is an integer, false otherwise.
+      * @param number A numeric value.
+      */
+    isInteger(number: number): boolean;
+
+    /**
+      * Returns a Boolean value that indicates whether a value is the reserved value NaN (not a
+      * number). Unlike the global isNaN(), Number.isNaN() doesn't forcefully convert the parameter
+      * to a number. Only values of the type number, that are also NaN, result in true.
+      * @param number A numeric value.
+      */
+    isNaN(number: number): boolean;
+
+    /**
+      * Returns true if the value passed is a safe integer.
+      * @param number A numeric value.
+      */
+    isSafeInteger(number: number): boolean;
+
+    /**
+      * The value of the largest integer n such that n and n + 1 are both exactly representable as
+      * a Number value.
+      * The value of Number.MIN_SAFE_INTEGER is 9007199254740991 2^53 − 1.
+      */
+    MAX_SAFE_INTEGER: number;
+
+    /**
+      * The value of the smallest integer n such that n and n − 1 are both exactly representable as
+      * a Number value.
+      * The value of Number.MIN_SAFE_INTEGER is −9007199254740991 (−(2^53 − 1)).
+      */
+    MIN_SAFE_INTEGER: number;
+
+    /**
+      * Converts a string to a floating-point number.
+      * @param string A string that contains a floating-point number.
+      */
+    parseFloat(string: string): number;
+
+    /**
+      * Converts A string to an integer.
+      * @param s A string to convert into a number.
+      * @param radix A value between 2 and 36 that specifies the base of the number in numString.
+      * If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal.
+      * All other strings are considered decimal.
+      */
+    parseInt(string: string, radix?: number): number;
+}
+
+interface ObjectConstructor {
+    /**
+      * Copy the values of all of the enumerable own properties from one or more source objects to a
+      * target object. Returns the target object.
+      * @param target The target object to copy to.
+      * @param sources One or more source objects to copy properties from.
+      */
+    assign(target: any, ...sources: any[]): any;
+
+    /**
+      * Returns true if the values are the same value, false otherwise.
+      * @param value1 The first value.
+      * @param value2 The second value.
+      */
+    is(value1: any, value2: any): boolean;
+
+    /**
+      * Sets the prototype of a specified object o to  object proto or null. Returns the object o.
+      * @param o The object to change its prototype.
+      * @param proto The value of the new prototype or null.
+      * @remarks Requires `__proto__` support.
+      */
+    setPrototypeOf(o: any, proto: any): any;
+}
+
+interface RegExp {
+    /**
+      * Returns a string indicating the flags of the regular expression in question. This field is read-only.
+      * The characters in this string are sequenced and concatenated in the following order:
+      *
+      *    - "g" for global
+      *    - "i" for ignoreCase
+      *    - "m" for multiline
+      *    - "u" for unicode
+      *    - "y" for sticky
+      *
+      * If no flags are set, the value is the empty string.
+      */
+    flags: string;
+}
+
+interface Math {
+    /**
+      * Returns the number of leading zero bits in the 32-bit binary representation of a number.
+      * @param x A numeric expression.
+      */
+    clz32(x: number): number;
+
+    /**
+      * Returns the result of 32-bit multiplication of two numbers.
+      * @param x First number
+      * @param y Second number
+      */
+    imul(x: number, y: number): number;
+
+    /**
+      * Returns the sign of the x, indicating whether x is positive, negative or zero.
+      * @param x The numeric expression to test
+      */
+    sign(x: number): number;
+
+    /**
+      * Returns the base 10 logarithm of a number.
+      * @param x A numeric expression.
+      */
+    log10(x: number): number;
+
+    /**
+      * Returns the base 2 logarithm of a number.
+      * @param x A numeric expression.
+      */
+    log2(x: number): number;
+
+    /**
+      * Returns the natural logarithm of 1 + x.
+      * @param x A numeric expression.
+      */
+    log1p(x: number): number;
+
+    /**
+      * Returns the result of (e^x - 1) of x (e raised to the power of x, where e is the base of
+      * the natural logarithms).
+      * @param x A numeric expression.
+      */
+    expm1(x: number): number;
+
+    /**
+      * Returns the hyperbolic cosine of a number.
+      * @param x A numeric expression that contains an angle measured in radians.
+      */
+    cosh(x: number): number;
+
+    /**
+      * Returns the hyperbolic sine of a number.
+      * @param x A numeric expression that contains an angle measured in radians.
+      */
+    sinh(x: number): number;
+
+    /**
+      * Returns the hyperbolic tangent of a number.
+      * @param x A numeric expression that contains an angle measured in radians.
+      */
+    tanh(x: number): number;
+
+    /**
+      * Returns the inverse hyperbolic cosine of a number.
+      * @param x A numeric expression that contains an angle measured in radians.
+      */
+    acosh(x: number): number;
+
+    /**
+      * Returns the inverse hyperbolic sine of a number.
+      * @param x A numeric expression that contains an angle measured in radians.
+      */
+    asinh(x: number): number;
+
+    /**
+      * Returns the inverse hyperbolic tangent of a number.
+      * @param x A numeric expression that contains an angle measured in radians.
+      */
+    atanh(x: number): number;
+
+    /**
+      * Returns the square root of the sum of squares of its arguments.
+      * @param values Values to compute the square root for.
+      *     If no arguments are passed, the result is +0.
+      *     If there is only one argument, the result is the absolute value.
+      *     If any argument is +Infinity or -Infinity, the result is +Infinity.
+      *     If any argument is NaN, the result is NaN.
+      *     If all arguments are either +0 or −0, the result is +0.
+      */
+    hypot(...values: number[]): number;
+
+    /**
+      * Returns the integral part of the a numeric expression, x, removing any fractional digits.
+      * If x is already an integer, the result is x.
+      * @param x A numeric expression.
+      */
+    trunc(x: number): number;
+
+    /**
+      * Returns the nearest single precision float representation of a number.
+      * @param x A numeric expression.
+      */
+    fround(x: number): number;
+
+    /**
+      * Returns an implementation-dependent approximation to the cube root of number.
+      * @param x A numeric expression.
+      */
+    cbrt(x: number): number;
+}
+
+interface PromiseLike<T> {
+    /**
+    * Attaches callbacks for the resolution and/or rejection of the Promise.
+    * @param onfulfilled The callback to execute when the Promise is resolved.
+    * @param onrejected The callback to execute when the Promise is rejected.
+    * @returns A Promise for the completion of which ever callback is executed.
+    */
+    then<TResult>(onfulfilled?: (value: T) => TResult | PromiseLike<TResult>, onrejected?: (reason: any) => TResult | PromiseLike<TResult>): PromiseLike<TResult>;
+    then<TResult>(onfulfilled?: (value: T) => TResult | PromiseLike<TResult>, onrejected?: (reason: any) => void): PromiseLike<TResult>;
+}
+
+/**
+ * Represents the completion of an asynchronous operation
+ */
+interface Promise<T> {
+    /**
+    * Attaches callbacks for the resolution and/or rejection of the Promise.
+    * @param onfulfilled The callback to execute when the Promise is resolved.
+    * @param onrejected The callback to execute when the Promise is rejected.
+    * @returns A Promise for the completion of which ever callback is executed.
+    */
+    then<TResult>(onfulfilled?: (value: T) => TResult | PromiseLike<TResult>, onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<TResult>;
+    then<TResult>(onfulfilled?: (value: T) => TResult | PromiseLike<TResult>, onrejected?: (reason: any) => void): Promise<TResult>;
+
+    /**
+     * Attaches a callback for only the rejection of the Promise.
+     * @param onrejected The callback to execute when the Promise is rejected.
+     * @returns A Promise for the completion of the callback.
+     */
+    catch(onrejected?: (reason: any) => T | PromiseLike<T>): Promise<T>;
+    catch(onrejected?: (reason: any) => void): Promise<T>;
+}
+
+interface PromiseConstructor {
+    /**
+      * A reference to the prototype.
+      */
+    prototype: Promise<any>;
+
+    /**
+     * Creates a new Promise.
+     * @param executor A callback used to initialize the promise. This callback is passed two arguments:
+     * a resolve callback used resolve the promise with a value or the result of another promise,
+     * and a reject callback used to reject the promise with a provided reason or error.
+     */
+    new <T>(executor: (resolve: (value?: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void): Promise<T>;
+
+    /**
+     * Creates a Promise that is resolved with an array of results when all of the provided Promises
+     * resolve, or rejected when any Promise is rejected.
+     * @param values An array of Promises.
+     * @returns A new Promise.
+     */
+    all<T>(values: IterableShim<T | PromiseLike<T>>): Promise<T[]>;
+
+    /**
+     * Creates a Promise that is resolved or rejected when any of the provided Promises are resolved
+     * or rejected.
+     * @param values An array of Promises.
+     * @returns A new Promise.
+     */
+    race<T>(values: IterableShim<T | PromiseLike<T>>): Promise<T>;
+
+    /**
+     * Creates a new rejected promise for the provided reason.
+     * @param reason The reason the promise was rejected.
+     * @returns A new rejected Promise.
+     */
+    reject(reason: any): Promise<void>;
+
+    /**
+     * Creates a new rejected promise for the provided reason.
+     * @param reason The reason the promise was rejected.
+     * @returns A new rejected Promise.
+     */
+    reject<T>(reason: any): Promise<T>;
+
+    /**
+      * Creates a new resolved promise for the provided value.
+      * @param value A promise.
+      * @returns A promise whose internal state matches the provided promise.
+      */
+    resolve<T>(value: T | PromiseLike<T>): Promise<T>;
+
+    /**
+     * Creates a new resolved promise .
+     * @returns A resolved promise.
+     */
+    resolve(): Promise<void>;
+}
+
+declare var Promise: PromiseConstructor;
+
+interface Map<K, V> {
+    clear(): void;
+    delete(key: K): boolean;
+    forEach(callbackfn: (value: V, index: K, map: Map<K, V>) => void, thisArg?: any): void;
+    get(key: K): V;
+    has(key: K): boolean;
+    set(key: K, value?: V): Map<K, V>;
+    size: number;
+    entries(): IterableIteratorShim<[K, V]>;
+    keys(): IterableIteratorShim<K>;
+    values(): IterableIteratorShim<V>;
+}
+
+interface MapConstructor {
+    new <K, V>(): Map<K, V>;
+    new <K, V>(iterable: IterableShim<[K, V]>): Map<K, V>;
+    prototype: Map<any, any>;
+}
+
+declare var Map: MapConstructor;
+
+interface Set<T> {
+    add(value: T): Set<T>;
+    clear(): void;
+    delete(value: T): boolean;
+    forEach(callbackfn: (value: T, index: T, set: Set<T>) => void, thisArg?: any): void;
+    has(value: T): boolean;
+    size: number;
+    entries(): IterableIteratorShim<[T, T]>;
+    keys(): IterableIteratorShim<T>;
+    values(): IterableIteratorShim<T>;
+}
+
+interface SetConstructor {
+    new <T>(): Set<T>;
+    new <T>(iterable: IterableShim<T>): Set<T>;
+    prototype: Set<any>;
+}
+
+declare var Set: SetConstructor;
+
+interface WeakMap<K, V> {
+    delete(key: K): boolean;
+    get(key: K): V;
+    has(key: K): boolean;
+    set(key: K, value?: V): WeakMap<K, V>;
+}
+
+interface WeakMapConstructor {
+    new <K, V>(): WeakMap<K, V>;
+    new <K, V>(iterable: IterableShim<[K, V]>): WeakMap<K, V>;
+    prototype: WeakMap<any, any>;
+}
+
+declare var WeakMap: WeakMapConstructor;
+
+interface WeakSet<T> {
+    add(value: T): WeakSet<T>;
+    delete(value: T): boolean;
+    has(value: T): boolean;
+}
+
+interface WeakSetConstructor {
+    new <T>(): WeakSet<T>;
+    new <T>(iterable: IterableShim<T>): WeakSet<T>;
+    prototype: WeakSet<any>;
+}
+
+declare var WeakSet: WeakSetConstructor;
+
+declare namespace Reflect {
+    function apply(target: Function, thisArgument: any, argumentsList: ArrayLike<any>): any;
+    function construct(target: Function, argumentsList: ArrayLike<any>): any;
+    function defineProperty(target: any, propertyKey: PropertyKey, attributes: PropertyDescriptor): boolean;
+    function deleteProperty(target: any, propertyKey: PropertyKey): boolean;
+    function enumerate(target: any): IterableIteratorShim<any>;
+    function get(target: any, propertyKey: PropertyKey, receiver?: any): any;
+    function getOwnPropertyDescriptor(target: any, propertyKey: PropertyKey): PropertyDescriptor;
+    function getPrototypeOf(target: any): any;
+    function has(target: any, propertyKey: PropertyKey): boolean;
+    function isExtensible(target: any): boolean;
+    function ownKeys(target: any): Array<PropertyKey>;
+    function preventExtensions(target: any): boolean;
+    function set(target: any, propertyKey: PropertyKey, value: any, receiver?: any): boolean;
+    function setPrototypeOf(target: any, proto: any): boolean;
+}
+
+declare module "es6-shim" {
+    var String: StringConstructor;
+    var Array: ArrayConstructor;
+    var Number: NumberConstructor;
+    var Math: Math;
+    var Object: ObjectConstructor;
+    var Map: MapConstructor;
+    var Set: SetConstructor;
+    var WeakMap: WeakMapConstructor;
+    var WeakSet: WeakSetConstructor;
+    var Promise: PromiseConstructor;
+    namespace Reflect {
+        function apply(target: Function, thisArgument: any, argumentsList: ArrayLike<any>): any;
+        function construct(target: Function, argumentsList: ArrayLike<any>): any;
+        function defineProperty(target: any, propertyKey: PropertyKey, attributes: PropertyDescriptor): boolean;
+        function deleteProperty(target: any, propertyKey: PropertyKey): boolean;
+        function enumerate(target: any): Iterator<any>;
+        function get(target: any, propertyKey: PropertyKey, receiver?: any): any;
+        function getOwnPropertyDescriptor(target: any, propertyKey: PropertyKey): PropertyDescriptor;
+        function getPrototypeOf(target: any): any;
+        function has(target: any, propertyKey: PropertyKey): boolean;
+        function isExtensible(target: any): boolean;
+        function ownKeys(target: any): Array<PropertyKey>;
+        function preventExtensions(target: any): boolean;
+        function set(target: any, propertyKey: PropertyKey, value: any, receiver?: any): boolean;
+        function setPrototypeOf(target: any, proto: any): boolean;
+    }
+}

typings/browser/ambient/jasmine/index.d.ts

@@ -0,0 +1,500 @@
+// Generated by typings
+// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/jasmine/jasmine.d.ts
+// Type definitions for Jasmine 2.2
+// Project: http://jasmine.github.io/
+// Definitions by: Boris Yankov <https://github.com/borisyankov/>, Theodore Brown <https://github.com/theodorejb>, David Pärsson <https://github.com/davidparsson/>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+
+// For ddescribe / iit use : https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/karma-jasmine/karma-jasmine.d.ts
+
+declare function describe(description: string, specDefinitions: () => void): void;
+declare function fdescribe(description: string, specDefinitions: () => void): void;
+declare function xdescribe(description: string, specDefinitions: () => void): void;
+
+declare function it(expectation: string, assertion?: () => void, timeout?: number): void;
+declare function it(expectation: string, assertion?: (done: () => void) => void, timeout?: number): void;
+declare function fit(expectation: string, assertion?: () => void, timeout?: number): void;
+declare function fit(expectation: string, assertion?: (done: () => void) => void, timeout?: number): void;
+declare function xit(expectation: string, assertion?: () => void, timeout?: number): void;
+declare function xit(expectation: string, assertion?: (done: () => void) => void, timeout?: number): void;
+
+/** If you call the function pending anywhere in the spec body, no matter the expectations, the spec will be marked pending. */
+declare function pending(reason?: string): void;
+
+declare function beforeEach(action: () => void, timeout?: number): void;
+declare function beforeEach(action: (done: () => void) => void, timeout?: number): void;
+declare function afterEach(action: () => void, timeout?: number): void;
+declare function afterEach(action: (done: () => void) => void, timeout?: number): void;
+
+declare function beforeAll(action: () => void, timeout?: number): void;
+declare function beforeAll(action: (done: () => void) => void, timeout?: number): void;
+declare function afterAll(action: () => void, timeout?: number): void;
+declare function afterAll(action: (done: () => void) => void, timeout?: number): void;
+
+declare function expect(spy: Function): jasmine.Matchers;
+declare function expect(actual: any): jasmine.Matchers;
+
+declare function fail(e?: any): void;
+
+declare function spyOn(object: any, method: string): jasmine.Spy;
+
+declare function runs(asyncMethod: Function): void;
+declare function waitsFor(latchMethod: () => boolean, failureMessage?: string, timeout?: number): void;
+declare function waits(timeout?: number): void;
+
+declare namespace jasmine {
+
+    var clock: () => Clock;
+
+    function any(aclass: any): Any;
+    function anything(): Any;
+    function arrayContaining(sample: any[]): ArrayContaining;
+    function objectContaining(sample: any): ObjectContaining;
+    function createSpy(name: string, originalFn?: Function): Spy;
+    function createSpyObj(baseName: string, methodNames: any[]): any;
+    function createSpyObj<T>(baseName: string, methodNames: any[]): T;
+    function pp(value: any): string;
+    function getEnv(): Env;
+    function addCustomEqualityTester(equalityTester: CustomEqualityTester): void;
+    function addMatchers(matchers: CustomMatcherFactories): void;
+    function stringMatching(str: string): Any;
+    function stringMatching(str: RegExp): Any;
+
+    interface Any {
+
+        new (expectedClass: any): any;
+
+        jasmineMatches(other: any): boolean;
+        jasmineToString(): string;
+    }
+
+    // taken from TypeScript lib.core.es6.d.ts, applicable to CustomMatchers.contains()
+    interface ArrayLike<T> {
+        length: number;
+        [n: number]: T;
+    }
+
+    interface ArrayContaining {
+        new (sample: any[]): any;
+
+        asymmetricMatch(other: any): boolean;
+        jasmineToString(): string;
+    }
+
+    interface ObjectContaining {
+        new (sample: any): any;
+
+        jasmineMatches(other: any, mismatchKeys: any[], mismatchValues: any[]): boolean;
+        jasmineToString(): string;
+    }
+
+    interface Block {
+
+        new (env: Env, func: SpecFunction, spec: Spec): any;
+
+        execute(onComplete: () => void): void;
+    }
+
+    interface WaitsBlock extends Block {
+        new (env: Env, timeout: number, spec: Spec): any;
+    }
+
+    interface WaitsForBlock extends Block {
+        new (env: Env, timeout: number, latchFunction: SpecFunction, message: string, spec: Spec): any;
+    }
+
+    interface Clock {
+        install(): void;
+        uninstall(): void;
+        /** Calls to any registered callback are triggered when the clock is ticked forward via the jasmine.clock().tick function, which takes a number of milliseconds. */
+        tick(ms: number): void;
+        mockDate(date?: Date): void;
+    }
+
+    interface CustomEqualityTester {
+        (first: any, second: any): boolean;
+    }
+
+    interface CustomMatcher {
+        compare<T>(actual: T, expected: T): CustomMatcherResult;
+        compare(actual: any, expected: any): CustomMatcherResult;
+    }
+
+    interface CustomMatcherFactory {
+        (util: MatchersUtil, customEqualityTesters: Array<CustomEqualityTester>): CustomMatcher;
+    }
+
+    interface CustomMatcherFactories {
+        [index: string]: CustomMatcherFactory;
+    }
+
+    interface CustomMatcherResult {
+        pass: boolean;
+        message?: string;
+    }
+
+    interface MatchersUtil {
+        equals(a: any, b: any, customTesters?: Array<CustomEqualityTester>): boolean;
+        contains<T>(haystack: ArrayLike<T> | string, needle: any, customTesters?: Array<CustomEqualityTester>): boolean;
+        buildFailureMessage(matcherName: string, isNot: boolean, actual: any, ...expected: Array<any>): string;
+    }
+
+    interface Env {
+        setTimeout: any;
+        clearTimeout: void;
+        setInterval: any;
+        clearInterval: void;
+        updateInterval: number;
+
+        currentSpec: Spec;
+
+        matchersClass: Matchers;
+
+        version(): any;
+        versionString(): string;
+        nextSpecId(): number;
+        addReporter(reporter: Reporter): void;
+        execute(): void;
+        describe(description: string, specDefinitions: () => void): Suite;
+        // ddescribe(description: string, specDefinitions: () => void): Suite; Not a part of jasmine. Angular team adds these
+        beforeEach(beforeEachFunction: () => void): void;
+        beforeAll(beforeAllFunction: () => void): void;
+        currentRunner(): Runner;
+        afterEach(afterEachFunction: () => void): void;
+        afterAll(afterAllFunction: () => void): void;
+        xdescribe(desc: string, specDefinitions: () => void): XSuite;
+        it(description: string, func: () => void): Spec;
+        // iit(description: string, func: () => void): Spec; Not a part of jasmine. Angular team adds these
+        xit(desc: string, func: () => void): XSpec;
+        compareRegExps_(a: RegExp, b: RegExp, mismatchKeys: string[], mismatchValues: string[]): boolean;
+        compareObjects_(a: any, b: any, mismatchKeys: string[], mismatchValues: string[]): boolean;
+        equals_(a: any, b: any, mismatchKeys: string[], mismatchValues: string[]): boolean;
+        contains_(haystack: any, needle: any): boolean;
+        addCustomEqualityTester(equalityTester: CustomEqualityTester): void;
+        addMatchers(matchers: CustomMatcherFactories): void;
+        specFilter(spec: Spec): boolean;
+    }
+
+    interface FakeTimer {
+
+        new (): any;
+
+        reset(): void;
+        tick(millis: number): void;
+        runFunctionsWithinRange(oldMillis: number, nowMillis: number): void;
+        scheduleFunction(timeoutKey: any, funcToCall: () => void, millis: number, recurring: boolean): void;
+    }
+
+    interface HtmlReporter {
+        new (): any;
+    }
+
+    interface HtmlSpecFilter {
+        new (): any;
+    }
+
+    interface Result {
+        type: string;
+    }
+
+    interface NestedResults extends Result {
+        description: string;
+
+        totalCount: number;
+        passedCount: number;
+        failedCount: number;
+
+        skipped: boolean;
+
+        rollupCounts(result: NestedResults): void;
+        log(values: any): void;
+        getItems(): Result[];
+        addResult(result: Result): void;
+        passed(): boolean;
+    }
+
+    interface MessageResult extends Result  {
+        values: any;
+        trace: Trace;
+    }
+
+    interface ExpectationResult extends Result  {
+        matcherName: string;
+        passed(): boolean;
+        expected: any;
+        actual: any;
+        message: string;
+        trace: Trace;
+    }
+
+    interface Trace {
+        name: string;
+        message: string;
+        stack: any;
+    }
+
+    interface PrettyPrinter {
+
+        new (): any;
+
+        format(value: any): void;
+        iterateObject(obj: any, fn: (property: string, isGetter: boolean) => void): void;
+        emitScalar(value: any): void;
+        emitString(value: string): void;
+        emitArray(array: any[]): void;
+        emitObject(obj: any): void;
+        append(value: any): void;
+    }
+
+    interface StringPrettyPrinter extends PrettyPrinter {
+    }
+
+    interface Queue {
+
+        new (env: any): any;
+
+        env: Env;
+        ensured: boolean[];
+        blocks: Block[];
+        running: boolean;
+        index: number;
+        offset: number;
+        abort: boolean;
+
+        addBefore(block: Block, ensure?: boolean): void;
+        add(block: any, ensure?: boolean): void;
+        insertNext(block: any, ensure?: boolean): void;
+        start(onComplete?: () => void): void;
+        isRunning(): boolean;
+        next_(): void;
+        results(): NestedResults;
+    }
+
+    interface Matchers {
+
+        new (env: Env, actual: any, spec: Env, isNot?: boolean): any;
+
+        env: Env;
+        actual: any;
+        spec: Env;
+        isNot?: boolean;
+        message(): any;
+
+        toBe(expected: any, expectationFailOutput?: any): boolean;
+        toEqual(expected: any, expectationFailOutput?: any): boolean;
+        toMatch(expected: string | RegExp, expectationFailOutput?: any): boolean;
+        toBeDefined(expectationFailOutput?: any): boolean;
+        toBeUndefined(expectationFailOutput?: any): boolean;
+        toBeNull(expectationFailOutput?: any): boolean;
+        toBeNaN(): boolean;
+        toBeTruthy(expectationFailOutput?: any): boolean;
+        toBeFalsy(expectationFailOutput?: any): boolean;
+        toHaveBeenCalled(): boolean;
+        toHaveBeenCalledWith(...params: any[]): boolean;
+        toHaveBeenCalledTimes(expected: number): boolean;
+        toContain(expected: any, expectationFailOutput?: any): boolean;
+        toBeLessThan(expected: number, expectationFailOutput?: any): boolean;
+        toBeGreaterThan(expected: number, expectationFailOutput?: any): boolean;
+        toBeCloseTo(expected: number, precision: any, expectationFailOutput?: any): boolean;
+        toThrow(expected?: any): boolean;
+        toThrowError(message?: string | RegExp): boolean;
+        toThrowError(expected?: new (...args: any[]) => Error, message?: string | RegExp): boolean;
+        not: Matchers;
+
+        Any: Any;
+    }
+
+    interface Reporter {
+        reportRunnerStarting(runner: Runner): void;
+        reportRunnerResults(runner: Runner): void;
+        reportSuiteResults(suite: Suite): void;
+        reportSpecStarting(spec: Spec): void;
+        reportSpecResults(spec: Spec): void;
+        log(str: string): void;
+    }
+
+    interface MultiReporter extends Reporter {
+        addReporter(reporter: Reporter): void;
+    }
+
+    interface Runner {
+
+        new (env: Env): any;
+
+        execute(): void;
+        beforeEach(beforeEachFunction: SpecFunction): void;
+        afterEach(afterEachFunction: SpecFunction): void;
+        beforeAll(beforeAllFunction: SpecFunction): void;
+        afterAll(afterAllFunction: SpecFunction): void;
+        finishCallback(): void;
+        addSuite(suite: Suite): void;
+        add(block: Block): void;
+        specs(): Spec[];
+        suites(): Suite[];
+        topLevelSuites(): Suite[];
+        results(): NestedResults;
+    }
+
+    interface SpecFunction {
+        (spec?: Spec): void;
+    }
+
+    interface SuiteOrSpec {
+        id: number;
+        env: Env;
+        description: string;
+        queue: Queue;
+    }
+
+    interface Spec extends SuiteOrSpec {
+
+        new (env: Env, suite: Suite, description: string): any;
+
+        suite: Suite;
+
+        afterCallbacks: SpecFunction[];
+        spies_: Spy[];
+
+        results_: NestedResults;
+        matchersClass: Matchers;
+
+        getFullName(): string;
+        results(): NestedResults;
+        log(arguments: any): any;
+        runs(func: SpecFunction): Spec;
+        addToQueue(block: Block): void;
+        addMatcherResult(result: Result): void;
+        expect(actual: any): any;
+        waits(timeout: number): Spec;
+        waitsFor(latchFunction: SpecFunction, timeoutMessage?: string, timeout?: number): Spec;
+        fail(e?: any): void;
+        getMatchersClass_(): Matchers;
+        addMatchers(matchersPrototype: CustomMatcherFactories): void;
+        finishCallback(): void;
+        finish(onComplete?: () => void): void;
+        after(doAfter: SpecFunction): void;
+        execute(onComplete?: () => void): any;
+        addBeforesAndAftersToQueue(): void;
+        explodes(): void;
+        spyOn(obj: any, methodName: string, ignoreMethodDoesntExist: boolean): Spy;
+        removeAllSpies(): void;
+    }
+
+    interface XSpec {
+        id: number;
+        runs(): void;
+    }
+
+    interface Suite extends SuiteOrSpec {
+
+        new (env: Env, description: string, specDefinitions: () => void, parentSuite: Suite): any;
+
+        parentSuite: Suite;
+
+        getFullName(): string;
+        finish(onComplete?: () => void): void;
+        beforeEach(beforeEachFunction: SpecFunction): void;
+        afterEach(afterEachFunction: SpecFunction): void;
+        beforeAll(beforeAllFunction: SpecFunction): void;
+        afterAll(afterAllFunction: SpecFunction): void;
+        results(): NestedResults;
+        add(suiteOrSpec: SuiteOrSpec): void;
+        specs(): Spec[];
+        suites(): Suite[];
+        children(): any[];
+        execute(onComplete?: () => void): void;
+    }
+
+    interface XSuite {
+        execute(): void;
+    }
+
+    interface Spy {
+        (...params: any[]): any;
+
+        identity: string;
+        and: SpyAnd;
+        calls: Calls;
+        mostRecentCall: { args: any[]; };
+        argsForCall: any[];
+        wasCalled: boolean;
+    }
+
+    interface SpyAnd {
+        /** By chaining the spy with and.callThrough, the spy will still track all calls to it but in addition it will delegate to the actual implementation. */
+        callThrough(): Spy;
+        /** By chaining the spy with and.returnValue, all calls to the function will return a specific value. */
+        returnValue(val: any): Spy;
+        /** By chaining the spy with and.callFake, all calls to the spy will delegate to the supplied function. */
+        callFake(fn: Function): Spy;
+        /** By chaining the spy with and.throwError, all calls to the spy will throw the specified value. */
+        throwError(msg: string): Spy;
+        /** When a calling strategy is used for a spy, the original stubbing behavior can be returned at any time with and.stub. */
+        stub(): Spy;
+    }
+
+    interface Calls {
+        /** By chaining the spy with calls.any(), will return false if the spy has not been called at all, and then true once at least one call happens. **/
+        any(): boolean;
+        /** By chaining the spy with calls.count(), will return the number of times the spy was called **/
+        count(): number;
+        /** By chaining the spy with calls.argsFor(), will return the arguments passed to call number index **/
+        argsFor(index: number): any[];
+        /** By chaining the spy with calls.allArgs(), will return the arguments to all calls **/
+        allArgs(): any[];
+        /** By chaining the spy with calls.all(), will return the context (the this) and arguments passed all calls **/
+        all(): CallInfo[];
+        /** By chaining the spy with calls.mostRecent(), will return the context (the this) and arguments for the most recent call **/
+        mostRecent(): CallInfo;
+        /** By chaining the spy with calls.first(), will return the context (the this) and arguments for the first call **/
+        first(): CallInfo;
+        /** By chaining the spy with calls.reset(), will clears all tracking for a spy **/
+        reset(): void;
+    }
+
+    interface CallInfo {
+        /** The context (the this) for the call */
+        object: any;
+        /** All arguments passed to the call */
+        args: any[];
+        /** The return value of the call */
+        returnValue: any;
+    }
+
+    interface Util {
+        inherit(childClass: Function, parentClass: Function): any;
+        formatException(e: any): any;
+        htmlEscape(str: string): string;
+        argsToArray(args: any): any;
+        extend(destination: any, source: any): any;
+    }
+
+    interface JsApiReporter extends Reporter {
+
+        started: boolean;
+        finished: boolean;
+        result: any;
+        messages: any;
+
+        new (): any;
+
+        suites(): Suite[];
+        summarize_(suiteOrSpec: SuiteOrSpec): any;
+        results(): any;
+        resultsForSpec(specId: any): any;
+        log(str: any): any;
+        resultsForSpecs(specIds: any): any;
+        summarizeResult_(result: any): any;
+    }
+
+    interface Jasmine {
+        Spec: Spec;
+        clock: Clock;
+        util: Util;
+    }
+
+    export var HtmlReporter: HtmlReporter;
+    export var HtmlSpecFilter: HtmlSpecFilter;
+    export var DEFAULT_TIMEOUT_INTERVAL: number;
+}

typings/main.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="main/ambient/es6-shim/index.d.ts" />
+/// <reference path="main/ambient/jasmine/index.d.ts" />

typings/main/ambient/es6-shim/index.d.ts

@@ -0,0 +1,670 @@
+// Generated by typings
+// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/es6-shim/es6-shim.d.ts
+// Type definitions for es6-shim v0.31.2
+// Project: https://github.com/paulmillr/es6-shim
+// Definitions by: Ron Buckton <http://github.com/rbuckton>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare type PropertyKey = string | number | symbol;
+
+interface IteratorResult<T> {
+    done: boolean;
+    value?: T;
+}
+
+interface IterableShim<T> {
+    /**
+      * Shim for an ES6 iterable. Not intended for direct use by user code.
+      */
+    "_es6-shim iterator_"(): Iterator<T>;
+}
+
+interface Iterator<T> {
+    next(value?: any): IteratorResult<T>;
+    return?(value?: any): IteratorResult<T>;
+    throw?(e?: any): IteratorResult<T>;
+}
+
+interface IterableIteratorShim<T> extends IterableShim<T>, Iterator<T> {
+    /**
+      * Shim for an ES6 iterable iterator. Not intended for direct use by user code.
+      */
+    "_es6-shim iterator_"(): IterableIteratorShim<T>;
+}
+
+interface StringConstructor {
+    /**
+      * Return the String value whose elements are, in order, the elements in the List elements.
+      * If length is 0, the empty string is returned.
+      */
+    fromCodePoint(...codePoints: number[]): string;
+
+    /**
+      * String.raw is intended for use as a tag function of a Tagged Template String. When called
+      * as such the first argument will be a well formed template call site object and the rest
+      * parameter will contain the substitution values.
+      * @param template A well-formed template string call site representation.
+      * @param substitutions A set of substitution values.
+      */
+    raw(template: TemplateStringsArray, ...substitutions: any[]): string;
+}
+
+interface String {
+    /**
+      * Returns a nonnegative integer Number less than 1114112 (0x110000) that is the code point
+      * value of the UTF-16 encoded code point starting at the string element at position pos in
+      * the String resulting from converting this object to a String.
+      * If there is no element at that position, the result is undefined.
+      * If a valid UTF-16 surrogate pair does not begin at pos, the result is the code unit at pos.
+      */
+    codePointAt(pos: number): number;
+
+    /**
+      * Returns true if searchString appears as a substring of the result of converting this
+      * object to a String, at one or more positions that are
+      * greater than or equal to position; otherwise, returns false.
+      * @param searchString search string
+      * @param position If position is undefined, 0 is assumed, so as to search all of the String.
+      */
+    includes(searchString: string, position?: number): boolean;
+
+    /**
+      * Returns true if the sequence of elements of searchString converted to a String is the
+      * same as the corresponding elements of this object (converted to a String) starting at
+      * endPosition – length(this). Otherwise returns false.
+      */
+    endsWith(searchString: string, endPosition?: number): boolean;
+
+    /**
+      * Returns a String value that is made from count copies appended together. If count is 0,
+      * T is the empty String is returned.
+      * @param count number of copies to append
+      */
+    repeat(count: number): string;
+
+    /**
+      * Returns true if the sequence of elements of searchString converted to a String is the
+      * same as the corresponding elements of this object (converted to a String) starting at
+      * position. Otherwise returns false.
+      */
+    startsWith(searchString: string, position?: number): boolean;
+
+    /**
+      * Returns an <a> HTML anchor element and sets the name attribute to the text value
+      * @param name
+      */
+    anchor(name: string): string;
+
+    /** Returns a <big> HTML element */
+    big(): string;
+
+    /** Returns a <blink> HTML element */
+    blink(): string;
+
+    /** Returns a <b> HTML element */
+    bold(): string;
+
+    /** Returns a <tt> HTML element */
+    fixed(): string
+
+    /** Returns a <font> HTML element and sets the color attribute value */
+    fontcolor(color: string): string
+
+    /** Returns a <font> HTML element and sets the size attribute value */
+    fontsize(size: number): string;
+
+    /** Returns a <font> HTML element and sets the size attribute value */
+    fontsize(size: string): string;
+
+    /** Returns an <i> HTML element */
+    italics(): string;
+
+    /** Returns an <a> HTML element and sets the href attribute value */
+    link(url: string): string;
+
+    /** Returns a <small> HTML element */
+    small(): string;
+
+    /** Returns a <strike> HTML element */
+    strike(): string;
+
+    /** Returns a <sub> HTML element */
+    sub(): string;
+
+    /** Returns a <sup> HTML element */
+    sup(): string;
+
+    /**
+      * Shim for an ES6 iterable. Not intended for direct use by user code.
+      */
+    "_es6-shim iterator_"(): IterableIteratorShim<string>;
+}
+
+interface ArrayConstructor {
+    /**
+      * Creates an array from an array-like object.
+      * @param arrayLike An array-like object to convert to an array.
+      * @param mapfn A mapping function to call on every element of the array.
+      * @param thisArg Value of 'this' used to invoke the mapfn.
+      */
+    from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): Array<U>;
+
+    /**
+      * Creates an array from an iterable object.
+      * @param iterable An iterable object to convert to an array.
+      * @param mapfn A mapping function to call on every element of the array.
+      * @param thisArg Value of 'this' used to invoke the mapfn.
+      */
+    from<T, U>(iterable: IterableShim<T>, mapfn: (v: T, k: number) => U, thisArg?: any): Array<U>;
+
+    /**
+      * Creates an array from an array-like object.
+      * @param arrayLike An array-like object to convert to an array.
+      */
+    from<T>(arrayLike: ArrayLike<T>): Array<T>;
+
+    /**
+      * Creates an array from an iterable object.
+      * @param iterable An iterable object to convert to an array.
+      */
+    from<T>(iterable: IterableShim<T>): Array<T>;
+
+    /**
+      * Returns a new array from a set of elements.
+      * @param items A set of elements to include in the new array object.
+      */
+    of<T>(...items: T[]): Array<T>;
+}
+
+interface Array<T> {
+    /**
+      * Returns the value of the first element in the array where predicate is true, and undefined
+      * otherwise.
+      * @param predicate find calls predicate once for each element of the array, in ascending
+      * order, until it finds one where predicate returns true. If such an element is found, find
+      * immediately returns that element value. Otherwise, find returns undefined.
+      * @param thisArg If provided, it will be used as the this value for each invocation of
+      * predicate. If it is not provided, undefined is used instead.
+      */
+    find(predicate: (value: T, index: number, obj: Array<T>) => boolean, thisArg?: any): T;
+
+    /**
+      * Returns the index of the first element in the array where predicate is true, and undefined
+      * otherwise.
+      * @param predicate find calls predicate once for each element of the array, in ascending
+      * order, until it finds one where predicate returns true. If such an element is found, find
+      * immediately returns that element value. Otherwise, find returns undefined.
+      * @param thisArg If provided, it will be used as the this value for each invocation of
+      * predicate. If it is not provided, undefined is used instead.
+      */
+    findIndex(predicate: (value: T) => boolean, thisArg?: any): number;
+
+    /**
+      * Returns the this object after filling the section identified by start and end with value
+      * @param value value to fill array section with
+      * @param start index to start filling the array at. If start is negative, it is treated as
+      * length+start where length is the length of the array.
+      * @param end index to stop filling the array at. If end is negative, it is treated as
+      * length+end.
+      */
+    fill(value: T, start?: number, end?: number): T[];
+
+    /**
+      * Returns the this object after copying a section of the array identified by start and end
+      * to the same array starting at position target
+      * @param target If target is negative, it is treated as length+target where length is the
+      * length of the array.
+      * @param start If start is negative, it is treated as length+start. If end is negative, it
+      * is treated as length+end.
+      * @param end If not specified, length of the this object is used as its default value.
+      */
+    copyWithin(target: number, start: number, end?: number): T[];
+
+    /**
+      * Returns an array of key, value pairs for every entry in the array
+      */
+    entries(): IterableIteratorShim<[number, T]>;
+
+    /**
+      * Returns an list of keys in the array
+      */
+    keys(): IterableIteratorShim<number>;
+
+    /**
+      * Returns an list of values in the array
+      */
+    values(): IterableIteratorShim<T>;
+
+    /**
+      * Shim for an ES6 iterable. Not intended for direct use by user code.
+      */
+    "_es6-shim iterator_"(): IterableIteratorShim<T>;
+}
+
+interface NumberConstructor {
+    /**
+      * The value of Number.EPSILON is the difference between 1 and the smallest value greater than 1
+      * that is representable as a Number value, which is approximately:
+      * 2.2204460492503130808472633361816 x 10‍−‍16.
+      */
+    EPSILON: number;
+
+    /**
+      * Returns true if passed value is finite.
+      * Unlike the global isFininte, Number.isFinite doesn't forcibly convert the parameter to a
+      * number. Only finite values of the type number, result in true.
+      * @param number A numeric value.
+      */
+    isFinite(number: number): boolean;
+
+    /**
+      * Returns true if the value passed is an integer, false otherwise.
+      * @param number A numeric value.
+      */
+    isInteger(number: number): boolean;
+
+    /**
+      * Returns a Boolean value that indicates whether a value is the reserved value NaN (not a
+      * number). Unlike the global isNaN(), Number.isNaN() doesn't forcefully convert the parameter
+      * to a number. Only values of the type number, that are also NaN, result in true.
+      * @param number A numeric value.
+      */
+    isNaN(number: number): boolean;
+
+    /**
+      * Returns true if the value passed is a safe integer.
+      * @param number A numeric value.
+      */
+    isSafeInteger(number: number): boolean;
+
+    /**
+      * The value of the largest integer n such that n and n + 1 are both exactly representable as
+      * a Number value.
+      * The value of Number.MIN_SAFE_INTEGER is 9007199254740991 2^53 − 1.
+      */
+    MAX_SAFE_INTEGER: number;
+
+    /**
+      * The value of the smallest integer n such that n and n − 1 are both exactly representable as
+      * a Number value.
+      * The value of Number.MIN_SAFE_INTEGER is −9007199254740991 (−(2^53 − 1)).
+      */
+    MIN_SAFE_INTEGER: number;
+
+    /**
+      * Converts a string to a floating-point number.
+      * @param string A string that contains a floating-point number.
+      */
+    parseFloat(string: string): number;
+
+    /**
+      * Converts A string to an integer.
+      * @param s A string to convert into a number.
+      * @param radix A value between 2 and 36 that specifies the base of the number in numString.
+      * If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal.
+      * All other strings are considered decimal.
+      */
+    parseInt(string: string, radix?: number): number;
+}
+
+interface ObjectConstructor {
+    /**
+      * Copy the values of all of the enumerable own properties from one or more source objects to a
+      * target object. Returns the target object.
+      * @param target The target object to copy to.
+      * @param sources One or more source objects to copy properties from.
+      */
+    assign(target: any, ...sources: any[]): any;
+
+    /**
+      * Returns true if the values are the same value, false otherwise.
+      * @param value1 The first value.
+      * @param value2 The second value.
+      */
+    is(value1: any, value2: any): boolean;
+
+    /**
+      * Sets the prototype of a specified object o to  object proto or null. Returns the object o.
+      * @param o The object to change its prototype.
+      * @param proto The value of the new prototype or null.
+      * @remarks Requires `__proto__` support.
+      */
+    setPrototypeOf(o: any, proto: any): any;
+}
+
+interface RegExp {
+    /**
+      * Returns a string indicating the flags of the regular expression in question. This field is read-only.
+      * The characters in this string are sequenced and concatenated in the following order:
+      *
+      *    - "g" for global
+      *    - "i" for ignoreCase
+      *    - "m" for multiline
+      *    - "u" for unicode
+      *    - "y" for sticky
+      *
+      * If no flags are set, the value is the empty string.
+      */
+    flags: string;
+}
+
+interface Math {
+    /**
+      * Returns the number of leading zero bits in the 32-bit binary representation of a number.
+      * @param x A numeric expression.
+      */
+    clz32(x: number): number;
+
+    /**
+      * Returns the result of 32-bit multiplication of two numbers.
+      * @param x First number
+      * @param y Second number
+      */
+    imul(x: number, y: number): number;
+
+    /**
+      * Returns the sign of the x, indicating whether x is positive, negative or zero.
+      * @param x The numeric expression to test
+      */
+    sign(x: number): number;
+
+    /**
+      * Returns the base 10 logarithm of a number.
+      * @param x A numeric expression.
+      */
+    log10(x: number): number;
+
+    /**
+      * Returns the base 2 logarithm of a number.
+      * @param x A numeric expression.
+      */
+    log2(x: number): number;
+
+    /**
+      * Returns the natural logarithm of 1 + x.
+      * @param x A numeric expression.
+      */
+    log1p(x: number): number;
+
+    /**
+      * Returns the result of (e^x - 1) of x (e raised to the power of x, where e is the base of
+      * the natural logarithms).
+      * @param x A numeric expression.
+      */
+    expm1(x: number): number;
+
+    /**
+      * Returns the hyperbolic cosine of a number.
+      * @param x A numeric expression that contains an angle measured in radians.
+      */
+    cosh(x: number): number;
+
+    /**
+      * Returns the hyperbolic sine of a number.
+      * @param x A numeric expression that contains an angle measured in radians.
+      */
+    sinh(x: number): number;
+
+    /**
+      * Returns the hyperbolic tangent of a number.
+      * @param x A numeric expression that contains an angle measured in radians.
+      */
+    tanh(x: number): number;
+
+    /**
+      * Returns the inverse hyperbolic cosine of a number.
+      * @param x A numeric expression that contains an angle measured in radians.
+      */
+    acosh(x: number): number;
+
+    /**
+      * Returns the inverse hyperbolic sine of a number.
+      * @param x A numeric expression that contains an angle measured in radians.
+      */
+    asinh(x: number): number;
+
+    /**
+      * Returns the inverse hyperbolic tangent of a number.
+      * @param x A numeric expression that contains an angle measured in radians.
+      */
+    atanh(x: number): number;
+
+    /**
+      * Returns the square root of the sum of squares of its arguments.
+      * @param values Values to compute the square root for.
+      *     If no arguments are passed, the result is +0.
+      *     If there is only one argument, the result is the absolute value.
+      *     If any argument is +Infinity or -Infinity, the result is +Infinity.
+      *     If any argument is NaN, the result is NaN.
+      *     If all arguments are either +0 or −0, the result is +0.
+      */
+    hypot(...values: number[]): number;
+
+    /**
+      * Returns the integral part of the a numeric expression, x, removing any fractional digits.
+      * If x is already an integer, the result is x.
+      * @param x A numeric expression.
+      */
+    trunc(x: number): number;
+
+    /**
+      * Returns the nearest single precision float representation of a number.
+      * @param x A numeric expression.
+      */
+    fround(x: number): number;
+
+    /**
+      * Returns an implementation-dependent approximation to the cube root of number.
+      * @param x A numeric expression.
+      */
+    cbrt(x: number): number;
+}
+
+interface PromiseLike<T> {
+    /**
+    * Attaches callbacks for the resolution and/or rejection of the Promise.
+    * @param onfulfilled The callback to execute when the Promise is resolved.
+    * @param onrejected The callback to execute when the Promise is rejected.
+    * @returns A Promise for the completion of which ever callback is executed.
+    */
+    then<TResult>(onfulfilled?: (value: T) => TResult | PromiseLike<TResult>, onrejected?: (reason: any) => TResult | PromiseLike<TResult>): PromiseLike<TResult>;
+    then<TResult>(onfulfilled?: (value: T) => TResult | PromiseLike<TResult>, onrejected?: (reason: any) => void): PromiseLike<TResult>;
+}
+
+/**
+ * Represents the completion of an asynchronous operation
+ */
+interface Promise<T> {
+    /**
+    * Attaches callbacks for the resolution and/or rejection of the Promise.
+    * @param onfulfilled The callback to execute when the Promise is resolved.
+    * @param onrejected The callback to execute when the Promise is rejected.
+    * @returns A Promise for the completion of which ever callback is executed.
+    */
+    then<TResult>(onfulfilled?: (value: T) => TResult | PromiseLike<TResult>, onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<TResult>;
+    then<TResult>(onfulfilled?: (value: T) => TResult | PromiseLike<TResult>, onrejected?: (reason: any) => void): Promise<TResult>;
+
+    /**
+     * Attaches a callback for only the rejection of the Promise.
+     * @param onrejected The callback to execute when the Promise is rejected.
+     * @returns A Promise for the completion of the callback.
+     */
+    catch(onrejected?: (reason: any) => T | PromiseLike<T>): Promise<T>;
+    catch(onrejected?: (reason: any) => void): Promise<T>;
+}
+
+interface PromiseConstructor {
+    /**
+      * A reference to the prototype.
+      */
+    prototype: Promise<any>;
+
+    /**
+     * Creates a new Promise.
+     * @param executor A callback used to initialize the promise. This callback is passed two arguments:
+     * a resolve callback used resolve the promise with a value or the result of another promise,
+     * and a reject callback used to reject the promise with a provided reason or error.
+     */
+    new <T>(executor: (resolve: (value?: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void): Promise<T>;
+
+    /**
+     * Creates a Promise that is resolved with an array of results when all of the provided Promises
+     * resolve, or rejected when any Promise is rejected.
+     * @param values An array of Promises.
+     * @returns A new Promise.
+     */
+    all<T>(values: IterableShim<T | PromiseLike<T>>): Promise<T[]>;
+
+    /**
+     * Creates a Promise that is resolved or rejected when any of the provided Promises are resolved
+     * or rejected.
+     * @param values An array of Promises.
+     * @returns A new Promise.
+     */
+    race<T>(values: IterableShim<T | PromiseLike<T>>): Promise<T>;
+
+    /**
+     * Creates a new rejected promise for the provided reason.
+     * @param reason The reason the promise was rejected.
+     * @returns A new rejected Promise.
+     */
+    reject(reason: any): Promise<void>;
+
+    /**
+     * Creates a new rejected promise for the provided reason.
+     * @param reason The reason the promise was rejected.
+     * @returns A new rejected Promise.
+     */
+    reject<T>(reason: any): Promise<T>;
+
+    /**
+      * Creates a new resolved promise for the provided value.
+      * @param value A promise.
+      * @returns A promise whose internal state matches the provided promise.
+      */
+    resolve<T>(value: T | PromiseLike<T>): Promise<T>;
+
+    /**
+     * Creates a new resolved promise .
+     * @returns A resolved promise.
+     */
+    resolve(): Promise<void>;
+}
+
+declare var Promise: PromiseConstructor;
+
+interface Map<K, V> {
+    clear(): void;
+    delete(key: K): boolean;
+    forEach(callbackfn: (value: V, index: K, map: Map<K, V>) => void, thisArg?: any): void;
+    get(key: K): V;
+    has(key: K): boolean;
+    set(key: K, value?: V): Map<K, V>;
+    size: number;
+    entries(): IterableIteratorShim<[K, V]>;
+    keys(): IterableIteratorShim<K>;
+    values(): IterableIteratorShim<V>;
+}
+
+interface MapConstructor {
+    new <K, V>(): Map<K, V>;
+    new <K, V>(iterable: IterableShim<[K, V]>): Map<K, V>;
+    prototype: Map<any, any>;
+}
+
+declare var Map: MapConstructor;
+
+interface Set<T> {
+    add(value: T): Set<T>;
+    clear(): void;
+    delete(value: T): boolean;
+    forEach(callbackfn: (value: T, index: T, set: Set<T>) => void, thisArg?: any): void;
+    has(value: T): boolean;
+    size: number;
+    entries(): IterableIteratorShim<[T, T]>;
+    keys(): IterableIteratorShim<T>;
+    values(): IterableIteratorShim<T>;
+}
+
+interface SetConstructor {
+    new <T>(): Set<T>;
+    new <T>(iterable: IterableShim<T>): Set<T>;
+    prototype: Set<any>;
+}
+
+declare var Set: SetConstructor;
+
+interface WeakMap<K, V> {
+    delete(key: K): boolean;
+    get(key: K): V;
+    has(key: K): boolean;
+    set(key: K, value?: V): WeakMap<K, V>;
+}
+
+interface WeakMapConstructor {
+    new <K, V>(): WeakMap<K, V>;
+    new <K, V>(iterable: IterableShim<[K, V]>): WeakMap<K, V>;
+    prototype: WeakMap<any, any>;
+}
+
+declare var WeakMap: WeakMapConstructor;
+
+interface WeakSet<T> {
+    add(value: T): WeakSet<T>;
+    delete(value: T): boolean;
+    has(value: T): boolean;
+}
+
+interface WeakSetConstructor {
+    new <T>(): WeakSet<T>;
+    new <T>(iterable: IterableShim<T>): WeakSet<T>;
+    prototype: WeakSet<any>;
+}
+
+declare var WeakSet: WeakSetConstructor;
+
+declare namespace Reflect {
+    function apply(target: Function, thisArgument: any, argumentsList: ArrayLike<any>): any;
+    function construct(target: Function, argumentsList: ArrayLike<any>): any;
+    function defineProperty(target: any, propertyKey: PropertyKey, attributes: PropertyDescriptor): boolean;
+    function deleteProperty(target: any, propertyKey: PropertyKey): boolean;
+    function enumerate(target: any): IterableIteratorShim<any>;
+    function get(target: any, propertyKey: PropertyKey, receiver?: any): any;
+    function getOwnPropertyDescriptor(target: any, propertyKey: PropertyKey): PropertyDescriptor;
+    function getPrototypeOf(target: any): any;
+    function has(target: any, propertyKey: PropertyKey): boolean;
+    function isExtensible(target: any): boolean;
+    function ownKeys(target: any): Array<PropertyKey>;
+    function preventExtensions(target: any): boolean;
+    function set(target: any, propertyKey: PropertyKey, value: any, receiver?: any): boolean;
+    function setPrototypeOf(target: any, proto: any): boolean;
+}
+
+declare module "es6-shim" {
+    var String: StringConstructor;
+    var Array: ArrayConstructor;
+    var Number: NumberConstructor;
+    var Math: Math;
+    var Object: ObjectConstructor;
+    var Map: MapConstructor;
+    var Set: SetConstructor;
+    var WeakMap: WeakMapConstructor;
+    var WeakSet: WeakSetConstructor;
+    var Promise: PromiseConstructor;
+    namespace Reflect {
+        function apply(target: Function, thisArgument: any, argumentsList: ArrayLike<any>): any;
+        function construct(target: Function, argumentsList: ArrayLike<any>): any;
+        function defineProperty(target: any, propertyKey: PropertyKey, attributes: PropertyDescriptor): boolean;
+        function deleteProperty(target: any, propertyKey: PropertyKey): boolean;
+        function enumerate(target: any): Iterator<any>;
+        function get(target: any, propertyKey: PropertyKey, receiver?: any): any;
+        function getOwnPropertyDescriptor(target: any, propertyKey: PropertyKey): PropertyDescriptor;
+        function getPrototypeOf(target: any): any;
+        function has(target: any, propertyKey: PropertyKey): boolean;
+        function isExtensible(target: any): boolean;
+        function ownKeys(target: any): Array<PropertyKey>;
+        function preventExtensions(target: any): boolean;
+        function set(target: any, propertyKey: PropertyKey, value: any, receiver?: any): boolean;
+        function setPrototypeOf(target: any, proto: any): boolean;
+    }
+}

typings/main/ambient/jasmine/index.d.ts

@@ -0,0 +1,500 @@
+// Generated by typings
+// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/jasmine/jasmine.d.ts
+// Type definitions for Jasmine 2.2
+// Project: http://jasmine.github.io/
+// Definitions by: Boris Yankov <https://github.com/borisyankov/>, Theodore Brown <https://github.com/theodorejb>, David Pärsson <https://github.com/davidparsson/>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+
+// For ddescribe / iit use : https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/karma-jasmine/karma-jasmine.d.ts
+
+declare function describe(description: string, specDefinitions: () => void): void;
+declare function fdescribe(description: string, specDefinitions: () => void): void;
+declare function xdescribe(description: string, specDefinitions: () => void): void;
+
+declare function it(expectation: string, assertion?: () => void, timeout?: number): void;
+declare function it(expectation: string, assertion?: (done: () => void) => void, timeout?: number): void;
+declare function fit(expectation: string, assertion?: () => void, timeout?: number): void;
+declare function fit(expectation: string, assertion?: (done: () => void) => void, timeout?: number): void;
+declare function xit(expectation: string, assertion?: () => void, timeout?: number): void;
+declare function xit(expectation: string, assertion?: (done: () => void) => void, timeout?: number): void;
+
+/** If you call the function pending anywhere in the spec body, no matter the expectations, the spec will be marked pending. */
+declare function pending(reason?: string): void;
+
+declare function beforeEach(action: () => void, timeout?: number): void;
+declare function beforeEach(action: (done: () => void) => void, timeout?: number): void;
+declare function afterEach(action: () => void, timeout?: number): void;
+declare function afterEach(action: (done: () => void) => void, timeout?: number): void;
+
+declare function beforeAll(action: () => void, timeout?: number): void;
+declare function beforeAll(action: (done: () => void) => void, timeout?: number): void;
+declare function afterAll(action: () => void, timeout?: number): void;
+declare function afterAll(action: (done: () => void) => void, timeout?: number): void;
+
+declare function expect(spy: Function): jasmine.Matchers;
+declare function expect(actual: any): jasmine.Matchers;
+
+declare function fail(e?: any): void;
+
+declare function spyOn(object: any, method: string): jasmine.Spy;
+
+declare function runs(asyncMethod: Function): void;
+declare function waitsFor(latchMethod: () => boolean, failureMessage?: string, timeout?: number): void;
+declare function waits(timeout?: number): void;
+
+declare namespace jasmine {
+
+    var clock: () => Clock;
+
+    function any(aclass: any): Any;
+    function anything(): Any;
+    function arrayContaining(sample: any[]): ArrayContaining;
+    function objectContaining(sample: any): ObjectContaining;
+    function createSpy(name: string, originalFn?: Function): Spy;
+    function createSpyObj(baseName: string, methodNames: any[]): any;
+    function createSpyObj<T>(baseName: string, methodNames: any[]): T;
+    function pp(value: any): string;
+    function getEnv(): Env;
+    function addCustomEqualityTester(equalityTester: CustomEqualityTester): void;
+    function addMatchers(matchers: CustomMatcherFactories): void;
+    function stringMatching(str: string): Any;
+    function stringMatching(str: RegExp): Any;
+
+    interface Any {
+
+        new (expectedClass: any): any;
+
+        jasmineMatches(other: any): boolean;
+        jasmineToString(): string;
+    }
+
+    // taken from TypeScript lib.core.es6.d.ts, applicable to CustomMatchers.contains()
+    interface ArrayLike<T> {
+        length: number;
+        [n: number]: T;
+    }
+
+    interface ArrayContaining {
+        new (sample: any[]): any;
+
+        asymmetricMatch(other: any): boolean;
+        jasmineToString(): string;
+    }
+
+    interface ObjectContaining {
+        new (sample: any): any;
+
+        jasmineMatches(other: any, mismatchKeys: any[], mismatchValues: any[]): boolean;
+        jasmineToString(): string;
+    }
+
+    interface Block {
+
+        new (env: Env, func: SpecFunction, spec: Spec): any;
+
+        execute(onComplete: () => void): void;
+    }
+
+    interface WaitsBlock extends Block {
+        new (env: Env, timeout: number, spec: Spec): any;
+    }
+
+    interface WaitsForBlock extends Block {
+        new (env: Env, timeout: number, latchFunction: SpecFunction, message: string, spec: Spec): any;
+    }
+
+    interface Clock {
+        install(): void;
+        uninstall(): void;
+        /** Calls to any registered callback are triggered when the clock is ticked forward via the jasmine.clock().tick function, which takes a number of milliseconds. */
+        tick(ms: number): void;
+        mockDate(date?: Date): void;
+    }
+
+    interface CustomEqualityTester {
+        (first: any, second: any): boolean;
+    }
+
+    interface CustomMatcher {
+        compare<T>(actual: T, expected: T): CustomMatcherResult;
+        compare(actual: any, expected: any): CustomMatcherResult;
+    }
+
+    interface CustomMatcherFactory {
+        (util: MatchersUtil, customEqualityTesters: Array<CustomEqualityTester>): CustomMatcher;
+    }
+
+    interface CustomMatcherFactories {
+        [index: string]: CustomMatcherFactory;
+    }
+
+    interface CustomMatcherResult {
+        pass: boolean;
+        message?: string;
+    }
+
+    interface MatchersUtil {
+        equals(a: any, b: any, customTesters?: Array<CustomEqualityTester>): boolean;
+        contains<T>(haystack: ArrayLike<T> | string, needle: any, customTesters?: Array<CustomEqualityTester>): boolean;
+        buildFailureMessage(matcherName: string, isNot: boolean, actual: any, ...expected: Array<any>): string;
+    }
+
+    interface Env {
+        setTimeout: any;
+        clearTimeout: void;
+        setInterval: any;
+        clearInterval: void;
+        updateInterval: number;
+
+        currentSpec: Spec;
+
+        matchersClass: Matchers;
+
+        version(): any;
+        versionString(): string;
+        nextSpecId(): number;
+        addReporter(reporter: Reporter): void;
+        execute(): void;
+        describe(description: string, specDefinitions: () => void): Suite;
+        // ddescribe(description: string, specDefinitions: () => void): Suite; Not a part of jasmine. Angular team adds these
+        beforeEach(beforeEachFunction: () => void): void;
+        beforeAll(beforeAllFunction: () => void): void;
+        currentRunner(): Runner;
+        afterEach(afterEachFunction: () => void): void;
+        afterAll(afterAllFunction: () => void): void;
+        xdescribe(desc: string, specDefinitions: () => void): XSuite;
+        it(description: string, func: () => void): Spec;
+        // iit(description: string, func: () => void): Spec; Not a part of jasmine. Angular team adds these
+        xit(desc: string, func: () => void): XSpec;
+        compareRegExps_(a: RegExp, b: RegExp, mismatchKeys: string[], mismatchValues: string[]): boolean;
+        compareObjects_(a: any, b: any, mismatchKeys: string[], mismatchValues: string[]): boolean;
+        equals_(a: any, b: any, mismatchKeys: string[], mismatchValues: string[]): boolean;
+        contains_(haystack: any, needle: any): boolean;
+        addCustomEqualityTester(equalityTester: CustomEqualityTester): void;
+        addMatchers(matchers: CustomMatcherFactories): void;
+        specFilter(spec: Spec): boolean;
+    }
+
+    interface FakeTimer {
+
+        new (): any;
+
+        reset(): void;
+        tick(millis: number): void;
+        runFunctionsWithinRange(oldMillis: number, nowMillis: number): void;
+        scheduleFunction(timeoutKey: any, funcToCall: () => void, millis: number, recurring: boolean): void;
+    }
+
+    interface HtmlReporter {
+        new (): any;
+    }
+
+    interface HtmlSpecFilter {
+        new (): any;
+    }
+
+    interface Result {
+        type: string;
+    }
+
+    interface NestedResults extends Result {
+        description: string;
+
+        totalCount: number;
+        passedCount: number;
+        failedCount: number;
+
+        skipped: boolean;
+
+        rollupCounts(result: NestedResults): void;
+        log(values: any): void;
+        getItems(): Result[];
+        addResult(result: Result): void;
+        passed(): boolean;
+    }
+
+    interface MessageResult extends Result  {
+        values: any;
+        trace: Trace;
+    }
+
+    interface ExpectationResult extends Result  {
+        matcherName: string;
+        passed(): boolean;
+        expected: any;
+        actual: any;
+        message: string;
+        trace: Trace;
+    }
+
+    interface Trace {
+        name: string;
+        message: string;
+        stack: any;
+    }
+
+    interface PrettyPrinter {
+
+        new (): any;
+
+        format(value: any): void;
+        iterateObject(obj: any, fn: (property: string, isGetter: boolean) => void): void;
+        emitScalar(value: any): void;
+        emitString(value: string): void;
+        emitArray(array: any[]): void;
+        emitObject(obj: any): void;
+        append(value: any): void;
+    }
+
+    interface StringPrettyPrinter extends PrettyPrinter {
+    }
+
+    interface Queue {
+
+        new (env: any): any;
+
+        env: Env;
+        ensured: boolean[];
+        blocks: Block[];
+        running: boolean;
+        index: number;
+        offset: number;
+        abort: boolean;
+
+        addBefore(block: Block, ensure?: boolean): void;
+        add(block: any, ensure?: boolean): void;
+        insertNext(block: any, ensure?: boolean): void;
+        start(onComplete?: () => void): void;
+        isRunning(): boolean;
+        next_(): void;
+        results(): NestedResults;
+    }
+
+    interface Matchers {
+
+        new (env: Env, actual: any, spec: Env, isNot?: boolean): any;
+
+        env: Env;
+        actual: any;
+        spec: Env;
+        isNot?: boolean;
+        message(): any;
+
+        toBe(expected: any, expectationFailOutput?: any): boolean;
+        toEqual(expected: any, expectationFailOutput?: any): boolean;
+        toMatch(expected: string | RegExp, expectationFailOutput?: any): boolean;
+        toBeDefined(expectationFailOutput?: any): boolean;
+        toBeUndefined(expectationFailOutput?: any): boolean;
+        toBeNull(expectationFailOutput?: any): boolean;
+        toBeNaN(): boolean;
+        toBeTruthy(expectationFailOutput?: any): boolean;
+        toBeFalsy(expectationFailOutput?: any): boolean;
+        toHaveBeenCalled(): boolean;
+        toHaveBeenCalledWith(...params: any[]): boolean;
+        toHaveBeenCalledTimes(expected: number): boolean;
+        toContain(expected: any, expectationFailOutput?: any): boolean;
+        toBeLessThan(expected: number, expectationFailOutput?: any): boolean;
+        toBeGreaterThan(expected: number, expectationFailOutput?: any): boolean;
+        toBeCloseTo(expected: number, precision: any, expectationFailOutput?: any): boolean;
+        toThrow(expected?: any): boolean;
+        toThrowError(message?: string | RegExp): boolean;
+        toThrowError(expected?: new (...args: any[]) => Error, message?: string | RegExp): boolean;
+        not: Matchers;
+
+        Any: Any;
+    }
+
+    interface Reporter {
+        reportRunnerStarting(runner: Runner): void;
+        reportRunnerResults(runner: Runner): void;
+        reportSuiteResults(suite: Suite): void;
+        reportSpecStarting(spec: Spec): void;
+        reportSpecResults(spec: Spec): void;
+        log(str: string): void;
+    }
+
+    interface MultiReporter extends Reporter {
+        addReporter(reporter: Reporter): void;
+    }
+
+    interface Runner {
+
+        new (env: Env): any;
+
+        execute(): void;
+        beforeEach(beforeEachFunction: SpecFunction): void;
+        afterEach(afterEachFunction: SpecFunction): void;
+        beforeAll(beforeAllFunction: SpecFunction): void;
+        afterAll(afterAllFunction: SpecFunction): void;
+        finishCallback(): void;
+        addSuite(suite: Suite): void;
+        add(block: Block): void;
+        specs(): Spec[];
+        suites(): Suite[];
+        topLevelSuites(): Suite[];
+        results(): NestedResults;
+    }
+
+    interface SpecFunction {
+        (spec?: Spec): void;
+    }
+
+    interface SuiteOrSpec {
+        id: number;
+        env: Env;
+        description: string;
+        queue: Queue;
+    }
+
+    interface Spec extends SuiteOrSpec {
+
+        new (env: Env, suite: Suite, description: string): any;
+
+        suite: Suite;
+
+        afterCallbacks: SpecFunction[];
+        spies_: Spy[];
+
+        results_: NestedResults;
+        matchersClass: Matchers;
+
+        getFullName(): string;
+        results(): NestedResults;
+        log(arguments: any): any;
+        runs(func: SpecFunction): Spec;
+        addToQueue(block: Block): void;
+        addMatcherResult(result: Result): void;
+        expect(actual: any): any;
+        waits(timeout: number): Spec;
+        waitsFor(latchFunction: SpecFunction, timeoutMessage?: string, timeout?: number): Spec;
+        fail(e?: any): void;
+        getMatchersClass_(): Matchers;
+        addMatchers(matchersPrototype: CustomMatcherFactories): void;
+        finishCallback(): void;
+        finish(onComplete?: () => void): void;
+        after(doAfter: SpecFunction): void;
+        execute(onComplete?: () => void): any;
+        addBeforesAndAftersToQueue(): void;
+        explodes(): void;
+        spyOn(obj: any, methodName: string, ignoreMethodDoesntExist: boolean): Spy;
+        removeAllSpies(): void;
+    }
+
+    interface XSpec {
+        id: number;
+        runs(): void;
+    }
+
+    interface Suite extends SuiteOrSpec {
+
+        new (env: Env, description: string, specDefinitions: () => void, parentSuite: Suite): any;
+
+        parentSuite: Suite;
+
+        getFullName(): string;
+        finish(onComplete?: () => void): void;
+        beforeEach(beforeEachFunction: SpecFunction): void;
+        afterEach(afterEachFunction: SpecFunction): void;
+        beforeAll(beforeAllFunction: SpecFunction): void;
+        afterAll(afterAllFunction: SpecFunction): void;
+        results(): NestedResults;
+        add(suiteOrSpec: SuiteOrSpec): void;
+        specs(): Spec[];
+        suites(): Suite[];
+        children(): any[];
+        execute(onComplete?: () => void): void;
+    }
+
+    interface XSuite {
+        execute(): void;
+    }
+
+    interface Spy {
+        (...params: any[]): any;
+
+        identity: string;
+        and: SpyAnd;
+        calls: Calls;
+        mostRecentCall: { args: any[]; };
+        argsForCall: any[];
+        wasCalled: boolean;
+    }
+
+    interface SpyAnd {
+        /** By chaining the spy with and.callThrough, the spy will still track all calls to it but in addition it will delegate to the actual implementation. */
+        callThrough(): Spy;
+        /** By chaining the spy with and.returnValue, all calls to the function will return a specific value. */
+        returnValue(val: any): Spy;
+        /** By chaining the spy with and.callFake, all calls to the spy will delegate to the supplied function. */
+        callFake(fn: Function): Spy;
+        /** By chaining the spy with and.throwError, all calls to the spy will throw the specified value. */
+        throwError(msg: string): Spy;
+        /** When a calling strategy is used for a spy, the original stubbing behavior can be returned at any time with and.stub. */
+        stub(): Spy;
+    }
+
+    interface Calls {
+        /** By chaining the spy with calls.any(), will return false if the spy has not been called at all, and then true once at least one call happens. **/
+        any(): boolean;
+        /** By chaining the spy with calls.count(), will return the number of times the spy was called **/
+        count(): number;
+        /** By chaining the spy with calls.argsFor(), will return the arguments passed to call number index **/
+        argsFor(index: number): any[];
+        /** By chaining the spy with calls.allArgs(), will return the arguments to all calls **/
+        allArgs(): any[];
+        /** By chaining the spy with calls.all(), will return the context (the this) and arguments passed all calls **/
+        all(): CallInfo[];
+        /** By chaining the spy with calls.mostRecent(), will return the context (the this) and arguments for the most recent call **/
+        mostRecent(): CallInfo;
+        /** By chaining the spy with calls.first(), will return the context (the this) and arguments for the first call **/
+        first(): CallInfo;
+        /** By chaining the spy with calls.reset(), will clears all tracking for a spy **/
+        reset(): void;
+    }
+
+    interface CallInfo {
+        /** The context (the this) for the call */
+        object: any;
+        /** All arguments passed to the call */
+        args: any[];
+        /** The return value of the call */
+        returnValue: any;
+    }
+
+    interface Util {
+        inherit(childClass: Function, parentClass: Function): any;
+        formatException(e: any): any;
+        htmlEscape(str: string): string;
+        argsToArray(args: any): any;
+        extend(destination: any, source: any): any;
+    }
+
+    interface JsApiReporter extends Reporter {
+
+        started: boolean;
+        finished: boolean;
+        result: any;
+        messages: any;
+
+        new (): any;
+
+        suites(): Suite[];
+        summarize_(suiteOrSpec: SuiteOrSpec): any;
+        results(): any;
+        resultsForSpec(specId: any): any;
+        log(str: any): any;
+        resultsForSpecs(specIds: any): any;
+        summarizeResult_(result: any): any;
+    }
+
+    interface Jasmine {
+        Spec: Spec;
+        clock: Clock;
+        util: Util;
+    }
+
+    export var HtmlReporter: HtmlReporter;
+    export var HtmlSpecFilter: HtmlSpecFilter;
+    export var DEFAULT_TIMEOUT_INTERVAL: number;
+}

visualizer.js

@@ -1,30 +1,14 @@
-var express = require('express');
-var app = express();
 var path = require('path');
-var http = require('http').Server(app);
 var argv = require('yargs').argv;
 var OpenBCIBoard = require('openbci-sdk');
 var dsp = require('dsp.js');
-var io = require('socket.io')(http);
+var io = require('socket.io')(process.env.app_port || 8080);
 
 // Sockets
-io.on('connection', function(socket){
+io.on('connection', function(socket) {
     console.log('A user connected');
 });
 
-// Server
-app.use(express.static(path.join(__dirname, '/app')));
-
-app.use('/node_modules', express.static(path.join(__dirname, '/node_modules')));
-
-app.get('*', function(req, res) {
-    res.sendFile(path.join(__dirname, '/app/index.html'));
-});
-
-http.listen(3060, function () {
-    console.log('listening on port 3060');
-});
-
 // OpenBCI
 var board = new OpenBCIBoard.OpenBCIBoard({
     verbose: true
@@ -60,17 +44,38 @@ function onBoardReady () {
 
 var bins = 128; // Approx .5 second
 var bufferSize = 128;
-var windowRefreshRate = 16;
+var windowRefreshRate = 8;
 var windowSize = bins / windowRefreshRate;
 var sampleRate = board.sampleRate();
+var sampleInterval = (1 / sampleRate) * 1000; // in milliseconds (4)
 var sampleNumber = 0;
 var signals = [[],[],[],[],[],[],[],[]];
-var timeSeries = [[],[],[],[],[],[],[],[]];
+
+var timeSeriesWindow = 5; // in seconds
+var timeSeriesRate = 10; // emits time series every 10 samples (adds 40 ms delay because this * sampleInterval = 40
+var seriesNumber = 0;
+var timeline = [5,4,3,2,1,0];
+var timeSeries = new Array(8).fill([]); // 8 channels
+timeSeries = timeSeries.map(function () {
+    return new Array((sampleRate * timeSeriesWindow)).fill(0).map(function (amplitude, channelNumber) {
+        return offsetForGrid(amplitude, channelNumber);
+    }); // / timeSeriesRate
+});
+
+// the parameters for the grid [x,y,z] where x is the min of the grid, y is the
+// max of the grid and z is the number of points
+var grid_params = [0,10,11];
+var pos_x = [3,7,2,8,0,10,3,7]; // x coordinates of the data
+var pos_y = [0,0,3,3,8,8,10,10]; // y coordinates of the data
+// var data = [10,0,0,0,0,0,-10,30,25]; // the data values
+
 
 function onSample (sample) {
-    console.log('sample', sample);
+
     sampleNumber++;
 
+    console.log('sample', sample);
+
     Object.keys(sample.channelData).forEach(function (channel, i) {
         signals[i].push(sample.channelData[channel]);
     });
@@ -82,10 +87,8 @@ function onSample (sample) {
         signals.forEach(function (signal, index) {
             var fft = new dsp.FFT(bufferSize, sampleRate);
             fft.forward(signal);
-
             spectrums[index] = parseObjectAsArray(fft.spectrum);
             spectrums[index] = voltsToMicrovolts(spectrums[index], true);
-            timeSeries[index] = voltsToMicrovolts(signal);
         });
 
         var scaler = sampleRate / bins;
@@ -94,16 +97,26 @@ function onSample (sample) {
             .map(function (x, i) {
                 return Math.ceil(i * scaler);
             });
-        
-        io.emit('openBCIData', {
-            spectrums: {
-                data: spectrums,
-                labels: labels
-            },
-            timeSeries: {
-                data: timeSeries,
-                labels: new Array(128).fill(2)
-            }
+
+        var spectrumsByBand = [];
+        var bands = {
+            delta : [1, 3],
+            theta : [4, 8],
+            alpha : [9, 12],
+            beta : [13, 30]
+        };
+
+        for(band in bands){
+            spectrumsByBand[band] = filterBand(spectrums, labels, bands[band])
+        }
+
+        io.emit('bci:fft', {
+            data: spectrums,
+            theta: spectrumsByBand.theta.spectrums,
+            delta: spectrumsByBand.delta.spectrums,
+            alpha: spectrumsByBand.alpha.spectrums,
+            beta: spectrumsByBand.beta.spectrums,
+            labels: labels
         });
 
         signals = signals.map(function (channel) {
@@ -112,13 +125,58 @@ function onSample (sample) {
             });
         });
 
+        var meanSpectrum = spectrums.map(function(channel){
+            return jStat.mean(channel);
+        });
+
+        grid = topogrid.create(pos_x,pos_y,meanSpectrum,grid_params);
+        var grid_flat = [].concat.apply([], grid);
+
+        io.emit('bci:topo', {
+            data: grid_flat
+        });
+
         sampleNumber = bins - windowSize;
 
     }
 
+    // Time Series
+    seriesNumber++;
+
+    timeSeries.forEach(function (channel, index) {
+        channel.push(
+            offsetForGrid(sample.channelData[index], index)
+        );
+        channel.shift();
+    });
+
+    if (seriesNumber === timeSeriesRate) {
+
+        var amplitudes = signals.map(function (channel) {
+            return Math.round(voltsToMicrovolts(channel[channel.length - 1])[0] * 100) / 100;
+        });
+
+        io.emit('bci:time', {
+            data: timeSeries,
+            amplitudes: amplitudes,
+            timeline: timeline,
+            labels: new Array((sampleRate * timeSeriesWindow) / timeSeriesRate).fill(0)
+        });
+
+        seriesNumber = 0;
+    }
+
+}
+
+// @TODO: initial dataset is returning messed up values
+function offsetForGrid (amplitude, channelNumber) {
+    var scaledAmplitude = amplitude * Math.pow(10, globalScale);
+    var offset = 2 * (timeSeries.length - channelNumber) - 1;
+    return parseFloat(scaledAmplitude + offset);
 }
 
 function voltsToMicrovolts (volts, log) {
+    if (!Array.isArray(volts)) volts = [volts];
     return volts.map(function (volt) {
         return log ? Math.log10(Math.pow(10, 6) * volt) : Math.pow(10, 6) * volt;
     });
@@ -132,6 +190,26 @@ function parseObjectAsArray (obj) {
     return array;
 }
 
+function filterBand(spectrums, labels, range) {
+    if (!spectrums ) return console.log('Please provide spectrums');
+    spectrums = spectrums.map(function (channel) {
+        return channel.filter(function (spectrum, index) {
+            return labels[index] >= range[0] && labels[index] <= range[1];
+        });
+    });
+    spectrums =  [spectrums.map(function (channel) {
+        if (channel.length) {
+            return channel.reduce(function (a, b) {
+                    return a + b;
+                }) / channel.length;
+        } else return channel;
+    })];
+    return {
+        spectrums: spectrums,
+        labels: labels
+    }
+}
+
 /**
  * disconnectBoard
  */