Commit f5d86274 authored by Karan Goel's avatar Karan Goel
Browse files

better graphs

parent 64a0eb5a
......@@ -13,6 +13,7 @@
<script src="./inc/base64binary.js" type="text/javascript"></script>
<script src="./js/waveform.js"></script>
<script src="./js/canvasjs.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.2.js"></script>
</head>
......@@ -20,6 +21,7 @@
<style type="text/css">
body {
font-family: tahoma;
background: #000;
}
......@@ -33,7 +35,7 @@
#eegWave {
width: 100%;
height: 100px;
height: 300px;
margin-bottom: 30px;
position: absolute;
top: 60%;
......@@ -51,7 +53,6 @@
</div>
<div id="eegWave">
<h1>EEG Data: (Attention)</h1>
</div>
......@@ -140,15 +141,70 @@ gradient.addColorStop(0.0, "#f60");
gradient.addColorStop(1.0, "#ff1b00");
waveform.innerColor = gradient;
var eegWaveform = new Waveform({
container: document.getElementById("eegWave"),
interpolate: false
});
var ctx2 = eegWaveform.context;
var gradient2 = ctx2.createLinearGradient(0, 0, 0, eegWaveform.height);
gradient2.addColorStop(0.0, "#ff6");
gradient2.addColorStop(1.0, "#fff");
eegWaveform.innerColor = gradient2;
var attention_values = [];
var meditation_values = [];
var chart = new CanvasJS.Chart("eegWave", {
backgroundColor: "#000",
title:{
text: "Attention and Meditation Values",
fontSize: 30,
fontColor: "white",
fontFamily: "tahoma"
},
animationEnabled: true,
axisX:{
gridColor: "Silver",
tickColor: "silver",
labelFontColor: "white",
gridThickness: 1
},
toolTip:{
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver",
labelFontColor: "white",
gridThickness: 1
},
legend:{
verticalAlign: "center",
horizontalAlign: "right"
},
data: [{
// attention values
type: "line",
xValueType: "dateTime",
showInLegend: true,
name: "Attention",
dataPoints: attention_values
},
{
// meditation values
type: "line",
xValueType: "dateTime",
showInLegend: true,
name: "Meditation" ,
dataPoints: meditation_values
}],
legend:{
cursor:"pointer",
fontColor: "white",
itemclick:function(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else{
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
// Instruments we support
......@@ -160,10 +216,12 @@ var instruments = [
"bright_acoustic_piano"
];
// Instrument that we play
var instrument = 4;
var instrument = 0;
var relaySocket; // TODO: refactor
var meditation = 0;
RefreshFrame = function () {
var speed = (PI2 * nbrPoints) / cycleLength;
var ms = (new Date()).getTime();
......@@ -174,7 +232,7 @@ RefreshFrame = function () {
if (Math.floor(a / PI2) !== Math.floor(tines[i] / PI2)) {
delay = i / 4;
velocity = 127;
note = MIDI.pianoKeyOffset + i;
note = MIDI.pianoKeyOffset + meditation;
sendLightData(relaySocket, "red", Math.min(note, 255));
......@@ -192,6 +250,28 @@ RefreshFrame = function () {
};
var updateChart = function (attn, medit) {
var time = new Date;
// pushing the new values
attention_values.push({
x: time.getTime(),
y: attn
});
meditation_values.push({
x: time.getTime(),
y: medit
});
// updating legend text with updated with y Value
chart.options.data[0].legendText = " Attention " + attn;
chart.options.data[1].legendText = " Meditation" + medit;
chart.render();
};
var MIDI_INITIALIZED = false;
var socket = io(EEG_SOCKET_SERVER);
socket.on('get-EEG', function (data) {
......@@ -204,18 +284,23 @@ socket.on('get-EEG', function (data) {
var min_data = 0;
var max_data = 100;
meditation = eeg_data.meditation;
nbrPoints = Math.round(min_nbrPoints + ((max_nbrPoints - min_nbrPoints) * (eeg_data.attention - min_data)) / (max_data - min_data));
nbrPoints *= 0.5;
updateChart(eeg_data.attention, eeg_data.meditation);
RefreshFrame();
eegData.push(Math.cos(eeg_data.attention));
eegWaveform.update({
data: eegData
});
// eegData.push(Math.cos(eeg_data.attention));
// eegWaveform.update({
// data: eegData
// });
} else {
eegData.push(Math.cos(90));
eegWaveform.update({
data: eegData
});
// eegData.push(Math.cos(90));
// eegWaveform.update({
// data: eegData
// });
console.log('Connecting...')
}
});
......@@ -240,7 +325,6 @@ window.onload = function () {
MIDI.programChange(4, 1);
MIDI_INITIALIZED = true;
// setInterval(RefreshFrame, 200);
},
callbackPCM: function (pcmBuffer) {
sendAudioData(relaySocket, pcmBuffer);
......
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment