216 lines
10 KiB
HTML
216 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
html, body { margin: 0; padding: 4px; background: transparent; }
|
|
.bar-container { width: 100%; background: #eee; border-radius: 4px; overflow: hidden; height: 20px; margin-bottom: 10px; }
|
|
.bar { height: 100%; float: left; }
|
|
.bar-cons { background: #4CAF50; }
|
|
.bar-feed { background: #8BC34A; }
|
|
.bar-pv { background: #FF9800; }
|
|
.bar-grid { background: #FF5722; }
|
|
.label { font-size: 0.9em; margin-bottom: 4px; color: #333; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="main_container">
|
|
<div id="div1" class="div1">
|
|
<img id="image">
|
|
</div>
|
|
<div class="div2">
|
|
<div class="row">
|
|
<b class="title">Status:</b>
|
|
<div id="status">
|
|
<span class="right-padding" onclick="requestAction('Status', 0);">
|
|
<span class="status-off clickable">Off</span>
|
|
</span>
|
|
<span class="right-padding" onclick="requestAction('Status', 3);">
|
|
<span class="status-heating clickable">Heating</span>
|
|
</span>
|
|
<span class="right-padding" onclick="requestAction('Status', 4);">
|
|
<span class="status-defrost clickable">Defrost</span>
|
|
</span>
|
|
<span class="right-padding" onclick="requestAction('Status', 5);">
|
|
<span class="status-warm-water clickable">Warm Water</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<b class="title">Mode:</b>
|
|
<div id="mode">
|
|
<span class="right-padding" onclick="requestAction('Mode', 0);">
|
|
<span class="mode-normal clickable">Normal</span>
|
|
</span>
|
|
<span class="right-padding" onclick="requestAction('Mode', 1);">
|
|
<span class="mode-silent clickable">Silent</span>
|
|
</span>
|
|
<span class="right-padding" onclick="requestAction('Mode', 2);">
|
|
<span class="mode-eco clickable">Eco</span>
|
|
</span>
|
|
</div>
|
|
<span id="mode"></span>
|
|
</div>
|
|
<div class="balkendiagramm">
|
|
<div class="balken_rechts">
|
|
<div class="balken_links_leistung">
|
|
<span class="balken_links_text">
|
|
<b class="right-space">Power:</b>
|
|
<span id="power" class="right-space"></span>
|
|
<span>KW</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="balkendiagramm">
|
|
<div class="balken_rechts">
|
|
<div class="balken_links_kompressor">
|
|
<span class="balken_links_text">
|
|
<b class="right-space">Compressor:</b>
|
|
<span id="compressorpower" class="right-space"></span>
|
|
<span>Hz</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="balkendiagramm">
|
|
<div class="balken_rechts">
|
|
<div class="balken_links_durchfluss">
|
|
<span class="balken_links_text">
|
|
<b class="right-space">Flow:</b>
|
|
<span id="flow" class="right-space"></span>
|
|
<span>l/h</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="balkendiagramm">
|
|
<div class="balken_rechts">
|
|
<div class="balken_links_luefterdrehzahl">
|
|
<span class="balken_links_text">
|
|
<b class="right-space">Fan Rotations:</b>
|
|
<span id="fanrotations" class="right-space"></span>
|
|
<span>rpm</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container_daten">
|
|
<div class="daten_links">
|
|
<div>SPF:</div>
|
|
<div>COP:</div>
|
|
<div>Consumption:</div>
|
|
<div>Temp.:</div>
|
|
<div>Heater Rods:</div>
|
|
</div>
|
|
<div class="daten_rechts">
|
|
<div>
|
|
<i class="fa-light fa-house fa-sm icon right-space"></i>
|
|
<span id="spf" class="right-padding"></span>
|
|
<i class="fa-light fa-fire-flame-curved fa-sm icon right-space"></i>
|
|
<span id="spfheating" class="right-padding"></span>
|
|
<i class="fa-light fa-droplet fa-sm icon right-space"></i>
|
|
<span id="spfwater"></span>
|
|
</div>
|
|
<div>
|
|
<i class="fa-light fa-fire-flame-curved fa-sm icon right-space"></i>
|
|
<span id="cop"></span>
|
|
</div>
|
|
<div>
|
|
<i class="fa-light fa-bolt fa-sm icon right-space"></i>
|
|
<span id="consumption" class="right-space"></span>
|
|
<span class="right-padding">Watt</span>
|
|
<i class="fa-light fa-bolt fa-sm icon right-space"></i>
|
|
<span class="right-space">Today:</span>
|
|
<span id="consumptiontoday" class="right-space"></span>
|
|
<span>kWh</span>
|
|
</div>
|
|
<div>
|
|
<i class="fa-light fa-tree fa-sm icon right-space"></i>
|
|
<span id="outdoortemperature" class="right-space"></span>
|
|
<span class="right-padding">°C</span>
|
|
<i class="fa-light fa-droplet fa-sm icon right-space"></i>
|
|
<span id="watertemperature" class="right-space"></span>
|
|
<span class="right-padding">°C</span>
|
|
<i class="fa-light fa-circle-down fa-sm icon right-space"></i>
|
|
<span id="returntemperature" class="right-space"></span>
|
|
<span class="right-padding">°C</span>
|
|
<i class="fa-light fa-circle-up fa-sm icon right-space"></i>
|
|
<span id="flowtemperature" class="right-space"></span>
|
|
<span>°C</span>
|
|
</div>
|
|
<div>
|
|
<i class="fa-light fa-fan fa-sm icon right-space"></i>
|
|
<span class="right-space">HP:</span>
|
|
<i id="heaterrodbackupstatus" class="fa-light fa-circle fa-sm icon right-padding"></i></span>
|
|
<i class="fa-light fa-droplet fa-sm icon"></i>
|
|
<span class="right-space">WW-Storage:</span>
|
|
<i id="heaterrodphase1" class="fa-light fa-circle fa-sm icon"></i>
|
|
<i id="heaterrodphase2" class="fa-light fa-circle fa-sm icon"></i>
|
|
<i id="heaterrodphase3" class="fa-light fa-circle fa-sm icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" charset="UTF-8">
|
|
function handleMessage(message) {
|
|
const data = JSON.parse(message);
|
|
const divID = data.Ident.toLowerCase();
|
|
const value = data.result;
|
|
const divElement = document.getElementById(divID);
|
|
if (divElement) {
|
|
switch (data.Ident) {
|
|
case 'Status': {
|
|
const statusMapping = {
|
|
0: window.assets.img_wp_aus,
|
|
3: window.assets.img_wp_heizen,
|
|
4: window.assets.img_wp_heizen,
|
|
5: window.assets.img_wp_ww,
|
|
};
|
|
|
|
let index = data.Value;
|
|
if (!statusMapping[index]) {
|
|
index = 0;
|
|
}
|
|
|
|
divElement.className = 'status_' + data.Value;
|
|
document.getElementById('image').src = statusMapping[index];
|
|
break;
|
|
}
|
|
|
|
case 'Mode':
|
|
divElement.className = 'mode_' + data.Value;
|
|
break;
|
|
|
|
case 'HeaterRodBackupStatus':
|
|
case 'HeaterRodPhase1':
|
|
case 'HeaterRodPhase2':
|
|
case 'HeaterRodPhase3':
|
|
if (data.Value) {
|
|
divElement.classList.remove('fa-regular');
|
|
divElement.classList.add('fa-light');
|
|
}
|
|
else {
|
|
divElement.classList.remove('fa-light');
|
|
divElement.classList.add('fa-regular');
|
|
}
|
|
break;
|
|
|
|
case 'Power':
|
|
case 'CompressorPower':
|
|
case 'Flow':
|
|
case 'FanRotations':
|
|
divElement.textContent = Number.isInteger(data.Value) ? data.Value.toString() : data.Value.toFixed(2);
|
|
divElement.parentElement.parentElement.style.width = `${(data.Value / data.Max) * 100}%`;
|
|
break;
|
|
|
|
default:
|
|
divElement.textContent = Number.isInteger(data.Value) ? data.Value.toString() : data.Value.toFixed(2);
|
|
break;
|
|
}
|
|
} else {
|
|
console.error('Ungültiges JSON-Format oder fehlende Daten.');
|
|
}
|
|
}
|
|
</script> |