Add files via upload

preparation to display battery consumption under statistics. The function get_battery_status still needs to be implemented

chipper/webroot/sdkapp/js/main.js

@@ -7,7 +7,7 @@ var colorPicker = new iro.ColorPicker("#picker", {
   ]
 });
 
-var stimRunning = false
+var chartRunning = false
 
 var urlParams = new URLSearchParams(window.location.search);
 esn = urlParams.get('serial');
@@ -22,85 +22,156 @@ function revealSdkActions() {
 
 const stimChart = document.getElementById('stimChart');
 let myChart = new Chart(stimChart, {
-    type: 'line',
-    data: {
-        labels: [],
-        datasets: [{
-            label: 'Stimulation',
-            data: [],
-            //backgroundColor: 'rgba(255, 99, 132, 0.2)',
-            backgroundColor: 'rgba(51, 237, 109, 1)',
-            borderColor: 'rgba(51, 237, 109, 1)',
-            borderWidth: 1
-        }]
+  type: 'line',
+  data: {
+    labels: [],
+    datasets: [{
+      label: 'Stimulation',
+      data: [],
+      //backgroundColor: 'rgba(255, 99, 132, 0.2)',
+      backgroundColor: 'rgba(51, 237, 109, 1)',
+      borderColor: 'rgba(51, 237, 109, 1)',
+      borderWidth: 1
+    }]
+  },
+  options: {
+    plugins:{
+      legend: {
+        display: false
+      }
     },
-    options: {
-      plugins:{
-        legend: {
-         display: false
-        }
-       },
-        scales: {
-            y: {
-                    beginAtZero: true,
-                    min: 0.0,
-                    max: 1.0
-                }
-        }
+    scales: {
+      y: {
+        beginAtZero: true,
+        min: 0.0,
+        max: 1.0
+      }
     }
+  }
 });
 
-function stimHandler() {
+function stimChartHandler() {
   // array to store data
-let stimData = [];
+  let stimData = [];
 
-// get the data every half a second
-interval = setInterval(() => {
-  if (stimRunning == false) {
-    sendForm("/api-sdk/stop_event_stream")
-    clearInterval(interval)
-  }
+  // get the data every half a second
+  interval = setInterval(() => {
+    if (chartRunning == false) {
+      sendForm("/api-sdk/stop_event_stream")
+      clearInterval(interval)
+    }
     fetch('/api-sdk/get_stim_status?serial=' + esn)
-        .then(response => response.json())
-        .then(data => {
-            // add the data to the array
-            stimData.push(data);
+    .then(response => response.json())
+    .then(data => {
+      // add the data to the array
+      stimData.push(data);
 
-            // if the array has more than 12 datapoints, remove the first one
-            if (stimData.length > 12) {
-                stimData.shift();
-            }
+      // if the array has more than 12 datapoints, remove the first one
+      if (stimData.length > 12) {
+        stimData.shift();
+      }
 
-            // update the chart with the new data
-            myChart.data.labels = [];
-            myChart.data.datasets[0].data = [];
-            //var time = new Date().toLocaleTimeString([], {hour12: false});
-            stimData.forEach(datapoint => {
-                myChart.data.labels.push(" ");
-                myChart.data.datasets[0].data.push(datapoint);
-            });
+      // update the chart with the new data
+      myChart.data.labels = [];
+      myChart.data.datasets[0].data = [];
+      //var time = new Date().toLocaleTimeString([], {hour12: false});
+      stimData.forEach(datapoint => {
+        myChart.data.labels.push(" ");
+        myChart.data.datasets[0].data.push(datapoint);
+      });
+      myChart.update();
+    });
+  }, 500)
+}
+
+
+const statsChart = document.getElementById('statsChart');
+let myStatsChart = new Chart(statsChart, {
+  type: 'line',
+  data: {
+    labels: [],
+    datasets: [{
+      label: 'Battery usage',
+      data: [],
+      backgroundColor: 'rgba(51, 237, 109, 1)',
+      borderColor: 'rgba(51, 237, 109, 1)',
+      borderWidth: 1
+    }]
+  },
+  options: {
+    plugins:{
+      legend: {
+        display: false
+      }
+    },
+    scales: {
+      y: {
+        beginAtZero: true,
+        min: 0.0,
+        max: 5.0
+      }
+    }
+  }
+});
+
+function statsChartHandler() {
+  // array to store data
+  let batteryData = [];
+
+  // get the data every half a second
+  interval = setInterval(() => {
+    if (chartRunning == false) {
+      sendForm("/api-sdk/stop_event_stream")
+      clearInterval(interval)
+    }
+    // TODO implement get_battery_status
+    fetch('/api-sdk/get_stim_status?serial=' + esn)
+    .then(response => response.json())
+    .then(data => {
+      // add the data to the array
+      batteryData.push(data);
 
-            myChart.update();
-        });
-}, 500)
+      // if the array has more than 12 datapoints, remove the first one
+      if (batteryData.length > 12) {
+        batteryData.shift();
+      }
+
+      // update the chart with the new data
+      myStatsChart.data.labels = [];
+      myStatsChart.data.datasets[0].data = [];
+      //var time = new Date().toLocaleTimeString([], {hour12: false});
+      batteryData.forEach(datapoint => {
+        myStatsChart.data.labels.push(" ");
+        myStatsChart.data.datasets[0].data.push(datapoint);
+      });
+      myStatsChart.update();
+    });
+  }, 500)
 }
 
+
 function showSection(id) {
   var headings = document.getElementsByClassName("toggleable-section");
   for (var i = 0; i < headings.length; i++) {
       headings[i].style.display = "none";
   }
   document.getElementById(id).style.display = "block";
   updateColor(id);
+
   if (id == "section-stim") {
     logDiv = document.getElementById("stimStatus")
     logP = document.createElement("p")
-    stimRunning = true
+    chartRunning = true
+    sendForm("/api-sdk/begin_event_stream")
+    stimChartHandler()
+  } else if (id == "section-stats") {
+    logDiv = document.getElementById("statsStatus")
+    logP = document.createElement("p")
+    chartRunning = true
     sendForm("/api-sdk/begin_event_stream")
-    stimHandler()
-
+    statsChartHandler()
   } else {
-    stimRunning = false
+    chartRunning = false
   }
 }
 
@@ -158,14 +229,14 @@ function getPhotos() {
 function deletePhoto(id) {
   if(confirm("Are you sure?")){
     // run code here
-  let xhr = new XMLHttpRequest();
-  xhr.open("POST", "/api-sdk/delete_image?serial=" + esn + "&id=" + id);
-  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-  xhr.send();
-  xhr.onload = function() {
-    getPhotos()
-  };
-}
+    let xhr = new XMLHttpRequest();
+    xhr.open("POST", "/api-sdk/delete_image?serial=" + esn + "&id=" + id);
+    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    xhr.send();
+    xhr.onload = function() {
+      getPhotos()
+    };
+  }
 }
 
 function goToControlPage() {
@@ -194,12 +265,12 @@ function sendTimeZone() {
     return
   }
   let xhr = new XMLHttpRequest();
-    xhr.open("POST", "/api-sdk/timezone?serial=" + esn + "&timezone=" + timezone);
-    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-    xhr.send();
-    xhr.onload = function() { 
-      getCurrentSettings()
-    };
+  xhr.open("POST", "/api-sdk/timezone?serial=" + esn + "&timezone=" + timezone);
+  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+  xhr.send();
+  xhr.onload = function() { 
+    getCurrentSettings()
+  };
 }
 
 function sendCustomColor() {