diff --git a/raspberry-backend/templates/index_prototype.html b/raspberry-backend/templates/index_prototype.html
index 7ab6895f9d48c73e841ba2f9dc05a081e4111b6e..281ee4337336746d3e050cc6b68a0b6f0aa33463 100644
--- a/raspberry-backend/templates/index_prototype.html
+++ b/raspberry-backend/templates/index_prototype.html
@@ -66,44 +66,44 @@
<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 min-height-1b">
- <a class="small text-dark stretched-link col-center" href="#">Air (suppply)</a>
+ <a class="small text-dark stretched-link col-center" href="#">Air (suppply) [cmH2O]</a>
</div>
- <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_air_supply">000.00</span>cmH2O</div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_air_supply">000.00</span></div>
</div>
</div>
<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 min-height-1b">
- <a class="small text-dark stretched-link col-center" href="#">Air (regulated)</a>
+ <a class="small text-dark stretched-link col-center" href="#">Air (regulated) [cmH2O]</a>
</div>
- <div class="card-body px-1 py-3"><span class = "reading-main" id="pressure_air_regulated">000.00</span>cmH2O</div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id="pressure_air_regulated">000.00</span></div>
</div>
</div>
<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 min-height-1b">
- <a class="small text-dark stretched-link col-center" href="#">O2 (suppply)</a>
+ <a class="small text-dark stretched-link col-center" href="#">O2 (suppply) [cmH2O]</a>
</div>
- <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_o2_supply">000.00</span>cmH2O</div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_o2_supply">000.00</span></div>
</div>
</div>
<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 min-height-1b">
- <a class="small text-dark stretched-link col-center" href="#">O2 (regulated)</a>
+ <a class="small text-dark stretched-link col-center" href="#">O2 (regulated) [cmH2O]</a>
</div>
- <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_o2_regulated">000.00</span>cmH2O</div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_o2_regulated">000.00</span></div>
</div>
</div>
<div class="col-xl-4 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 min-height-1b">
- <a class="small text-dark stretched-link col-center" href="#">Buffer</a>
+ <a class="small text-dark stretched-link col-center" href="#">Buffer [cmH2O]</a>
</div>
- <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_buffer">000.00</span> cmH2O</div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_buffer">000.00</span></div>
</div>
</div>
@@ -113,28 +113,78 @@
<div class="col-xl-4 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 min-height-1b">
- <a class="small text-dark stretched-link col-center" href="#">Inhale</a>
+ <a class="small text-dark stretched-link col-center" href="#">Inhale [mbar]</a>
</div>
- <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_inhale">000.00</span> mBar</div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_inhale">000.00</span></div>
</div>
</div>
<div class="col-xl-4 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 min-height-1b">
- <a class="small text-dark stretched-link col-center" href="#">Patient</a>
+ <a class="small text-dark stretched-link col-center" href="#">Patient [cmH2O]</a>
</div>
- <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_patient">000.00</span> cmH2O</div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_patient">000.00</span></div>
</div>
</div>
<div class="col-xl-4 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 small min-height-1b">
- <a class="small text-dark stretched-link col-center" href="#">Patient (diff)</a>
+ <a class="small text-dark stretched-link col-center" href="#">Patient (diff) [cmH2O]</a>
</div>
- <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_diff_patient">000.00</span> cmH2O</div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_diff_patient">000.00</span> </div>
</div>
</div>
+ <div class="col-xl-4 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 min-height-1b">
+ <a class="small text-dark stretched-link col-center" href="#">Pressure [mbar]</a>
+ </div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "airway_pressure">000.00</span></div>
+ </div>
+ </div>
+ <div class="col-xl-4 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 min-height-1b">
+ <a class="small text-dark stretched-link col-center" href="#">Flow [mL/min]</a>
+ </div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "flow">000.00</span></div>
+ </div>
+ </div>
+ <div class="col-xl-4 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 small min-height-1b">
+ <a class="small text-dark stretched-link col-center" href="#">Volume [mL]</a>
+ </div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "volume">000.00</span></div>
+ </div>
+ </div>
+
+ <div class="col-xl-4 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 min-height-1b">
+ <a class="small text-dark stretched-link col-center" href="#">Data type</a>
+ </div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "data_type">000.00</span></div>
+ </div>
+ </div>
+ <div class="col-xl-4 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 min-height-1b">
+ <a class="small text-dark stretched-link col-center" href="#">Timestamp [s]</a>
+ </div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "timestamp">000.00</span></div>
+ </div>
+ </div>
+ <div class="col-xl-4 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 small 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>
+ </div>
+
<!--
<div class="col-xl-4 px-1 py-0">
<div class="card bg-primary text-dark mb-2">
@@ -252,6 +302,12 @@
document.getElementById("pressure_patient").innerHTML = (data.pressure_patient).toFixed(2);
document.getElementById("pressure_diff_patient").innerHTML = (data.pressure_diff_patient).toFixed(2);
document.getElementById("fsm_state").innerHTML = data.fsm_state;
+ document.getElementById("airway_pressure").innerHTML = (data.airway_pressure).toFixed(2);
+ document.getElementById("volume").innerHTML = (data.volume).toFixed(2);
+ document.getElementById("flow").innerHTML = (data.flow).toFixed(2);
+ document.getElementById("data_type").innerHTML = data.data_type;
+ document.getElementById("timestamp").innerHTML = (data.timestamp/1000).toFixed(2);
+ document.getElementById("version").innerHTML = data.version;
//document.getElementById("version").innerHTML = (data.version).toFixed(2); //Commented because not included in the html part
}
);