From 1eec57810dab2684c9cd3e8c41ea7867e05d555b Mon Sep 17 00:00:00 2001
From: Stephen Farry <stephen.farry@gmail.com>
Date: Thu, 16 Apr 2020 11:51:32 +0100
Subject: [PATCH] some very minor UI changes and update of colors for chart
plot
---
raspberry-backend/static/css/style_v3.css | 35 ++++++++-------
raspberry-backend/static/js/Chart-plot.js | 52 +++++++++++++--------
raspberry-backend/templates/base.html | 2 +-
raspberry-backend/templates/index.html | 55 +++++++++++++----------
4 files changed, 85 insertions(+), 59 deletions(-)
diff --git a/raspberry-backend/static/css/style_v3.css b/raspberry-backend/static/css/style_v3.css
index ce77d617..ff616b88 100644
--- a/raspberry-backend/static/css/style_v3.css
+++ b/raspberry-backend/static/css/style_v3.css
@@ -2011,8 +2011,7 @@ pre code {
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-button{
- height: calc(1.3em + 0.75rem + 2px);
- padding: 0.375rem 0.75rem;
+ //height: calc(1.1em + 0.75rem + 2px);
background-color: #1f4793 ; color: white
}
@media (prefers-reduced-motion: reduce) {
@@ -4396,7 +4395,6 @@ input[type=button].btn-block {
}
.card-header {
- padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
@@ -10284,6 +10282,8 @@ body {
.alarm-ok{border: 1px solid var(--cern); width:20rem;}
.alarm-red{border-color:#ff0000;color:#ff0000}
.text-align-right{text-align:right;}
+.text-align-center{text-align:center;}
+
#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);
@@ -10298,11 +10298,11 @@ div.active{
border: 1px solid var(--cern);
width:200px;
height:100px;
- box-shadow:
- inset 0 0 2px 0 rgba(255,255,255,.4),
- inset 0 0 3px 0 rgba(0,0,0,.4),
- inset 0 0 3px 5px rgba(0,0,0,.05),
- 2px 2px 4px 0 rgba(0,0,0,.25);
+ //box-shadow:
+ // inset 0 0 2px 0 rgba(255,255,255,.4),
+ // inset 0 0 3px 0 rgba(0,0,0,.4),
+ // inset 0 0 3px 5px rgba(0,0,0,.05),
+ // 2px 2px 4px 0 rgba(0,0,0,.25);
border-radius: 4px;
}
@@ -10315,11 +10315,11 @@ div.active{
display: inline-block;
//text-shadow: 0 0 2px rgba(0,0,0,.3);
//font-family: sans-serif;
- box-shadow:
- inset 0 0 2px 0 rgba(255,255,255,.4),
- inset 0 0 3px 0 rgba(0,0,0,.4),
- inset 0 0 3px 5px rgba(0,0,0,.05),
- 2px 2px 4px 0 rgba(0,0,0,.25);
+ //box-shadow:
+ // inset 0 0 2px 0 rgba(255,255,255,.4),
+ // inset 0 0 3px 0 rgba(0,0,0,.4),
+ // inset 0 0 3px 5px rgba(0,0,0,.05),
+ // 2px 2px 4px 0 rgba(0,0,0,.25);
border-radius: 4px;
}
@@ -10328,16 +10328,19 @@ div.active{
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: rgba(255,255,255,.6);
- box-shadow: 0 1px 2px 0 rgba(255,255,255,.6);
+ //box-shadow: 0 1px 2px 0 rgba(255,255,255,.6);
}
.sb-control-button:after {
bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: rgba(0,0,0,.15);
- box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
+ //box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
}
.controls { position: absolute;bottom:0;}
.col-center{ margin: 0 auto; }
-.lh-1{line-height:1;}
\ No newline at end of file
+.lh-1{line-height:1;}
+.min-height-1b{min-height:1.75rem;}
+.min-height-2{min-height:2rem;}
+.min-height-6{min-height:6rem;}
\ No newline at end of file
diff --git a/raspberry-backend/static/js/Chart-plot.js b/raspberry-backend/static/js/Chart-plot.js
index e56d6fc1..0bb68001 100644
--- a/raspberry-backend/static/js/Chart-plot.js
+++ b/raspberry-backend/static/js/Chart-plot.js
@@ -113,24 +113,29 @@ $(document).ready(function() {
id: 'A',
type: 'linear',
position: 'left',
+ ticks: {
+ fontColor: "#0000FF", // this here
+ },
}, {
- id: 'B',
- type: 'linear',
- position: 'right',
- },{
- ticks: {
- min: 0,
- max: 200,
- stepSize: 20
- }
-
-
-}]
- },
- legend : {
- display: true}
- }
- });
+ id: 'B',
+ type: 'linear',
+ position: 'right',
+ ticks: {
+ fontColor: "#000000", // this here
+ },
+ ticks: {
+ min: 0,
+ max: 200,
+ stepSize: 20
+ }
+ }
+ ]
+ },
+ legend : {
+ display: true
+ }
+ }
+ });
requestDataVar1("pressure_buffer", "pressure_inhale");
});
@@ -210,11 +215,20 @@ function updateChartType() {
yAxes: [{
id: 'A',
type: 'linear',
- position: 'left',
+ position: 'left',
+ color: "#0000FF",
+ ticks: {
+ fontColor: "#0000FF", // this here
+ },
+
}, {
id: 'B',
type: 'linear',
- position: 'right',
+ position: 'right',
+ color: "#000000",
+ ticks: {
+ fontColor: "#000000", // this here
+ },
}]
},
legend : {
diff --git a/raspberry-backend/templates/base.html b/raspberry-backend/templates/base.html
index 98781e07..ae49e7b0 100644
--- a/raspberry-backend/templates/base.html
+++ b/raspberry-backend/templates/base.html
@@ -30,7 +30,7 @@
<!-- User-->
<ul class="navbar-nav ml-auto mr-0 mr-md-3 my-2 my-md-0">
<li class="nav-item dropdown">
- <i class="fas fa-user fa-fw"></i>
+ <!--<i class="fas fa-user fa-fw"></i>-->
</li>
<span class="patient">{{patient}}</span>
</ul>
diff --git a/raspberry-backend/templates/index.html b/raspberry-backend/templates/index.html
index 57df6a65..40cdba3a 100644
--- a/raspberry-backend/templates/index.html
+++ b/raspberry-backend/templates/index.html
@@ -11,13 +11,15 @@
<!--<h1 class="mt-4">Info</h1> !-->
<div class = "row">
<div class = "col-md-7 py-0">
- <select id='chart_variables' multiple="multiple">
+ <div class="row col-center pb-1">
+ <select id='chart_variables' multiple="multiple" class="form-select">
<option value='pressure_buffer' selected>pressure_buffer</option>
<option value='pressure_inhale' selected>pressure_inhale</option>
<option value='temperature_buffer' selected>temperature_buffer</option>
<option value='pressure_o2_regulated' selected>pressure_o2_regulated</option>
- <input class="form-button py-0" type="button" value="Submit" onclick="updateChartType()">
</select>
+ <input class="form-button" type="button" value="Submit" onclick="updateChartType()">
+ </div>
<div class="row">
<div class="col-md-12">
@@ -29,13 +31,13 @@
</div>
</div>
- <div class = "col-md-5 py-0 px-0 mr-0">
+ <div class = "col-md-5 py-0 px-0 mr-0 pl-1">
<div class="row">
<div class="col-xl-4 px-1 py-0 mr-0">
<div class="card bg-primary text-dark mb-2">
- <div class="card-header d-flex align-items-center justify-content-between py-1">
- <a class="small text-dark stretched-link" href="#">Version</a>
+ <div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
+ <a class="small text-dark stretched-link col-center" href="#">Version</a>
</div>
<div class="card-body px-1 py-3"><span class = "reading-main" id="version">000.00</span></div>
</div>
@@ -43,8 +45,8 @@
<div class="col-xl-4 px-1 py-0 mr-0">
<div class="card bg-primary text-dark mb-2">
- <div class="card-header d-flex align-items-center justify-content-between py-1">
- <a class="small text-dark stretched-link" href="#">fsm_state</a>
+ <div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
+ <a class="small text-dark stretched-link col-center" href="#">fsm_state</a>
</div>
<div class="card-body px-1 py-3"><span class = "reading-main" id = "fsm_state">000.00</span> </div>
</div>
@@ -52,8 +54,8 @@
<div class="col-xl-4 col-md-8 px-1 py-0">
<div class="card bg-primary text-dark mb-2">
- <div class="card-header d-flex align-items-center justify-content-between py-1">
- <a class="small text-dark stretched-link" href="#">pressure_buffer</a>
+ <div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
+ <a class="small text-dark stretched-link col-center" href="#">pressure_buffer</a>
</div>
<div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_buffer">000.00</span> Pa</div>
</div>
@@ -63,24 +65,24 @@
<div class="row">
<div class="col-xl-4 px-1 py-0 col-md-5">
<div class="card bg-primary text-dark mb-2">
- <div class="card-header d-flex align-items-center justify-content-between py-1">
- <a class="small text-dark stretched-link" href="#">pressure_inhale</a>
+ <div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
+ <a class="small text-dark stretched-link col-center" href="#">pressure_inhale</a>
</div>
<div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_inhale">000.00</span> Pa</div>
</div>
</div>
<div class="col-xl-4 col-md-8 px-1 py-0">
<div class="card bg-primary text-dark mb-2">
- <div class="card-header d-flex align-items-center justify-content-between py-1">
- <a class="small text-dark stretched-link" href="#">temperature_buffer</a>
+ <div class="card-header d-flex align-items-center justify-content-between py-1 min-height-1b">
+ <a class="small text-dark stretched-link col-center" href="#">temperature_buffer</a>
</div>
<div class="card-body px-1 py-3"><span class = "reading-main" id = "temperature_buffer">000.00</span> ℃</div>
</div>
</div>
<div class="col-xl-4 px-1 py-0 col-md-8">
<div class="card bg-primary text-dark mb-2">
- <div class="card-header d-flex align-items-center justify-content-between py-1">
- <a class="small text-dark stretched-link" href="#">pressure_o2_regulated</a>
+ <div class="card-header d-flex align-items-center justify-content-between py-1 small min-height-1b">
+ <a class="small text-dark stretched-link col-center" href="#">pressure_o2_regulated</a>
</div>
<div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_o2_regulated">000.00</span> Pa</div>
</div>
@@ -90,8 +92,8 @@
<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="card-header align-items-center justify-content-between pl-3 pr-1 py-1">
+ Settings
<div class = "float-right mr-1"><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" 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>
@@ -116,8 +118,8 @@
</tr>
</table>
</div>
- <div class="card-footer px-0 py-0 align-items-center">
- <span class="form-group ml-auto mr-auto"><input class="form-button py-0" id="form_submit" type="submit" value="Update Settings" disabled /></span>
+ <div class="card-footer px-0 py-0">
+ <div class="col-center"><input class="form-button float-right" id="form_submit" type="submit" value="Update" disabled /></div>
</div>
</div>
</form>
@@ -142,8 +144,13 @@
var i;
if ( x.length > 0 && x[0].readOnly == true ){
for (i = 0; i < x.length; i++) {
- if (x[i].id != "form_submit"){x[i].readOnly = false;}
- else{ x[i].disabled=false; }
+ if (x[i].id != "form_submit"){
+ x[i].readOnly = false;
+ }
+ else{
+ x[i].disabled=false;
+
+ }
var submit = document.getElementById("form_submit");
submit.disabled=false;
}
@@ -155,8 +162,10 @@
}
else{
for (i = 0; i < x.length; i++ ) {
- if (x[i].id != "form_submit"){x[i].readOnly = true;}
- else {x[i].disabled=true;}
+ if (x[i].id != "form_submit"){
+ x[i].readOnly = true;
+ }
+ else {x[i].disabled=true;
}
var submit = document.getElementById("form_submit");
--
GitLab