Angular 2 + Google Charts

.gitignore

@@ -1,2 +1,3 @@
 .idea
-node_modules
+node_modules
+npm-debug.log

app/components/chart/chart.component.js

@@ -18,11 +18,45 @@ System.register(['angular2/core'], function(exports_1, context_1) {
                 core_1 = core_1_1;
             }],
         execute: function() {
-            // import 'io'
-            // import 'chart.js'
             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',

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

@@ -1 +1 @@
-{"version":3,"file":"chart.component.js","sourceRoot":"","sources":["chart.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;YACA,cAAc;YACd,oBAAoB;YAOpB;gBAAA;gBAsDA,CAAC;gBA3DD;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,WAAW;wBACrB,WAAW,EAAE,iCAAiC;qBACjD,CAAC;;kCAAA;gBAwDF,qBAAC;YAAD,CAAC,AAtDD,IAsDC;YAtDD,2CAsDC,CAAA"}
+{"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

@@ -1,6 +1,10 @@
 import {Component} from 'angular2/core';
-// import 'io'
-// import 'chart.js'
+//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',
@@ -9,56 +13,54 @@ import {Component} from 'angular2/core';
 
 export class ChartComponent {
 
+    google: any;
+    io: any;
+    Chart: any;
+    socket: any;
+    chart: any;
+    options: any;
 
-    //constructor () {
-    //    this.socket = io('http://localhost:8000');
-    //    this.chart = null;
-    //}
-    //
-    //ngOnInit () {
-    //
-    //    var chartElement = document.getElementById('chart');
-    //
-    //    var chartData = {
-    //        labels: [],
-    //        datasets: []
-    //    };
-    //
-    //    this.chart = new Chart(chartElement, {
-    //        type: 'line',
-    //        data: chartData,
-    //        options: {
-    //            scales: {
-    //                yAxes: [{
-    //                    ticks: {
-    //                        display: true,
-    //                        autoSkip: false,
-    //                        beginAtZero: false,
-    //                        min: -3,
-    //                        max: 3
-    //                    }
-    //                 }]
-    //            }
-    //        }
-    //    });
-    //
-    //    this.socket.on('openBCIFFT', (data) => {
-    //
-    //        console.log('data', data);
-    //
-    //        chartData.labels = data.labels;
-    //        chartData.datasets = [];
-    //        data.data.forEach(function (dataset, index) {
-    //            chartData.datasets.push({
-    //                label: 'Channel ' + (index + 1),
-    //                data: dataset,
-    //                fill: false,
-    //                tension: 0,
-    //            });
-    //        });
-    //
-    //        this.chart.update();
-    //    });
-    //
-    //}
+
+    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>

index.html

@@ -6,6 +6,7 @@
     <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 -->
@@ -30,13 +31,7 @@
                 .then(null, console.error.bind(console));
     </script>
 </head>
-<!-- 3. Display the application -->
 <body>
-
     <bci-visualizer>Loading...</bci-visualizer>
-
-    <canvas id="chart" width="400" height="400"></canvas>
-
-
 </body>
 </html>

package.json

@@ -13,6 +13,7 @@
   "author": "Alex Castillo",
   "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",

visualizer.js

@@ -1,19 +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 io = require('socket.io')(8080);
 
 // Sockets
-io.on('connection', function(socket) {
-    console.log('A user connected');
-});
-
-http.listen(8000, function () {
-    console.log('sockets on port 8000');
+io.on('connection', (socket) => {
+    console.log('A socket connected');
 });
 
 // OpenBCI
@@ -23,7 +16,7 @@ var board = new OpenBCIBoard.OpenBCIBoard({
 
 board.autoFindOpenBCIBoard()
     .then(onBoardFind)
-    .catch(function () {
+    .catch(() => {
         if (!!(argv._[0] && argv._[0] === 'simulate')) {
             board.connect(OpenBCIBoard.OpenBCIConstants.OBCISimulatorPortName)
                 .then(onBoardConnect);
@@ -31,7 +24,8 @@ board.autoFindOpenBCIBoard()
     });
 
 // Board find handler
-function onBoardFind (portName) {if (portName) {
+function onBoardFind (portName) {
+    if (portName) {
         console.log('board found', portName);
         board.connect(portName)
             .then(onBoardConnect);
@@ -51,23 +45,33 @@ function onBoardReady () {
 
 var bins = 128; // Approx .5 second
 var bufferSize = 128;
-var windowRefreshRate = 16;
+var windowRefreshRate = 64;
 var windowSize = bins / windowRefreshRate;
 var sampleRate = board.sampleRate();
 var sampleNumber = 0;
 var signals = [[],[],[],[],[],[],[],[]];
 
-var timeSeriesWindow = 5;
-var seriesNumber = 0;
-var timeSeries = new Array(8).fill([]); // 8 channels
+//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)
+//});
 
-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) {
 
-    console.log('sample', sample);
+    //[['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);
     sampleNumber++;
 
     Object.keys(sample.channelData).forEach(function (channel, i) {
@@ -93,11 +97,22 @@ function onSample (sample) {
                 return Math.ceil(i * scaler);
             });
 
-        io.emit('openBCIFFT', {
-            data: spectrums,
-            labels: labels
+        labels.forEach(function (frequency) {
+            chartData.push([frequency]);
         });
 
+        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);
@@ -108,21 +123,21 @@ function onSample (sample) {
 
     }
 
-    timeSeries.forEach(function (channel, index) {
-        channel.push(voltsToMicrovolts(sample.channelData[index]));
-        channel.shift();
-    });
+    //timeSeries.forEach(function (channel, index) {
+    //    channel.push(voltsToMicrovolts(sample.channelData[index]));
+    //    channel.shift();
+    //});
 
-    seriesNumber++;
+    //seriesNumber++;
 
-    // Time Series
-    if (seriesNumber === 2) {
-        io.emit('openBCISeries', {
-            data: timeSeries,
-            labels: new Array(1250).fill(0)
-        });
-        seriesNumber = 0;
-    }
+    //// Time Series
+    //if (seriesNumber === 2) {
+    //    io.emit('openBCISeries', {
+    //        data: timeSeries,
+    //        labels: new Array(1250).fill(0)
+    //    });
+    //    seriesNumber = 0;
+    //}
 
 
 }