dh/Symcon_Belevo_Energiemanagement_testing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
Daniel Häfliger
2025-06-24 13:55:14 +02:00
parent 4062e76491
commit 7afab2d813
2 changed files with 40 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

492
PV_Visu/module.html
View File

@@ -1,465 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="/icons.js" crossorigin="anonymous"></script>
<meta charset="utf-8">
<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;
}
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">
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>
<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 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>
</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>
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>
// Bind to HTML-SDK
if (typeof registerMessageHandler === 'function') {
registerMessageHandler(handleMessage);
}
</script>

2
PV_Visu/module.php
View File

@@ -14,7 +14,7 @@ class PV_Visu extends IPSModule
$this->RegisterPropertyInteger('VarFeedIn', 0);
$this->RegisterPropertyInteger('VarGrid', 0);
// HTML-SDK Tile aktivieren
$this->SetVisualizationType(3);
$this->SetVisualizationType(1);
}
public function ApplyChanges(): void