Moved loop plots to 2x2 grid and added 'Hold at end of loop' & restart buttons

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

@@ -6,6 +6,36 @@ var chart_PF;
 // last row accessed from the database
 var last_row_accessed = 0;
 
+var holdLoop = false; // global if loop plot to stop at end of this loop
+var stopLoop = false; // global if loop plotting is stopped
+
+// Manage running loop state
+function HoldLoop() {
+    console.info("Holding loop");
+    holdLoop = true;
+    stopLoop = false; // run on either to end of loop
+    // toggle button state to allow a start or stop of the loop
+    document.getElementById("LoopHoldButton").disabled = true;
+    document.getElementById("LoopStartButton").disabled = false;
+}
+function RunLoop() {
+    console.info("Running loop");
+    holdLoop = false;
+    stopLoop = false; // run on either to end of loop
+    // toggle button state to allow a start or stop of the loop
+    document.getElementById("LoopHoldButton").disabled = false;
+    document.getElementById("LoopStartButton").disabled = true;
+    // remove now stale data on plots
+    chart_PV.data.datasets[0].data.length = 0;
+    chart_VF.data.datasets[0].data.length = 0;
+    chart_PF.data.datasets[0].data.length = 0;
+    // now run chart updates
+    chart_PV.update();
+    chart_VF.update();
+    chart_PF.update();
+}
+
+
 /**
  * Request new data from the server, add it to the graph and set a timeout
  * to request again
@@ -14,57 +44,71 @@ function requestChartVar() {
     $.ajax({
         url: '/last-data/'+last_row_accessed,
         success: function(data) {
-			if (data.length > 0 ) {
-				last_row_accessed = data[0]['ROWID'];
-			
-			for ( let i = data.length-1 ; i >= 0; i--) {
-				var point = data[i];
-			    if( point["fsm_state"] == 14 ) { // start of loop (?)
-				chart_PV.data.datasets[1].data.length = 0;
-				chart_VF.data.datasets[1].data.length = 0;
-				chart_PF.data.datasets[1].data.length = 0;
-			    }else if( chart_PV.data.datasets[1].data.length > 100 ){
-				chart_PV.data.datasets[1].data.shift();
-				chart_VF.data.datasets[1].data.shift();
-				chart_PF.data.datasets[1].data.shift();
-			    }
-			    var pressure =  point["airway_pressure"];
-			    var volume = point["volume"];
-			    var flow = point["flow"];
-
-			    // to quote the AAMI: 
-			    //For Pressure-Volume loops, the graph
-			    //is required to use delivered volume on the vertical axis
-			    //and airway pressure on the horizontal axis. Positive
-			    //values should increase in up/right directions. Every
-			    //breath resets the graph, setting the volume back at the
-			    //origin.
+	    if (data.length > 0 ) {
+		last_row_accessed = data[0]['ROWID'];
+		if (stopLoop) {
+		    return; // nothing to do if stopped
+		}
+		for ( let i = data.length-1 ; i >= 0; i--) {
+		    var point = data[i];
+		    if( point["fsm_state"] == 14 ) { // start of loop FIXME
+			if( holdLoop ) {
+			    stopLoop = true;
+			    holdLoop = false;
+			    window.createNotification({
+				closeOnClick: 1,
+				displayCloseButton: 0,
+				positionClass: "nfc-bottom-right",
+				showDuration: false,
+				theme: "info"
+			    })({
+				title: "Loop plot on hold",
+				message: "Loop plot held, press Restart Loop to resume"
+			    });
+			}else{
+			    chart_PV.data.datasets[0].data.length = 0;
+			    chart_VF.data.datasets[0].data.length = 0;
+			    chart_PF.data.datasets[0].data.length = 0;
+			}
+		    }else if( chart_PV.data.datasets[0].data.length > 100 ){
+			chart_PV.data.datasets[0].data.shift();
+			chart_VF.data.datasets[0].data.shift();
+			chart_PF.data.datasets[0].data.shift();
+		    }
+		    if( ! stopLoop ){ // skip updates if loop is stopped
+			var pressure =  point["airway_pressure"];
+			var volume = point["volume"];
+			var flow = point["flow"];
 
-			    //For Flow-Volume loops the graph is required to use flow
-			    //rate on the vertical axis and delivered volume on the
-			    //horizontal axis. Positive values should increase in the
-			    //up/right directions.  Every breath resets the graph,
-			    //setting the volume back at the origin. The document also
-			    //suggests that there could be another version using
-			    //exhalation flow, if possible.
+			// to quote the AAMI:
+			//For Pressure-Volume loops, the graph
+			//is required to use delivered volume on the vertical axis
+			//and airway pressure on the horizontal axis. Positive
+			//values should increase in up/right directions. Every
+			//breath resets the graph, setting the volume back at the
+			//origin.
 
-			    // loops:
-			    chart_PV.data.datasets[1].data.push({x: pressure, y: volume});
-			    chart_VF.data.datasets[1].data.push({x: volume, y: flow}); 
-			    chart_PF.data.datasets[1].data.push({x: pressure, y: flow});
+			//For Flow-Volume loops the graph is required to use flow
+			//rate on the vertical axis and delivered volume on the
+			//horizontal axis. Positive values should increase in the
+			//up/right directions.  Every breath resets the graph,
+			//setting the volume back at the origin. The document also
+			//suggests that there could be another version using
+			//exhalation flow, if possible.
 
-			    // current data:
-			    chart_PV.data.datasets[0].data = [{x: pressure, y: volume}];
-			    chart_VF.data.datasets[0].data = [{x: volume, y: flow}];
-			    chart_PF.data.datasets[0].data = [{x: pressure, y: flow}];
+			// loops:
+			chart_PV.data.datasets[0].data.push({x: pressure, y: volume});
+			chart_VF.data.datasets[0].data.push({x: volume, y: flow});
+			chart_PF.data.datasets[0].data.push({x: pressure, y: flow});
 
-			}
 			// now run chart updates
 			chart_PV.update();
 			chart_VF.update();
-			chart_PF.update();		
+			chart_PF.update();
+		    }
 		}
-		},
+	    }
+	},
         cache: false
     });
     setTimeout(requestChartVar, 200);
@@ -77,12 +121,7 @@ $(document).ready(function() {
     chart_PV = new Chart(ctx_PV, {
         type: 'scatter',
         data: {datasets: [{data: [],
-			   label: "Pressure (x) [mbar]: Volume (y) [ml] (current)",
-			   borderColor: "rgb(128,0,0)",
-			   pointBackgroundColor : "rgb(128,0,0)",
-			   fill: true}, 
-			  {data: [],
-			   label: "Loop (20s)",
+			   label: "Pressure (x) [mbar]: Volume (y) [ml]",
 			   borderColor: "rgb(51,99,255)",
 			   pointBackgroundColor : "rgb(51,99,255)",
 			   fill: false,
@@ -90,10 +129,10 @@ $(document).ready(function() {
 			  ]},
 	options: {elements: { point: { radius: 5}},
 		  scales: {xAxes: [{display: true,
-				     ticks: {min: 0, max: 25, 
+				     ticks: {min: 0, max: 25,
 					     stepSize: 5, fontSize: 25 }}],
 			    yAxes: [{display: true,
-				     ticks: {min: 0, max: 500, 
+				     ticks: {min: 0, max: 500,
 					     stepSize: 100, fontSize:25 }}]}}
     });
 
@@ -101,46 +140,35 @@ $(document).ready(function() {
     chart_VF = new Chart(ctx_VF, {
         type: 'scatter',
         data: {datasets: [{data: [],
-			   label: "Volume (x) [ml]: Flow (y) [ml/min]  (current)",
-			   borderColor: "rgb(128,0,0)",
-			   pointBackgroundColor : "rgb(128,0,0)",
-			   fill: true,
-			 },
-			  {data: [],
-			   label: "Loop (20s)",
+			   label: "Volume (x) [ml]: Flow (y) [ml/min]",
 			   borderColor: "rgb(51,99,255)",
 			   pointBackgroundColor : "rgb(51,99,255)",
 			   fill: false,
 			showLine: true }]}
 	,options: {elements: { point: { radius: 5}},
 		scales: {xAxes: [{display: true,
-				  ticks: {min: 0, max: 500, 
+				  ticks: {min: 0, max: 500,
 					  stepSize: 100, fontSize: 25 }}],
 			    yAxes: [{display: true,
-				     ticks: {min: -1000, max: 1500, 
+				     ticks: {min: -1000, max: 1500,
 					     stepSize: 500, fontSize: 25 }}]}}
     });
-	
+
     var ctx_PF = document.getElementById('pressure_flow_chart');
     chart_PF = new Chart(ctx_PF, {
         type: 'scatter',
         data: {datasets: [{data: [],
-			   label: "Pressure (x) [mbar]: Flow (y) [ml/min] (current)",
-			   borderColor: "rgb(128,0,0)",
-			   pointBackgroundColor : "rgb(128,0,0)",
-			   fill: true },
-			  {data: [],
-			   label: "Loop (20s)",
+			   label: "Pressure (x) [mbar]: Flow (y) [ml/min]",
 			   borderColor: "rgb(51,99,255)",
 			   pointBackgroundColor : "rgb(51,99,255)",
 			   fill: false,
 				showLine: true }]}
 	,options: {elements: { point: { radius: 5, fill: true}},
 		   scales: {xAxes: [{display: true,
-				     ticks: {min: 0, max: 25 , 
+				     ticks: {min: 0, max: 25 ,
 					     stepSize: 5  , fontSize: 25 }}],
 			    yAxes: [{display: true,
-				     ticks: {min: -1000, max: 1500, 
+				     ticks: {min: -1000, max: 1500,
 					     stepSize: 500, fontSize: 25 }}]}}
     });
 });

raspberry-backend/templates/chartsLoop.html

@@ -3,26 +3,23 @@
 {% block content %}
 <main>
   <div class="container-fluid">
-    <!--<h1 class="mt-4">Info</h1> !-->
-    <div class = "row">
-      <div class = "col-md-12 py-0 px-3">
-	<div class="row">
-              <!-- <div class="card-chart-header small ">Pressure [mbar]</div> -->
-              <canvas id="pressure_volume_chart" width="100%" height="15"></canvas>
-	</div>
-	<div class="row">
-              <!-- <div class="card-chart-header small ">Pressure [mbar]</div> -->
-              <canvas id="flow_volume_chart" width="100%" height="15"></canvas>
-	</div>
-	<div class="row">
-              <!-- <div class="card-chart-header small ">Pressure [mbar]</div> -->
-              <canvas id="pressure_flow_chart" width="100%" height="15"></canvas>
-	</div>
-
+    <div class = "row mb-6">
+      <div class = "col-md-6 py-0 px-3">
+        <canvas id="pressure_volume_chart" width="45%" height="25"></canvas>
+      </div>
+      <div class = "col-md-6 py-0 px-3">
+        <canvas id="flow_volume_chart" width="45%" height="25"></canvas>
+        <!-- <div class="card-chart-header small ">Pressure [mbar]</div> -->
       </div>
     </div>
-    
-      
+    <div class = "row mb-6">
+      <div class = "col-md-6 py-0 px-3">
+	<canvas id="pressure_flow_chart" width="45%" height="25"></canvas>
+      </div>
+      <div class = "col-md-6 py-0 px-3">	
+	<button id="LoopHoldButton" type="button" onclick="HoldLoop()"> Hold after Loop </button>
+	<br>
+	<button id="LoopStartButton" type="button" onclick="RunLoop()" disabled> Restart Loop </button>
       </div>
     </div>
   </div>