migrate to angular2
Esse commit está contido em:
Alex Castillo
@@ -0,0 +1,3 @@
|
||||
Language: JavaScript
|
||||
BasedOnStyle: Google
|
||||
ColumnLimit: 100
|
||||
@@ -0,0 +1,14 @@
|
||||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = 0
|
||||
trim_trailing_whitespace = false
|
||||
+27
-2
@@ -1,3 +1,28 @@
|
||||
.idea
|
||||
node_modules
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
/dist
|
||||
/tmp
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/bower_components
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage/*
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# e2e
|
||||
/e2e/*.js
|
||||
/e2e/*.map
|
||||
|
||||
#System Files
|
||||
.DS_Store
|
||||
+3
-3
@@ -13,15 +13,15 @@ This project is under development, this is just a first draft.
|
||||
|
||||
```bash
|
||||
npm install
|
||||
node start
|
||||
npm run visualize
|
||||
```
|
||||
|
||||
* Go to: http://localhost:3060
|
||||
* Go to: http://localhost:4200
|
||||
|
||||
## Simulating data
|
||||
|
||||
```bash
|
||||
node run simulate
|
||||
npm run simulate
|
||||
```
|
||||
|
||||
## Support
|
||||
|
||||
externo
+21
@@ -0,0 +1,21 @@
|
||||
/* global require, module */
|
||||
|
||||
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
|
||||
|
||||
module.exports = function(defaults) {
|
||||
return new Angular2App(defaults, {
|
||||
vendorNpmFiles: [
|
||||
'socket.io-client/socket.io.js',
|
||||
'smoothie/smoothie.js',
|
||||
'chart.js/Chart.js',
|
||||
'ng2-charts/bundles/ng2-charts.js',
|
||||
'systemjs/dist/system-polyfills.js',
|
||||
'systemjs/dist/system.src.js',
|
||||
'zone.js/dist/*.js',
|
||||
'es6-shim/es6-shim.js',
|
||||
'reflect-metadata/*.js',
|
||||
'rxjs/**/*.js',
|
||||
'@angular/**/*.js'
|
||||
]
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"project": {
|
||||
"version": "0.1.0",
|
||||
"name": "clitest"
|
||||
},
|
||||
"apps": [
|
||||
{"main": "src/main.ts", "tsconfig": "src/tsconfig.json"}
|
||||
],
|
||||
"addons": [],
|
||||
"packages": [],
|
||||
"e2e": {
|
||||
"protractor": {
|
||||
"config": "config/protractor.conf.js"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"karma": {
|
||||
"config": "config/karma.conf.js"
|
||||
}
|
||||
},
|
||||
"defaults": {
|
||||
"prefix": "bci",
|
||||
"sourceDir": "src"
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
<section ng-class="{ loading: !$ctrl.data }">
|
||||
<h2 class="capitalize">{{ $ctrl.type }}</h2>
|
||||
<canvas id="frequency-band-{{ $ctrl.type }}"
|
||||
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>
|
||||
@@ -1,58 +0,0 @@
|
||||
|
||||
(function () {
|
||||
|
||||
var BCIFrequencyBand = {
|
||||
templateUrl: 'components/frequency-band/frequency-band.html',
|
||||
bindings: {
|
||||
type: '@',
|
||||
color: '@',
|
||||
eventName: '@'
|
||||
},
|
||||
controller: function ($timeout) {
|
||||
|
||||
var $ctrl = this;
|
||||
|
||||
var socket = io();
|
||||
|
||||
$ctrl.colors = [
|
||||
{ fillColor: 'rgba(112,185,252,1)' },
|
||||
{ fillColor: 'rgba(116,150,161,1)' },
|
||||
{ fillColor: 'rgba(162,86,178,1)' },
|
||||
{ fillColor: 'rgba(144,132,246,1)' },
|
||||
{ fillColor: 'rgba(138,219,229,1)' },
|
||||
{ fillColor: 'rgba(232,223,133,1)' },
|
||||
{ fillColor: 'rgba(148,159,177,1)' },
|
||||
{ fillColor: 'rgba(182,224,53,1)' }
|
||||
].filter(function (color, index) {
|
||||
return parseInt($ctrl.color) === index;
|
||||
});
|
||||
|
||||
console.log($ctrl.type, $ctrl.colors);
|
||||
|
||||
$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[$ctrl.type || 'data'];
|
||||
});
|
||||
});
|
||||
|
||||
$ctrl.$onDestroy = function () {
|
||||
socket.removeListener($ctrl.eventName);
|
||||
};
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
angular
|
||||
.module('bciDashboard')
|
||||
.component('bciFrequencyBand', BCIFrequencyBand);
|
||||
|
||||
})();
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
|
||||
})();
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
@@ -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;*/
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
|
||||
})();
|
||||
@@ -1,71 +0,0 @@
|
||||
<!doctype html>
|
||||
<html ng-app="bciDashboard">
|
||||
<head>
|
||||
<title>BCI Dashboard</title>
|
||||
|
||||
<link rel="stylesheet" href="node_modules/angular-chart.js/dist/angular-chart.css">
|
||||
<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/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/frequency-band/frequency-band.js"></script>
|
||||
<script src="components/time-series/time-series.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 = 'frequencyBands'">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 == 'frequencyBands'">
|
||||
<bci-frequency-band event-name="bci:fft" type="delta" color="1" class="block block-33"></bci-frequency-band>
|
||||
<bci-frequency-band event-name="bci:fft" type="theta" color="2" class="block block-33"></bci-frequency-band>
|
||||
</section>
|
||||
|
||||
<section class="row" ng-if="mode == 'frequencyBands'">
|
||||
<bci-frequency-band event-name="bci:fft" type="alpha" color="3" class="block block-33"></bci-frequency-band>
|
||||
<bci-frequency-band event-name="bci:fft" type="beta" color="4" class="block block-33"></bci-frequency-band>
|
||||
<bci-frequency-band event-name="bci:fft" type="gamma" color="5" class="block block-33"></bci-frequency-band>
|
||||
</section>
|
||||
|
||||
<section class="row" ng-if="mode == 'topo'">
|
||||
<bci-topo event-name="bci:topo" class="block block-50"></bci-topo>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
externo
-33
Diff do arquivo suprimido porque uma ou mais linhas são muito longas
@@ -1,28 +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,
|
||||
barStrokeWidth: 1,
|
||||
strokeColor: 'rgba(116,150,161,1)'
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
Arquivo binário não exibido.
|
Antes Largura: | Altura: | Tamanho: 356 KiB |
Arquivo binário não exibido.
|
Antes Largura: | Altura: | Tamanho: 3.6 MiB |
Arquivo binário não exibido.
|
Antes Largura: | Altura: | Tamanho: 1.9 MiB |
Arquivo binário não exibido.
|
Antes Largura: | Altura: | Tamanho: 3.6 MiB |
@@ -0,0 +1,3 @@
|
||||
export const environment = {
|
||||
production: false
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
/* jshint node: true */
|
||||
|
||||
module.exports = function(environment) {
|
||||
return {
|
||||
environment: environment,
|
||||
baseURL: '/',
|
||||
locationType: 'auto'
|
||||
};
|
||||
};
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
export const environment = {
|
||||
production: true
|
||||
};
|
||||
@@ -0,0 +1,51 @@
|
||||
/*global jasmine, __karma__, window*/
|
||||
Error.stackTraceLimit = Infinity;
|
||||
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
|
||||
|
||||
__karma__.loaded = function () {
|
||||
};
|
||||
|
||||
var distPath = '/base/dist/';
|
||||
var appPath = distPath + 'app/';
|
||||
|
||||
function isJsFile(path) {
|
||||
return path.slice(-3) == '.js';
|
||||
}
|
||||
|
||||
function isSpecFile(path) {
|
||||
return path.slice(-8) == '.spec.js';
|
||||
}
|
||||
|
||||
function isAppFile(path) {
|
||||
return isJsFile(path) && (path.substr(0, appPath.length) == appPath);
|
||||
}
|
||||
|
||||
var allSpecFiles = Object.keys(window.__karma__.files)
|
||||
.filter(isSpecFile)
|
||||
.filter(isAppFile);
|
||||
|
||||
// Load our SystemJS configuration.
|
||||
System.config({
|
||||
baseURL: distPath
|
||||
});
|
||||
|
||||
System.import('system-config.js').then(function() {
|
||||
// Load and configure the TestComponentBuilder.
|
||||
return Promise.all([
|
||||
System.import('@angular/core/testing'),
|
||||
System.import('@angular/platform-browser-dynamic/testing')
|
||||
]).then(function (providers) {
|
||||
var testing = providers[0];
|
||||
var testingBrowser = providers[1];
|
||||
|
||||
testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
|
||||
testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
|
||||
});
|
||||
}).then(function() {
|
||||
// Finally, load all spec files.
|
||||
// This will run the tests directly.
|
||||
return Promise.all(
|
||||
allSpecFiles.map(function (moduleName) {
|
||||
return System.import(moduleName);
|
||||
}));
|
||||
}).then(__karma__.start, __karma__.error);
|
||||
@@ -0,0 +1,42 @@
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '..',
|
||||
frameworks: ['jasmine'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher')
|
||||
],
|
||||
customLaunchers: {
|
||||
// chrome setup for travis CI using chromium
|
||||
Chrome_travis_ci: {
|
||||
base: 'Chrome',
|
||||
flags: ['--no-sandbox']
|
||||
}
|
||||
},
|
||||
files: [
|
||||
{ pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false },
|
||||
{ pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false },
|
||||
{ pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false },
|
||||
{ pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false },
|
||||
{ pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false },
|
||||
{ pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false },
|
||||
|
||||
{ pattern: 'config/karma-test-shim.js', included: true, watched: true },
|
||||
|
||||
// Distribution folder.
|
||||
{ pattern: 'dist/**/*', included: false, watched: true }
|
||||
],
|
||||
exclude: [
|
||||
// Vendor packages might include spec files. We don't want to use those.
|
||||
'dist/vendor/**/*.spec.js'
|
||||
],
|
||||
preprocessors: {},
|
||||
reporters: ['progress'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
/*global jasmine */
|
||||
var SpecReporter = require('jasmine-spec-reporter');
|
||||
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'../e2e/**/*.e2e.ts'
|
||||
],
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
useAllAngular2AppRoots: true,
|
||||
beforeLaunch: function() {
|
||||
require('ts-node').register({
|
||||
project: 'e2e'
|
||||
});
|
||||
},
|
||||
onPrepare: function() {
|
||||
jasmine.getEnv().addReporter(new SpecReporter());
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
import { ClitestPage } from './app.po';
|
||||
|
||||
describe('clitest App', function() {
|
||||
let page: ClitestPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new ClitestPage();
|
||||
})
|
||||
|
||||
it('should display message saying app works', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText()).toEqual('clitest works!');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
export class ClitestPage {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getParagraphText() {
|
||||
return element(by.css('clitest-app h1')).getText();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"declaration": false,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"mapRoot": "",
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
"noEmitOnError": true,
|
||||
"noImplicitAny": false,
|
||||
"rootDir": ".",
|
||||
"sourceMap": true,
|
||||
"sourceRoot": "/",
|
||||
"target": "es5"
|
||||
}
|
||||
}
|
||||
externo
+1
@@ -0,0 +1 @@
|
||||
/// <reference path="../typings/main.d.ts" />
|
||||
+44
-27
@@ -1,42 +1,59 @@
|
||||
{
|
||||
"name": "openbci-dashboard",
|
||||
"private": false,
|
||||
"version": "0.0.1",
|
||||
"description": "A fullstack javascript app for capturing and visualizing OpenBCI EEG data",
|
||||
"main": "visualizer.js",
|
||||
"name": "clitest",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"openbci",
|
||||
"eeg",
|
||||
"neurojs",
|
||||
"dashboard"
|
||||
],
|
||||
"author": "Alex Castillo",
|
||||
"angular-cli": {},
|
||||
"scripts": {
|
||||
"start": "node visualizer",
|
||||
"simulate": "node visualizer simulate"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:NeuroJS/openbci-dashboard.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/NeuroJS/openbci-dashboard/issues"
|
||||
"start": "ng server",
|
||||
"postinstall": "typings install",
|
||||
"lint": "tslint \"src/**/*.ts\"",
|
||||
"format": "clang-format -i -style=file --glob=src/**/*.ts",
|
||||
"visualize": "concurrently \"ng serve\" \"node visualizer\" ",
|
||||
"simulate": "concurrently \"ng serve\" \"node visualizer simulate\" ",
|
||||
"pree2e": "webdriver-manager update",
|
||||
"e2e": "protractor"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"angular": "^1.5.5",
|
||||
"angular-chart.js": "^0.10.2",
|
||||
"chart.js": "^1.1.1",
|
||||
"@angular/common": "2.0.0-rc.1",
|
||||
"@angular/compiler": "2.0.0-rc.1",
|
||||
"@angular/core": "2.0.0-rc.1",
|
||||
"@angular/platform-browser": "2.0.0-rc.1",
|
||||
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
|
||||
"@angular/router": "2.0.0-rc.1",
|
||||
"chart.js": "^1.0.2",
|
||||
"dsp.js": "neurojs/dsp.js",
|
||||
"es6-shim": "^0.35.0",
|
||||
"express": "^4.13.4",
|
||||
"fili": "^1.2.1",
|
||||
"jstat": "^1.5.2",
|
||||
"ng2-charts": "^1.0.3",
|
||||
"nodemon": "^1.9.1",
|
||||
"openbci-sdk": "^0.3.4",
|
||||
"reflect-metadata": "0.1.3",
|
||||
"rxjs": "5.0.0-beta.6",
|
||||
"smoothie": "^1.27.0",
|
||||
"socket.io": "^1.4.5",
|
||||
"socket.io-client": "^1.4.5",
|
||||
"socket.io": "^1.4.6",
|
||||
"socket.io-client": "^1.4.6",
|
||||
"systemjs": "0.19.26",
|
||||
"topogrid": "^1.0.6",
|
||||
"yargs": "^4.3.2"
|
||||
"yargs": "^4.3.2",
|
||||
"zone.js": "^0.6.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"angular-cli": "0.0.*",
|
||||
"clang-format": "^1.0.35",
|
||||
"codelyzer": "0.0.14",
|
||||
"ember-cli-inject-live-reload": "^1.4.0",
|
||||
"jasmine-core": "^2.4.1",
|
||||
"jasmine-spec-reporter": "^2.4.0",
|
||||
"karma": "^0.13.15",
|
||||
"karma-chrome-launcher": "^0.2.3",
|
||||
"karma-jasmine": "^0.3.8",
|
||||
"protractor": "^3.3.0",
|
||||
"ts-node": "^0.5.5",
|
||||
"tslint": "^3.6.0",
|
||||
"typescript": "^1.8.10",
|
||||
"typings": "^0.8.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,20 @@
|
||||
|
||||
@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;
|
||||
:host {
|
||||
display: block;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
@@ -32,57 +31,6 @@ h1 {
|
||||
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;
|
||||
}
|
||||
@@ -131,64 +79,55 @@ nav button:nth-child(6) {
|
||||
min-height: 580px;
|
||||
}
|
||||
|
||||
.time-series canvas {
|
||||
margin: 40px 80px 40px 40px;
|
||||
|
||||
nav {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.time-series-channels,
|
||||
.time-series-amplitudes {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
height: 450px;
|
||||
color: rgba(102,102,102,1);
|
||||
|
||||
nav a {
|
||||
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;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.time-series-channels {
|
||||
width: 40px;
|
||||
left: 20px;
|
||||
text-align: left;
|
||||
nav a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
nav a:nth-child(1) {
|
||||
background-color: rgba(112,185,252,1);
|
||||
}
|
||||
|
||||
nav a:nth-child(2) {
|
||||
background-color: rgba(138,219,229,1);
|
||||
}
|
||||
|
||||
nav a:nth-child(3) {
|
||||
background-color: rgba(162,86,178,1);
|
||||
}
|
||||
|
||||
nav a:nth-child(4) {
|
||||
background-color: rgba(144,132,246,1);
|
||||
}
|
||||
|
||||
nav a:nth-child(5) {
|
||||
background-color: rgba(232,223,133,1);
|
||||
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%;
|
||||
nav a:nth-child(6) {
|
||||
background-color: rgba(148,159,177,1);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<main>
|
||||
<h1>{{title}}</h1>
|
||||
<nav>
|
||||
<a [routerLink]="['/time-series']">Time Series</a>
|
||||
<a [routerLink]="['/frequency']">Frequency</a>
|
||||
<a ng-click="">Frequency Radar</a>
|
||||
<a ng-click="">Frequency Bands</a>
|
||||
<a ng-click="">Topo</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
@@ -0,0 +1,22 @@
|
||||
import {
|
||||
beforeEachProviders,
|
||||
describe,
|
||||
expect,
|
||||
it,
|
||||
inject
|
||||
} from '@angular/core/testing';
|
||||
import { DashboardComponent } from '../app/dashboard.component';
|
||||
|
||||
beforeEachProviders(() => [DashboardComponent]);
|
||||
|
||||
describe('App: DashboardComponent', () => {
|
||||
it('should create the app',
|
||||
inject([DashboardComponent], (app: DashboardComponent) => {
|
||||
expect(app).toBeTruthy();
|
||||
}));
|
||||
|
||||
it('should have as title \'clitest works!\'',
|
||||
inject([DashboardComponent], (app: DashboardComponent) => {
|
||||
expect(app.title).toEqual('clitest works!');
|
||||
}));
|
||||
});
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { TimeSeriesComponent } from './time-series';
|
||||
import { FrequencyComponent } from './frequency';
|
||||
import { Routes, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'bci-dashboard',
|
||||
templateUrl: 'dashboard.component.html',
|
||||
styleUrls: ['dashboard.component.css'],
|
||||
directives: [ROUTER_DIRECTIVES],
|
||||
providers: [ROUTER_PROVIDERS]
|
||||
})
|
||||
|
||||
@Routes([
|
||||
{ path: '/time-series', component: TimeSeriesComponent },
|
||||
{ path: '/frequency', component: FrequencyComponent }
|
||||
])
|
||||
|
||||
export class DashboardComponent implements OnInit {
|
||||
title = 'BCI Dashboard';
|
||||
|
||||
constructor (private router: Router) {
|
||||
}
|
||||
|
||||
ngOnInit () {
|
||||
this.router.navigate(['/time-series']);
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// The file for the current environment will overwrite this one during build
|
||||
// Different environments can be found in config/environment.{dev|prod}.ts
|
||||
// The build system defaults to the dev environment
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
|
||||
:host,
|
||||
.chart {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<base-chart class="chart"
|
||||
[data]="chartData"
|
||||
[labels]="chartLabels"
|
||||
[options]="chartOptions"
|
||||
[colours]="chartColors"
|
||||
[series]="chartSeries"
|
||||
[chartType]="chartType">
|
||||
</base-chart>
|
||||
@@ -0,0 +1,46 @@
|
||||
import {
|
||||
beforeEach,
|
||||
beforeEachProviders,
|
||||
describe,
|
||||
expect,
|
||||
it,
|
||||
inject,
|
||||
} from '@angular/core/testing';
|
||||
import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
|
||||
import { Component } from '@angular/core';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { FrequencyComponent } from './frequency.component';
|
||||
|
||||
describe('Component: Frequency', () => {
|
||||
let builder: TestComponentBuilder;
|
||||
|
||||
beforeEachProviders(() => [FrequencyComponent]);
|
||||
beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
|
||||
builder = tcb;
|
||||
}));
|
||||
|
||||
it('should inject the component', inject([FrequencyComponent],
|
||||
(component: FrequencyComponent) => {
|
||||
expect(component).toBeTruthy();
|
||||
}));
|
||||
|
||||
it('should create the component', inject([], () => {
|
||||
return builder.createAsync(FrequencyComponentTestController)
|
||||
.then((fixture: ComponentFixture<any>) => {
|
||||
let query = fixture.debugElement.query(By.directive(FrequencyComponent));
|
||||
expect(query).toBeTruthy();
|
||||
expect(query.componentInstance).toBeTruthy();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
@Component({
|
||||
selector: 'test',
|
||||
template: `
|
||||
<bci-frequency></bci-frequency>
|
||||
`,
|
||||
directives: [FrequencyComponent]
|
||||
})
|
||||
class FrequencyComponentTestController {
|
||||
}
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import { Component, ElementRef, OnInit } from '@angular/core';
|
||||
import * as io from 'socket.io-client';
|
||||
import { ChartService } from '../shared';
|
||||
import { CHART_DIRECTIVES } from '../shared/ng2-charts';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'bci-frequency',
|
||||
templateUrl: 'frequency.component.html',
|
||||
styleUrls: ['frequency.component.css'],
|
||||
directives: [CHART_DIRECTIVES],
|
||||
providers: [ChartService]
|
||||
})
|
||||
|
||||
export class FrequencyComponent implements OnInit {
|
||||
|
||||
socket: any;
|
||||
constructor(private view: ElementRef, private chartService: ChartService) {
|
||||
this.view = view;
|
||||
this.socket = io('http://localhost:8080');
|
||||
}
|
||||
|
||||
private chartType:string = 'Line';
|
||||
private chartData:Array<any> = [[]];
|
||||
private chartLabels:Array<any> = [];
|
||||
private chartColors:Array<any> = this.chartService.getColors();
|
||||
private chartSeries:Array<string> = this.chartService.getChannels();
|
||||
|
||||
private chartOptions:any = {
|
||||
responsive: true,
|
||||
animation: false,
|
||||
animationSteps: 15,
|
||||
datasetStrokeWidth: 1,
|
||||
pointDot: false,
|
||||
pointDotRadius: 1,
|
||||
pointDotStrokeWidth: 0,
|
||||
datasetFill: false,
|
||||
scaleOverride: true,
|
||||
scaleStartValue: -2,
|
||||
scaleStepWidth: 1,
|
||||
scaleSteps: 6,
|
||||
barShowStroke: false,
|
||||
barValueSpacing: 1,
|
||||
barStrokeWidth: 1
|
||||
};
|
||||
|
||||
ngOnInit() {
|
||||
this.socket.on('bci:fft', (data) => {
|
||||
this.chartData = data.data;
|
||||
this.chartLabels = data.labels;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { FrequencyComponent } from './frequency.component';
|
||||
@@ -0,0 +1,2 @@
|
||||
export {environment} from './environment';
|
||||
export {DashboardComponent} from './dashboard.component';
|
||||
@@ -0,0 +1,17 @@
|
||||
import {
|
||||
beforeEachProviders,
|
||||
it,
|
||||
describe,
|
||||
expect,
|
||||
inject
|
||||
} from '@angular/core/testing';
|
||||
import { ChartService } from './chart.service';
|
||||
|
||||
describe('Chart Service', () => {
|
||||
beforeEachProviders(() => [ChartService]);
|
||||
|
||||
it('should ...',
|
||||
inject([ChartService], (service: ChartService) => {
|
||||
expect(service).toBeTruthy();
|
||||
}));
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class ChartService {
|
||||
|
||||
constructor() {}
|
||||
|
||||
getChannels (): Array<string> {
|
||||
return Array(8).fill('CH').map((item, index) => item + (index + 1));
|
||||
}
|
||||
|
||||
getColors (): Array<any> {
|
||||
return [
|
||||
{ strokeColor: 'rgba(112,185,252,1)' },
|
||||
{ strokeColor: 'rgba(116,150,161,1)' },
|
||||
{ strokeColor: 'rgba(162,86,178,1)' },
|
||||
{ strokeColor: 'rgba(144,132,246,1)' },
|
||||
{ strokeColor: 'rgba(138,219,229,1)' },
|
||||
{ strokeColor: 'rgba(232,223,133,1)' },
|
||||
{ strokeColor: 'rgba(148,159,177,1)' },
|
||||
{ strokeColor: 'rgba(77,83,96,1)' }
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './chart.service';
|
||||
export * from './ng2-charts';
|
||||
@@ -0,0 +1,265 @@
|
||||
import {
|
||||
Component, OnDestroy, OnInit, OnChanges,
|
||||
EventEmitter, ElementRef, Input
|
||||
} from '@angular/core';
|
||||
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
|
||||
|
||||
declare var Chart:any;
|
||||
|
||||
@Component({
|
||||
selector: 'chart',
|
||||
template: `<canvas></canvas>`,
|
||||
directives: [CORE_DIRECTIVES, NgClass]
|
||||
})
|
||||
export class ChartsComponent {}
|
||||
|
||||
@Component({
|
||||
selector: 'base-chart',
|
||||
properties: [
|
||||
'data',
|
||||
'labels',
|
||||
'series',
|
||||
'colours',
|
||||
'chartType',
|
||||
'legend',
|
||||
'options'
|
||||
],
|
||||
events: ['chartClick', 'chartHover'],
|
||||
template: `
|
||||
<canvas style="width: 100%; height: 100%;" (click)="click($event)" (mousemove)="hover($event)"></canvas>
|
||||
`,
|
||||
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass]
|
||||
})
|
||||
export class BaseChartComponent implements OnInit, OnDestroy, OnChanges {
|
||||
@Input() public data:Array<any> = [];
|
||||
@Input() public labels:Array<any> = [];
|
||||
@Input() public options:any = {responsive: true};
|
||||
@Input() public chartType:string;
|
||||
@Input() public series:Array<any> = [];
|
||||
@Input() public colours:Array<any> = [];
|
||||
@Input() public legend:boolean;
|
||||
|
||||
private ctx:any;
|
||||
private cvs:any;
|
||||
private parent:any;
|
||||
private chart:any;
|
||||
private legendTemplate:any;
|
||||
private initFlag:boolean = false;
|
||||
private chartClick:EventEmitter<any> = new EventEmitter();
|
||||
private chartHover:EventEmitter<any> = new EventEmitter();
|
||||
private defaultsColours:Array<any> = [
|
||||
{
|
||||
fillColor: 'rgba(151,187,205,0.2)',
|
||||
strokeColor: 'rgba(151,187,205,1)',
|
||||
pointColor: 'rgba(151,187,205,1)',
|
||||
pointStrokeColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(151,187,205,0.8)',
|
||||
color: 'rgba(151,187,205,1)',
|
||||
highlight: 'rgba(151,187,205,0.8)'
|
||||
}, {
|
||||
fillColor: 'rgba(220,220,220,0.2)',
|
||||
strokeColor: 'rgba(220,220,220,1)',
|
||||
pointColor: 'rgba(220,220,220,1)',
|
||||
pointStrokeColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(220,220,220,0.8)',
|
||||
color: 'rgba(220,220,220,1)',
|
||||
highlight: 'rgba(220,220,220,0.8)'
|
||||
}, {
|
||||
fillColor: 'rgba(247,70,74,0.2)',
|
||||
strokeColor: 'rgba(247,70,74,1)',
|
||||
pointColor: 'rgba(247,70,74,1)',
|
||||
pointStrokeColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(247,70,74,0.8)',
|
||||
color: 'rgba(247,70,74,1)',
|
||||
highlight: 'rgba(247,70,74,0.8)'
|
||||
}, {
|
||||
fillColor: 'rgba(70,191,189,0.2)',
|
||||
strokeColor: 'rgba(70,191,189,1)',
|
||||
pointColor: 'rgba(70,191,189,1)',
|
||||
pointStrokeColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(70,191,189,0.8)',
|
||||
color: 'rgba(70,191,189,1)',
|
||||
highlight: 'rgba(70,191,189,0.8)'
|
||||
}, {
|
||||
fillColor: 'rgba(253,180,92,0.2)',
|
||||
strokeColor: 'rgba(253,180,92,1)',
|
||||
pointColor: 'rgba(253,180,92,1)',
|
||||
pointStrokeColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(253,180,92,0.8)',
|
||||
color: 'rgba(253,180,92,1)',
|
||||
highlight: 'rgba(253,180,92,0.8)'
|
||||
}, {
|
||||
fillColor: 'rgba(148,159,177,0.2)',
|
||||
strokeColor: 'rgba(148,159,177,1)',
|
||||
pointColor: 'rgba(148,159,177,1)',
|
||||
pointStrokeColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(148,159,177,0.8)',
|
||||
color: 'rgba(148,159,177,1)',
|
||||
highlight: 'rgba(148,159,177,0.8)'
|
||||
}, {
|
||||
fillColor: 'rgba(77,83,96,0.2)',
|
||||
strokeColor: 'rgba(77,83,96,1)',
|
||||
pointColor: 'rgba(77,83,96,1)',
|
||||
pointStrokeColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(77,83,96,0.8)',
|
||||
color: 'rgba(77,83,96,1)',
|
||||
highlight: 'rgba(77,83,96,0.8)'
|
||||
}];
|
||||
|
||||
private element:ElementRef;
|
||||
public constructor(element:ElementRef) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
public ngOnInit():any {
|
||||
this.ctx = this.element.nativeElement.children[0].getContext('2d');
|
||||
this.cvs = this.element.nativeElement.children[0];
|
||||
this.parent = this.element.nativeElement;
|
||||
this.refresh();
|
||||
this.initFlag = true;
|
||||
}
|
||||
|
||||
public ngOnChanges():any {
|
||||
if (this.initFlag) {
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
public ngOnDestroy():any {
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
this.chart = void 0;
|
||||
}
|
||||
if (this.legendTemplate) {
|
||||
this.legendTemplate.destroy();
|
||||
this.legendTemplate = void 0;
|
||||
}
|
||||
}
|
||||
|
||||
public setLegend():void {
|
||||
let list = this.parent.getElementsByTagName('ul');
|
||||
if (list.length) {
|
||||
list[0].remove();
|
||||
this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
|
||||
} else {
|
||||
this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
|
||||
}
|
||||
}
|
||||
|
||||
public getColour(colour:Array<number>):any {
|
||||
return {
|
||||
fillColor: this.rgba(colour, 0.2),
|
||||
strokeColor: this.rgba(colour, 1),
|
||||
pointColor: this.rgba(colour, 1),
|
||||
pointStrokeColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: this.rgba(colour, 0.8),
|
||||
color: this.rgba(colour, 1),
|
||||
highlight: this.rgba(colour, 0.8)
|
||||
};
|
||||
}
|
||||
|
||||
public getRandomInt(min:number, max:number):number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
public rgba(colour:Array<number>, alpha:number):string {
|
||||
return 'rgba(' + colour.concat(alpha).join(',') + ')';
|
||||
}
|
||||
|
||||
public click(evt:any):void {
|
||||
let atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
|
||||
let activePoints = atEvent.call(this.chart, evt);
|
||||
if (activePoints.length > 0) {
|
||||
let activeLabel = activePoints[0].label;
|
||||
this.chartClick.emit({activePoints: activePoints, activeLabel: activeLabel});
|
||||
}
|
||||
}
|
||||
|
||||
public hover(evt:any):void {
|
||||
let atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
|
||||
let activePoints = atEvent.call(this.chart, evt);
|
||||
if (activePoints.length > 0) {
|
||||
let activeLabel = activePoints[0].label;
|
||||
let activePoint = activePoints[0].value;
|
||||
this.chartHover.emit({activePoints: activePoints, activePoint: activePoint, activeLabel: activeLabel});
|
||||
}
|
||||
}
|
||||
|
||||
public getChartBuilder(ctx:any, data:Array<any>, options:any):any {
|
||||
return new Chart(ctx)[this.chartType](data, options);
|
||||
}
|
||||
|
||||
public getDataObject(label:string, value:any):any {
|
||||
if (this.chartType === 'Line'
|
||||
|| this.chartType === 'Bar'
|
||||
|| this.chartType === 'Radar') {
|
||||
return {
|
||||
label: label,
|
||||
data: value
|
||||
};
|
||||
}
|
||||
|
||||
if (this.chartType === 'Pie'
|
||||
|| this.chartType === 'Doughnut'
|
||||
|| this.chartType === 'PolarArea') {
|
||||
return {
|
||||
label: label,
|
||||
value: value
|
||||
};
|
||||
}
|
||||
|
||||
return void 0;
|
||||
}
|
||||
|
||||
public getChartData(labels:any, dataObject:any):any {
|
||||
if (this.chartType === 'Line'
|
||||
|| this.chartType === 'Bar'
|
||||
|| this.chartType === 'Radar') {
|
||||
return {
|
||||
labels: labels,
|
||||
datasets: dataObject
|
||||
};
|
||||
}
|
||||
if (this.chartType === 'Pie'
|
||||
|| this.chartType === 'Doughnut'
|
||||
|| this.chartType === 'PolarArea') {
|
||||
return dataObject;
|
||||
}
|
||||
}
|
||||
|
||||
private refresh():any {
|
||||
if (this.options.responsive && this.parent.clientHeight === 0) {
|
||||
return setTimeout(() => this.refresh(), 50);
|
||||
}
|
||||
|
||||
this.ngOnDestroy();
|
||||
let dataset:Array<any> = [];
|
||||
|
||||
for (let i = 0; i < this.data.length; i++) {
|
||||
let colourDesc:Array<number> = [this.getRandomInt(0, 255), this.getRandomInt(0, 255), this.getRandomInt(0, 255)];
|
||||
let colour = i < this.colours.length ? this.colours[i] : this.defaultsColours[i] || this.getColour(colourDesc);
|
||||
|
||||
let data:any = Object.assign(colour,
|
||||
this.getDataObject(this.series[i] || this.labels[i], this.data[i]));
|
||||
|
||||
dataset.push(data);
|
||||
}
|
||||
|
||||
let data:any = this.getChartData(this.labels, dataset);
|
||||
this.chart = this.getChartBuilder(this.ctx, data, this.options);
|
||||
|
||||
if (this.legend) {
|
||||
this.setLegend();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const CHART_DIRECTIVES:Array<any> = [ChartsComponent, BaseChartComponent];
|
||||
@@ -0,0 +1 @@
|
||||
export { TimeSeriesComponent } from './time-series.component';
|
||||
@@ -0,0 +1,66 @@
|
||||
|
||||
.time-series {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
+6
-6
@@ -1,9 +1,9 @@
|
||||
<section class="time-series" ng-class="{ loading: !$ctrl.amplitudes }">
|
||||
<section class="time-series" [ngClass]="{ 'loading': !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 }">
|
||||
<li *ngFor="let channel of channels, let i = index"
|
||||
[ngStyle]="{ 'color': colors[i].strokeColor }">
|
||||
{{ channel }}
|
||||
</li>
|
||||
</ul>
|
||||
@@ -11,14 +11,14 @@
|
||||
<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 }">
|
||||
<li *ngFor="let amplitude of amplitudes, let i = index"
|
||||
[ngStyle]="{ 'color': colors[i].strokeColor }">
|
||||
{{ amplitude }}
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
<footer class="time-series-duration">
|
||||
<time ng-repeat="time in $ctrl.timeline track by $index"
|
||||
<time *ngFor="let time of timeline"
|
||||
datetime="P1M">
|
||||
{{ time }}
|
||||
</time>
|
||||
@@ -0,0 +1,46 @@
|
||||
import {
|
||||
beforeEach,
|
||||
beforeEachProviders,
|
||||
describe,
|
||||
expect,
|
||||
it,
|
||||
inject,
|
||||
} from '@angular/core/testing';
|
||||
import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
|
||||
import { Component } from '@angular/core';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { TimeSeriesComponent } from './time-series.component';
|
||||
|
||||
describe('Component: TimeSeries', () => {
|
||||
let builder: TestComponentBuilder;
|
||||
|
||||
beforeEachProviders(() => [TimeSeriesComponent]);
|
||||
beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
|
||||
builder = tcb;
|
||||
}));
|
||||
|
||||
it('should inject the component', inject([TimeSeriesComponent],
|
||||
(component: TimeSeriesComponent) => {
|
||||
expect(component).toBeTruthy();
|
||||
}));
|
||||
|
||||
it('should create the component', inject([], () => {
|
||||
return builder.createAsync(TimeSeriesComponentTestController)
|
||||
.then((fixture: ComponentFixture<any>) => {
|
||||
let query = fixture.debugElement.query(By.directive(TimeSeriesComponent));
|
||||
expect(query).toBeTruthy();
|
||||
expect(query.componentInstance).toBeTruthy();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
@Component({
|
||||
selector: 'test',
|
||||
template: `
|
||||
<bci-time-series></bci-time-series>
|
||||
`,
|
||||
directives: [TimeSeriesComponent]
|
||||
})
|
||||
class TimeSeriesComponentTestController {
|
||||
}
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import { Component, ElementRef, OnInit } from '@angular/core';
|
||||
import { SmoothieChart, TimeSeries } from 'smoothie';
|
||||
import { ChartService } from '../shared';
|
||||
import * as io from 'socket.io-client';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'bci-time-series',
|
||||
templateUrl: 'time-series.component.html',
|
||||
styleUrls: ['time-series.component.css'],
|
||||
providers: [ChartService]
|
||||
})
|
||||
|
||||
export class TimeSeriesComponent implements OnInit {
|
||||
|
||||
socket: any;
|
||||
constructor(private view: ElementRef, private chartService: ChartService) {
|
||||
this.view = view;
|
||||
this.socket = io('http://localhost:8080');
|
||||
this.chartService = chartService;
|
||||
}
|
||||
|
||||
private options = {
|
||||
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
|
||||
};
|
||||
|
||||
private timeSeries = new SmoothieChart(this.options);
|
||||
private amplitudes = [];
|
||||
private timeline = [];
|
||||
private lines = Array(8).fill(0).map(() => new TimeSeries());
|
||||
private channels = this.chartService.getChannels();
|
||||
private colors = this.chartService.getColors();
|
||||
|
||||
ngOnInit() {
|
||||
this.addTimeSeriesLines();
|
||||
|
||||
this.socket.on('bci:time', (data) => {
|
||||
this.amplitudes = data.amplitudes;
|
||||
this.timeline = data.timeline;
|
||||
this.appendTimeSeriesLines(data.data);
|
||||
});
|
||||
}
|
||||
|
||||
ngAfterViewInit () {
|
||||
this.timeSeries.streamTo(this.view.nativeElement.querySelector('canvas'), 40);
|
||||
}
|
||||
|
||||
addTimeSeriesLines () {
|
||||
this.lines.forEach((line, index) => {
|
||||
this.timeSeries.addTimeSeries(line, {
|
||||
strokeStyle: this.colors[index].strokeColor
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
appendTimeSeriesLines (data) {
|
||||
this.lines.forEach((line, index) => {
|
||||
data[index].forEach((amplitude) => {
|
||||
line.append(new Date().getTime(), amplitude);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Arquivo binário não exibido.
|
Depois Largura: | Altura: | Tamanho: 5.3 KiB |
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>BCI Dashboard</title>
|
||||
<base href="/">
|
||||
{{content-for 'head'}}
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
color: #ffffff;
|
||||
background-color: #222222;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Service worker support is disabled by default.
|
||||
Install the worker script and uncomment to enable.
|
||||
Only enable service workers in production.
|
||||
<script type="text/javascript">
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/worker.js').catch(function(err) {
|
||||
console.log('Error installing service worker: ', err);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<bci-dashboard>Loading...</bci-dashboard>
|
||||
|
||||
<script src="vendor/chart.js/Chart.js"></script>
|
||||
<script src="vendor/es6-shim/es6-shim.js"></script>
|
||||
<script src="vendor/reflect-metadata/Reflect.js"></script>
|
||||
<script src="vendor/systemjs/dist/system.src.js"></script>
|
||||
<script src="vendor/zone.js/dist/zone.js"></script>
|
||||
|
||||
<script>
|
||||
System.import('system-config.js').then(function () {
|
||||
System.import('main');
|
||||
}).catch(console.error.bind(console));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { DashboardComponent, environment } from './app/';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
bootstrap(DashboardComponent);
|
||||
@@ -0,0 +1,63 @@
|
||||
/***********************************************************************************************
|
||||
* User Configuration.
|
||||
**********************************************************************************************/
|
||||
/** Map relative paths to URLs. */
|
||||
const map: any = {
|
||||
'smoothie': 'vendor/smoothie/smoothie.js',
|
||||
'ng2-charts': 'vendor/ng2-charts/bundles/ng2-charts.js',
|
||||
'socket.io-client': 'vendor/socket.io-client/socket.io.js'
|
||||
};
|
||||
|
||||
/** User packages configuration. */
|
||||
const packages: any = {
|
||||
|
||||
};
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
/***********************************************************************************************
|
||||
* Everything underneath this line is managed by the CLI.
|
||||
**********************************************************************************************/
|
||||
const barrels: string[] = [
|
||||
// Angular specific barrels.
|
||||
'@angular/core',
|
||||
'@angular/common',
|
||||
'@angular/compiler',
|
||||
'@angular/http',
|
||||
'@angular/router',
|
||||
'@angular/platform-browser',
|
||||
'@angular/platform-browser-dynamic',
|
||||
|
||||
// Thirdparty barrels.
|
||||
'rxjs',
|
||||
|
||||
// App specific barrels.
|
||||
'app',
|
||||
'app/shared',
|
||||
'app/frequency',
|
||||
'app/time-series',
|
||||
'app/nav',
|
||||
'app/+frequency',
|
||||
'app/+frequency-band',
|
||||
/** @cli-barrel */
|
||||
];
|
||||
|
||||
const cliSystemConfigPackages: any = {};
|
||||
barrels.forEach((barrelName: string) => {
|
||||
cliSystemConfigPackages[barrelName] = { main: 'index' };
|
||||
});
|
||||
|
||||
/** Type declaration for ambient System. */
|
||||
declare var System: any;
|
||||
|
||||
// Apply the CLI SystemJS configuration.
|
||||
System.config({
|
||||
map: {
|
||||
'@angular': 'vendor/@angular',
|
||||
'rxjs': 'vendor/rxjs',
|
||||
'main': 'main.js'
|
||||
},
|
||||
packages: cliSystemConfigPackages
|
||||
});
|
||||
|
||||
// Apply the user's configuration.
|
||||
System.config({ map, packages });
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"declaration": false,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"mapRoot": "",
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
"noEmitOnError": true,
|
||||
"noImplicitAny": false,
|
||||
"outDir": "../dist/",
|
||||
"rootDir": ".",
|
||||
"sourceMap": true,
|
||||
"target": "es5",
|
||||
"inlineSources": true
|
||||
},
|
||||
|
||||
"files": [
|
||||
"main.ts",
|
||||
"typings.d.ts"
|
||||
]
|
||||
}
|
||||
externo
+3
@@ -0,0 +1,3 @@
|
||||
/// <reference path="../typings/browser.d.ts" />
|
||||
|
||||
declare var module: { id: string };
|
||||
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"rulesDirectory": ["node_modules/codelyzer"],
|
||||
"rules": {
|
||||
"max-line-length": [true, 100],
|
||||
"no-inferrable-types": true,
|
||||
"class-name": true,
|
||||
"comment-format": [
|
||||
true,
|
||||
"check-space"
|
||||
],
|
||||
"indent": [
|
||||
true,
|
||||
"spaces"
|
||||
],
|
||||
"eofline": true,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": true,
|
||||
"no-arg": true,
|
||||
"no-internal-module": true,
|
||||
"no-trailing-whitespace": true,
|
||||
"no-bitwise": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-unused-expression": true,
|
||||
"no-unused-variable": true,
|
||||
"one-line": [
|
||||
true,
|
||||
"check-catch",
|
||||
"check-else",
|
||||
"check-open-brace",
|
||||
"check-whitespace"
|
||||
],
|
||||
"quotemark": [
|
||||
true,
|
||||
"single",
|
||||
"avoid-escape"
|
||||
],
|
||||
"semicolon": [true, "always"],
|
||||
"typedef-whitespace": [
|
||||
true,
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
}
|
||||
],
|
||||
"curly": true,
|
||||
"variable-name": [
|
||||
true,
|
||||
"ban-keywords",
|
||||
"check-format",
|
||||
"allow-trailing-underscore"
|
||||
],
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type"
|
||||
],
|
||||
"component-selector-name": [true, "kebab-case"],
|
||||
"component-selector-type": [true, "element"],
|
||||
"host-parameter-decorator": true,
|
||||
"input-parameter-decorator": true,
|
||||
"output-parameter-decorator": true,
|
||||
"attribute-parameter-decorator": true,
|
||||
"input-property-directive": true,
|
||||
"output-property-directive": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"ambientDevDependencies": {
|
||||
"angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
|
||||
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
|
||||
"selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
|
||||
},
|
||||
"ambientDependencies": {
|
||||
"chart": "registry:dt/chart#0.0.0+20160316155526",
|
||||
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
|
||||
"smoothie": "registry:dt/smoothie#1.25.0+20160316155526",
|
||||
"socket.io-client": "registry:dt/socket.io-client#1.4.4+20160317120654"
|
||||
}
|
||||
}
|
||||
+1
-17
@@ -1,11 +1,8 @@
|
||||
var express = require('express');
|
||||
var app = express();
|
||||
var path = require('path');
|
||||
var http = require('http').Server(app);
|
||||
var argv = require('yargs').argv;
|
||||
var OpenBCIBoard = require('openbci-sdk');
|
||||
var dsp = require('dsp.js');
|
||||
var io = require('socket.io')(http);
|
||||
var io = require('socket.io')(process.env.app_port || 8080);
|
||||
var topogrid = require('topogrid');
|
||||
var jStat = require('jstat').jStat;
|
||||
var Fili = require('fili');
|
||||
@@ -17,19 +14,6 @@ io.on('connection', function(socket){
|
||||
console.log('A user connected');
|
||||
});
|
||||
|
||||
// Server
|
||||
app.use(express.static(path.join(__dirname, '/app')));
|
||||
|
||||
app.use('/node_modules', express.static(path.join(__dirname, '/node_modules')));
|
||||
|
||||
app.get('*', function(req, res) {
|
||||
res.sendFile(path.join(__dirname, '/app/index.html'));
|
||||
});
|
||||
|
||||
http.listen(3060, function () {
|
||||
console.log('listening on port 3060');
|
||||
});
|
||||
|
||||
// OpenBCI
|
||||
var board = new OpenBCIBoard.OpenBCIBoard({
|
||||
verbose: true
|
||||
|
||||
Referência em uma Nova Issue
Bloquear um usuário