Commit 7296375a authored by Karol Hennessy's avatar Karol Hennessy
parents 941718d6 9065e4a3
......@@ -1853,6 +1853,7 @@ small,
display:flex;
align-items:center;
justify-content: center;
min-height:1.4rem;
/*border: 1px solid red;*/
}
......@@ -1898,7 +1899,8 @@ small,
}
.card-footer {
padding: 0.75rem 1.25rem;
/*padding: 0.75rem 1.25rem;*/
padding: 0;
background-color: rgba(0, 0, 0, 0.03);
border-top: 1px solid rgba(0, 0, 0, 0.125);
}
......@@ -6082,6 +6084,11 @@ z-index:1000;
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-charts-main{
flex: 0 0 78.3333333333%;
max-width: 78.3333333333%;
}
.col-cards-main {
flex: 0 0 20.8333333333%;
......@@ -6095,11 +6102,42 @@ z-index:1000;
flex: 0 0 20.8333333333%;
max-width: 20.8333333333%;
}
.col-settings-main{
.col-settings-row {
flex: 0 0 100%;
max-width:100%;
display:flex;
flex-flow: row wrap;
justify-content:center;
height:4.0rem;
}
.col-settings-main {
background-color: white;
}
.card-reading, .card-setting, .card-reading-proto, .card-input-reading-proto{
.card-reading, .card-reading-proto, .card-input-reading-proto{
position: relative;
min-width: 0;
word-wrap: break-word;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.0);
border-radius: 0.25rem;
display:flex;
flex-direction:column;
padding-right: 0.0rem !important;
padding-left: 0.0rem !important;
padding-top:0.0rem;
padding-bottom:0.0rem;
margin-right: 0.05rem !important;
margin-left: 0.05rem !important;
/*color: #343a40 !important;*/
color:white;
/*margin-bottom: 0.5rem !important;*/
margin-bottom:0;
/*border:1px solid green;*/
}
.card-setting{
position: relative;
min-width: 0;
word-wrap: break-word;
......@@ -6119,7 +6157,9 @@ z-index:1000;
/*margin-bottom: 0.5rem !important;*/
margin-bottom:0;
/*border:1px solid green;*/
}
.card-reading-proto{
flex: 0 0 31.8%;
max-width: 31.8%;
......@@ -6129,10 +6169,18 @@ z-index:1000;
flex: 0 0 48.0%;
max-width: 48.0%;
}
.card-setting, .card-reading{
.card-reading{
flex: 0 0 98.0%;
max-width: 98.0%;
}
.card-setting{
flex: 0 0 15.0%;
max-width:15%;
background:white;
}
.card-header {
color:white;
}
......@@ -6153,10 +6201,10 @@ z-index:1000;
}
.card-reading {
height:calc((100vh - var(--top-height) - 1.0rem - 1.5rem - 2.0rem)/6.0);
height:calc((100vh - var(--top-height) - 1.0rem - 1.5rem)/6.0);
}
.card-setting {
height:calc((100vh - var(--top-height) - 1.0rem - 1.5rem - 2.0rem)/6.0);
height:100%;
}
.card-reading-proto, .card-input-reading-proto {
height:calc((100vh - var(--top-height) - 1.5rem - 1.0rem - 2.0rem)/5.0);
......@@ -6175,7 +6223,7 @@ z-index:1000;
.main-chart-container {
position:relative;
width:100%;
height:calc((100vh - var(--top-height) - 0.5rem - 2.0rem - 1.5rem)/3.0); /* 2.0rem if for the range-button container, 1.5rem for the tab header*/
height:calc((100vh - var(--top-height) - 0.5rem - 2.0rem - 1.5rem - 4.0rem)/3.0); /* 2.0rem if for the range-button container, 1.5rem for the tab header*/
}
.main-gauge-container {
display:flex;
......
......@@ -64,12 +64,36 @@ function getGaugeMaxValue(name){
return obj[name].data.datasets[0].gaugeLimits[obj[name].data.datasets[0].gaugeLimits.length-1];
}
// Store the original Draw function
var originalLineDraw = Chart.controllers.scatter.prototype.draw;
var originalElementsDraw = Chart.controllers.scatter.prototype.addElements;
var originalElementResetDraw = Chart.controllers.scatter.prototype.addElementAndReset;
// extend the new type
Chart.helpers.extend(Chart.controllers.scatter.prototype, {
addElements: function() {
var xaxis = this['chart'].scales['x-axis-0'];
var yaxis = this['chart'].scales['y-axis-0'];
originalElementsDraw.apply(this,arguments);
},
addElementAndReset: function() {
originalElementResetDraw.apply(this,arguments);
},
draw: function () {
// use the base draw function
originalLineDraw.apply(this, arguments);
// draw the line
}
});
$(document).ready(function() {
var ctx_pressure = document.getElementById('pressure_chart');
if ( ctx_pressure ) {
let params = chartParam("pressure");
chart_pressure = new Chart(ctx_pressure, {
type: 'scatter',
chart_pressure = new Chart.Scatter(ctx_pressure, {
data: {
datasets: [{
data: [],
......@@ -127,6 +151,7 @@ $(document).ready(function() {
zeroLineColor: params.gridLines.zeroLineColor
},
ticks: {
display:true,
maxTicksLimit: 13,
maxRotation: 0,
min: -60,
......@@ -136,13 +161,13 @@ $(document).ready(function() {
gridLines : {
display: params.gridLines.display,
color: params.gridLines.color,
zeroLineColor: params.gridLines.zeroLineColor
zeroLineColor: params.gridLines.zeroLineColor,
},
ticks: {
beginAtZero: true,
suggestedMax: 25,
fontSize: 0.6*parseFloat(getComputedStyle(document.documentElement).fontSize),fontColor: "#cccccc",
maxTicksLimit: 8,
maxTicksLimit: 8,
},
scaleLabel: {
display: false,
......@@ -166,12 +191,12 @@ $(document).ready(function() {
}
});
$(document).ready(function() {
var ctx_flow = document.getElementById('flow_chart');
if (ctx_flow) {
let params = chartParam("flow");
chart_flow = new Chart(ctx_flow, {
type: 'scatter',
chart_flow = new Chart.Scatter(ctx_flow, {
data: {
//labels: initial_xaxis,
datasets: [{
......@@ -229,6 +254,7 @@ $(document).ready(function() {
zeroLineColor: params.gridLines.zeroLineColor
},
ticks: {
display:true,
maxTicksLimit: 13,
fontSize: 0.6*parseFloat(getComputedStyle(document.documentElement).fontSize),
maxRotation: 0,
......@@ -244,7 +270,7 @@ $(document).ready(function() {
ticks: {
beginAtZero: true,
maxTicksLimit: 8,
fontSize: 0.6*parseFloat(getComputedStyle(document.documentElement).fontSize),fontColor: "#cccccc",
fontSize: 0.6*parseFloat(getComputedStyle(document.documentElement).fontSize),fontColor: "#cccccc",
},
scaleLabel: {
display: false,
......@@ -276,8 +302,7 @@ $(document).ready(function() {
var ctx_volume = document.getElementById('volume_chart');
if (ctx_volume) {
let params = chartParam("volume");
chart_volume = new Chart(ctx_volume, {
type: 'scatter',
chart_volume = new Chart.Scatter(ctx_volume, {
data: {
datasets: [{
data: [],
......@@ -336,6 +361,7 @@ $(document).ready(function() {
zeroLineColor: params.gridLines.zeroLineColor
},
ticks: {
display:true,
maxTicksLimit: 13,
maxRotation: 0,
min: -60,
......
......@@ -5,6 +5,129 @@ var paused_pressure_data = Array(0);
var paused_flow_data = Array(0);
var paused_volume_data = Array(0);
// these are the settings we want to update
var settings = ["mode", "inspiratory_pressure", "ie_ratio", "volume", "respiratory_rate", "peep", "fiO2_percent", "inhale_time", "inhale_trigger_threshold", "exhale_trigger_threshold", "buffer_upper_pressure", "buffer_lower_pressure", "pid_gain"]
//fill our personals as well
var personals = ["name", "age", "sex", "height", "weight"];
// the short names used in the div ids
var short_names = {
PC_AC : "pcac",
PC_AC_PRVC : "prvc",
PC_PSV : "psv",
CPAP : "cpap",
TEST : "test",
PERSONAL : "personal"
}
//store our initial targets so we can go back if user cancels
var initial_targets = {
PC_AC : {},
PC_AC_PRVC : {},
PC_PSV : {},
CPAP : {},
TEST : {},
PERSONAL : {}
}
for (let j = 0 ; j < settings.length; j++){
initial_targets['PC_AC'][settings[j]] = "";
initial_targets['PC_AC_PRVC'][settings[j]] = "";
initial_targets['PC_PSV'][settings[j]] = "";
initial_targets['CPAP'][settings[j]] = "";
initial_targets['TEST'][settings[j]] = "";
initial_targets['PERSONAL'][settings[j]] = "";
}
for (let j = 0 ; j < personals.length; j++){
initial_targets['PERSONAL'][personals[j]] = "";
}
// fill when we open the page
$(document).ready(function(){
$.ajax({
url: '/last-targets',
success: function(data) {
if (data.length == 0) {
// we've not got any targets
console.log("Got no targets");
} else
{
for (let i = 0 ; i < data.length; i++){
var target = data[i];
if (target["mode"] == "TEST"){
for (let j = 0 ; j < settings.length; j++){
var element = document.getElementById("test_setting_"+settings[j]);
if (settings[j] in target && element){
initial_targets['TEST'][settings[j]] = target[settings[j]];
element.value = target[settings[j]].toPrecision(4);
}
}
}
if (target["mode"] == "PC_AC"){
for (let j = 0 ; j < settings.length; j++){
var element = document.getElementById("pcac_setting_"+settings[j]);
if (settings[j] in target && element){
initial_targets['PC_AC'][settings[j]] = target[settings[j]];
element.value = target[settings[j]].toPrecision(4);
}
}
}
if (target["mode"] == "PC_AC_PRVC"){
for (let j = 0 ; j < settings.length; j++){
var element = document.getElementById("prvc_setting_"+settings[j]);
if (settings[j] in target && element){
initial_targets['PC_AC_PRVC'][settings[j]] = target[settings[j]];
element.value = target[settings[j]].toPrecision(4);
}
}
}
if (target["mode"] == "PC_PSV"){
for (let j = 0 ; j < settings.length; j++){
var element = document.getElementById("psv_setting_"+settings[j]);
if (settings[j] in target && element){
initial_targets['PC_PSV'][settings[j]] = target[settings[j]];
element.value = target[settings[j]].toPrecision(4);
}
}
}
if (target["mode"] == "CPAP"){
for (let j = 0 ; j < settings.length; j++){
var element = document.getElementById("cpap_setting_"+settings[j]);
if (settings[j] in target && element){
initial_targets['CPAP'][settings[j]] = target[settings[j]];
element.value = target[settings[j]].toPrecision(4);
}
}
}
}
}
},
cache: false
});
$.ajax({
url: '/last-personal',
success: function(data) {
if (data.length == 0) {
// we're not getting any new data from the hevserver
console.log("Got no new personal details");
} else
{
for (let j = 0 ; j < personals.length; j++){
var element = document.getElementById("personal_"+personals[j]);
if (personals[j] in data && element){
element.value = data[personals[j]];
initial_targets['PERSONAL'][personals[j]] = data[personals[j]];
}
}
}
},
cache: false
});
});
function togglePause(){
if ( pause_charts ) {
pause_charts = false;
......@@ -248,6 +371,7 @@ function requestData() {
// captive function to update either chart or paused data
function updateChartData(pressure_data, flow_data, volume_data, diff, data, last_timestamp){
console.time('Updating Chart');
for ( let i = 0 ; i < pressure_data.length; i++){
pressure_data[i]['x'] -= diff;
flow_data[i]['x'] -= diff;
......@@ -277,6 +401,7 @@ function requestData() {
flow_data.shift();
volume_data.shift();
}
console.timeEnd('Updating Chart');
return;
}
......
......@@ -55,7 +55,7 @@
</div>
<!-- Alarm -->
<ul class="navbar-nav my-2 mx-2 alarm-ok px-2 py-0 w-100">
<ul class="navbar-nav my-2 mx-2 alarm-ok px-2 py-0 w-100" id = "alarm_ul">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-circle" class="svg-inline--fa fa-exclamation-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path id = "path-alarm" class="path-icon path-alarm" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg> <div id='alarms' class = "w-100"></div>
</ul>
......@@ -414,33 +414,51 @@
}
message +="?";
$.confirm({
title: 'Confirmation',
title: 'Confirm Change of Mode',
content: message,
buttons: {
confirm: function () {
selector.oldvalue = mode;
jsonForm = {};
jsonForm['name'] = mode;
$('.select-container').addClass('text-red');
$('.select-container').removeClass('text-white');
$.ajax({
url: "/mode_handler",
type: 'POST',
data : jsonForm,
success: function(response){
if (response == true){
$.dialog('Ventilator Change Accepted');
}
else{
$.dialog("Problem Updating Ventilator Mode, Please Try again");
}
confirm: function () {
var message2 = "<table>\n";
for (let i = 0 ; i < settings.length; i++){
message2+= "<tr><td>"+settings[i]+"</td><td>"+initial_targets[mode][settings[i]]+"</td></tr>\n";
}
})
},
cancel: function () {
selector.value = selector.oldvalue;
pickout.updated('.pickout');
$.dialog('Canceled!');
message2+="</table>";
$.confirm({
title : 'Confirm '+text+' Settings',
content: message2,
buttons:{
confirm: function(){
selector.oldvalue = mode;
jsonForm = {};
jsonForm['name'] = mode;
$('.select-container').addClass('text-red');
$('.select-container').removeClass('text-white');
$.ajax({
url: "/mode_handler",
type: 'POST',
data : jsonForm,
success: function(response){
if (response == true){
$.dialog('Ventilator Change Accepted');
}
else{
$.dialog("Problem Updating Ventilator Mode, Please Try again");
}
}
})
},
cancel: function(){
selector.value = selector.oldvalue;
pickout.updated('.pickout');
$.dialog('Canceled!');
}
}
})
},
cancel: function () {
selector.value = selector.oldvalue;
pickout.updated('.pickout');
$.dialog('Canceled!');
},
}
});
......
......@@ -42,53 +42,85 @@
<input type="button" class="lockable sb-nav-button" name="pause" value="Freeze" onclick="togglePause()" disabled>
</div>
</div>
</div>
<div class = "col-cards-main">
<div class = "row no-gutters">
<div class = "main-header">
Measurement
<div class = "row">
<div class="col-settings-row">
<div class="card-setting">
<div class="card-body tiny"><input class = "lockable" id = "setting_peep" value=0.0 size=5 onclick="show_easy_numpad(this,new input_controller('PEEP',this))"></div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-dark col-center" href="#">PEEP <small>[cmH2O]</small></a>
</div>
</div>
<div class="card-setting">
<div class="card-body tiny"><input class = "lockable" id = "setting_inspiratory_pressure" size=5 value=0.0 onclick="show_easy_numpad(this,new input_controller('INSPIRATORY_PRESSURE',this))"></div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-dark col-center" href="#">P<sub>insp</sub> <small>[cmH20]</small></a>
</div>
</div>
<div class="card-setting">
<div class="card-body tiny"><input class = "lockable" id = "setting_respiratory_rate" size=5 value=0.0 onclick="show_easy_numpad(this, new input_controller('RESPIRATORY_RATE',this));"></input></div>
<div class="card-footer d-flex align-items-center justify-content-between"><a class="small text-dark col-center" href="#">RR</a></div>
</div>
<div class="card-setting">
<div class="card-body tiny"><input class = "lockable" id = "setting_fiO2_percent" size=5 value=0.0 onclick="show_easy_numpad(this,new input_controller('FIO2',this))"></div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-dark col-center" href="#">FIO<sub>2</sub> <small>[%]</small></a>
</div>
</div>
<div class="card-setting">
<div class="card-body tiny"><input class = "lockable" id = "setting_inhale_time" size=5 value = 0.0 onclick = "show_easy_numpad(this, new input_controller('INHALE_TIME',this))"></div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-dark col-center" href="#">Inhale Time <small>[s]</small></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "col-cards-main">
<div class = "row no-gutters">
<div class="card-reading">
<div class="card-header d-flex align-items-center justify-content-between ">
<div class="card-header text-align-center">
<a class="small text-white col-center" href="#">PEEP<small>[cmH20]</small></a>
</div>
<div class="card-body px-1 py-1 tiny"><span id = "peep"></span></div>
<div class="card-body tiny"><span id = "peep">0.0</span></div>
</div>
<div class="card-reading">
<div class="card-header d-flex align-items-center justify-content-between ">
<div class="card-header text-align-center">
<a class="small text-white col-center" href="#">&lt;P<sub>plateau</sub>&gt;<small>[cmH20]</small></a>
</div>
<div class="card-body px-1 py-1 tiny"><span id = "plateau_pressure"></span></div>
<div class="card-body tiny"><span id = "plateau_pressure">0.0</span></div>
</div>
<div class="card-reading">
<div class="card-header d-flex align-items-center justify-content-between ">
<div class="card-header text-align-center">
<a class="small text-white col-center" href="#">RR</small></a>
</div>
<div class="card-body px-1 py-1 tiny"><span id="respiratory_rate"></span></div>
<div class="card-body tiny"><span id="respiratory_rate">0.0</span></div>
</div>
<div class="card-reading">
<div class="card-header d-flex align-items-center justify-content-between ">
<div class="card-header text-align-center">
<a class="small text-white col-center" href="#">FIO<sub>2</sub> <small>[%]</small></a>
</div>
<div class="card-body px-1 py-1 tiny"><span id = "fiO2_percent"></span></div>
<div class="card-body tiny"><span id = "fiO2_percent">0.0</span></div>
</div>
<div class="card-reading">
<div class="card-header d-flex align-items-center justify-content-between">
<div class="card-header text-align-center">
<a class="small text-white col-center" href="#">VTE <small>[mL]</small></a>
</div>
<div class="card-body px-1 py-1 tiny"><span id = "exhaled_tidal_volume">0.0</span></div>
<div class="card-body tiny"><span id = "exhaled_tidal_volume">0.0</span></div>
</div>
<div class="card-reading">
<div class="card-header d-flex align-items-center justify-content-between">
<div class="card-header text-align-center">
<a class="small text-white col-center" href="#">MVE <small>[L/min]</small></a>
</div>
<div class="card-body px-1 py-1 tiny"><span id = "exhaled_minute_volume">0.0</span></div>
<div class="card-body tiny"><span id = "exhaled_minute_volume">0.0</span></div>
</div>
</div>
</div>
<!--
<div class = "col-settings-main">
<div class = "row">
<div class = "main-header text-dark">
......@@ -126,6 +158,7 @@
</div>
<div class="card-body px-1 py-1 tiny"><input class = "lockable" id = "setting_inhale_time" value = 0.0 onclick = "show_easy_numpad(this, new input_controller('INHALE_TIME',this))"></div>
</div>
-->
<!-- hidden for now KH
<div class="card-setting">
<div class="card-header d-flex align-items-center justify-content-between">
......@@ -133,11 +166,11 @@
</div>
<div class="card-body px-1 py-1 tiny"><input class = "lockable" id = "setting_pid_gain" value=0.0 onclick="show_easy_numpad(this,new input_controller('PID_GAIN',this))"></div>
</div>
-->
</div>
</div>
</div> -->
</div>
</div>
......
......@@ -463,42 +463,7 @@ function openSetting(cityName) {
}
}
// these are the settings we want to update
var settings = ["mode", "inspiratory_pressure", "ie_ratio", "volume", "respiratory_rate", "peep", "fiO2_percent", "inhale_time", "inhale_trigger_threshold", "exhale_trigger_threshold", "buffer_upper_pressure", "buffer_lower_pressure", "pid_gain"]
//fill our personals as well
var personals = ["name", "age", "sex", "height", "weight"];
// the short names used in the div ids
var short_names = {
PC_AC : "pcac",
PC_AC_PRVC : "prvc",
PC_PSV : "psv",
CPAP : "cpap",
TEST : "test",
PERSONAL : "personal"
}
//store our initial targets so we can go back if user cancels
var initial_targets = {
PC_AC : {},
PC_AC_PRVC : {},
PC_PSV : {},
CPAP : {},
TEST : {},
PERSONAL : {}
}
for (let j = 0 ; j < settings.length; j++){
initial_targets['PC_AC'][settings[j]] = "";
initial_targets['PC_AC_PRVC'][settings[j]] = "";
initial_targets['PC_PSV'][settings[j]] = "";
initial_targets['CPAP'][settings[j]] = "";
initial_targets['TEST'][settings[j]] = "";
initial_targets['PERSONAL'][settings[j]] = "";
}
for (let j = 0 ; j < personals.length; j++){
initial_targets['PERSONAL'][personals[j]] = "";
}
// fill when we open the page
$(document).ready(function(){
......@@ -506,86 +471,6 @@ $(document).ready(function(){
if (tablinks.length > 0){
openSetting("mode");
}
$.ajax({
url: '/last-targets',
success: function(data) {
if (data.length == 0) {
// we've not got any targets
console.log("Got no targets");
} else
{
for (let i = 0 ; i < data.length; i++){
var target = data[i];
if (target["mode"] == "TEST"){
for (let j = 0 ; j < settings.length; j++){
var element = document.getElementById("test_setting_"+settings[j]);
if (settings[j] in target && element){
initial_targets['TEST'][settings[j]] = target[settings[j]];
element.value = target[settings[j]].toPrecision(4);
}
}
}
if (target["mode"] == "PC_AC"){
for (let j = 0 ; j < settings.length; j++){
var element = document.getElementById("pcac_setting_"+settings[j]);
if (settings[j] in target && element){
initial_targets['PC_AC'][settings[j]] = target[settings[j]];
element.value = target[settings[j]].toPrecision(4);
}
}
}
if (target["mode"] == "PC_AC_PRVC"){
for (let j = 0 ; j < settings.length; j++){
var element = document.getElementById("prvc_setting_"+settings[j]);
if (settings[j] in target && element){
initial_targets['PC_AC_PRVC'][settings[j]] = target[settings[j]];
element.value = target[settings[j]].toPrecision(4);
}
}
}
if (target["mode"] == "PC_PSV"){
for (let j = 0 ; j < settings.length; j++){
var element = document.getElementById("psv_setting_"+settings[j]);
if (settings[j] in target && element){
initial_targets['PC_PSV'][settings[j]] = target[settings[j]];
element.value = target[settings[j]].toPrecision(4);
}
}
}
if (target["mode"] == "CPAP"){
for (let j = 0 ; j < settings.length; j++){
var element = document.getElementById("cpap_setting_"+settings[j]);
if (settings[j] in target && element){
initial_targets['CPAP'][settings[j]] = target[settings[j]];
element.value = target[settings[j]].toPrecision(4);
}
}
}
}
}
},
cache: false
});
$.ajax({
url: '/last-personal',
success: function(data) {
if (data.length == 0) {
// we're not getting any new data from the hevserver
console.log("Got no new personal details");
} else
{
for (let j = 0 ; j < personals.length; j++){
var element = document.getElementById("personal_"+personals[j]);
if (personals[j] in data && element){
element.value = data[personals[j]];
initial_targets['PERSONAL'][personals[j]] = data[personals[j]];
}
}
}
},
cache: false
});
});
//function to wait for the update
......
Markdown is supported
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