215 lines
5.5 KiB
HTML
215 lines
5.5 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="temperature"></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="heaterPercent"></div>
|
|
<div class="unit">%</div>
|
|
</div>
|
|
<div class="valueAndUnit">
|
|
<div class="value" id="heaterPowerW"></div>
|
|
<div class="unit">W</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
const htmlTemperature = document.getElementById('temperature');
|
|
const htmlTarget = document.getElementById('target');
|
|
const htmlHeaterPercent = document.getElementById('heaterPercent');
|
|
const htmlHeaterPowerW = document.getElementById('heaterPowerW');
|
|
|
|
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.164" : "") + path);
|
|
request.send();
|
|
}
|
|
|
|
function update(response) {
|
|
try {
|
|
const data = JSON.parse(response);
|
|
if (data === null
|
|
|| data === undefined
|
|
|| !data.hasOwnProperty("pid")
|
|
|| !data.pid.hasOwnProperty("p")
|
|
|| !data.pid.hasOwnProperty("i")
|
|
|| !data.pid.hasOwnProperty("d")
|
|
|| !data.pid.hasOwnProperty("target")
|
|
|| !data.hasOwnProperty("temperature")
|
|
|| !data.hasOwnProperty("heater")
|
|
|| !data.heater.hasOwnProperty("percent")
|
|
|| !data.heater.hasOwnProperty("powerW")
|
|
) {
|
|
reset("Invalid data");
|
|
return;
|
|
}
|
|
const targetV = data.pid.target;
|
|
const inputV = data.temperature;
|
|
htmlTemperature.innerText = isSet(inputV) ? inputV.toFixed(1) : "- - -";
|
|
htmlTarget.innerText = targetV.toFixed(1);
|
|
htmlHeaterPercent.innerText = data.heater.percent.toFixed(0);
|
|
htmlHeaterPowerW.innerText = data.heater.powerW.toFixed(0);
|
|
const inputNull = !isSet(inputV);
|
|
const inputCold = !inputNull && inputV < targetV - 0.5;
|
|
const inputWarm = !inputNull && inputV > targetV + 0.5;
|
|
const inputGood = !inputNull && !inputCold && !inputWarm;
|
|
setClass(htmlTemperature.parentElement, "inputNull", inputNull);
|
|
setClass(htmlTemperature.parentElement, "inputCold", inputCold);
|
|
setClass(htmlTemperature.parentElement, "inputGood", inputGood);
|
|
setClass(htmlTemperature.parentElement, "inputWarm", inputWarm);
|
|
} catch (e) {
|
|
reset(e);
|
|
}
|
|
}
|
|
|
|
function isSet(v) {
|
|
return v !== null && v !== undefined;
|
|
}
|
|
|
|
function reset(e) {
|
|
console.error("Failed to handle data:", e);
|
|
htmlTemperature.innerText = "- - -";
|
|
htmlTarget.innerText = "- - -";
|
|
htmlHeaterPercent.innerText = "- - -";
|
|
htmlHeaterPowerW.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> |