309 lines
6.7 KiB
HTML
309 lines
6.7 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
background-color: black;
|
|
text-align: center;
|
|
}
|
|
|
|
p {
|
|
color: red;
|
|
}
|
|
|
|
#offset {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: auto;
|
|
margin-top: 1%;
|
|
margin-bottom: 1%;
|
|
margin-right: 1%;
|
|
margin-left: 1%;
|
|
height: 96%;
|
|
border: 1px solid #F00; /* TODO: Remove this later. */
|
|
}
|
|
|
|
/* Below are all top elements - Vitals, Top Message, and Map */
|
|
|
|
#topElements {
|
|
padding: 2px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
/*border: 1px solid #0FF;*/ /* TODO: Remove this later */
|
|
}
|
|
|
|
/* Below are all Vitals styling */
|
|
#vitals {
|
|
display: flex;
|
|
flex: none;
|
|
line-height: 0;
|
|
flex-direction: column;
|
|
text-align: left;
|
|
margin-left: 2px;
|
|
/*flex-grow: 1;*/
|
|
width: 30%;
|
|
/*border: 1px solid #F00;*/ /* TODO: Remove this later. */
|
|
}
|
|
|
|
#heartrate {
|
|
|
|
}
|
|
|
|
#oxygen {
|
|
|
|
}
|
|
|
|
#bodyTemperature {
|
|
|
|
}
|
|
|
|
/* Below are all Top Message styling */
|
|
#topMessage {
|
|
align-self: center;
|
|
flex-grow: 2;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
border: 1px solid #F00; /* TODO: Remove this later */
|
|
}
|
|
|
|
#environmentTemperature {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Below are all Map styling */
|
|
#map {
|
|
margin-right: 2px;
|
|
width: 30%;
|
|
/*border: 1px solid #00F;*/ /* TODO: Remove this later */
|
|
}
|
|
|
|
#mapElements {
|
|
margin-right: 0;
|
|
margin-left: auto;
|
|
max-width: 30%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Contains project name and compass */
|
|
#mapTop {
|
|
display: flex;
|
|
flex: none;
|
|
flex-direction: row-reverse;
|
|
max-width: 20%;
|
|
line-height: 0;
|
|
margin-right: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
#projectName {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
#compass {
|
|
height: 0;
|
|
padding-bottom: 100%;
|
|
width: 100%;
|
|
border: 1px solid #F00; /* TODO: Remove later */
|
|
margin-left: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Contains the map itself */
|
|
#mapProper {
|
|
height: 0;
|
|
padding-bottom: 100%;
|
|
width: 100%;
|
|
border: 1px solid #5FE0E9;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Contains the time */
|
|
#mapTime {
|
|
max-width: 10%;
|
|
}
|
|
|
|
#time {
|
|
/*text-align: right;*/
|
|
line-height: 0;
|
|
color: #5FE0E9
|
|
}
|
|
|
|
/* ------------------------------------- */
|
|
/* Below are all center elements - Comms, Popup, and Info */
|
|
|
|
#centerElements {
|
|
flex-grow: 2;
|
|
display: flex;
|
|
margin-top: 2px;
|
|
border: 1px solid #0FF; /* TODO: Remove this later */
|
|
}
|
|
|
|
#commsPanel {
|
|
width: 20%;
|
|
/*flex-grow: 1;*/
|
|
margin-left: 2px;
|
|
border: 1px solid #F00; /* TODO: Remove this later */
|
|
}
|
|
|
|
#popupPanel {
|
|
flex-grow: 2;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
border: 1px soild #0F0; /* TODO: Remove this later */
|
|
}
|
|
|
|
#infoPanel {
|
|
width: 20%;
|
|
/*flex-grow: 1;*/
|
|
margin-right: 2px;
|
|
border: 1px solid #00F; /* TODO: Remove this later */
|
|
}
|
|
|
|
|
|
#bottomElements {
|
|
flex-grow: 1;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
border: 1px solid #0FF; /* TODO: Remove this later */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Handles x- and y-offset -->
|
|
<div id="offset">
|
|
<div id="topElements">
|
|
<div id="vitals">
|
|
<div id="heartrate"></div>
|
|
<div id="oxygen"></div>
|
|
<div id="bodyTemperature"></div>
|
|
</div>
|
|
<div id="topMessage">
|
|
<p>Top message - Notifications, warnings, and malfunctions and such</p>
|
|
</div>
|
|
<div id="map">
|
|
<div id="mapElements">
|
|
<div id="mapTop">
|
|
<div id="compass">
|
|
|
|
</div>
|
|
<div id="projectName">
|
|
<p>K.A.T.I.E.</p>
|
|
<div id="environmentTemperature"><p>‌</p></div>
|
|
</div>
|
|
</div>
|
|
<div id="mapProper">
|
|
|
|
</div>
|
|
<div id="mapTime">
|
|
<p id="time">00:00:00</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="centerElements">
|
|
<div id="commsPanel">
|
|
<p>Comms</p>
|
|
</div>
|
|
<div id="popupPanel">
|
|
<p>Popup</p>
|
|
</div>
|
|
<div id="infoPanel">
|
|
<p>Info</p>
|
|
</div>
|
|
</div>
|
|
<div id="bottomElements">
|
|
<p>Test2</p>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script type="text/javascript">
|
|
// TODO: Make baseUrl be set by Flask
|
|
var baseUrl = "http://localhost:5000";
|
|
var vitalsUrl = baseUrl + "/api/vitals";
|
|
var environmentUrl = baseUrl + "/api/environment";
|
|
|
|
// Malfunction Messages (human-friendly)
|
|
malfunctionMessage = [ "API Malfunction" ]
|
|
|
|
apiMalfunctionI = 0
|
|
|
|
function displayMalfunction(malfunction) {
|
|
console.log(malfunction);
|
|
}
|
|
|
|
function setVitals(vitalsData) {
|
|
heartrate = vitalsData["0"]["heartrate"];
|
|
oxygen = vitalsData["0"]["oxygen"];
|
|
bodytemp = vitalsData["0"]["bodytemp"];
|
|
|
|
setVitalsHeartrate(heartrate);
|
|
setVitalsOxygen(oxygen);
|
|
setVitalsBodytemp(bodytemp);
|
|
}
|
|
|
|
function setVitalsHeartrate(heartrate) {
|
|
if(heartrate === null) {
|
|
document.getElementById("heartrate").innerHTML = "";
|
|
} else {
|
|
document.getElementById("heartrate").innerHTML = "<p>Heartrate: " + heartrate + " BPM</p>";
|
|
}
|
|
}
|
|
|
|
function setVitalsOxygen(oxygen) {
|
|
if(oxygen === null) {
|
|
document.getElementById("oxygen").innerHTML = "";
|
|
} else {
|
|
document.getElementById("oxygen").innerHTML = "<p>Oxygen: " + oxygen + "% O2</p>";
|
|
}
|
|
}
|
|
|
|
function setVitalsBodytemp(bodytemp) {
|
|
if(bodytemp === null) {
|
|
document.getElementById("bodyTemperature").innerHTML = "";
|
|
} else {
|
|
document.getElementById("bodyTemperature").innerHTML = "<p>Body Temp: " + bodytemp + "°C</p>";
|
|
}
|
|
}
|
|
|
|
function setEnvironment(environmentData) {
|
|
temperature = environmentData["0"]["temperature"];
|
|
humidity = environmentData["0"]["humidity"];
|
|
|
|
setEnvironmentTemperature(temperature);
|
|
setEnvironmentHumidity(humidity);
|
|
}
|
|
|
|
function setEnvironmentTemperature(temperature) {
|
|
if(temperature === null) {
|
|
document.getElementById("environmentTemperature").innerHTML = "<p>‌</p>";
|
|
} else {
|
|
document.getElementById("environmentTemperature").innerHTML = "<p>" + temperature + "°C";
|
|
}
|
|
}
|
|
|
|
function setEnvironmentHumidity(humidity) {
|
|
|
|
}
|
|
|
|
function updateAll() {
|
|
$.get(vitalsUrl, (data, status) => {
|
|
if(status == "success") {
|
|
setVitals(data);
|
|
} else {
|
|
displayMalfunction(malfunctionMessage[apiMalfunctionI] + ": " + status);
|
|
}
|
|
});
|
|
|
|
$.get(environmentUrl, (data, status) => {
|
|
if(status == "success") {
|
|
setEnvironment(data);
|
|
} else {
|
|
displayMalfunction(malfunctionMessage[apiMalfunctionI] + ": " + status);
|
|
}
|
|
});
|
|
//stopInterval(t)
|
|
}
|
|
var t=setInterval(updateAll, 1000)
|
|
</script>
|
|
</body>
|
|
</html>
|