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-17 11:47:17 +01:00
parent 3651502d6e
commit 2c01458065
1 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
Energy_Pie/module.html
View File

@@ -6,7 +6,7 @@
<span>Zeitraum</span>
<select id="range">
<option value="day">Tag</option>
<option value="week">Woche</option>
<option value="week">Woche (Mo–So)</option>
<option value="month">Monat</option>
<option value="total">Gesamt</option>
</select>
@@ -18,14 +18,14 @@
</label>
<button id="prev" type="button">◀</button>
<button id="today" type="button">Letzter Eintrag</button>
<button id="today" type="button">Heute</button>
<button id="next" type="button">▶</button>
</div>
<div id="period" style="margin-top:10px;font-size:12px;opacity:0.75;"></div>
<div id="hint" style="margin-top:6px;font-size:12px;opacity:0.8;"></div>
<!-- Donut grid -->
<!-- 2 Donuts -->
<div id="grid"
style="margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;max-width:880px;">
@@ -42,10 +42,9 @@
const elHint = document.getElementById('hint');
const elGrid = document.getElementById('grid');
// sofort bei Range-Änderung
// Trigger sofort bei Änderung
elRange.addEventListener('change', () => requestAction('SetRange', elRange.value));
// Datum sofort (mit kleinem debounce)
let dateTimer = null;
function pushDateNow() {
if (dateTimer) clearTimeout(dateTimer);
@@ -54,7 +53,6 @@
elDate.addEventListener('input', pushDateNow);
elDate.addEventListener('change', pushDateNow);
// Navigation
elPrev.addEventListener('click', () => requestAction('Prev', 1));
elToday.addEventListener('click', () => requestAction('Today', 1));
elNext.addEventListener('click', () => requestAction('Next', 1));
@@ -82,46 +80,48 @@
return Number.isFinite(n) ? n : 0;
}
function formatKwh(v) {
return `${v.toFixed(2)} kWh`;
function clamp01(x) {
if (!Number.isFinite(x)) return 0;
if (x < 0) return 0;
if (x > 1) return 1;
return x;
}
// Donut card (SVG)
function donutCard({ label, value, share, color }) {
// share: 0..1
function donutCard({ title, percent, subtitle, color }) {
// percent: 0..100
const share = clamp01(percent / 100);
const r = 56;
const c = 2 * Math.PI * r;
const dash = Math.max(0, Math.min(1, share)) * c;
const dash = share * c;
const gap = c - dash;
return `
<div style="border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:14px;
display:flex;align-items:center;justify-content:center;min-height:190px;">
<div style="position:relative;width:160px;height:160px;">
<svg width="160" height="160" viewBox="0 0 160 160" style="display:block;">
display:flex;align-items:center;justify-content:center;min-height:210px;">
<div style="position:relative;width:170px;height:170px;">
<svg width="170" height="170" viewBox="0 0 170 170" style="display:block;">
<!-- track -->
<circle cx="80" cy="80" r="${r}"
<circle cx="85" cy="85" r="${r}"
fill="none" stroke="rgba(255,255,255,0.10)" stroke-width="18" />
<!-- arc -->
<circle cx="80" cy="80" r="${r}"
<circle cx="85" cy="85" r="${r}"
fill="none" stroke="${color}" stroke-width="18"
stroke-linecap="butt"
stroke-dasharray="${dash} ${gap}"
transform="rotate(-90 80 80)" />
<!-- inner hole look -->
<circle cx="80" cy="80" r="38" fill="rgba(0,0,0,0)" />
transform="rotate(-90 85 85)" />
</svg>
<div style="position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center;">
<div style="font-weight:700;font-size:16px;line-height:1.1;">
${escapeHtml(value.toFixed(2))} kWh
<div style="font-weight:800;font-size:18px;line-height:1;">
${escapeHtml(percent.toFixed(1))}%
</div>
<div style="margin-top:4px;font-size:13px;opacity:0.75;">
${escapeHtml(label)}
<div style="margin-top:4px;font-size:13px;opacity:0.80;">
${escapeHtml(title)}
</div>
<div style="margin-top:6px;font-size:12px;opacity:0.65;">
${(share*100).toFixed(1)}%
<div style="margin-top:10px;font-size:12px;opacity:0.65;max-width:140px;">
${escapeHtml(subtitle)}
</div>
</div>
</div>
@@ -131,32 +131,37 @@
function render(values, meta) {
const prod = toNum(values?.Produktion);
const feed = toNum(values?.Einspeisung);
const grid = toNum(values?.Netz);
const house = toNum(values?.Hausverbrauch);
const cons = toNum(values?.Hausverbrauch); // Verbrauch
const grid = toNum(values?.Netz); // Netzbezug
const order = [
{ key: 'Produktion', val: prod, color: '#63B3FF' }, // blau
{ key: 'Konsum', val: house, color: '#A855F7' }, // lila (wie Screenshot)
{ key: 'Einspeisung', val: feed, color: '#F59E0B' }, // orange
{ key: 'Netz', val: grid, color: '#34D399' } // grün
];
const eigen = cons - grid; // Eigenverbrauch
const eigenClamped = eigen < 0 ? 0 : eigen;
const sum = order.reduce((a, x) => a + x.val, 0);
const evq = (prod > 0) ? (eigenClamped / prod * 100) : 0;
const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
// Hinweis
// Hinweise
if (meta?.hasData === false) {
elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.';
} else {
elHint.textContent = sum > 0 ? `Summe (zur Prozent-Berechnung): ${formatKwh(sum)}` : 'Summe: 0.00 kWh';
elHint.textContent =
`Produktion: ${prod.toFixed(2)} kWh · Verbrauch: ${cons.toFixed(2)} kWh · Netzbezug: ${grid.toFixed(2)} kWh · Eigenverbrauch: ${eigenClamped.toFixed(2)} kWh`;
}
elGrid.innerHTML = order.map(x => donutCard({
label: x.key,
value: x.val,
share: sum > 0 ? (x.val / sum) : 0,
color: x.color
})).join('');
elGrid.innerHTML = [
donutCard({
title: 'EVQ',
percent: clamp01(evq / 100) * 100,
subtitle: 'Eigenverbrauch / Produktion',
color: '#63B3FF' // blau
}),
donutCard({
title: 'Autarkiegrad',
percent: clamp01(autark / 100) * 100,
subtitle: 'Eigenverbrauch / Verbrauch',
color: '#A855F7' // lila
})
].join('');
}
// Symcon -> Tile
@@ -186,7 +191,6 @@
elPeriod.textContent = '';
}
// Charts
render(data.values || {}, { hasData: data.hasData });
};