Angular 2 + Google Charts

README.md

@@ -1,6 +1,4 @@
-# OpenBCI Dashboard
-
-![alt text](/assets/preview3.gif "OpenBCI Dashboard Preview")
+# OpenBCI Visualizer
 
 A fullstack javascript app for capturing and visualizing OpenBCI EEG data
 
@@ -16,7 +14,7 @@ npm install
 node visualizer
 ```
 
-* Go to: http://localhost:3060
+* Go to: http://localhost:3036
 
 ## Simulating data
 

angular1/components/alpha/alpha.html

@@ -0,0 +1,9 @@
+<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>

angular1/components/alpha/alpha.js

@@ -0,0 +1,17 @@
+
+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('openBCIFFT', function (data) {
+                var alphaRange = EEGSpectrumUtils.filterBand(data.data, data.labels, [8, 12]);
+                $timeout(function () {
+                    $ctrl.labels = alphaRange.labels;
+                    $ctrl.data = alphaRange.spectrums;
+                });
+            });
+        }
+    });

angular1/components/beta/beta.html

@@ -0,0 +1,9 @@
+<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>

angular1/components/beta/beta.js

@@ -0,0 +1,17 @@
+
+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('openBCIFFT', function (data) {
+                var betaRange = EEGSpectrumUtils.filterBand(data.data, data.labels, [12, 40]);
+                $timeout(function () {
+                    $ctrl.labels = betaRange.labels;
+                    $ctrl.data = betaRange.spectrums;
+                });
+            });
+        }
+    });

angular1/components/delta/delta.html

@@ -0,0 +1,9 @@
+<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>

angular1/components/delta/delta.js

@@ -0,0 +1,17 @@
+
+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('openBCIFFT', function (data) {
+                var deltaRange = EEGSpectrumUtils.filterBand(data.data, data.labels, [0.5, 4]);
+                $timeout(function () {
+                    $ctrl.labels = deltaRange.labels;
+                    $ctrl.data = deltaRange.spectrums;
+                });
+            });
+        }
+    });

angular1/components/frequency/frequency.html

@@ -0,0 +1,10 @@
+<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>

angular1/components/frequency/frequency.js

@@ -0,0 +1,16 @@
+
+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('openBCIFFT', function (data) {
+                $timeout(function () {
+                    $ctrl.data = data.data;
+                    $ctrl.labels = data.labels;
+                });
+            });
+        }
+    });

angular1/components/line/line.html

@@ -0,0 +1,12 @@
+<section>
+    <h2>{{ $ctrl.title }}</h2>
+    <canvas id="frequency"
+            width="{{ $ctrl.width }}"
+            height="{{ $ctrl.height }}"
+            class="chart chart-line"
+            chart-data="$ctrl.data"
+            chart-labels="$ctrl.labels"
+            chart-series="$ctrl.series"
+            chart-options="{ responsive: true }">
+    </canvas>
+</section>

angular1/components/line/line.js

@@ -0,0 +1,36 @@
+
+angular.module('openbciVisualizer')
+    .component('bciLine', {
+        bindings: {
+            title: '@',
+            width: '@',
+            height: '@',
+            range: '@',
+            colors: '@',
+            //data: '='
+        },
+        templateUrl: 'components/line/line.html',
+        controller: function ($timeout) {
+
+            var $ctrl = this;
+            var socket = io();
+
+            $ctrl.series = $ctrl.series || ['Channel 1','Channel 2','Channel 3','Channel 4','Channel 5','Channel 6','Channel 7','Channel 8'];
+
+            if (angular.isUndefined($ctrl.data)) {
+
+                if (angular.isDefined($ctrl.range)) {
+                    var filteredRange = EEGSpectrumUtils.filterBand($ctrl.data.spectrums.data, $ctrl.data.spectrums.labels, $ctrl.range);
+                }
+
+                socket.on('openBCIData', function (data) {
+                    $timeout(function () {
+                        $ctrl.data = filteredRange ? filteredRange.spectrums.data : data.spectrums.data;
+                        $ctrl.labels = filteredRange ? filteredRange.spectrums.labels : data.spectrums.labels;
+                    });
+                });
+            }
+
+
+        }
+    });

angular1/components/theta/theta.html

@@ -0,0 +1,9 @@
+<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>

angular1/components/theta/theta.js

@@ -0,0 +1,17 @@
+
+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('openBCIFFT', function (data) {
+                var thetaRange = EEGSpectrumUtils.filterBand(data.data, data.labels, [4, 8]);
+                $timeout(function () {
+                    $ctrl.labels = thetaRange.labels;
+                    $ctrl.data = thetaRange.spectrums;
+                });
+            });
+        }
+    });

angular1/components/time/time.html

@@ -0,0 +1,10 @@
+<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>

angular1/components/time/time.js

@@ -0,0 +1,17 @@
+
+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('openBCISeries', function (data) {
+                $timeout(function () {
+                    console.log(data);
+                    $ctrl.labels = data.labels;
+                    $ctrl.data = data.data;
+                });
+            });
+        }
+    });

angular1/index.html

@@ -0,0 +1,58 @@
+<!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/line/line.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>
+
+            <bci-line-chart data="" filtered="[0.5,4]" width="500" height="500" colors="['#ffff']" title="Alpha"></bci-line-chart>
+
+        </main>
+
+    </body>
+</html>

angular1/lib/EEGSpectrumUtils.js

@@ -0,0 +1,28 @@
+
+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
+        }
+    }
+};

angular1/visualizer.js

@@ -0,0 +1,14 @@
+
+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
+        });
+    });

app/app.js

@@ -0,0 +1,41 @@
+System.register(['angular2/core', './components/chart/chart.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, chart_component_1;
+    var AppComponent;
+    return {
+        setters:[
+            function (core_1_1) {
+                core_1 = core_1_1;
+            },
+            function (chart_component_1_1) {
+                chart_component_1 = chart_component_1_1;
+            }],
+        execute: function() {
+            AppComponent = (function () {
+                function AppComponent() {
+                }
+                AppComponent = __decorate([
+                    core_1.Component({
+                        selector: 'bci-visualizer',
+                        template: '<section><h1>BCI Visualizer</h1><bci-chart></bci-chart></section>',
+                        directives: [chart_component_1.ChartComponent]
+                    }), 
+                    __metadata('design:paramtypes', [])
+                ], AppComponent);
+                return AppComponent;
+            }());
+            exports_1("AppComponent", AppComponent);
+        }
+    }
+});
+//# sourceMappingURL=app.js.map

app/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sourceRoot":"","sources":["app.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;YASA;gBACI;gBAEA,CAAC;gBATL;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,gBAAgB;wBAC1B,QAAQ,EAAE,mEAAmE;wBAC7E,UAAU,EAAE,CAAC,gCAAc,CAAC;qBAC/B,CAAC;;gCAAA;gBAMF,mBAAC;YAAD,CAAC,AAJD,IAIC;YAJD,uCAIC,CAAA"}

app/app.ts

@@ -0,0 +1,14 @@
+import {Component} from 'angular2/core';
+import {ChartComponent} from './components/chart/chart.component'
+
+@Component({
+    selector: 'bci-visualizer',
+    template: '<section><h1>BCI Visualizer</h1><bci-chart></bci-chart></section>',
+    directives: [ChartComponent]
+})
+
+export class AppComponent {
+    constructor () {
+
+    }
+}

app/components/alpha/alpha.html

@@ -1,11 +0,0 @@
-<section ng-class="{ loading: !$ctrl.data }">
-    <h2>Alpha</h2>
-    <canvas id="alpha"
-            class="chart chart-bar"
-            chart-data="$ctrl.data"
-            chart-labels="$ctrl.channels"
-            chart-series="$ctrl.channels"
-            chart-options="$ctrl.options"
-            chart-colours="$ctrl.colors">
-    </canvas>
-</section>

app/components/alpha/alpha.js

@@ -1,45 +0,0 @@
-
-(function () {
-
-    var BCIAlpha = {
-        templateUrl: 'components/alpha/alpha.html',
-        bindings: {
-            eventName: '@'
-        },
-        controller: function ($timeout) {
-
-            var $ctrl = this;
-
-            var socket = io();
-
-            $ctrl.colors = [
-                { fillColor: 'rgba(112,185,252,1)' }
-            ];
-
-            $ctrl.channels = ['CH1','CH2','CH3','CH4','CH5','CH6','CH7','CH8'];
-
-            $ctrl.options = {
-                responsive: true,
-                animation: true,
-                animationSteps: 15
-            };
-
-            socket.on($ctrl.eventName, function (data) {
-                $timeout(function () {
-                    $ctrl.labels = data.labels;
-                    $ctrl.data = data.alpha;
-                });
-            });
-
-            $ctrl.$onDestroy = function () {
-                socket.removeListener($ctrl.eventName);
-            };
-
-        }
-    };
-
-    angular
-        .module('bciDashboard')
-        .component('bciAlpha', BCIAlpha);
-
-})();

app/components/beta/beta.html

@@ -1,11 +0,0 @@
-<section ng-class="{ loading: !$ctrl.data }">
-    <h2>Beta</h2>
-    <canvas id="beta"
-            class="chart chart-bar"
-            chart-data="$ctrl.data"
-            chart-labels="$ctrl.channels"
-            chart-series="$ctrl.channels"
-            chart-options="$ctrl.options"
-            chart-colours="$ctrl.colors">
-    </canvas>
-</section>

app/components/beta/beta.js

@@ -1,45 +0,0 @@
-
-(function () {
-
-    var BCIBeta = {
-        templateUrl: 'components/beta/beta.html',
-        bindings: {
-            eventName: '@'
-        },
-        controller: function ($timeout) {
-
-            var $ctrl = this;
-
-            var socket = io();
-
-            $ctrl.colors = [
-                { fillColor: 'rgba(138,219,229,1)' }
-            ];
-
-            $ctrl.channels = ['CH1','CH2','CH3','CH4','CH5','CH6','CH7','CH8'];
-
-            $ctrl.options = {
-                responsive: true,
-                animation: true,
-                animationSteps: 15
-            };
-
-            socket.on($ctrl.eventName, function (data) {
-                $timeout(function () {
-                    $ctrl.labels = data.labels;
-                    $ctrl.data = data.beta;
-                });
-            });
-
-            $ctrl.$onDestroy = function () {
-                socket.removeListener($ctrl.eventName);
-            };
-
-        }
-    };
-
-    angular
-        .module('bciDashboard')
-        .component('bciBeta', BCIBeta);
-
-})();

app/components/chart/chart.component.js

@@ -0,0 +1,73 @@
+System.register(['angular2/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 ChartComponent;
+    return {
+        setters:[
+            function (core_1_1) {
+                core_1 = core_1_1;
+            }],
+        execute: function() {
+            ChartComponent = (function () {
+                function ChartComponent() {
+                    this.io = io;
+                    this.socket = this.io('http://localhost:8080');
+                    this.Chart = Chart;
+                    this.chart = null;
+                    this.options = {
+                        title: 'Frequency Plot',
+                        curveType: 'function',
+                        legend: { position: 'bottom' },
+                        vAxis: {
+                            viewWindowMode: 'explicit',
+                            viewWindow: {
+                                max: 100,
+                                min: 99.8
+                            }
+                        }
+                    };
+                    //this.google = google;
+                }
+                ChartComponent.prototype.drawChart = function (data) {
+                    if (!data)
+                        return;
+                    data = google.visualization.arrayToDataTable(data);
+                    this.chart.draw(data, this.options);
+                };
+                ChartComponent.prototype.ngAfterViewInit = function () {
+                    var _this = this;
+                    google.charts.load('current', { 'packages': ['line'] });
+                    google.charts.setOnLoadCallback(function () {
+                        _this.chart = new google.charts.Line(document.getElementById('chart'));
+                    });
+                    this.socket.on('openBCIFFT', function (data) {
+                        if (_this.chart !== null) {
+                            _this.chart.draw(google.visualization.arrayToDataTable(data));
+                        }
+                        console.log('data', data);
+                    });
+                };
+                ChartComponent = __decorate([
+                    core_1.Component({
+                        selector: 'bci-chart',
+                        templateUrl: 'app/components/chart/chart.html'
+                    }), 
+                    __metadata('design:paramtypes', [])
+                ], ChartComponent);
+                return ChartComponent;
+            }());
+            exports_1("ChartComponent", ChartComponent);
+        }
+    }
+});
+//# sourceMappingURL=chart.component.js.map

app/components/chart/chart.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.component.js","sourceRoot":"","sources":["chart.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;YAaA;gBAUI;oBACI,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;oBACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC;oBAC/C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;oBAEnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;oBAClB,IAAI,CAAC,OAAO,GAAG;wBACX,KAAK,EAAE,gBAAgB;wBACvB,SAAS,EAAE,UAAU;wBACrB,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;wBAC9B,KAAK,EAAE;4BACH,cAAc,EAAC,UAAU;4BACzB,UAAU,EAAE;gCACR,GAAG,EAAE,GAAG;gCACR,GAAG,EAAE,IAAI;6BACZ;yBACJ;qBACJ,CAAC;oBACF,uBAAuB;gBAC3B,CAAC;gBAED,kCAAS,GAAT,UAAW,IAAI;oBACX,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;wBAAC,MAAM,CAAC;oBAClB,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;oBACnD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;gBACxC,CAAC;gBAED,wCAAe,GAAf;oBAAA,iBAcC;oBAZG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,EAAC,UAAU,EAAC,CAAC,MAAM,CAAC,EAAC,CAAC,CAAC;oBACrD,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC;wBAC5B,KAAI,CAAC,KAAK,GAAG,IAAI,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;oBAC1E,CAAC,CAAC,CAAC;oBAEH,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,YAAY,EAAE,UAAC,IAAI;wBAC9B,EAAE,CAAC,CAAC,KAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC;4BACtB,KAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;wBACjE,CAAC;wBACD,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;oBAC9B,CAAC,CAAC,CAAC;gBAEP,CAAC;gBAxDL;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,WAAW;wBACrB,WAAW,EAAE,iCAAiC;qBACjD,CAAC;;kCAAA;gBAsDF,qBAAC;YAAD,CAAC,AApDD,IAoDC;YApDD,2CAoDC,CAAA"}

app/components/chart/chart.component.ts

@@ -0,0 +1,66 @@
+import {Component} from 'angular2/core';
+//import io  from 'socket.io-client';
+//import Chart from 'chart.js';
+
+declare var google: any;
+declare var io: any;
+declare var Chart: any;
+
+@Component({
+    selector: 'bci-chart',
+    templateUrl: 'app/components/chart/chart.html'
+})
+
+export class ChartComponent {
+
+    google: any;
+    io: any;
+    Chart: any;
+    socket: any;
+    chart: any;
+    options: any;
+
+
+    constructor () {
+        this.io = io;
+        this.socket = this.io('http://localhost:8080');
+        this.Chart = Chart;
+
+        this.chart = null;
+        this.options = {
+            title: 'Frequency Plot',
+            curveType: 'function',
+            legend: { position: 'bottom' },
+            vAxis: {
+                viewWindowMode:'explicit',
+                viewWindow: {
+                    max: 100,
+                    min: 99.8
+                }
+            }
+        };
+        //this.google = google;
+    }
+
+    drawChart (data) {
+        if (!data) return;
+        data = google.visualization.arrayToDataTable(data);
+        this.chart.draw(data, this.options);
+    }
+
+    ngAfterViewInit () {
+
+        google.charts.load('current', {'packages':['line']});
+        google.charts.setOnLoadCallback(() => {
+            this.chart = new google.charts.Line(document.getElementById('chart'));
+        });
+
+        this.socket.on('openBCIFFT', (data) => {
+            if (this.chart !== null) {
+                this.chart.draw(google.visualization.arrayToDataTable(data));
+            }
+            console.log('data', data);
+        });
+
+    }
+}

app/components/chart/chart.html

@@ -0,0 +1 @@
+<div id="chart" style="width: 900px; height: 500px"></div>

app/components/delta/delta.html

@@ -1,11 +0,0 @@
-<section ng-class="{ loading: !$ctrl.data }">
-    <h2>Delta</h2>
-    <canvas id="delta"
-            class="chart chart-bar"
-            chart-data="$ctrl.data"
-            chart-labels="$ctrl.channels"
-            chart-series="$ctrl.channels"
-            chart-options="$ctrl.options"
-            chart-colours="$ctrl.colors">
-    </canvas>
-</section>

app/components/delta/delta.js

@@ -1,46 +0,0 @@
-
-(function () {
-
-    var BCIDelta = {
-        templateUrl: 'components/delta/delta.html',
-        bindings: {
-            eventName: '@'
-        },
-        controller: function ($timeout) {
-
-            var $ctrl = this;
-
-            var socket = io();
-
-            $ctrl.colors = [
-                { fillColor: 'rgba(162,86,178,1)' }
-            ];
-
-            $ctrl.channels = ['CH1','CH2','CH3','CH4','CH5','CH6','CH7','CH8'];
-
-            $ctrl.options = {
-                responsive: true,
-                animation: true,
-                animationSteps: 15,
-                scaleOverride: true
-            };
-
-            socket.on($ctrl.eventName, function (data) {
-                $timeout(function () {
-                    $ctrl.labels = data.labels;
-                    $ctrl.data = data.delta;
-                });
-            });
-
-            $ctrl.$onDestroy = function () {
-                socket.removeListener($ctrl.eventName);
-            };
-
-        }
-    };
-
-    angular
-        .module('bciDashboard')
-        .component('bciDelta', BCIDelta);
-
-})();

app/components/frequency/frequency.html

@@ -1,12 +0,0 @@
-<section ng-class="{ loading: !$ctrl.data }">
-    <h2>Frequency <span class="frequency-type">{{ $ctrl.type }}</span></h2>
-    <canvas id="frequency"
-            class="chart-base"
-            chart-type="$ctrl.type"
-            chart-data="$ctrl.data"
-            chart-labels="$ctrl.labels"
-            chart-series="$ctrl.channels"
-            chart-options="$ctrl.options"
-            chart-colours="$ctrl.colors">
-    </canvas>
-</section>

app/components/frequency/frequency.js

@@ -1,56 +0,0 @@
-
-(function () {
-
-    var BCIFrequency = {
-        templateUrl: 'components/frequency/frequency.html',
-        bindings: {
-            type: '@',
-            eventName: '@'
-        },
-        controller: function ($timeout) {
-
-            var $ctrl = this;
-
-            // Default chart type as fallback
-            $ctrl.type = $ctrl.type || 'line';
-
-            var socket = io();
-
-            $ctrl.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)' }
-            ];
-
-            $ctrl.options = {
-                responsive: true,
-                //animation: true,
-                animationSteps: 15
-            };
-
-            $ctrl.series = ['CH1','CH2','CH3','CH4','CH5','CH6','CH7','CH8'];
-
-            socket.on($ctrl.eventName, function (data) {
-                $timeout(function () {
-                    $ctrl.data = data.data;
-                    $ctrl.labels = data.labels;
-                });
-            });
-
-            $ctrl.$onDestroy = function () {
-                socket.removeListener($ctrl.eventName);
-            };
-
-        }
-    };
-
-    angular
-        .module('bciDashboard')
-        .component('bciFrequency', BCIFrequency);
-
-})();

app/components/theta/theta.html

@@ -1,11 +0,0 @@
-<section ng-class="{ loading: !$ctrl.data }">
-    <h2>Theta</h2>
-    <canvas id="theta"
-            class="chart chart-bar"
-            chart-data="$ctrl.data"
-            chart-labels="$ctrl.channels"
-            chart-series="$ctrl.channels"
-            chart-options="$ctrl.options"
-            chart-colours="$ctrl.colors">
-    </canvas>
-</section>

app/components/theta/theta.js

@@ -1,45 +0,0 @@
-
-(function () {
-
-    var BCITheta = {
-        templateUrl: 'components/theta/theta.html',
-        bindings: {
-            eventName: '@'
-        },
-        controller: function ($timeout) {
-
-            var $ctrl = this;
-
-            var socket = io();
-
-            $ctrl.colors = [
-                { fillColor: 'rgba(144,132,246,1)' }
-            ];
-
-            $ctrl.channels = ['CH1','CH2','CH3','CH4','CH5','CH6','CH7','CH8'];
-
-            $ctrl.options = {
-                responsive: true,
-                animation: true,
-                animationSteps: 15
-            };
-
-            socket.on($ctrl.eventName, function (data) {
-                $timeout(function () {
-                    $ctrl.labels = data.labels;
-                    $ctrl.data = data.theta;
-                });
-            });
-
-            $ctrl.$onDestroy = function () {
-                socket.removeListener($ctrl.eventName);
-            };
-
-        }
-    };
-
-    angular
-        .module('bciDashboard')
-        .component('bciTheta', BCITheta);
-
-})();

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

@@ -1,26 +0,0 @@
-<section class="time-series" ng-class="{ loading: !$ctrl.amplitudes }">
-    <h2>Time Series</h2>
-    <aside class="time-series-channels">
-        <ul>
-            <li ng-repeat="channel in $ctrl.channels track by $index"
-                ng-style="{ 'color': $ctrl.colors[$index].strokeColor }">
-                {{ channel }}
-            </li>
-        </ul>
-    </aside>
-    <canvas id="timeSeries" width="950" height="450"></canvas>
-    <aside class="time-series-amplitudes">
-        <ul>
-            <li ng-repeat="amplitude in $ctrl.amplitudes track by $index"
-                ng-style="{ 'color': $ctrl.colors[$index].strokeColor }">
-                {{ amplitude }}
-            </li>
-        </ul>
-    </aside>
-    <footer class="time-series-duration">
-        <time ng-repeat="time in $ctrl.timeline track by $index"
-              datetime="P1M">
-            {{ time }}
-        </time>
-    </footer>
-</section>

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

@@ -1,88 +0,0 @@
-
-(function () {
-
-    angular
-        .module('bciDashboard')
-        .directive('bciTimeSeries', bciTimeSeries);
-
-    function bciTimeSeries() {
-
-        var timeSeries = new SmoothieChart({
-            millisPerLine: 3000,
-            grid: {
-                fillStyle: '#333333',
-                strokeStyle: 'rgba(0,0,0,0.1)',
-                sharpLines: false,
-                verticalSections: 8,
-                borderVisible: true
-            },
-            labels: {
-                disabled: true
-            },
-            maxValue: 8 * 2,
-            minValue: 0
-        });
-
-        return {
-            templateUrl: 'components/time-series/time-series.html',
-            scope: {
-                eventName: '@'
-            },
-            bindToController: true,
-            controllerAs: '$ctrl',
-            controller: function ($timeout) {
-
-                var $ctrl = this;
-
-                var socket = io();
-
-                $ctrl.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)'  }
-                ];
-
-                $ctrl.channels = ['CH1','CH2','CH3','CH4','CH5','CH6','CH7','CH8'];
-
-                // Construct time series array with 8 lines
-                var lines = Array(8).fill().map(function () {
-                    return new TimeSeries();
-                });
-
-                lines.forEach(function (line, index) {
-                    timeSeries.addTimeSeries(line, { strokeStyle: $ctrl.colors[index].strokeColor });
-                });
-
-                socket.on($ctrl.eventName, function (data) {
-
-                    $timeout(function () {
-                        $ctrl.amplitudes = data.amplitudes;
-                        $ctrl.timeline = data.timeline;
-                    });
-
-                    lines.forEach(function (line, index) {
-                        data.data[index].forEach(function (amplitude) {
-                            line.append(new Date().getTime(), amplitude);
-                        });
-                    });
-
-                });
-
-                $ctrl.$onDestroy = function () {
-                    socket.removeListener($ctrl.eventName);
-                };
-
-            },
-            link: function (scope, element) {
-                // 200 = 50 samples * 4 milliseconds (sample rate)
-                timeSeries.streamTo(element[0].querySelector('canvas'), 40);
-            }
-        }
-    }
-
-})();

app/components/topo/topo.css

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

app/components/topo/topo.html

@@ -1,19 +0,0 @@
-<section ng-class="{ loading: !$ctrl.grid }">
-    <h2>Topo</h2>
-    <section class="topoplot-wrapper">
-
-      <article class="topoplot-c1 top left"></article>
-      <article class="topoplot-c2 top right"></article>
-      <article class="topoplot-c3 middle left"></article>
-      <article class="topoplot-c4 middle right"></article>
-      <article class="topoplot-c5 third left"></article>
-      <article class="topoplot-c6 third right"></article>
-      <article class="topoplot-c7 bottom left"></article>
-      <article class="topoplot-c8 bottom right"></article>
-
-      <aside class="topoplot-grid">
-        <div ng-repeat="pixel in $ctrl.grid track by $index" ng-style="$ctrl.getColor($index,pixel,$ctrl.grid)" ng-class="$ctrl.getClass($index)"></div>
-      </aside>
-
-    </section>
-</section>

app/components/topo/topo.js

@@ -1,44 +0,0 @@
-
-(function () {
-
-    var BCITopo = {
-        templateUrl: 'components/topo/topo.html',
-        bindings: {
-            eventName: '@'
-        },
-        controller: function ($timeout) {
-
-            var $ctrl = this;
-
-            var socket = io();
-
-            $ctrl.getClass = function(index){
-                return 'topoplot-u' + index
-            };
-
-            $ctrl.getColor = function(index,pixel,grid){
-                var min = Math.min.apply(Math,grid);
-                var max = Math.max.apply(Math,grid);
-                var f = chroma.scale('Spectral').domain([min,max]);
-                return {'background-color': f(pixel)}
-            };
-
-            socket.on($ctrl.eventName, function (data) {
-                $timeout(function () {
-                    $ctrl.grid = data.data;
-
-                });
-            });
-
-            $ctrl.$onDestroy = function () {
-                socket.removeListener($ctrl.eventName);
-            };
-
-        }
-    };
-
-    angular
-        .module('bciDashboard')
-        .component('bciTopo', BCITopo);
-
-})();

app/index.html

@@ -1,72 +0,0 @@
-<!doctype html>
-<html ng-app="bciDashboard">
-    <head>
-        <title>BCI Dashboard</title>
-
-        <link rel="stylesheet" href="visualizer.css">
-        <link rel="stylesheet" href="components/topo/topo.css">
-
-        <script src="node_modules/socket.io-client/socket.io.js"></script>
-        <script src="node_modules/smoothie/smoothie.js"></script>
-
-        <script src="node_modules/angular/angular.js"></script>
-        <script src="node_modules/chart.js/dist/Chart.js"></script>
-        <script src="node_modules/angular-chart.js/dist/angular-chart.js"></script>
-
-        <script src="visualizer.js"></script>
-
-        <script src="lib/chroma.min.js"></script>
-
-        <script src="components/frequency/frequency.js"></script>
-        <script src="components/time-series/time-series.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>
-        <script src="components/topo/topo.js"></script>
-
-    </head>
-    <body>
-
-        <main>
-
-            <h1>BCI Dashboard</h1>
-
-            <nav ng-init="mode = 'timeSeries'">
-                <button ng-click="mode = 'timeSeries'">Time Series</button>
-                <button ng-click="mode = 'frequency'">Frequency</button>
-                <button ng-click="mode = 'frequencyRadar'">Frequency Radar</button>
-                <button ng-click="mode = 'filtered'">Frequency Bands</button>
-                <button ng-click="mode = 'topo'">Topo</button>
-            </nav>
-
-            <section class="row" ng-if="mode == 'timeSeries'">
-                <bci-time-series event-name="bci:time" class="block block-75"></bci-time-series>
-            </section>
-
-            <section class="row" ng-if="mode == 'frequency'">
-                <bci-frequency type="line" event-name="bci:fft" class="block block-75"></bci-frequency>
-            </section>
-
-            <section class="row" ng-if="mode == 'frequencyRadar'">
-                <bci-frequency type="radar" event-name="bci:fft" class="block block-75"></bci-frequency>
-            </section>
-
-            <section class="row" ng-if="mode == 'filtered'">
-                <bci-delta event-name="bci:fft"  class="block block-33"></bci-delta>
-                <bci-theta event-name="bci:fft"  class="block block-33"></bci-theta>
-            </section>
-
-            <section class="row" ng-if="mode == 'filtered'">
-                <bci-alpha event-name="bci:fft"  class="block block-33"></bci-alpha>
-                <bci-beta event-name="bci:fft"  class="block block-33"></bci-beta>
-            </section>
-
-            <section class="row" ng-if="mode == 'topo'">
-                <bci-topo event-name="bci:topo"  class="block block-50"></bci-topo>
-            </section>
-
-        </main>
-
-    </body>
-</html>

app/main.js

@@ -0,0 +1,18 @@
+System.register(['angular2/platform/browser', './app'], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var browser_1, app_1;
+    return {
+        setters:[
+            function (browser_1_1) {
+                browser_1 = browser_1_1;
+            },
+            function (app_1_1) {
+                app_1 = app_1_1;
+            }],
+        execute: function() {
+            browser_1.bootstrap(app_1.AppComponent);
+        }
+    }
+});
+//# sourceMappingURL=main.js.map

app/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":";;;;;;;;;;;;;YAIA,mBAAS,CAAC,kBAAY,CAAC,CAAC"}

app/main.ts

@@ -0,0 +1,5 @@
+
+import { bootstrap } from 'angular2/platform/browser'
+import { AppComponent } from './app';
+
+bootstrap(AppComponent);

app/visualizer.css

@@ -1,190 +0,0 @@
-
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 300;
-  color: #ffffff;
-  background-color: #222222;
-  margin: 0;
-}
-
-h1 {
-  margin: 20px;
-  font-weight: 300;
-}
-
-.loading:after {
-  content: 'Loading...';
-  text-transform: uppercase;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: -10px 0 0 -40px;
-  font-size: 12px;
-}
-
-nav {
-  margin-left: 20px;
-}
-
-
-button {
-  appearance: none;
-  -webkit-appearance: none;
-  border: 0;
-  background: transparent;
-  color: #ffffff;
-  padding: 8px 20px;
-  text-transform: uppercase;
-  font-family: 'Roboto', sans-serif;
-  font-weight: 300;
-  font-size: 12px;
-  letter-spacing: 1px;
-  margin-right: 2px;
-  cursor: pointer;
-  outline: none;
-}
-
-button:hover {
-  opacity: 0.8;
-}
-
-nav button:nth-child(1) {
-  background-color: rgba(112,185,252,1);
-}
-
-nav button:nth-child(2) {
-  background-color: rgba(138,219,229,1);
-}
-
-nav button:nth-child(3) {
-  background-color: rgba(162,86,178,1);
-}
-
-nav button:nth-child(4) {
-  background-color: rgba(144,132,246,1);
-}
-
-nav button:nth-child(5) {
-  background-color: rgba(232,223,133,1);
-  color: #000000;
-}
-
-nav button:nth-child(6) {
-  background-color: rgba(148,159,177,1);
-}
-
-.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;
-  height: 100%;
-  overflow: hidden;
-}
-
-.block h2 {
-  position: absolute;
-  margin: 0;
-  top: 10px;
-  right: 20px;
-  font-weight: 300;
-}
-
-.block-25 {
-  width: 25%;
-  min-height: 200px;
-}
-
-.block-33 {
-  width: 33%;
-  min-height: 260px;
-}
-
-.block-50 {
-  width: 50%;
-  min-height: 400px;
-}
-
-.block-75 {
-  width: 75%;
-  min-height: 580px;
-}
-
-.block-100 {
-  width: 100%;
-  min-height: 580px;
-}
-
-.time-series canvas {
-  margin: 40px 80px 40px 40px;
-}
-
-.time-series-channels,
-.time-series-amplitudes {
-  position: absolute;
-  top: 60px;
-  height: 450px;
-  color: rgba(102,102,102,1);
-  font-size: 12px;
-}
-
-.time-series-channels {
-  width: 40px;
-  left: 20px;
-  text-align: left;
-  color: #000000;
-  font-weight: 500;
-}
-
-.time-series-amplitudes {
-  right: 20px;
-  text-align: right;
-}
-
-.time-series-channels ul {
-  width: 100%;
-}
-
-.time-series-channels li {
-  width: 100%;
-  height: 100%;
-  padding-top: 20px;
-}
-
-.time-series-channels ul,
-.time-series-amplitudes ul {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-around;
-  flex-direction: column;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.time-series-duration {
-  position: absolute;
-  left: 50px;
-  width: 98%;
-  bottom: 22px;
-  display: flex;
-  color: rgba(102,102,102,1);
-  font-size: 12px;
-}
-
-.time-series-duration time {
-  width: 20%;
-}

app/visualizer.js

@@ -1,29 +0,0 @@
-
-(function () {
-
-    angular
-        .module('bciDashboard', ['chart.js'])
-        .config(bciDashboardConfig);
-
-    function bciDashboardConfig (ChartJsProvider) {
-        //ChartJsProvider.setOptions({
-        //    animation: false,
-        //    responsive: true,
-        //    datasetStrokeWidth: 1,
-        //    pointDot: false,
-        //    pointDotRadius: 1,
-        //    pointDotStrokeWidth: 0,
-        //    datasetFill: false,
-        //    scaleOverride: true,
-        //    scaleStartValue: -2,
-        //    scaleStepWidth: 1,
-        //    scaleSteps: 6,
-        //    barShowStroke: false,
-        //    barValueSpacing: 1,
-        //    barShowStroke: true,
-        //    barStrokeWidth: 1,
-        //    strokeColor: 'rgba(116,150,161,1)'
-        //});
-    }
-
-})();

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 type="text/javascript" src="//www.gstatic.com/charts/loader.js"></script>
+
+    <!-- 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-visualizer>Loading...</bci-visualizer>
+</body>
+</html>

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "openbci-dashboard",
+  "name": "openbci-visualizer",
   "private": false,
   "version": "0.0.1",
   "description": "A fullstack javascript app for capturing and visualizing OpenBCI EEG data",
@@ -11,20 +11,37 @@
     "chartjs"
   ],
   "author": "Alex Castillo",
-  "scripts": {},
+  "scripts": {
+    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"node visualizer\" ",
+    "simulate": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"node 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.5",
-    "angular-chart.js": "^1.0.0-alpha6",
-    "chart.js": "^2.0.2",
-    "dsp.js": "neurojs/dsp.js",
+    "angular2": "2.0.0-beta.14",
+    "chart.js": "^2.0.0",
+    "dsp.js": "github:neurojs/dsp.js",
+    "es6-shim": "^0.35.0",
     "express": "^4.13.4",
-    "jstat": "^1.5.2",
     "nodemon": "^1.9.1",
-    "openbci-sdk": "^0.3.4",
-    "smoothie": "^1.27.0",
+    "openbci-sdk": "^0.3.0",
+    "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-beta.2",
     "socket.io": "^1.4.5",
     "socket.io-client": "^1.4.5",
-    "topogrid": "^1.0.6",
-    "yargs": "^4.3.2"
+    "systemjs": "0.19.25",
+    "yargs": "^4.3.2",
+    "zone.js": "0.6.6"
+  },
+  "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,32 +1,12 @@
-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 topogrid = require('topogrid');
-var jStat = require('jstat').jStat;
-
-var globalScale = 1.5;
+var io = require('socket.io')(8080);
 
 // Sockets
-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');
+io.on('connection', (socket) => {
+    console.log('A socket connected');
 });
 
 // OpenBCI
@@ -36,16 +16,16 @@ var board = new OpenBCIBoard.OpenBCIBoard({
 
 board.autoFindOpenBCIBoard()
     .then(onBoardFind)
-    .catch(function () {
+    .catch(() => {
         if (!!(argv._[0] && argv._[0] === 'simulate')) {
-            globalScale = 4;
             board.connect(OpenBCIBoard.OpenBCIConstants.OBCISimulatorPortName)
                 .then(onBoardConnect);
         }
     });
 
 // Board find handler
-function onBoardFind (portName) {if (portName) {
+function onBoardFind (portName) {
+    if (portName) {
         console.log('board found', portName);
         board.connect(portName)
             .then(onBoardConnect);
@@ -65,42 +45,40 @@ function onBoardReady () {
 
 var bins = 128; // Approx .5 second
 var bufferSize = 128;
-var windowRefreshRate = 8;
+var windowRefreshRate = 64;
 var windowSize = bins / windowRefreshRate;
 var sampleRate = board.sampleRate();
-var sampleInterval = (1 / sampleRate) * 1000; // in milliseconds (4)
 var sampleNumber = 0;
 var signals = [[],[],[],[],[],[],[],[]];
 
-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 = generateTimeline(20, 2, 's');
-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
+//var timeSeriesWindow = 5;
+//var seriesNumber = 0;
+//var timeSeries = new Array(8).fill([]); // 8 channels
+//
+//timeSeries = timeSeries.map(function (channel) {
+//    return new Array(sampleRate * timeSeriesWindow).fill(0)
+//});
 
+var chartData = [
+    ['Channels', 'Channel 1', 'Channel 2', 'Channel 3', 'Channel 4', 'Channel 5', 'Channel 6', 'Channel 7', 'Channel 8']
+];
 
 function onSample (sample) {
 
-    sampleNumber++;
+    //[['Channels', 'Channel 1', 'Channel 2', 'Channel 3', 'Channel 4', 'Channel 5', 'Channel 6', 'Channel 7', 'Channel 8'],
+    //['0hz',  1000,      400],
+    //['25hz',  1170,      460],
+    //['35hz',  660,       1120],
+    //['64hz',  1030,      540]]
 
-    console.log('sample', sample);
+    //console.log('sample', sample);
+    sampleNumber++;
 
     Object.keys(sample.channelData).forEach(function (channel, i) {
         signals[i].push(sample.channelData[channel]);
     });
 
+    // FFT
     if (sampleNumber === bins) {
 
         var spectrums = [[],[],[],[],[],[],[],[]];
@@ -112,91 +90,56 @@ function onSample (sample) {
             spectrums[index] = voltsToMicrovolts(spectrums[index], true);
         });
 
+        var scaler = sampleRate / bins;
+
         var labels = new Array(bins / 2).fill()
-            // Apply scaler
-            .map(function (label, index) {
-                return Math.ceil(index * (sampleRate / bins));
+            .map(function (x, i) {
+                return Math.ceil(i * scaler);
             });
 
-        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])
-        }
-
-        // Skip every 4, add unit
-        labels = labels.map(function (label, index, labels) {
-            return (index % 4 === 0 || index === (labels.length - 1)) ? label + ' Hz' : '';
+        labels.forEach(function (frequency) {
+            chartData.push([frequency]);
         });
 
-        io.emit('bci:fft', {
-            data: spectrums,
-            theta: spectrumsByBand.theta.spectrums,
-            delta: spectrumsByBand.delta.spectrums,
-            alpha: spectrumsByBand.alpha.spectrums,
-            beta: spectrumsByBand.beta.spectrums,
-            labels: labels
+        spectrums.forEach(function (channel) {
+            channel.forEach(function (spectrum, index) {
+                chartData[index + 1].push(spectrum);
+            });
         });
 
+        io.emit('openBCIFFT', chartData);
+
+        chartData = [
+            ['Channels', 'Channel 1', 'Channel 2', 'Channel 3', 'Channel 4', 'Channel 5', 'Channel 6', 'Channel 7', 'Channel 8']
+        ];
+
         signals = signals.map(function (channel) {
             return channel.filter(function (signal, index) {
                 return index > (windowSize - 1);
             });
         });
 
-        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(voltsToMicrovolts(sample.channelData[index]));
+    //    channel.shift();
+    //});
 
-    timeSeries.forEach(function (channel, index) {
-        channel.push(
-            offsetForGrid(sample.channelData[index], index)
-        );
-        channel.shift();
-    });
+    //seriesNumber++;
 
-    if (seriesNumber === timeSeriesRate) {
+    //// Time Series
+    //if (seriesNumber === 2) {
+    //    io.emit('openBCISeries', {
+    //        data: timeSeries,
+    //        labels: new Array(1250).fill(0)
+    //    });
+    //    seriesNumber = 0;
+    //}
 
-        var amplitudes = signals.map(function (channel) {
-            return (Math.round(voltsToMicrovolts(channel[channel.length - 1])[0])) + ' uV';
-        });
 
-        io.emit('bci:time', {
-            data: timeSeries,
-            amplitudes: amplitudes,
-            timeline: timeline
-        });
-
-        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) {
@@ -214,59 +157,21 @@ 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
-    }
-}
-
-/**
- * generateTimeline
- * @param size
- * @param skip
- * @param suffix
- * @returns {Array.<T>}
- */
-function generateTimeline (size, skip, suffix) {
-    return new Array(size)
-        .fill()
-        .map(function (value, index) {
-            return index;
-        })
-        .filter(function (value, index) {
-            return index % skip === 0;
-        })
-        .map(function (value) {
-            return (value ? '-' : '') + value + suffix;
-        })
-        .reverse();
-}
-
 /**
  * disconnectBoard
  */
 function disconnectBoard () {
     board.streamStop()
         .then(function () {
-            board.disconnect().then(function () {
-                console.log('board disconnected');
-                process.exit();
-            });
+            setTimeout(function () {
+                board.disconnect().then(function () {
+                    console.log('board disconnected');
+                    process.exit();
+                });
+            }, 50);
         });
 }
 
-process.on('SIGINT', disconnectBoard);
+process.on('SIGINT', function () {
+    setTimeout(disconnectBoard, 50);
+});