diff --git a/raspberry-backend/app.py b/raspberry-backend/app.py
index 8266c3e35a3746dde29b67fa38700bcd3c9abe1c..524e8385278031b430216b2e6b6eec2c05cec96c 100755
--- a/raspberry-backend/app.py
+++ b/raspberry-backend/app.py
@@ -32,6 +32,10 @@ def hello_worlds():
def settings():
return render_template('settings.html', result=live_data())
+@WEBAPP.route('/charts')
+def charts():
+ return render_template('charts.html', result=live_data())
+
@WEBAPP.route('/fan')
def fan():
return render_template('fan.html', result=live_data())
diff --git a/raspberry-backend/static/css/style_v3.css b/raspberry-backend/static/css/style_v3.css
index e5d4b22a9477b64fdad60d1f58e25f50dde0821c..cf4e6726527b8e4b412fd03431eed7b49c11da26 100644
--- a/raspberry-backend/static/css/style_v3.css
+++ b/raspberry-backend/static/css/style_v3.css
@@ -7543,6 +7543,10 @@ button.bg-cern:focus {
.my-1 {
margin-top: 0.25rem !important;
}
+.mt-0b,
+.my-0b {
+ margin-top: 0.1rem !important;
+}
.mr-1,
.mx-1 {
@@ -7553,7 +7557,10 @@ button.bg-cern:focus {
.my-1 {
margin-bottom: 0.25rem !important;
}
-
+.mb-0b,
+.my-0b {
+ margin-bottom: 0.1rem !important;
+}
.ml-1,
.mx-1 {
margin-left: 0.25rem !important;
@@ -7896,12 +7903,12 @@ button.bg-cern:focus {
}
.m-n5 {
- margin: -3rem !important;
+a margin: -3rem !important;
}
.mt-n5,
.my-n5 {
- margin-top: -3rem !important;
+l margin-top: -3rem !important;
}
.mr-n5,
@@ -10264,17 +10271,28 @@ body {
#chart-area{ fill:white; }
.fa-w-16{ width:95px;height:95px;}
.path-icon{ fill:rgb(31,71,147); }
+.path-icon-alarm{ fill:red; }
+.transparent{ fill:none;fill-opacity:1.0; }
.w-100{width:100%;}
+.w-95{width:95%;}
+.w-99{width:99%;}
+
.alarm-ok{border: 1px solid var(--cern); width:20rem;}
.alarm-red{border-color:#ff0000;color:#ff0000}
-#alarms{color:red;}
+.text-align-right{text-align:right;}
+#alarms{color:red;vertical-align:middle;text-align:center;line-height:calc(var(--top-height) - 0.5rem);}
+.border-invisible{
+ border: 1px solid rgb(255,255,255);
+}
div.active{
- background-color: rgb(211,211,211);
+ background-color: rgb(240,240,240);
+ border: 1px solid var(--cern);
border-radius: 0.25rem;
}
.patient{ min-width:12rem;}
.sb-control-button{
- width:250px;
+ border: 1px solid var(--cern);
+ width:200px;
height:100px;
}
@@ -10305,4 +10323,7 @@ div.active{
//background: rgba(0,0,0,.15);
//box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
}
-.controls { position: absolute;bottom:0;}
\ No newline at end of file
+.controls { position: absolute;bottom:0;}
+
+.col-center{ margin: 0 auto; }
+.lh-1{line-height:1;}
\ No newline at end of file
diff --git a/raspberry-backend/templates/index.html b/raspberry-backend/templates/index.html
index a0afc3600875c2bad7e4efc2a5f38b491d7298bf..05d37d41bb86868b3bc35ffd9b4d4b9cf2eb2a45 100644
--- a/raspberry-backend/templates/index.html
+++ b/raspberry-backend/templates/index.html
@@ -6,19 +6,19 @@
{% block content %}
<main>
-<select id='chart_variables' multiple>
+ <div class="container-fluid">
+ <!--<h1 class="mt-4">Info</h1> !-->
+ <div class = "row">
+ <div class = "col-md-7 py-0">
+ <select id='chart_variables' multiple>
<option value='temperature' selected>temperature</option>
<option value='pressure' selected>pressure</option>
<option value='variable3' selected>variable3</option>
<option value='variable4' selected>variable4</option>
<option value='variable5' selected>variable5</option>
<input type="button" value="Submit" onclick="updateChartType()">
-</select>
+ </select>
- <div class="container-fluid">
- <!--<h1 class="mt-4">Info</h1> !-->
- <div class = "row">
- <div class = "col-md-7 py-0">
<div class="row">
<div class="col-md-12">
<div class="card mb-6">
@@ -87,46 +87,45 @@
</div>
- <div class="row no-gutters">
- <form action="{{ url_for('data_handler') }}" method="post">
- <div class="card rounded-lg w-100 br-red small">
- <div class="card-header px-1 py-1 align-items-center justify-content-between">
- Thresholds
- <div class = "float-right"><a class="unlock thresholds" id="toggle_thresholds" onclick="toggle_lock_thresholds()">
+ <div class="row no-gutters w-100">
+ <form action="{{ url_for('data_handler') }}" method="post" class="w-95">
+ <div class="card rounded-lg small px-0">
+ <div class="card-header align-items-center justify-content-between px-1 py-1">
+ Inputs
+ <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">
- <path class="path-icon" 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>
+ <path class="path-icon transparent" id="path-unlocked" d="M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"></path>
</svg>
</a>
</div>
</div>
<div class="card-body px-1 py-1">
- <span class=""><label class="small" for="inputThres1">Inhale Time:</label><input class="form-control px-0" id="inputThres1" type="number" value=1 max=100 min=0 name="" readOnly /></span>
- <span class="form-group"><label class="small" for="inputVar1">Fill Time:</label><input class="form-control px-0 py-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max = 100 /></span>
- <span class="form-group"><label class="small" for="inputVar1">Pause:</label><input class="form-control px-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max=100 /></span>
- <br>
-
- <span class=""><label class="small" for="inputThres1">Exhale/Inhale</label><input class="form-control px-0" id="inputThres1" type="number" value=1 max=100 min=0 name="" readOnly /></span>
- <span class="form-group"><label class="small" for="inputVar1">PEEP:</label><input class="form-control px-0 py-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max = 100 /></span>
- <span class="form-group"><label class="small" for="inputVar1">Inhale Time:</label><input class="form-control px-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max=100 /></span>
- <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>
-
+ <table class="text-align-right">
+ <tr>
+ <td><span class=""><label class="small" for="inputThres1">Inhale Time (ms):</label><input class="form-control px-0" id="inputThres1" type="number" value=1 max=100 min=0 name="" readOnly /></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></td>
+ </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="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"><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>
+ </tr>
+ </table>
</div>
- <div class="card-footer px-0 py-0 align-items-center justify-content-between">
- <span class="form-group"><input class="form-control py-0" id="inputPassword" type="submit" value="Submit Changes" /></span>
+ <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>
</div>
+ </div>
</form>
- </div>
</div>
- <div class = "row">
- <div class="col-xl-4 px-1 py-0 col-md-5">
- <div class = "rounded-lg">
- <a> <button class="sb-control-button py-3 rounded-lg">INHALE</button></a>
- </div>
- <div class="card rounded-lg float-right">
- <a> <button class="sb-control-button py-1 rounded-lg">EXHALE</button></a>
- </div>
- </div>
+ <div class = "row no-gutters ml-auto mr-auto py-2">
+ <a> <button class="sb-control-button py-3 rounded-lg mr-1">INHALE</button></a>
+ <a> <button class="sb-control-button py-1 rounded-lg ml-1">EXHALE</button></a>
</div>
</div>
</div>
@@ -136,10 +135,46 @@
{% endblock %}
{% block scripts %}
-<script>
-function setActiveClass() {
- var element = document.getElementById("fan-icon");
- element.classList.add("active");
-}
-</script>
+<script type=text/javascript>
+ function toggle_lock_settings() {
+ setTimeout(function(){
+ var x = document.getElementsByClassName("form-control");
+ var i;
+ if ( x.length > 0 && x[0].readOnly == true ){
+ for (i = 0; i < x.length; i++) { x[i].readOnly = false; }
+ var el = document.getElementById("path-locked");
+ el.classList.add("transparent");
+ var el2 = document.getElementById("path-unlocked");
+ el2.classList.remove("transparent");
+
+ }
+ else{
+ for (i = 0; i < x.length; i++ ) {
+ x[i].readOnly = true;
+ }
+ var el = document.getElementById("path-unlocked");
+ el.classList.add("transparent");
+ var el2 = document.getElementById("path-locked");
+ el2.classList.remove("transparent");
+
+ }
+
+
+ if ( document.getElementById("inputName").readOnly == true){
+ document.getElementById("inputName").readOnly = false;
+ document.getElementById("inputAge").readOnly = false;
+ document.getElementById("inputWeight").readOnly = false;
+ document.getElementById("inputHeight").readOnly = false;
+ }
+ else {
+ document.getElementById("inputName").readOnly = true;
+ document.getElementById("inputAge").readOnly = true;
+ document.getElementById("inputWeight").readOnly = true;
+ document.getElementById("inputHeight").readOnly = true;
+ }
+ }
+ ,1000)}
+
+ </script>
+
{% endblock %}
diff --git a/raspberry-backend/templates/settings.html b/raspberry-backend/templates/settings.html
index 46b1d9084689dc3de5edf4f0a471fa903e01224d..bc6762d2cd228669981ada6a4be1aee0d860f6b6 100644
--- a/raspberry-backend/templates/settings.html
+++ b/raspberry-backend/templates/settings.html
@@ -5,7 +5,7 @@
<div class="container">
<form action="{{ url_for('data_handler') }}" method="post">
<div class="row justify-content-center">
- <div class="card rounded-lg w-100 px-0 py-0">
+ <div class="card rounded-lg px-0 py-0 my-1">
<div class="card-header px-1 py-1">Personal Details
<div class="float-right"><a class="unlock personal" id="toggle_personal" onclick="toggle_lock_personal()">
<svg aria-hidden="true" id="personal_lock" 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">
@@ -23,7 +23,7 @@
</div>
</div>
<div class="row justify-content-center">
- <div class="card rounded-lg w-100 px-0 py-0">
+ <div class="card rounded-lg px-0 py-0">
<div class="card-header px-1 py-1">
Thresholds
<div class = "float-right"><a class="unlock thresholds" id="toggle_thresholds" onclick="toggle_lock_thresholds()">
@@ -36,21 +36,21 @@
<div class="card-body px-1 py-1">
<span class="form-group"><label class="small" for="inputVar1">pressure_air_supply</label><input class="form-control py-0" id="pressure_air_supply" type="number" value=1 name="pressure_air_supply" readOnly /></span>
<span class="form-group"><label class="small" for="inputVar2">pressure_air_regulated</label><input class="form-control py-0" id="pressure_air_regulated" type="number" value=1 name="variable2" readOnly /></span>
- <br></br>
+ <br>
<span class="form-group"><label class="small" for="inputVar3">pressure_o2_supply</label><input class="form-control py-0" id="pressure_o2_supply" type="number" value=1 name="variable3" readOnly /></span>
<span class="form-group"><label class="small" for="inputVar4">pressure_o2_regulated</label><input class="form-control py-0" id="pressure_o2_regulated" type="number" value=1 name="variable4" readOnly /></span>
- <br></br>
+ <br>
<span class="form-group"><label class="small" for="inputVar5">pressure_buffer</label><input class="form-control py-0" id="pressure_buffer" type="number" value=1 name="variable4" readOnly /></span>
<span class="form-group"><label class="small" for="inputVar6">pressure_inhale</label><input class="form-control py-0" id="pressure_inhale" type="number" value=1 name="variable4" readOnly /></span>
- <br></br>
+ <br>
<span class="form-group"><label class="small" for="inputVar7">pressure_patient</label><input class="form-control py-0" id="pressure_patient" type="number" value=1 name="variable4" readOnly /></span>
- <br></br>
+ <br>
<span class="form-group"><label class="small" for="inputVar8">readback_valve_air_in</label><input class="form-control py-0" id="readback_valve_air_in" type="number" value=1 name="variable4" readOnly /></span>
<span class="form-group"><label class="small" for="inputVar9">readback_valve_02_in</label><input class="form-control py-0" id="readback_valve_02_in" type="number" value=1 name="variable4" readOnly /></span>
- <br></br>
+ <br>
<span class="form-group"><label class="small" for="inputVar10">readback_valve_out</label><input class="form-control py-0" id="readback_valve_out" type="number" value=1 name="variable5" readOnly /></span>
<span class="form-group"><label class="small" for="inputVar11">readback_valve_scavenge</label><input class="form-control py-0" id="readback_valve_scavenge" type="number" value=1 name="variable6" readOnly /></span>
- <br></br>
+ <br>
<span class="form-group"><label class="small" for="inputVar12">readback_valve_purge</label><input class="form-control py-0" id="readback_valve_purge" type="number" value=1 name="variable6" readOnly /></span>
<span class="form-group"><label class="small" for="inputVar13">readback_mode</label><input class="form-control py-0" id="readback_mode" type="number" value=1 name="variable6" readOnly /></span>
</div>