no message
This commit is contained in:
@@ -14,38 +14,203 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Hallo
|
||||
<div id="pv_visu">
|
||||
<div class="label" id="prodLabel"></div>
|
||||
<div class="bar-container">
|
||||
<div class="bar bar-cons" id="barCons"></div>
|
||||
<div class="bar bar-feed" id="barFeed"></div>
|
||||
<div class="main_container">
|
||||
<div id="div1" class="div1">
|
||||
<img id="image">
|
||||
</div>
|
||||
<div class="label" id="consLabel"></div>
|
||||
<div class="bar-container">
|
||||
<div class="bar bar-pv" id="barPV"></div>
|
||||
<div class="bar bar-grid" id="barGrid"></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>
|
||||
function Apply(data) {
|
||||
document.getElementById('prodLabel').innerText = 'Produktion: ' + data.value.prod + ' kWh';
|
||||
document.getElementById('barCons').style.width = data.prodCons + '%';
|
||||
document.getElementById('barFeed').style.width = data.prodFeed + '%';
|
||||
document.getElementById('consLabel').innerText = 'Verbrauch: ' + data.value.cons + ' kWh';
|
||||
document.getElementById('barPV').style.width = data.consPV + '%';
|
||||
document.getElementById('barGrid').style.width = data.consGrid + '%';
|
||||
}
|
||||
function handleMessage(msg) {
|
||||
try {
|
||||
var data = (typeof msg === 'string') ? JSON.parse(msg) : msg;
|
||||
Apply(data);
|
||||
} catch(e) {
|
||||
console.error('PV_Visu handleMessage error:', e, msg);
|
||||
<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.');
|
||||
}
|
||||
}
|
||||
// Bind to HTML-SDK
|
||||
if (typeof registerMessageHandler === 'function') {
|
||||
registerMessageHandler(handleMessage);
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
Reference in New Issue
Block a user