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

no message

Browse Source
This commit is contained in:
mh
2025-12-17 08:18:44 +01:00
parent 195209a6da
commit b6a1625433
2 changed files with 66 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Energy_Pie/module.html
+36 -85
View File
@@ -15,21 +15,16 @@
<input id="date" type="date" />
</label>
<button id="prev" type="button">◀</button>
<button id="prev" type="button">◀</button>
<button id="today" type="button">Heute</button>
<button id="next" type="button">▶</button>
<button id="next" type="button">▶</button>
</div>
<div style="margin-top:12px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;">
<div style="display:flex;flex-direction:column;gap:6px;">
<canvas id="pie" width="280" height="280" style="border-radius:14px;"></canvas>
<div id="period" style="font-size:12px;opacity:0.7;"></div>
</div>
<div id="period" style="margin-top:10px;font-size:12px;opacity:0.75;"></div>
<div style="min-width:260px;flex:1;">
<div style="font-weight:600;margin-bottom:8px;">Aufteilung</div>
<div id="legend" style="display:flex;flex-direction:column;gap:6px;"></div>
</div>
<div style="margin-top:10px;display:flex;flex-direction:column;gap:8px;max-width:520px;">
<div style="font-weight:600;">Werte</div>
<div id="values" style="display:flex;flex-direction:column;gap:6px;"></div>
</div>
</div>
@@ -39,30 +34,27 @@
const elPrev = document.getElementById('prev');
const elToday = document.getElementById('today');
const elNext = document.getElementById('next');
const elLegend = document.getElementById('legend');
const elValues = document.getElementById('values');
const elPeriod = document.getElementById('period');
const canvas = document.getElementById('pie');
const ctx = canvas.getContext('2d');
// Range ändern -> sofort rechnen
elRange.addEventListener('change', () => requestAction('SetRange', elRange.value));
// Fire immediately when user picks a date (input + change), with a tiny debounce
// Datum ändern -> sofort rechnen (input + change, mit kleinem debounce)
let dateTimer = null;
function pushDateNow() {
if (dateTimer) clearTimeout(dateTimer);
dateTimer = setTimeout(() => {
requestAction('SetDate', elDate.value);
}, 80);
dateTimer = setTimeout(() => requestAction('SetDate', elDate.value), 80);
}
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));
// Called by Symcon when PHP sends UpdateVisualizationValue($payload)
// Symcon pusht Daten hier rein (UpdateVisualizationValue -> handleMessage)
function handleMessage(data) {
if (!data) return;
@@ -72,6 +64,7 @@
const isTotal = (data.range === 'total');
elDate.disabled = isTotal;
// Zeitraum-Text
if (data.tStart && data.tEnd) {
const s = new Date(data.tStart * 1000);
const e = new Date(data.tEnd * 1000);
@@ -82,12 +75,30 @@
elPeriod.textContent = '';
}
// Werte-Box
if (data.values) {
drawPie(data.values);
drawLegend(data.values);
renderValues(data.values);
} else {
renderValues({});
}
}
// Nur diese vier Werte anzeigen (fixe Reihenfolge)
function renderValues(values) {
const order = ['Produktion', 'Einspeisung', 'Netz', 'Hausverbrauch'];
elValues.innerHTML = order.map((k) => {
const v = values?.[k];
const val = (+v || 0);
return `
<div style="display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid rgba(255,255,255,0.15);border-radius:10px;">
<div>${escapeHtml(k)}</div>
<div style="white-space:nowrap;font-variant-numeric:tabular-nums;">${val.toFixed(2)} kWh</div>
</div>
`;
}).join('');
}
function fmtDateTime(d) {
const yyyy = d.getFullYear();
const mm = String(d.getMonth() + 1).padStart(2,'0');
@@ -97,69 +108,6 @@
return `${dd}.${mm}.${yyyy} ${hh}:${mi}`;
}
function drawLegend(values) {
const entries = Object.entries(values);
const sum = entries.reduce((a,[,v]) => a + (+v || 0), 0);
elLegend.innerHTML = entries.map(([k,v]) => {
const val = (+v || 0);
const pct = sum > 0 ? (val / sum * 100) : 0;
return `
<div style="display:flex;justify-content:space-between;gap:12px;">
<div>${escapeHtml(k)}</div>
<div style="white-space:nowrap;">${val.toFixed(2)} kWh (${pct.toFixed(1)}%)</div>
</div>`;
}).join('');
}
function drawPie(values) {
const entries = Object.entries(values).map(([k,v]) => [k, (+v || 0)]);
const sum = entries.reduce((a,[,v]) => a + v, 0);
ctx.clearRect(0,0,canvas.width,canvas.height);
// Background circle
ctx.beginPath();
ctx.arc(140,140,125,0,Math.PI*2);
ctx.fillStyle = '#f2f2f2';
ctx.fill();
if (sum <= 0) {
ctx.fillStyle = '#666';
ctx.font = '14px sans-serif';
ctx.fillText('Keine Daten', 92, 145);
return;
}
let start = -Math.PI / 2;
const colors = ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948'];
entries.forEach(([label,val], i) => {
if (val <= 0) return;
const ang = (val / sum) * Math.PI * 2;
ctx.beginPath();
ctx.moveTo(140,140);
ctx.arc(140,140,125,start,start+ang);
ctx.closePath();
ctx.fillStyle = colors[i % colors.length];
ctx.fill();
start += ang;
});
// Donut hole
ctx.beginPath();
ctx.arc(140,140,65,0,Math.PI*2);
ctx.fillStyle = '#fff';
ctx.fill();
// Sum in center
ctx.fillStyle = '#111';
ctx.font = 'bold 16px sans-serif';
const text = sum.toFixed(2) + ' kWh';
const w = ctx.measureText(text).width;
ctx.fillText(text, 140 - w/2, 146);
}
function escapeHtml(s) {
return String(s)
.replaceAll('&','&amp;')
@@ -168,4 +116,7 @@
.replaceAll('"','&quot;')
.replaceAll("'",'&#039;');
}
// Beim Laden direkt einmal Werte anfordern, damit sofort etwas angezeigt wird
setTimeout(() => requestAction('Refresh', 1), 200);
</script>