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 08:31:04 +01:00
parent f4e87772e1
commit feb7301fc1
2 changed files with 90 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
Energy_Pie/module.html
View File

@@ -1,4 +1,6 @@
<div id="wrap" style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
<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;">
@@ -10,124 +12,65 @@
<option value="total">Gesamt</option>
</select>
</label>
<label style="display:flex;gap:6px;align-items:center;">
<span>Datum</span>
<input id="date" type="date" />
</label>
<button id="prev" type="button">◀</button>
<button id="today" type="button">Letzter Zeitpunkt</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="grid"
style="margin-top:14px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
width:100%;
max-width:none;">
style="margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;max-width:880px;">
</div>
<!-- Debug/Status -->
<div id="dbg" style="margin-top:10px;font-size:12px;opacity:0.75;"></div>
<!-- Fehler -->
<div id="err" style="margin-top:6px;font-size:12px;opacity:0.9;color:#ffb4b4;"></div>
</div>
<style>
/* Responsive: bei schmalen Screens 1 Spalte */
@media (max-width: 720px) {
#grid { grid-template-columns: 1fr !important; }
#wrap {
position: relative;
overflow: hidden;
}
/* Statischer "Fluid" Hintergrund in Donut-Farben */
#wrap{
position:relative;
overflow:hidden;
min-height:100vh;
/* Grundton, damit es nicht "lochig" wirkt */
background: rgba(18, 18, 22, 1);
}
/* Nur EIN Layer, statisch */
#wrap::before{
content:"";
position:absolute;
inset:-35%;
#wrap::before {
content: "";
position: absolute;
inset: -40%;
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); /* weniger blur = mehr sichtbar */
opacity: 1;
pointer-events:none;
z-index:0;
}
/* Content über dem Background */
#wrap > *{
position:relative;
z-index:1;
radial-gradient(circle at 20% 20%, rgba(99,179,255,0.18), transparent 45%),
radial-gradient(circle at 80% 30%, rgba(168,85,247,0.16), transparent 50%),
radial-gradient(circle at 50% 80%, rgba(255,255,255,0.06), transparent 55%);
filter: blur(18px);
animation: auroraMove 10s ease-in-out infinite alternate;
pointer-events: none;
z-index: 0;
}
#wrap > * {
position: relative;
z-index: 1;
}
@keyframes auroraMove {
from { transform: translate3d(-2%, -2%, 0) scale(1.02); }
to { transform: translate3d( 2%, 2%, 0) scale(1.06); }
}
#period {
font-size: 15px; /* größer */
font-weight: 600; /* dicker */
letter-spacing: 0.2px;
opacity: 0.95;
}
/* Werte-Zeile (Produktion / Verbrauch / …) */
#hint {
margin-top: 6px;
font-size: 15px; /* größer */
font-weight: 700; /* noch etwas dicker */
letter-spacing: 0.3px;
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>
<!-- 1) Puffer-Handler: fängt Symcon-Messages ab, selbst wenn UI noch nicht ready ist -->
<script>
window.__EnergyPieQueue = window.__EnergyPieQueue || [];
window.__EnergyPieReady = false;
// Symcon ruft handleMessage evtl. sehr früh auf -> wir puffern.
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');
@@ -140,10 +83,8 @@
const elGrid = document.getElementById('grid');
const elDbg = document.getElementById('dbg');
const elErr = document.getElementById('err');
// Start nicht "leer"
// Start nicht "grau/leer"
elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>';
// --- helpers ---
function toNum(x) {
const n = Number(x);
@@ -171,22 +112,19 @@
const mi = String(d.getMinutes()).padStart(2,'0');
return `${dd}.${mm}.${yyyy} ${hh}:${mi}`;
}
function showErr(e) {
const msg = (e && e.message) ? e.message : String(e);
elErr.textContent = 'JS-Fehler: ' + msg;
}
// Global error trap
window.addEventListener('error', (ev) => showErr(ev.error || ev.message));
window.addEventListener('unhandledrejection', (ev) => showErr(ev.reason));
// --- requestAction robust finden ---
// --- requestAction robust finden (Popup hat das oft am parent) ---
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();
@@ -196,88 +134,86 @@
}
return false;
};
if (tryCall()) return;
// Popup/Fullscreen: manchmal kommt requestAction deutlich später -> länger retry
let tries = 0;
const timer = setInterval(() => {
tries++;
if (tryCall() || tries >= 150) clearInterval(timer);
if (tryCall() || tries >= 150) clearInterval(timer); // ~18s
}, 120);
}
function safeRefreshSoon() {
setTimeout(() => safeRequestAction('Refresh', 1), 150);
}
// --- donut card ---
function donutCard({ title, percent, subtitle, color }) {
const share = clamp01(percent / 100);
const r = 56;
const c = 2 * Math.PI * r;
let dash = share * c;
// Schutz gegen Rundungs-Artefakte bei 99.9..100%
if (dash > c - 0.01) dash = c;
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:800;opacity:.95;">
${escapeHtml(title)}
</div>
<div style="position:relative;width:180px;height:180px;">
<svg width="180" height="180" viewBox="0 0 180 180">
<!-- Anteilsegment -->
<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))}%
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;
min-height:210px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;">
<!-- Titel oben -->
<div style="font-size:14px;font-weight:700;opacity:.9;">
${escapeHtml(title)}
</div>
<!-- Donut -->
<div style="position:relative;width:170px;height:170px;">
<svg width="170" height="170" viewBox="0 0 170 170">
<circle cx="85" cy="85" r="${r}"
fill="none"
stroke="rgba(255,255,255,0.10)"
stroke-width="18" />
<circle cx="85" cy="85" r="${r}"
fill="none"
stroke="${color}"
stroke-width="18"
stroke-linecap="butt"
stroke-dasharray="${dash} ${gap}"
transform="rotate(-90 85 85)" />
</svg>
<!-- Prozent im Kreis -->
<div style="position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:22px;">
${escapeHtml(percent.toFixed(1))}%
</div>
</div>
<!-- Untertitel unten -->
<div style="font-size:12px;opacity:.65;text-align:center;">
${escapeHtml(subtitle)}
</div>
</div>
<div style="font-size:13px;opacity:.75;text-align:center;">
${escapeHtml(subtitle)}
</div>
</div>
`;
`;
}
function render(data) {
const values = data?.values || {};
const prod = toNum(values?.Produktion);
const cons = toNum(values?.Hausverbrauch);
const grid = toNum(values?.Netz);
const eigen = cons - grid;
const eigenClamped = eigen < 0 ? 0 : eigen;
const evq = (prod > 0) ? (eigenClamped / prod * 100) : 0;
const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
// Controls sync
if (data?.range) elRange.value = data.range;
if (data?.date) elDate.value = data.date;
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);
@@ -287,18 +223,13 @@ return `
} else {
elPeriod.textContent = '';
}
// Hint
if (data?.hasData === false) {
elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.';
} 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>
`;
elHint.textContent =
`Produktion: ${prod.toFixed(2)} kWh · Verbrauch: ${cons.toFixed(2)} kWh · Netzbezug: ${grid.toFixed(2)} kWh · Eigenverbrauch: ${eigenClamped.toFixed(2)} kWh`;
}
elGrid.innerHTML = [
donutCard({
title: 'Eigenverbrauchsquote',
@@ -313,10 +244,7 @@ return `
color: '#A855F7'
})
].join('');
}
// --- cache ---
function saveLast(data) {
try { sessionStorage.setItem('EnergyPie_last', JSON.stringify(data)); } catch(e) {}
@@ -329,7 +257,7 @@ return `
return null;
}
}
// 2) Consumer für gepufferte Symcon-Messages
window.__EnergyPieConsume = function (data) {
if (typeof data === 'string') {
try { data = JSON.parse(data); } catch(e) {}
@@ -338,10 +266,8 @@ return `
saveLast(data);
render(data);
};
// UI events
elRange.addEventListener('change', () => safeRequestAction('SetRange', elRange.value));
let dateTimer = null;
function pushDateNow() {
if (dateTimer) clearTimeout(dateTimer);
@@ -349,28 +275,24 @@ return `
}
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));
// On load: cached sofort rendern
const cached = loadLast();
if (cached) render(cached);
// UI ready -> Queue flushen
window.__EnergyPieReady = true;
if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
const q = window.__EnergyPieQueue.splice(0);
q.forEach(d => window.__EnergyPieConsume(d));
}
// Refresh on start + on fullscreen/resize/visibility changes
safeRefreshSoon();
document.addEventListener('visibilitychange', () => {
if (!document.hidden) safeRefreshSoon();
});
window.addEventListener('resize', () => safeRefreshSoon());
window.addEventListener('pageshow', () => safeRefreshSoon());
})();
</script>