Skip to content
Snippets Groups Projects
Commit bc99a40b authored by David Hutchcroft's avatar David Hutchcroft
Browse files

Added tooltips to main page too

parent 79192938
Branches
No related merge requests found
Hide whitespace changes
Inline Side-by-side
raspberry-backend/static/js/Chart-display.js
+ 33
− 156
View file @ bc99a40b
......@@ -7,15 +7,8 @@ var size_data;
var fio_reading;
var p_plateau_reading;
var pause_charts = false;
var current_timestamp = -1;
function togglePause(){
if (pause_charts) pause_charts = false;
else pause_charts = true;
}
function setChartXaxisRange(min,max){
chart_volume.options.scales.xAxes[0].ticks.min = min;
chart_volume.options.scales.xAxes[0].ticks.max = max;
......@@ -37,152 +30,6 @@ function getGaugeMinValue(name){
function getGaugeMaxValue(name){
return obj[name].data.datasets[0].gaugeLimits[obj[name].data.datasets[0].gaugeLimits.length-1];
}
/*
var rowid = 0;
function requestData() {
$.ajax({
url: '/last-data/'+rowid,
success: function(data) {
if (data.length == 0) {
// we're not getting any new data from the hevserver
console.log("Got no new data");
} else
{
// // we have some data, let's fill first our readings with last point
//
//first point is last time in terms of time
var point = data[0];
var data_point_idx = -1;
var cycle_point_idx = -1;
var readback_point_idx = -1;
rowid = point["ROWID"];
for (let j = data.length -1 ; j >=0; j-- ){
if ( data[j]["payload_type"] == "DATA" ) data_point_idx = j;
if ( data[j]["payload_type"] == "CYCLE" ) cycle_point_idx = j;
if ( data[j]["payload_type"] == "READBACK" ) readback_point_idx = j;
}
var data_point = data_point_idx >= 0 ? data[data_point_idx] : null;
var cycle_point = cycle_point_idx >= 0 ? data[cycle_point_idx] : null;
var readback_point = readback_point_idx >= 0 ? data[readback_point_idx] : null;
var readings = [ "pressure_buffer", "pressure_inhale","pressure_air_supply","pressure_air_regulated",
"pressure_o2_supply", "pressure_o2_regulated", "pressure_patient", "pressure_diff_patient", "fsm_state",
"fi02_percent", "inhale_exhale_ratio", "peak_inspiratory_pressure", "plateau_pressure",
"mean_airway_pressure", "peep", "inhaled_tidal_volume", "exhaled_tidal_volume",
"inhaled_minute_volume", "exhaled_minute_volume", "flow", "volume"];
for (let i = 0 ; i < readings.length; i++){
var gauge = document.getElementById("gauge_"+readings[i]);
var el = document.getElementById(readings[i]);
var val = null;
if ( data_point != null && readings[i] in data_point ) { val = data_point[readings[i]];}
else if ( cycle_point != null && readings[i] in cycle_point ) { val = cycle_point[readings[i]];}
else if ( readback_point != null && readings[i] in readback_point ) { val = readback_point[readings[i]];}
else continue;
if ( gauge && ((readings[i]+"_gauge") in obj) ) {
obj[readings[i]+"_gauge"].data.datasets[0].gaugeData['value'] = val.toPrecision(4);
}
if (el ){
if (readings[i] == "inhale_exhale_ratio") {
//var posColon = val.search(":");
var posColon = -1;
if( posColon != -1 ) {
// already have colon...
el.innerHTML = val.toPrecision(4);
}else{
var ratio = val;
if( ratio < 1 ){
var invRatio = (1/ratio);
invRatio.toFixed(1); // in case of 0.75 -> 1.3333333333333333333:1 formating problems
el.innerHTML = invRatio.toPrecision(3).toString() + ":1";
}else{
el.innerHTML = "1:"+val.toPrecision(2);
}
}
}
else{
el.innerHTML = val.toPrecision(4);
}
}
}
// get our current time stamp
// get difference between it and last received to update plots
var last_timestamp = data_point["timestamp"]/1000.0;
var diff = 0;
if (current_timestamp != -1) {
diff = last_timestamp - current_timestamp;
}
else{
diff = - last_timestamp;
}
// this is just for cycling test data
// if ( last_timestamp < current_timestamp ) current_timestamp = last_timestamp - 1.00;
//
// if charts exist we now update with all points received
//
if (chart_pressure && chart_flow && chart_volume){
//update current plots with difference
for ( let i = 0 ; i < chart_pressure.data.datasets[0].data.length; i++){
chart_pressure.data.datasets[0].data[i]['x'] = chart_pressure.data.datasets[0].data[i]['x'] - diff;
chart_flow.data.datasets[0].data[i]['x'] = chart_flow.data.datasets[0].data[i]['x'] - diff;
chart_volume.data.datasets[0].data[i]['x'] = chart_volume.data.datasets[0].data[i]['x'] - diff;
}
//add new points
//keep track of timestamp to make sure we're not mixing it up
var running_timestamp = -1;
var running_rowid = 0;
for (let ip = data.length-1 ; ip >= 0; ip--){
var point = data[ip];
if (point["payload_type"] != "DATA") {
continue;
}
var seconds = point["timestamp"]/1000;
//must be greater than our last stopped point
if (seconds < current_timestamp) continue;
// this is a hack for the test data so that we can cycle data
//if ( seconds - current_timestamp > 1.0) { console.log("Current Timestamp: ",current_timestamp, " against ",seconds);}
//protect against bogus timestamps, skip those that are earlier than we already have
if (running_timestamp == -1 || seconds > running_timestamp )
{
// get difference between last time stamp and this and apply to existing points
chart_pressure.data.datasets[0].data.push({x : seconds - last_timestamp, y : point["pressure_patient"]});
chart_flow.data.datasets[0].data.push({ x : seconds - last_timestamp, y : point["flow"]});
chart_volume.data.datasets[0].data.push({ x : seconds - last_timestamp, y : point["volume"]});
running_timestamp = seconds;
}
}
while(chart_pressure.data.datasets[0].data.length > 10000) chart_pressure.data.datasets[0].data.shift();
while(chart_flow.data.datasets[0].data.length > 10000) chart_flow.data.datasets[0].data.shift();
while(chart_volume.data.datasets[0].data.length > 10000) chart_volume.data.datasets[0].data.shift();
current_timestamp = last_timestamp;
if (!pause_charts){
chart_pressure.update(0);
chart_flow.update(0);
chart_volume.update(0);
}
}
if ("fi02_percent_gauge" in obj) obj["fi02_percent_gauge"].update();
if ("p_plateau_gauge" in obj) obj["p_plateau_gauge"].update();
}
},
cache: false
});
// call it again after time in ms
chart_display_interval = setTimeout(requestData, 200);
}
requestData();
*/
$(document).ready(function() {
var ctx_pressure = document.getElementById('pressure_chart');
......@@ -219,7 +66,17 @@ $(document).ready(function() {
stroke: {
},
tooltips: {
enabled: true
enabled: false,
intersect: false,
mode: 'nearest',
callbacks: {
label: function(tooltipItem) {
var label = 'Pressure ' + Math.round(tooltipItem.yLabel*10)/10 + ' mbar'
label += '\nat time ' + Math.round(tooltipItem.xLabel*10)/10 + ' s'
return label;
}
},
bodyFontSize: 18
},
title: {
display: true,
......@@ -311,7 +168,17 @@ $(document).ready(function() {
stroke: {
},
tooltips: {
enabled: false
enabled: false,
intersect: false,
mode: 'nearest',
callbacks: {
label: function(tooltipItem) {
var label = 'Flow ' + Math.round(tooltipItem.yLabel) + ' ml/min'
label += '\nat time ' + Math.round(tooltipItem.xLabel*10)/10 + ' s'
return label;
}
},
bodyFontSize: 18
},
title: {
display: true,
......@@ -401,7 +268,17 @@ $(document).ready(function() {
stroke: {
},
tooltips: {
enabled: false
enabled: false,
intersect: false,
mode: 'nearest',
callbacks: {
label: function(tooltipItem) {
var label = 'Volume ' + Math.round(tooltipItem.yLabel) + ' ml'
label += '\nat time ' + Math.round(tooltipItem.xLabel*10)/10 + ' s'
return label;
}
},
bodyFontSize: 18
},
title: {
display: true,
......
raspberry-backend/static/js/HevUpdater.js
+ 83
− 35
View file @ bc99a40b
var pause_charts = false;
var current_timestamp = -1;
var paused_pressure_data = Array(0);
var paused_flow_data = Array(0);
var paused_volume_data = Array(0);
function togglePause(){
if (pause_charts) pause_charts = false;
else pause_charts = true;
if ( pause_charts ) {
pause_charts = false;
// update charts from buffered data
if( paused_pressure_data.length > 0 ){
// .slice() to make shallow copy, rather than copy reference only
chart_pressure.data.datasets[0].data = paused_pressure_data.slice();
chart_flow.data.datasets[0].data = paused_flow_data.slice();
chart_volume.data.datasets[0].data = paused_volume_data.slice();
paused_pressure_data.length = 0;
paused_volume_data.length = 0;
paused_flow_data.length = 0;
}
chart_pressure.update()
chart_flow.update()
chart_volume.update()
// turn off tooltips while running
chart_pressure.options.tooltips.enabled = false;
chart_flow.options.tooltips.enabled = false;
chart_volume.options.tooltips.enabled = false;
} else {
pause_charts = true;
// copy charts to buffered data
// .slice() to make shallow copy, rather than copy reference only
paused_pressure_data = chart_pressure.data.datasets[0].data.slice();
paused_flow_data = chart_flow.data.datasets[0].data.slice();
paused_volume_data = chart_volume.data.datasets[0].data.slice();
// turn on tooltips while not running
chart_pressure.options.tooltips.enabled = true;
chart_flow.options.tooltips.enabled = true;
chart_volume.options.tooltips.enabled = true;
}
}
function setChartXaxisRange(min,max){
......@@ -124,48 +159,61 @@ function requestData() {
// if charts exist we now update with all points received
*/
if (fillTrends){
//update current plots with difference
for ( let i = 0 ; i < chart_pressure.data.datasets[0].data.length; i++){
chart_pressure.data.datasets[0].data[i]['x'] = chart_pressure.data.datasets[0].data[i]['x'] - diff;
chart_flow.data.datasets[0].data[i]['x'] = chart_flow.data.datasets[0].data[i]['x'] - diff;
chart_volume.data.datasets[0].data[i]['x'] = chart_volume.data.datasets[0].data[i]['x'] - diff;
// captive function to update either chart or paused data
function updateChartData(pressure_data, flow_data, volume_data, diff, data, last_timestamp){
for ( let i = 0 ; i < pressure_data.length; i++){
pressure_data[i]['x'] -= diff;
flow_data[i]['x'] -= diff;
volume_data[i]['x'] -= diff;
}
//add new points
//keep track of timestamp to make sure we're not mixing it up
var running_timestamp = -1;
var running_rowid = 0;
for (let ip = data.length-1 ; ip >= 0; ip--){
var point = data[ip];
if (point["payload_type"] != "DATA") {
for (let ip = data.length-1 ; ip >= 0; ip--){
var point = data[ip];
if (point["payload_type"] != "DATA") {
continue;
}
var seconds = point["timestamp"]/1000;
var seconds = point["timestamp"]/1000;
//must be greater than our last stopped point
if (seconds < current_timestamp) continue;
// this is a hack for the test data so that we can cycle data
//if ( seconds - current_timestamp > 1.0) { console.log("Current Timestamp: ",current_timestamp, " against ",seconds);}
//protect against bogus timestamps, skip those that are earlier than we already have
if (running_timestamp == -1 || seconds > running_timestamp )
{
// get difference between last time stamp and this and apply to existing points
chart_pressure.data.datasets[0].data.push({x : seconds - last_timestamp, y : point["pressure_patient"]});
chart_flow.data.datasets[0].data.push({ x : seconds - last_timestamp, y : point["flow"]});
chart_volume.data.datasets[0].data.push({ x : seconds - last_timestamp, y : point["volume"]});
running_timestamp = seconds;
// this is a hack for the test data so that we can cycle data
//protect against bogus timestamps, skip those that are earlier than we already have
if (running_timestamp == -1 || seconds > running_timestamp ) {
// get difference between last time stamp and this and apply to existing points
pressure_data.push({x : seconds - last_timestamp, y : point["pressure_patient"]});
flow_data.push({ x : seconds - last_timestamp, y : point["flow"]});
volume_data.push({ x : seconds - last_timestamp, y : point["volume"]});
running_timestamp = seconds;
}
}
while(chart_pressure.data.datasets[0].data.length > 10000) chart_pressure.data.datasets[0].data.shift();
while(chart_flow.data.datasets[0].data.length > 10000) chart_flow.data.datasets[0].data.shift();
while(chart_volume.data.datasets[0].data.length > 10000) chart_volume.data.datasets[0].data.shift();
var maxLen = 10000; // probably can be smaller
while( pressure_data.length > maxLen ) {
pressure_data.shift();
flow_data.shift();
volume_data.shift();
}
return;
}
if (fillTrends){
//keep track of timestamp to make sure we're not mixing it up
var running_timestamp = -1;
var running_rowid = 0;
if ( pause_charts ){
updateChartData(paused_pressure_data,
paused_flow_data,
paused_volume_data,
diff, data, last_timestamp);
} else {
updateChartData(chart_pressure.data.datasets[0].data,
chart_flow.data.datasets[0].data,
chart_volume.data.datasets[0].data,
diff, data, last_timestamp);
// running so redraw now
chart_pressure.update();
chart_flow.update();
chart_volume.update();
}
current_timestamp = last_timestamp;
if (!pause_charts){
chart_pressure.update(0);
chart_flow.update(0);
chart_volume.update(0);
}
}
// fill loop plots
if ( fillLoops ) {
......
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