better graphs

webapp/index.html

@@ -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);