193 lines
5.2 KiB
HTML
193 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Gärbox</title>
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
font-size: 16vw;
|
|
margin: 0.1em;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
div {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.section {
|
|
clear: both;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.title {
|
|
font-size: 50%;
|
|
font-style: italic;
|
|
text-align: center;
|
|
color: gray
|
|
}
|
|
|
|
.valueAndUnit {
|
|
clear: both;
|
|
float: right;
|
|
}
|
|
|
|
.controlPadding {
|
|
float: left;
|
|
padding: 0 0.25em;
|
|
}
|
|
|
|
.value {
|
|
float: left;
|
|
}
|
|
|
|
.unit {
|
|
float: left;
|
|
width: 1.2em;
|
|
margin-left: 0.25em;
|
|
text-align: left;
|
|
}
|
|
|
|
svg {
|
|
float: left;
|
|
width: 1em;
|
|
margin-top: 0.2em;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.inputNull {
|
|
color: gray;
|
|
}
|
|
|
|
.inputCold {
|
|
color: blue;
|
|
}
|
|
|
|
.inputGood {
|
|
color: green;
|
|
}
|
|
|
|
.inputWarm {
|
|
color: red;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="section">
|
|
<div class="title">Ist-Temperatur</div>
|
|
<div class="valueAndUnit">
|
|
<div class="value" id="input"></div>
|
|
<div class="unit">°C</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="title">Ziel-Temperatur</div>
|
|
<div class="valueAndUnit">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" onclick="targetAdd(-0.5)">
|
|
<path d="M7 12H17"/>
|
|
<circle cx="12" cy="12" r="10"/>
|
|
</svg>
|
|
<div class="controlPadding">
|
|
<div class="value" id="target"></div>
|
|
<div class="unit">°C</div>
|
|
</div>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" onclick="targetAdd(+0.5)">
|
|
<path d="M12 7V17M7 12H17"/>
|
|
<circle cx="12" cy="12" r="10"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="title">Heizung</div>
|
|
<div class="valueAndUnit">
|
|
<div class="value" id="outputPercent"></div>
|
|
<div class="unit">%</div>
|
|
</div>
|
|
<div class="valueAndUnit">
|
|
<div class="value" id="outputPowerW"></div>
|
|
<div class="unit">W</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
const input = document.getElementById('input');
|
|
const target = document.getElementById('target');
|
|
const outputPercent = document.getElementById('outputPercent');
|
|
const outputPowerW = document.getElementById('outputPowerW');
|
|
|
|
function status() {
|
|
get("/status");
|
|
}
|
|
|
|
function targetAdd(delta) {
|
|
get("/target/add?delta=" + delta);
|
|
}
|
|
|
|
function get(path) {
|
|
const request = new XMLHttpRequest();
|
|
request.onreadystatechange = function () {
|
|
if (request.readyState === 4) {
|
|
update(request.responseText);
|
|
}
|
|
};
|
|
request.open('GET', (location.hostname === "localhost" ? "http://10.0.0.171" : "") + path);
|
|
request.send();
|
|
}
|
|
|
|
function update(response) {
|
|
try {
|
|
const data = JSON.parse(response);
|
|
if (data === null || data === undefined || !data.hasOwnProperty("target") || !data.hasOwnProperty("input") || !data.hasOwnProperty("outputPercent") || !data.hasOwnProperty("outputPowerW")) {
|
|
throw new Error("Invalid data");
|
|
}
|
|
input.innerText = data.input == null ? "- - -" : data.input.toFixed(1);
|
|
target.innerText = data.target.toFixed(1);
|
|
outputPercent.innerText = data.outputPercent.toFixed(0);
|
|
outputPowerW.innerText = data.outputPowerW.toFixed(0);
|
|
const inputNull = data.input === null;
|
|
const inputCold = !inputNull && data.input < data.target - 0.5;
|
|
const inputWarm = !inputNull && data.input > data.target + 0.5;
|
|
const inputGood = !inputNull && !inputCold && !inputWarm;
|
|
setClass(input.parentElement, "inputNull", inputNull);
|
|
setClass(input.parentElement, "inputCold", inputCold);
|
|
setClass(input.parentElement, "inputGood", inputGood);
|
|
setClass(input.parentElement, "inputWarm", inputWarm);
|
|
} catch (e) {
|
|
console.error("Failed to handle data:", e);
|
|
input.innerText = "- - -";
|
|
target.innerText = "- - -";
|
|
outputPercent.innerText = "- - -";
|
|
outputPowerW.innerText = "- - -";
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} element
|
|
* @param {string} className
|
|
* @param {boolean} enabled
|
|
*/
|
|
function setClass(element, className, enabled) {
|
|
if (element.classList.contains(className) !== enabled) {
|
|
if (enabled) {
|
|
element.classList.add(className);
|
|
} else {
|
|
element.classList.remove(className);
|
|
}
|
|
}
|
|
}
|
|
|
|
status();
|
|
setInterval(() => status(), 2000);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |