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:
belevo\mh
2025-12-18 07:29:23 +01:00
parent ba99c8f2e3
commit b7ef02eb86
1 changed files with 64 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
Energy_Pie/module.html
View File

@@ -92,6 +92,22 @@
letter-spacing: 0.3px; letter-spacing: 0.3px;
opacity: 1; opacity: 1;
} }
#hint .kv {
display: inline-block;
margin-right: 14px;
white-space: nowrap;
}
#hint .kv b {
font-weight: 800;
}
/* App/kleine Breite: untereinander */
@media (max-width: 720px) {
#hint .kv {
display: block;
margin: 4px 0;
}
}
</style> </style>
@@ -202,60 +218,55 @@ function donutCard({ title, percent, subtitle, color }) {
const dash = share * c; // farbiger Anteil const dash = share * c; // farbiger Anteil
const rest = c - dash; // Rest (dunkel) const rest = c - dash; // Rest (dunkel)
return ` return `
<div style="border:1px solid rgba(255,255,255,0.12); <div style="padding:18px 10px;
border-radius:16px; width:100%;
padding:14px; display:flex;
min-height:260px; flex-direction:column;
width:100%; align-items:center;
display:flex; justify-content:center;
flex-direction:column; gap:12px;">
align-items:center;
justify-content:center;
gap:12px;
background:rgba(0,0,0,0.18);
backdrop-filter: blur(6px);">
<div style="font-size:14px;font-weight:700;opacity:.9;"> <div style="font-size:15px;font-weight:800;opacity:.95;">
${escapeHtml(title)} ${escapeHtml(title)}
</div> </div>
<div style="position:relative;width:180px;height:180px;"> <div style="position:relative;width:180px;height:180px;">
<svg width="180" height="180" viewBox="0 0 180 180"> <svg width="180" height="180" viewBox="0 0 180 180">
<!-- Restsegment --> <!-- Restsegment -->
<circle cx="90" cy="90" r="${r}" <circle cx="90" cy="90" r="${r}"
fill="none" fill="none"
stroke="rgba(255,255,255,0.20)" stroke="rgba(255,255,255,0.22)"
stroke-width="18" stroke-width="18"
stroke-linecap="butt" stroke-linecap="butt"
stroke-dasharray="${rest} ${dash}" stroke-dasharray="${rest} ${dash}"
stroke-dashoffset="${-dash}" stroke-dashoffset="${-dash}"
transform="rotate(-90 90 90)" /> transform="rotate(-90 90 90)" />
<!-- Anteilsegment --> <!-- Anteilsegment -->
<circle cx="90" cy="90" r="${r}" <circle cx="90" cy="90" r="${r}"
fill="none" fill="none"
stroke="${color}" stroke="${color}"
stroke-width="18" stroke-width="18"
stroke-linecap="butt" stroke-linecap="butt"
stroke-dasharray="${dash} ${rest}" stroke-dasharray="${dash} ${rest}"
transform="rotate(-90 90 90)" transform="rotate(-90 90 90)"
style="filter: drop-shadow(0 0 10px ${color});" /> style="filter: drop-shadow(0 0 12px ${color});" />
</svg> </svg>
<div style="position:absolute;inset:0;display:flex; <div style="position:absolute;inset:0;display:flex;
align-items:center;justify-content:center; align-items:center;justify-content:center;
font-weight:800;font-size:24px;"> font-weight:900;font-size:26px;">
${escapeHtml(percent.toFixed(1))}% ${escapeHtml(percent.toFixed(1))}%
</div>
</div>
<div style="font-size:12px;opacity:.65;text-align:center;">
${escapeHtml(subtitle)}
</div> </div>
</div> </div>
`;
<div style="font-size:13px;opacity:.75;text-align:center;">
${escapeHtml(subtitle)}
</div>
</div>
`;
} }
function render(data) { function render(data) {
@@ -289,8 +300,12 @@ function donutCard({ title, percent, subtitle, color }) {
if (data?.hasData === false) { if (data?.hasData === false) {
elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.'; elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.';
} else { } else {
elHint.textContent = elHint.innerHTML = `
`Produktion: ${prod.toFixed(2)} kWh · Verbrauch: ${cons.toFixed(2)} kWh · Netzbezug: ${grid.toFixed(2)} kWh · Eigenverbrauch: ${eigenClamped.toFixed(2)} kWh`; <span class="kv"><b>Produktion:</b> ${escapeHtml(prod.toFixed(2))} kWh</span>
<span class="kv"><b>Verbrauch:</b> ${escapeHtml(cons.toFixed(2))} kWh</span>
<span class="kv"><b>Netzbezug:</b> ${escapeHtml(grid.toFixed(2))} kWh</span>
<span class="kv"><b>Eigenverbrauch:</b> ${escapeHtml(eigenClamped.toFixed(2))} kWh</span>
`;
} }
elGrid.innerHTML = [ elGrid.innerHTML = [