wellton/openbci-dashboard
1
0
Fork 0
Código Issues Pull Requests Ações Pacotes Projetos Versões Wiki Atividade

Angular 2 + Google Charts

Ver Código-Fonte
Esse commit está contido em:
Alex Castillo
2016-04-15 15:07:57 -04:00
pai 39ca0055ea
commit 41bab611f2
8 arquivos alterados com 148 adições e 99 exclusões
Baixar Arquivo de Patch Baixar Arquivo de Diff Expandir todos os arquivos Colapsar todos os arquivos
.gitignore
+2 -1
Ver Arquivo
@@ -1,2 +1,3 @@
.idea
node_modules
node_modules
npm-debug.log
app/components/chart/chart.component.js
+36 -2
Ver Arquivo
@@ -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
Ver Arquivo
@@ -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
+55 -53
Ver Arquivo
@@ -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
+1
Ver Arquivo
@@ -0,0 +1 @@
<div id="chart" style="width: 900px; height: 500px"></div>
index.html
+1 -6
Ver Arquivo
@@ -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
+1
Ver Arquivo
@@ -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
+51 -36
Ver Arquivo
@@ -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;
//}
}