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 11:04:33 +01:00
parent 692bf28e0c
commit bbb8ee8bfe
1 changed files with 106 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

386
Energy_Pie/module.html
View File

@@ -1,4 +1,5 @@
<div id="wrap" style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
<!-- Controls -->
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
<label style="display:flex;gap:6px;align-items:center;">
@@ -17,341 +18,166 @@
<input id="date" type="date" />
</label>
<!-- Label rechts neben Date-Picker -->
<div id="dateLabel" style="font-weight:900;opacity:.95;min-width:140px;"></div>
<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 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="period" style="margin-top:10px;font-size:15px;font-weight:600;"></div>
<div id="hint" style="margin-top:6px;font-size:15px;font-weight:700;"></div>
<div id="grid"
style="margin-top:14px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
width:100%;
max-width:none;">
gap:14px;">
</div>
<div id="err" style="margin-top:8px;font-size:12px;opacity:0.95;color:#ffb4b4;"></div>
<div id="err" style="margin-top:8px;color:#ffb4b4;font-size:13px;"></div>
</div>
<style>
@media (max-width: 720px) {
#grid { grid-template-columns: 1fr !important; }
@media (max-width:720px){
#grid{grid-template-columns:1fr}
}
/* Hintergrund */
#wrap{
position:relative;
overflow:hidden;
min-height:100vh;
background: rgba(18, 18, 22, 1);
background:#121216;
}
#wrap::before{
content:"";
position:absolute;
inset:-35%;
background:
radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,0.42), transparent 60%),
radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,0.38), transparent 62%),
radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,0.26), transparent 64%),
radial-gradient(700px 560px at 35% 70%, rgba(168,85,247,0.22), transparent 66%),
radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,0.06), transparent 70%);
filter: blur(18px);
opacity: 1;
radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,.42), transparent 60%),
radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,.38), transparent 62%),
radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,.26), transparent 64%);
filter:blur(18px);
pointer-events:none;
z-index:0;
}
#wrap > *{ position:relative; z-index:1; }
/* Zeitraum-Spanne */
#period{
font-size:15px;
font-weight:600;
letter-spacing:.2px;
opacity:.95;
}
/* Werte */
#hint{
margin-top:6px;
font-size:15px;
font-weight:700;
letter-spacing:.3px;
opacity:1;
}
#hint .kv{
display:inline-block;
margin-right:14px;
white-space:nowrap;
}
#hint .kv b{ font-weight:900; }
#wrap>*{position:relative;z-index:1}
@media (max-width: 720px){
#hint .kv{ display:block; margin:4px 0; }
}
#hint .kv{margin-right:14px;white-space:nowrap}
#hint .kv b{font-weight:900}
</style>
<!-- 1) Puffer-Handler -->
<script>
window.__EnergyPieQueue = window.__EnergyPieQueue || [];
window.__EnergyPieReady = false;
(function(){
window.handleMessage = function (data) {
window.__EnergyPieQueue.push(data);
if (window.__EnergyPieReady && typeof window.__EnergyPieConsume === "function") {
const q = window.__EnergyPieQueue.splice(0);
q.forEach(d => window.__EnergyPieConsume(d));
}
};
</script>
<script>
(function () {
const elRange = document.getElementById('range');
const elDate = document.getElementById('date');
const elDateLbl = document.getElementById('dateLabel');
const elPrev = document.getElementById('prev');
const elToday = document.getElementById('today');
const elNext = document.getElementById('next');
const elPeriod = document.getElementById('period');
const elHint = document.getElementById('hint');
const elGrid = document.getElementById('grid');
const elErr = document.getElementById('err');
elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>';
const pad2 = (n) => String(n).padStart(2,'0');
function toNum(x){ const n = Number(x); return Number.isFinite(n) ? n : 0; }
function clamp01(x){ return (!Number.isFinite(x)) ? 0 : (x<0?0:(x>1?1:x)); }
function escapeHtml(s){
return String(s)
.replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;')
.replaceAll('"','&quot;').replaceAll("'","&#039;");
}
function monthNameDe(m){
return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m] || '';
}
// ISO Woche/Jahr
function getISOWeekYear(date) {
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
const isoYear = d.getUTCFullYear();
const yearStart = new Date(Date.UTC(isoYear, 0, 1));
const weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
return { week: weekNo, year: isoYear };
}
const elRange = document.getElementById('range');
const elDate = document.getElementById('date');
const elPrev = document.getElementById('prev');
const elToday = document.getElementById('today');
const elNext = document.getElementById('next');
const elPeriod = document.getElementById('period');
const elHint = document.getElementById('hint');
const elGrid = document.getElementById('grid');
const elErr = document.getElementById('err');
function showErr(e){
const msg = (e && e.message) ? e.message : String(e);
elErr.textContent = 'JS-Fehler: ' + msg;
}
window.addEventListener('error', (ev) => showErr(ev.error || ev.message));
window.addEventListener('unhandledrejection', (ev) => showErr(ev.reason));
// requestAction robust
function getRequestAction(){
if (typeof window.requestAction === 'function') return window.requestAction;
if (typeof window.parent?.requestAction === 'function') return window.parent.requestAction;
return null;
}
function safeRequestAction(ident, value){
const tryCall = () => {
const ra = getRequestAction();
if (ra) { try { ra(ident, value); } catch(e){ showErr(e); } return true; }
return false;
};
if (tryCall()) return;
let tries = 0;
const timer = setInterval(() => {
tries++;
if (tryCall() || tries >= 150) clearInterval(timer);
}, 120);
}
function safeRefreshSoon(){ setTimeout(() => safeRequestAction('Refresh', 1), 150); }
// Label rechts vom Datum (immer aus dem gewählten Tag berechnet)
function setDateLabel(range, ymd){
if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) { elDateLbl.textContent = ''; return; }
const d = new Date(ymd + 'T00:00:00');
if (range === 'total') { elDateLbl.textContent = 'Gesamt'; return; }
if (range === 'day') { elDateLbl.textContent = `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`; return; }
if (range === 'week') { const iso = getISOWeekYear(d); elDateLbl.textContent = `Woche ${iso.week}: ${iso.year}`; return; }
if (range === 'month') { elDateLbl.textContent = `${monthNameDe(d.getMonth())} ${d.getFullYear()}`; return; }
if (range === 'year') { elDateLbl.textContent = String(d.getFullYear()); return; }
elDateLbl.textContent = '';
elErr.textContent = e?.message || e;
}
function fmtRangeSpan(range, tStart, tEnd){
if (!tStart || !tEnd) return '';
if (range === 'total') return 'Zeitraum: Gesamt';
const s = new Date(tStart * 1000);
const e = new Date((tEnd * 1000) - 1000);
const dmy = (d) => `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()}`;
return `Zeitraum: ${dmy(s)} - ${dmy(e)}`;
function ra(){
return window.requestAction || window.parent?.requestAction || null;
}
function donutCard({ title, percent, subtitle, color }){
const share = clamp01(percent / 100);
const r = 56;
const c = 2 * Math.PI * r;
let dash = share * c;
if (dash > c - 0.01) dash = c;
function send(id,val){
const f = ra();
if(f) try{f(id,val)}catch(e){showErr(e)}
}
return `
<div style="padding:18px 10px; width:100%;
display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:12px;">
<div style="font-size:15px;font-weight:900;opacity:.95;">${escapeHtml(title)}</div>
function fmt(d){
const p=n=>String(n).padStart(2,'0');
return `${p(d.getDate())}.${p(d.getMonth()+1)}.${d.getFullYear()}`;
}
<div style="position:relative;width:180px;height:180px;">
<svg width="180" height="180" viewBox="0 0 180 180">
<circle cx="90" cy="90" r="${r}"
fill="none"
stroke="${color}"
stroke-width="18"
stroke-linecap="butt"
stroke-dasharray="${dash} ${c}"
transform="rotate(-90 90 90)"
style="filter: drop-shadow(0 0 12px ${color});" />
</svg>
<div style="position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;
font-weight:900;font-size:26px;">
${escapeHtml(percent.toFixed(1))}%
</div>
</div>
function monthName(m){
return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m];
}
<div style="font-size:13px;opacity:.75;text-align:center;">
${escapeHtml(subtitle)}
</div>
</div>
`;
function isoWeek(d){
d=new Date(Date.UTC(d.getFullYear(),d.getMonth(),d.getDate()));
d.setUTCDate(d.getUTCDate()+4-(d.getUTCDay()||7));
const y=d.getUTCFullYear();
const s=new Date(Date.UTC(y,0,1));
return Math.ceil((((d-s)/86400000)+1)/7)+" "+y;
}
function render(data){
const values = data?.values || {};
const prod = toNum(values?.Produktion);
const cons = toNum(values?.Hausverbrauch);
const grid = toNum(values?.Netz);
if(!data)return;
const eigen = cons - grid;
const eigenClamped = eigen < 0 ? 0 : eigen;
elRange.value = data.range || 'day';
elDate.value = data.date || '';
const evq = (prod > 0) ? (eigenClamped / prod * 100) : 0;
const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
elDate.disabled = data.range==='total';
if (data?.range) elRange.value = data.range;
if (data?.date) elDate.value = data.date;
if(data.tStart && data.tEnd){
const s=new Date(data.tStart*1000);
const e=new Date(data.tEnd*1000-1000);
elDate.disabled = (data?.range === 'total');
// Datum-Label (Tag bleibt im Picker!)
setDateLabel(elRange.value, elDate.value);
// Zeitraum-Spanne
elPeriod.textContent = (data?.tStart && data?.tEnd)
? fmtRangeSpan(elRange.value, data.tStart, data.tEnd)
: '';
// Werte / NoData
if (data?.hasData === false){
elHint.innerHTML = `
<span style="font-weight:900; font-size:16px;">
${escapeHtml(data?.noDataHint || 'Letzter Zeitpunkt')}
</span>
<span style="opacity:.8; margin-left:10px;">
(Keine Werte für diesen Zeitraum)
</span>
`;
} else {
elHint.innerHTML = `
<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>
`;
if(data.range==='day')
elPeriod.textContent=`Zeitraum: ${fmt(s)}`;
else if(data.range==='week')
elPeriod.textContent=`Zeitraum: Woche ${isoWeek(s)}`;
else if(data.range==='month')
elPeriod.textContent=`Zeitraum: ${monthName(s.getMonth())} ${s.getFullYear()}`;
else if(data.range==='year')
elPeriod.textContent=`Zeitraum: ${s.getFullYear()}`;
else
elPeriod.textContent='Zeitraum: Gesamt';
}
elGrid.innerHTML = [
donutCard({
title: 'Eigenverbrauchsquote',
percent: clamp01(evq / 100) * 100,
subtitle: 'Eigenverbrauch / Produktion',
color: '#63B3FF'
}),
donutCard({
title: 'Autarkiegrad',
percent: clamp01(autark / 100) * 100,
subtitle: 'Eigenverbrauch / Verbrauch',
color: '#A855F7'
})
].join('');
if(data.hasData===false){
elHint.innerHTML=`<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`;
elGrid.innerHTML='';
return;
}
const v=data.values||{};
elHint.innerHTML=`
<span class="kv"><b>Produktion:</b> ${v.Produktion?.toFixed(2)||0} kWh</span>
<span class="kv"><b>Verbrauch:</b> ${v.Hausverbrauch?.toFixed(2)||0} kWh</span>
<span class="kv"><b>Netzbezug:</b> ${v.Netz?.toFixed(2)||0} kWh</span>
`;
const donut=(t,p,c)=>`
<div style="text-align:center">
<div style="font-weight:900">${t}</div>
<svg width="160" height="160">
<circle cx="80" cy="80" r="56" stroke="${c}" stroke-width="18"
fill="none"
stroke-dasharray="${p/100*351} 351"
transform="rotate(-90 80 80)"/>
</svg>
<div style="font-size:24px;font-weight:900">${p.toFixed(1)}%</div>
</div>`;
const prod=v.Produktion||0;
const cons=v.Hausverbrauch||0;
const grid=v.Netz||0;
const eigen=Math.max(cons-grid,0);
elGrid.innerHTML=
donut('Eigenverbrauchsquote',prod?eigen/prod*100:0,'#63B3FF')+
donut('Autarkiegrad',cons?eigen/cons*100:0,'#A855F7');
}
// cache
function saveLast(data){ try{ sessionStorage.setItem('EnergyPie_last', JSON.stringify(data)); }catch(e){} }
function loadLast(){
try{ const raw = sessionStorage.getItem('EnergyPie_last'); return raw ? JSON.parse(raw) : null; }
catch(e){ return null; }
}
window.__EnergyPieConsume = function (data) {
if (typeof data === 'string') { try{ data = JSON.parse(data); }catch(e){} }
if (!data) return;
saveLast(data);
render(data);
window.handleMessage = d=>{
try{if(typeof d==='string')d=JSON.parse(d)}catch{}
render(d);
};
// UI events
elRange.addEventListener('change', () => {
safeRequestAction('SetRange', elRange.value);
// Label sofort updaten (Backend kommt dann eh gleich nach)
setDateLabel(elRange.value, elDate.value);
});
elRange.onchange = ()=>send('SetRange',elRange.value);
elDate.onchange = ()=>send('SetDate',elDate.value);
elPrev.onclick = ()=>send('Prev',1);
elNext.onclick = ()=>send('Next',1);
elToday.onclick = ()=>send('Today',1);
let dateTimer = null;
function pushDateNow(){
if (dateTimer) clearTimeout(dateTimer);
dateTimer = setTimeout(() => {
setDateLabel(elRange.value, elDate.value);
safeRequestAction('SetDate', elDate.value);
}, 80);
}
elDate.addEventListener('input', pushDateNow);
elDate.addEventListener('change', pushDateNow);
elPrev.addEventListener('click', () => safeRequestAction('Prev', 1));
elToday.addEventListener('click', () => safeRequestAction('Today', 1));
elNext.addEventListener('click', () => safeRequestAction('Next', 1));
// sofort cache rendern
const cached = loadLast();
if (cached) render(cached);
// queue flush
window.__EnergyPieReady = true;
if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
const q = window.__EnergyPieQueue.splice(0);
q.forEach(d => window.__EnergyPieConsume(d));
}
safeRefreshSoon();
document.addEventListener('visibilitychange', () => { if (!document.hidden) safeRefreshSoon(); });
window.addEventListener('resize', () => safeRefreshSoon());
window.addEventListener('pageshow', () => safeRefreshSoon());
})();
</script>