Add function live for accelerometer

Author: alexandredeleze

hf-data/assets/style.css

@@ -90,4 +90,8 @@
 
 #record-div {
     margin-top: 20px;
+}
+
+#accelerometer-live {
+    background-color: red;
 }

hf-data/index.html

@@ -144,7 +144,11 @@ <h2 class="card-title">Stored Data Visualisation</h2>
                     <div class="spaced" id="record-div">
                         <select name="recording-select" id="recording-select">
                         </select>
-                        <button id="accelerometer-show" class="btn btn-primary mb-2">Show</button>
+                        <div>
+                            <button id="accelerometer-live" class="btn btn-primary mb-2">Live</button>
+                            <button id="accelerometer-show" class="btn btn-primary mb-2">Show</button>
+                        </div>
+                        
                     </div>
 
                     <br />

hf-data/js/mobile.js

@@ -16,8 +16,11 @@ let currentRecording = [];
 let is_recording;
 let recordings = [];
 let is_showing;
+let is_live;
+let recordingTimeout = [];
+let lastBatch;
 
-const samplingAccRate = 30;
+const samplingAccRate = 15;
 /* Build mobile version */
 function buildMobile() {
   let accelerometerCanvas = document.getElementById('accelerometer-canvas');
@@ -46,6 +49,8 @@ function buildMobile() {
   accelerometerRecordCounter = document.getElementById('counter-accelerometer');
   const accelerometerButtonShow = document.getElementById('accelerometer-show');
   accelerometerButtonShow.addEventListener('click', showRecording);
+  const accelerometerButtonLive = document.getElementById('accelerometer-live');
+  accelerometerButtonLive.addEventListener('click', showLive);
 
   recordSelect = document.getElementById('recording-select');
 
@@ -131,6 +136,15 @@ function recordAccelerometer(pointsAlpha, pointsBeta, pointsGamma, l) {
   for (let i = 0; i < l; i++) {
     if (pointsAlpha[i] != IMAGE_START && pointsAlpha[i] != IMAGE_END) {
       currentRecording.push([pointsAlpha[i], pointsBeta[i], pointsGamma[i]]);
+      if(is_live){
+        time = samplingAccRate * i;
+        recordingTimeout[i] = setTimeout(() => {
+          cubeAlphaVisu = pointsAlpha[i];
+          cubeBetaVisu = pointsBeta[i];
+          cubeGammaVisu = pointsGamma[i];
+        }, time)
+
+      }
     } else if (pointsAlpha[i] == IMAGE_START) {
       currentRecording = [];
     } else if (pointsAlpha[i] == IMAGE_END) {
@@ -150,6 +164,7 @@ function recordAccelerometer(pointsAlpha, pointsBeta, pointsGamma, l) {
 }
 
 function showRecording() {
+  is_live = false;
   const selected = recordSelect.value;
   if (selected == '') {
     alert('No recording available');
@@ -162,7 +177,7 @@ function showRecording() {
     for (let i = 0; i < recording.length; i++) {
       let point = recording[i];
       time = samplingAccRate * i;
-      setTimeout(() => {
+      recordingTimeout[i] = setTimeout(() => {
         cubeAlphaVisu = point[0];
         cubeBetaVisu = point[1];
         cubeGammaVisu = point[2];
@@ -174,3 +189,16 @@ function showRecording() {
     }, samplingAccRate * recording.length);
   }
 }
+
+function showLive() {
+  // Stop to show the recording
+  emptyRecordingBuffer();
+  is_showing = false;
+  is_live = true;
+}
+
+function emptyRecordingBuffer(){
+  for(let i=0; i<recordingTimeout.length; ++i){
+    clearTimeout(recordingTimeout[i]);
+  }
+}