Many UI improvements

raspberry-backend/app.py

@@ -3,7 +3,7 @@
 # Python monitoring code
 # USAGE:  python3 app.py
 #
-# Last update: April 7, 2020
+# Last update: April 20, 2020
 
 from time import time
 from flask import Flask, render_template, make_response, jsonify, Response, request
@@ -116,7 +116,7 @@ def last_N_data():
     Query the sqlite3 table for variables
     Output in json format
     """
-    N = 60
+    N = 300 #update interval is 200 ms and there are 300 entries in 60 seconds
     list_variables = []
     list_variables.append("created_at")
     list_variables.extend(getList(DataFormat().getDict()))

raspberry-backend/arduino_recorder.py

@@ -108,7 +108,7 @@ def monitoring(source_address):
                      raise Exception("sqlite3 error. Insert into database failed: {}".format(str(err)))
                 finally:                  
                     sys.stdout.flush()
-                    time.sleep(1)
+                    time.sleep(0.2)
 
 def progress(status, remaining, total):
     print(f'Copied {total-remaining} of {total} pages...')

raspberry-backend/static/js/Chart-display.js

@@ -22,7 +22,8 @@ function last_results() {
             var date = new Date(data[i]["created_at"]);
             var seconds = date.getSeconds();
             // terrible hack to show the time in reverse order
-            initial_xaxis.push(-i);
+            var time_x = (-i/5).toFixed(2)
+            initial_xaxis.push(time_x);
             //initial_xaxis.push(data[i]["timestamp"]);
             initial_yaxis_pressure.push(data[i]["pressure_buffer"]);
             initial_yaxis_volume.push(data[i]["pressure_inhale"]);
@@ -49,25 +50,26 @@ function requestChartVar() {
         url: '/live-data',
         success: function(point) {
 
-            if(chart_pressure.data.datasets[0].data.length > 60){
+            if(chart_pressure.data.datasets[0].data.length > 300){
                 chart_pressure.data.labels.shift();
                 chart_pressure.data.datasets[0].data.shift();
             }
 
-            if(chart_flow.data.datasets[0].data.length > 60){
+            if(chart_flow.data.datasets[0].data.length > 300){
                 //chart_flow.data.labels.shift();
                 chart_flow.data.datasets[0].data.shift();
             }
 
  
-            if(chart_volume.data.datasets[0].data.length > 60){
+            if(chart_volume.data.datasets[0].data.length > 300){
                 //chart_volume.data.labels.shift();
                 chart_volume.data.datasets[0].data.shift();
             }
 
-            for (var i=0; i<60; i++) {
-                chart_pressure.data.labels[i] -= 1 ;
-           }
+            for (var i=0; i<300; i++) {
+                var x = chart_pressure.data.labels[i] - 0.20 ;
+                chart_pressure.data.labels[i] = x.toFixed(1);
+            }
 
 
             // add the point           

raspberry-backend/static/js/Chart-plot.js

 var chart;
 var refreshIntervalId;
-
+var initial_xaxis = [];
+var initial_yaxis_var1 = [];
+var initial_yaxis_var2 = [];
 
 
 /**
  * Request data from the server, add it to the graph and set a timeout
  * to request again
  */
+
+
+function last_results() {
+  $.getJSON({
+      url: '/last_N_data',
+      success: function(data) {
+        for (i=0; i<data.length; i++) {
+          // terrible hack to show the time in reverse order
+          var time_x = (-i/5).toFixed(2)
+          initial_xaxis.push(time_x);
+          //initial_xaxis.push(data[i]["timestamp"]);
+          initial_yaxis_var1.push(data[i]["pressure_buffer"]);
+          initial_yaxis_var2.push(data[i]["pressure_inhale"]);
+        }
+        //reverse because data is read from the other way
+        initial_xaxis.reverse();
+        initial_yaxis_var1.reverse();
+        initial_yaxis_var2.reverse();
+      },
+      cache: false
+  });
+}
+
+last_results();
+
+
 function requestDataVar1(var1, var2) {
     $.ajax({
         url: '/live-data',
         success: function(point) {
 
-            if(chart.data.datasets[0].data.length > 60){
+            if(chart.data.datasets[0].data.length > 300){
                 chart.data.labels.shift();
                 chart.data.datasets[0].data.shift();
             }
 
-            if(chart.data.datasets[1].data.length > 60){
+            if(chart.data.datasets[1].data.length > 300){
                 //chart.data.labels.shift();
                 chart.data.datasets[1].data.shift();
             }
 
+            for (var i=0; i<300; i++) {
+              var x = chart.data.labels[i] - 0.20 ;
+              chart.data.labels[i] = x.toFixed(1);
+          }
+
             // add the point
             //chart.data.labels.push(point.created_at);
             chart.data.labels.push(0);
@@ -36,18 +69,18 @@ function requestDataVar1(var1, var2) {
     refreshIntervalId = setTimeout(requestDataVar1, 200, var1, var2);
 }
 
-
+/*
 function requestDataVar(var1, var2) {
     $.ajax({
         url: '/live-data',
         success: function(point) {
 
-            if(chart_new.data.datasets[0].data.length > 60){
+            if(chart_new.data.datasets[0].data.length > 300){
                 chart_new.data.labels.shift();
                 chart_new.data.datasets[0].data.shift();
             }
 
-            if(chart_new.data.datasets[1].data.length > 60){
+            if(chart_new.data.datasets[1].data.length > 300){
                 //chart.data.labels.shift();
                 chart_new.data.datasets[1].data.shift();
             }
@@ -64,7 +97,7 @@ function requestDataVar(var1, var2) {
     // call it again after one second
     //setTimeout(requestDataVar, 1000, var1, var2);
 }
-
+*/
 
 
 
@@ -74,18 +107,18 @@ $(document).ready(function() {
   chart = new Chart(ctx, {
         type: 'line',
         data: {
-            labels: [],
+            labels: initial_xaxis,
             datasets: [{ 
       label: 'A',
       yAxisID: 'A',
-                data: [],
+                data: initial_yaxis_var1,
                 label: "Buffer",
                 borderColor: "#0000FF",
                 fill: false,
               },{ 
       label: 'B',
       yAxisID: 'B',
-                data: [],
+                data: initial_yaxis_var2,
                 label: "Inhale",
                 borderColor: "#000000",
                 fill: false,
@@ -106,8 +139,9 @@ $(document).ready(function() {
               type: 'realtime'
                     },
 		    ticks: {
-			maxTicksLimit: 5,
-			maxRotation: 0
+          fontSize: 25,
+			    maxTicksLimit: 5,
+			    maxRotation: 0
 		    }
 		}],
                 yAxes: [{
@@ -116,26 +150,25 @@ $(document).ready(function() {
                    position: 'left',
 		    ticks: {
                   fontColor: "#0000FF", // this here
+                  fontSize: 25,
                 },
                 }, {
                     id: 'B',
                     type: 'linear',
                     position: 'right',
 		    ticks: {
-			fontColor: "#000000", // this here
-                    },
-		    ticks: {
-			min: 0,
-			max: 200,
-			stepSize: 20
-		    }
+                  fontColor: "#000000", // this here
+                  fontSize: 25,
+                },
 		}
 		       ]
 	  },
-      legend : {
-	  display: true
-      }
-	  }
+		legend : {
+      display: true,
+      "labels": {
+        "fontSize": 20,
+    }        } 
+        }
   });
     requestDataVar1("pressure_buffer", "pressure_inhale");
 });
@@ -233,7 +266,10 @@ function updateChartType() {
                 }]
 	        },
 		legend : {
-		    display: true}
+        display: true,
+        "labels": {
+          "fontSize": 20,
+      }        } 
           }
 
 

raspberry-backend/templates/index_prototype.html

@@ -127,6 +127,7 @@
 	  </div>
 	</div>
 
+	<!--
 	<div class="col-xl-4 px-1 py-0">
 		<div class="card bg-primary text-dark mb-2">
 			  <div class="card-header d-flex align-items-center justify-content-between py-1 small min-height-1b">
@@ -137,7 +138,7 @@
 	  </div>
 
 	</div>
-
+-->
 	
 	<div class="row no-gutters w-100">
 	    <form action="{{ url_for('data_handler') }}" method="post" class="w-95">