465 lines
16 KiB
HTML
465 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<script src="/icons.js" crossorigin="anonymous"></script>
|
|
<style>
|
|
:root {
|
|
--div-height: 23px;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
|
|
.main_container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.div1 {
|
|
width: 20%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.div1 img {
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.div2 {
|
|
width: 80%;
|
|
padding: 5px 5px 5px 2.5%;
|
|
margin: 0px 0px 0px 2.5%;
|
|
box-sizing: border-box;
|
|
border-radius: 0px;
|
|
border-left: 1px dotted #28cdab;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.balkendiagramm {
|
|
width: 100%;
|
|
display: flex;
|
|
position: relative;
|
|
margin-bottom: 2%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.balken_links_leistung,
|
|
.balken_links_durchfluss,
|
|
.balken_links_luefterdrehzahl,
|
|
.balken_links_kompressor,
|
|
.balken_rechts_leistung,
|
|
.balken_rechts_durchfluss,
|
|
.balken_rechts_luefterdrehzahl,
|
|
.balken_rechts_kompressor {
|
|
height: calc(var(--div-height) + var(--div-height) /5);
|
|
border-radius: calc(var(--div-height) / 4) 0px 0px calc(var(--div-height) / 4);
|
|
font-size: 0.9em;
|
|
transition: width 2s;
|
|
transition-timing-function: ease;
|
|
}
|
|
|
|
@keyframes gradient_leistung {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes gradient_durchfluss {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes gradient_luefterdrehzahl {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes gradient_kompressor {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
.balken_links_leistung {
|
|
background: repeating-linear-gradient(to right, red 0%, orange 50%, red 100%);
|
|
background-size: 200% auto;
|
|
background-position: 0 100%;
|
|
animation: gradient_leistung 10s infinite;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
.balken_links_durchfluss {
|
|
background: repeating-linear-gradient(to right, #0054ff 0%, #44a4f5 50%, #0054ff 100%);
|
|
background-size: 200% auto;
|
|
background-position: 0 100%;
|
|
animation: gradient_leistung 10s infinite;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
.balken_links_luefterdrehzahl {
|
|
background: repeating-linear-gradient(to right, #13b7f2 0%, #99e4ff 50%, #13b7f2 100%);
|
|
background-size: 200% auto;
|
|
background-position: 0 100%;
|
|
animation: gradient_leistung 10s infinite;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
.balken_links_kompressor {
|
|
background: repeating-linear-gradient(to right, #990303 0%, #ff0000 50%, #990303 100%);
|
|
background-size: 200% auto;
|
|
background-position: 0 100%;
|
|
animation: gradient_leistung 10s infinite;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
.balken_links_text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 2%;
|
|
transform: translate(-0%, -50%);
|
|
color: #fff;
|
|
z-index: 2;
|
|
padding: 3px;
|
|
}
|
|
|
|
.balken_rechts {
|
|
width: 100%;
|
|
border-radius: calc(var(--div-height) / 4) calc(var(--div-height) / 4);
|
|
background: linear-gradient(to right, rgba(135, 135, 135, 0.6) 0%, rgba(135, 135, 135, 0.2) 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
50% {
|
|
opacity: 1
|
|
}
|
|
|
|
100% {
|
|
opacity: 0
|
|
}
|
|
}
|
|
|
|
.container_daten {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.daten_links {
|
|
margin-right: 20px;
|
|
border: 0px solid #000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.daten_rechts {
|
|
border: 0px solid #000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.icon {
|
|
color: #26d4b9;
|
|
width: 13px;
|
|
}
|
|
|
|
.right-space {
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.right-padding {
|
|
padding-right: 15px;
|
|
}
|
|
|
|
#status,
|
|
#mode {
|
|
color: gray;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.title {
|
|
width: 100px;
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.status_0 .status-off {
|
|
color: #26d4b9;
|
|
}
|
|
|
|
.status_3 .status-heating {
|
|
color: orangered;
|
|
}
|
|
|
|
.status_4 .status-defrost {
|
|
color: lightskyblue;
|
|
}
|
|
|
|
.status_5 .status-warm-water {
|
|
color: blue;
|
|
}
|
|
|
|
.mode_0 .mode-normal,
|
|
.mode_1 .mode-silent,
|
|
.mode_2 .mode-eco {
|
|
color: #26d4b9;
|
|
}
|
|
</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> |