Skip to content
Snippets Groups Projects
Commit 47c580db authored by Adam Abed Abud's avatar Adam Abed Abud
Browse files

Fix plotting interface

parent 5c02b086
Branches
No related merge requests found
Hide whitespace changes
Inline Side-by-side
raspberry-backend/database/HEC_monitoringDB.sqlite 0 → 100644
+ 0
− 0
View file @ 47c580db
File added
raspberry-backend/database/HEC_monitoringDB_backup.sqlite 0 → 100644
+ 0
− 0
View file @ 47c580db
File added
raspberry-backend/static/js/Chart-plot.js
+ 29
− 182
View file @ 47c580db
var chart; var chart;
var chart2; var refreshIntervalId;
var chart_new;
/** /**
* Request data from the server, add it to the graph and set a timeout * Request data from the server, add it to the graph and set a timeout
* to request again * to request again
...@@ -30,7 +32,7 @@ function requestDataVar1(var1, var2) { ...@@ -30,7 +32,7 @@ function requestDataVar1(var1, var2) {
cache: false cache: false
}); });
// call it again after one second // call it again after one second
setTimeout(requestDataVar1, 1000, var1, var2); refreshIntervalId = setTimeout(requestDataVar1, 1000, var1, var2);
} }
...@@ -59,62 +61,16 @@ function requestDataVar(var1, var2) { ...@@ -59,62 +61,16 @@ function requestDataVar(var1, var2) {
cache: false cache: false
}); });
// call it again after one second // call it again after one second
setTimeout(requestDataVar, 1000, var1, var2); //setTimeout(requestDataVar, 1000, var1, var2);
} }
function requestDataVar2() {
$.ajax({
url: '/live-data',
success: function(point) {
if(chart2.data.datasets[0].data.length > 20){
chart2.data.labels.shift();
chart2.data.datasets[0].data.shift();
}
// add the point
chart2.data.labels.push(point.created_at);
chart2.data.datasets[0].data.push(point.pressure);
chart2.update();
},
cache: false
});
// call it again after one second
setTimeout(requestDataVar2, 1000);
}
/*
function requestDataVar3() {
$.ajax({
url: '/live-data',
success: function(point) {
if(chart3.data.datasets[0].data.length > 20){
chart3.data.labels.shift();
chart3.data.datasets[0].data.shift();
}
// add the point
chart3.data.labels.push(point.created_at);
chart3.data.datasets[0].data.push(point.pressure);
chart3.update();
},
cache: false
});
// call it again after one second
setTimeout(requestDataVar3, 1000);
}
*/
$(document).ready(function() { $(document).ready(function() {
var ctx = document.getElementById('pressure_air_supply'); var ctx = document.getElementById('pressure_air_supply');
chart = new Chart(ctx, { chart = new Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
labels: [], labels: [],
...@@ -122,15 +78,15 @@ $(document).ready(function() { ...@@ -122,15 +78,15 @@ $(document).ready(function() {
label: 'A', label: 'A',
yAxisID: 'A', yAxisID: 'A',
data: [], data: [],
label: "pressure_air_supply", label: "temperature",
borderColor: "#3e95cd", borderColor: "#0000FF",
fill: false, fill: false,
},{ },{
label: 'B', label: 'B',
yAxisID: 'B', yAxisID: 'B',
data: [], data: [],
label: "B", label: "pressure",
borderColor: "#FFF000", borderColor: "#000000",
fill: false, fill: false,
} }
] ]
...@@ -163,7 +119,7 @@ $(document).ready(function() { ...@@ -163,7 +119,7 @@ $(document).ready(function() {
}] }]
}, },
legend : { legend : {
display: false} display: true}
} }
}); });
requestDataVar1("temperature", "pressure"); requestDataVar1("temperature", "pressure");
...@@ -172,112 +128,6 @@ $(document).ready(function() { ...@@ -172,112 +128,6 @@ $(document).ready(function() {
$(document).ready(function() {
var ctx2 = document.getElementById('variable2');
chart2 = new Chart(ctx2, {
type: 'line',
data: {
labels: [],
datasets: [{
data: [],
label: "Var2",
borderColor: "#3e95cd",
fill: false,
}
]
},
options: {
title: {
display: false,
text: 'Variable 2'
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second',
displayFormat: 'second'
},
ticks: {
maxTicksLimit: 5,
maxRotation: 0
}
}]
},
legend : {
display: false
},
layout : {
padding : {
left: 0,
right: 0,
top: 0,
bottom: 0
}
}
}
});
requestDataVar2();
});
/*
$(document).ready(function() {
var ctx3 = document.getElementById('chart_variable3');
chart3 = new Chart(ctx3, {
type: 'line',
data: {
labels: [],
datasets: [{
data: [],
label: "Var3",
borderColor: "#3e95cd",
fill: false,
}
]
},
options: {
title: {
display: false,
text: 'Variable 3'
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second',
displayFormat: 'second'
},
ticks: {
maxTicksLimit: 5,
maxRotation: 0
}
}]
},
legend : {
display: false
},
layout : {
padding : {
left: 0,
right: 0,
top: 0,
bottom: 0
}
}
}
});
requestDataVar3();
});
*/
// Function to parse the selection from a multiselect // Function to parse the selection from a multiselect
function getSelectValues(select) { function getSelectValues(select) {
var result = []; var result = [];
...@@ -299,21 +149,18 @@ function getSelectValues(select) { ...@@ -299,21 +149,18 @@ function getSelectValues(select) {
// Function runs on chart type select update // Function runs on chart type select update
function updateChartType() { function updateChartType() {
// here we destroy/delete the old or previous chart and redraw it again
chart.destroy();
/*
chart = new Chart(ctx, {
type: document.getElementById("chart_dataset").value,
data: myData,
});
*/
var selection = document.multiselect('#chart_variables')._item var selection = document.multiselect('#chart_variables')._item
var selection_results = getSelectValues(selection) var selection_results = getSelectValues(selection)
console.log(selection_results[0]); console.log("selected variables: ", selection_results);
$(document).ready(function() { //here we destroy/delete the old or previous chart and redraw it again
var ctx_new = document.getElementById('pressure_air_supply'); clearInterval(refreshIntervalId);
chart_new = new Chart(ctx_new, { chart.destroy();
var ctx = document.getElementById('pressure_air_supply');
chart = new Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
labels: [], labels: [],
...@@ -321,15 +168,15 @@ $(document).ready(function() { ...@@ -321,15 +168,15 @@ $(document).ready(function() {
label: 'A', label: 'A',
yAxisID: 'A', yAxisID: 'A',
data: [], data: [],
label: "pressure_air_supply", label: selection_results[0],
borderColor: "#3e95cd", borderColor: "#0000FF",
fill: false, fill: false,
},{ },{
label: 'B', label: 'B',
yAxisID: 'B', yAxisID: 'B',
data: [], data: [],
label: "B", label: selection_results[1],
borderColor: "#FFF000", borderColor: "#000000",
fill: false, fill: false,
} }
] ]
...@@ -362,13 +209,13 @@ $(document).ready(function() { ...@@ -362,13 +209,13 @@ $(document).ready(function() {
}] }]
}, },
legend : { legend : {
display: false} display: true}
} }
});
requestDataVar(selection_results[0], selection_results[1]);
});
});
requestDataVar1(selection_results[0], selection_results[1]);
}; // ends update button }; // ends update button
document.multiselect('#chart_variables') document.multiselect('#chart_variables')
......
raspberry-backend/templates/index.html
+ 9
− 9
View file @ 47c580db
...@@ -16,14 +16,14 @@ ...@@ -16,14 +16,14 @@
<option value='variable3' selected>variable3</option> <option value='variable3' selected>variable3</option>
<option value='variable4' selected>variable4</option> <option value='variable4' selected>variable4</option>
<option value='variable5' selected>variable5</option> <option value='variable5' selected>variable5</option>
<input type="button" value="Submit" onclick="updateChartType()"> <input class="form-control py-0" type="button" value="Submit" onclick="updateChartType()" style="background-color: #1f4793 ; color: white">
</select> </select>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="card mb-6"> <div class="card mb-6">
<div class="card-chart-header small ">Variable number 1</div> <div class="card-chart-header small ">Variable number 1</div>
<div class="card-body px-0 py-0"><canvas id="pressure_air_supply" width="100%" height="80"></canvas></div> <div class="card-body px-0 py-0"><canvas id="pressure_air_supply" width="100%" height="65px"></canvas></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
<form action="{{ url_for('data_handler') }}" method="post" class="w-95"> <form action="{{ url_for('data_handler') }}" method="post" class="w-95">
<div class="card rounded-lg small px-0"> <div class="card rounded-lg small px-0">
<div class="card-header align-items-center justify-content-between px-1 py-1"> <div class="card-header align-items-center justify-content-between px-1 py-1">
Inputs INPUTS
<div class = "float-right"><a class="unlock thresholds" id="toggle_thresholds" onclick="toggle_lock_settings()"> <div class = "float-right"><a class="unlock thresholds" id="toggle_thresholds" onclick="toggle_lock_settings()">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lock" class="svg-inline--fa fa-lock fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lock" class="svg-inline--fa fa-lock fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path class="path-icon" id = "path-locked" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path> <path class="path-icon" id = "path-locked" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
...@@ -107,17 +107,17 @@ ...@@ -107,17 +107,17 @@
<td><span class="form-group"><label class="small" for="inputVar1">Fill Time (ms):</label><input class="form-control px-0 py-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max = 100 /></span></td> <td><span class="form-group"><label class="small" for="inputVar1">Fill Time (ms):</label><input class="form-control px-0 py-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max = 100 /></span></td>
<td><span class="form-group"><label class="small" for="inputVar1">Pause (ms):</label><input class="form-control px-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max=100 /></span></td> <td><span class="form-group"><label class="small" for="inputVar1">Pause (ms):</label><input class="form-control px-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max=100 /></span></td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td><span class=""><label class="small" for="inputThres1">Exhale/Inhale: </label><input class="form-control px-0 lh-1" id="inputThres1" type="number" value=1 max=100 min=0 name="" readOnly /></span></td> <td><span class=""> <br> <label class="small" for="inputThres1">Exhale/Inhale: </label><input class="form-control px-0 lh-1" id="inputThres1" type="number" value=1 max=100 min=0 name="" readOnly /></span></td>
<td><span class="form-group"><label class="small" for="inputVar1">PEEP (cmH2O):</label><input class="form-control px-0 py-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max = 100 /></span></td> <td><span class="form-group"> <br> <label class="small" for="inputVar1">PEEP (cmH2O):</label><input class="form-control px-0 py-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max = 100 /></span></td>
<td><span class="form-group"><label class="small" for="inputVar1">Exhale Time (ms):</label><input class="form-control px-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max=100 /></span></td> <td><span class="form-group"> <br> <label class="small" for="inputVar1">Exhale Time (ms):</label><input class="form-control px-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max=100 /></span></td>
<td><span class="form-group"><label class="small" for="inputVar1">RPM:</label><input class="form-control px-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max=100 /></span></td> <td><span class="form-group"> <br> <label class="small" for="inputVar1">RPM:</label><input class="form-control px-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max=100 /></span></td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="card-footer px-0 py-0 align-items-center"> <div class="card-footer px-0 py-0 align-items-center">
<span class="form-group ml-auto mr-auto"><input class="form-control py-0" id="inputPassword" type="submit" value="Submit Changes" /></span> <span class="form-group ml-auto mr-auto"><input class="form-control py-0" id="inputPassword" type="submit" value="Submit Changes" style="background-color: #1f4793 ; color: white" /></span>
</div> </div>
</div> </div>
</form> </form>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment