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

96
Energy_Pie/module.html
View File

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