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 15:53:29 +01:00
parent 03e02558d5
commit 1627f81b9e
1 changed files with 113 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
Energy_Pie/module.html
View File

@@ -1,5 +1,4 @@
<div id="wrap" <div id="wrap" style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
<!-- Controls --> <!-- Controls -->
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;"> <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
<label style="display:flex;gap:6px;align-items:center;"> <label style="display:flex;gap:6px;align-items:center;">
@@ -26,8 +25,12 @@
<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>
<div id="grid" <div id="grid"
style="margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); style="margin-top:14px;
gap:14px;max-width:880px;"> display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
width:100%;
max-width:none;">
</div> </div>
<!-- Debug/Status --> <!-- Debug/Status -->
@@ -38,21 +41,50 @@
</div> </div>
<style> <style>
/* Responsive: bei schmalen Screens 1 Spalte */
@media (max-width: 720px) {
#grid { grid-template-columns: 1fr !important; }
}
/* Quantum-Waves Hintergrund */
#wrap{ #wrap{
position:relative; position:relative;
overflow:hidden; overflow:hidden;
min-height:100vh;
} }
#wrap::before{ #wrap::before{
content:""; content:"";
position:absolute; position:absolute;
inset: -40%; inset:-50%;
background: background:
radial-gradient(circle at 20% 20%, rgba(99,179,255,0.18), transparent 45%), radial-gradient(circle at 20% 25%, rgba(99,179,255,.20), transparent 45%),
radial-gradient(circle at 80% 30%, rgba(168,85,247,0.16), transparent 50%), radial-gradient(circle at 80% 35%, rgba(168,85,247,.18), transparent 50%),
radial-gradient(circle at 50% 80%, rgba(255,255,255,0.06), transparent 55%); radial-gradient(circle at 55% 80%, rgba(255,255,255,.07), transparent 55%);
filter: blur(18px); filter: blur(20px);
animation: auroraMove 10s ease-in-out infinite alternate; opacity:.9;
animation: qDrift 14s ease-in-out infinite alternate;
pointer-events:none;
z-index:0;
}
#wrap::after{
content:"";
position:absolute;
inset:-30%;
background:
repeating-radial-gradient(circle at 30% 40%,
rgba(255,255,255,.06) 0px,
rgba(255,255,255,0) 14px,
rgba(255,255,255,0) 28px),
repeating-linear-gradient(120deg,
rgba(168,85,247,.06) 0px,
rgba(168,85,247,0) 18px,
rgba(99,179,255,.05) 36px,
rgba(99,179,255,0) 54px);
mix-blend-mode: overlay;
opacity:.35;
animation: qWaves 10s linear infinite;
pointer-events:none; pointer-events:none;
z-index:0; z-index:0;
} }
@@ -62,9 +94,14 @@
z-index:1; z-index:1;
} }
@keyframes auroraMove { @keyframes qDrift{
from { transform: translate3d(-2%, -2%, 0) scale(1.02); } from{ transform: translate3d(-2%, -2%, 0) scale(1.02) rotate(-2deg); }
to { transform: translate3d( 2%, 2%, 0) scale(1.06); } to { transform: translate3d( 2%, 2%, 0) scale(1.08) rotate( 2deg); }
}
@keyframes qWaves{
from{ transform: translate3d(0,0,0) rotate(0deg); }
to { transform: translate3d(6%, -4%, 0) rotate(360deg); }
} }
</style> </style>
@@ -73,7 +110,6 @@
window.__EnergyPieQueue = window.__EnergyPieQueue || []; window.__EnergyPieQueue = window.__EnergyPieQueue || [];
window.__EnergyPieReady = false; window.__EnergyPieReady = false;
// Symcon ruft handleMessage evtl. sehr früh auf -> wir puffern.
window.handleMessage = function (data) { window.handleMessage = function (data) {
window.__EnergyPieQueue.push(data); window.__EnergyPieQueue.push(data);
@@ -97,7 +133,7 @@
const elDbg = document.getElementById('dbg'); const elDbg = document.getElementById('dbg');
const elErr = document.getElementById('err'); const elErr = document.getElementById('err');
// Start nicht "grau/leer" // Start nicht "leer"
elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>'; elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>';
// --- helpers --- // --- helpers ---
@@ -133,11 +169,10 @@
elErr.textContent = 'JS-Fehler: ' + msg; elErr.textContent = 'JS-Fehler: ' + msg;
} }
// Global error trap
window.addEventListener('error', (ev) => showErr(ev.error || ev.message)); window.addEventListener('error', (ev) => showErr(ev.error || ev.message));
window.addEventListener('unhandledrejection', (ev) => showErr(ev.reason)); window.addEventListener('unhandledrejection', (ev) => showErr(ev.reason));
// --- requestAction robust finden (Popup hat das oft am parent) --- // --- requestAction robust finden ---
function getRequestAction() { function getRequestAction() {
if (typeof window.requestAction === 'function') return window.requestAction; if (typeof window.requestAction === 'function') return window.requestAction;
if (typeof window.parent?.requestAction === 'function') return window.parent.requestAction; if (typeof window.parent?.requestAction === 'function') return window.parent.requestAction;
@@ -156,11 +191,10 @@
if (tryCall()) return; if (tryCall()) return;
// Popup/Fullscreen: manchmal kommt requestAction deutlich später -> länger retry
let tries = 0; let tries = 0;
const timer = setInterval(() => { const timer = setInterval(() => {
tries++; tries++;
if (tryCall() || tries >= 150) clearInterval(timer); // ~18s if (tryCall() || tries >= 150) clearInterval(timer);
}, 120); }, 120);
} }
@@ -180,47 +214,42 @@ function donutCard({ title, percent, subtitle, color }) {
<div style="border:1px solid rgba(255,255,255,0.12); <div style="border:1px solid rgba(255,255,255,0.12);
border-radius:16px; border-radius:16px;
padding:14px; padding:14px;
min-height:210px; min-height:260px;
width:100%;
display:flex; display:flex;
flex-direction:column; flex-direction:column;
align-items:center; align-items:center;
justify-content:center; justify-content:center;
gap:10px;"> gap:12px;
background:rgba(0,0,0,0.08);
backdrop-filter: blur(2px);">
<!-- Titel oben -->
<div style="font-size:14px;font-weight:700;opacity:.9;"> <div style="font-size:14px;font-weight:700;opacity:.9;">
${escapeHtml(title)} ${escapeHtml(title)}
</div> </div>
<!-- Donut --> <div style="position:relative;width:180px;height:180px;">
<div style="position:relative;width:170px;height:170px;"> <svg width="180" height="180" viewBox="0 0 180 180">
<svg width="170" height="170" viewBox="0 0 170 170"> <circle cx="90" cy="90" r="${r}"
<circle cx="85" cy="85" r="${r}"
fill="none" fill="none"
stroke="rgba(255,255,255,0.10)" stroke="rgba(255,255,255,0.10)"
stroke-width="18" /> stroke-width="18" />
<circle cx="85" cy="85" r="${r}" <circle cx="90" cy="90" r="${r}"
fill="none" fill="none"
stroke="${color}" stroke="${color}"
stroke-width="18" stroke-width="18"
stroke-linecap="butt" stroke-linecap="butt"
stroke-dasharray="${dash} ${gap}" stroke-dasharray="${dash} ${gap}"
transform="rotate(-90 85 85)" /> transform="rotate(-90 90 90)" />
</svg> </svg>
<!-- Prozent im Kreis --> <div style="position:absolute;inset:0;display:flex;
<div style="position:absolute; align-items:center;justify-content:center;
inset:0; font-weight:800;font-size:24px;">
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:22px;">
${escapeHtml(percent.toFixed(1))}% ${escapeHtml(percent.toFixed(1))}%
</div> </div>
</div> </div>
<!-- Untertitel unten -->
<div style="font-size:12px;opacity:.65;text-align:center;"> <div style="font-size:12px;opacity:.65;text-align:center;">
${escapeHtml(subtitle)} ${escapeHtml(subtitle)}
</div> </div>
@@ -240,14 +269,12 @@ function donutCard({ title, percent, subtitle, color }) {
const evq = (prod > 0) ? (eigenClamped / prod * 100) : 0; const evq = (prod > 0) ? (eigenClamped / prod * 100) : 0;
const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0; const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
// Controls sync
if (data?.range) elRange.value = data.range; if (data?.range) elRange.value = data.range;
if (data?.date) elDate.value = data.date; if (data?.date) elDate.value = data.date;
const isTotal = (data?.range === 'total'); const isTotal = (data?.range === 'total');
elDate.disabled = isTotal; elDate.disabled = isTotal;
// Zeitraum-Text
if (data?.tStart && data?.tEnd) { if (data?.tStart && data?.tEnd) {
const s = new Date(data.tStart * 1000); const s = new Date(data.tStart * 1000);
const e = new Date(data.tEnd * 1000); const e = new Date(data.tEnd * 1000);
@@ -258,7 +285,6 @@ function donutCard({ title, percent, subtitle, color }) {
elPeriod.textContent = ''; elPeriod.textContent = '';
} }
// Hint
if (data?.hasData === false) { if (data?.hasData === false) {
elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.'; elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.';
} else { } else {
@@ -281,6 +307,8 @@ function donutCard({ title, percent, subtitle, color }) {
}) })
].join(''); ].join('');
elDbg.textContent = `Letzte Daten: ${new Date().toLocaleTimeString()} · range=${data?.range ?? '-'} · date=${data?.date ?? '-'}`;
elErr.textContent = '';
} }
// --- cache --- // --- cache ---
@@ -296,7 +324,6 @@ function donutCard({ title, percent, subtitle, color }) {
} }
} }
// 2) Consumer für gepufferte Symcon-Messages
window.__EnergyPieConsume = function (data) { window.__EnergyPieConsume = function (data) {
if (typeof data === 'string') { if (typeof data === 'string') {
try { data = JSON.parse(data); } catch(e) {} try { data = JSON.parse(data); } catch(e) {}
@@ -321,18 +348,15 @@ function donutCard({ title, percent, subtitle, color }) {
elToday.addEventListener('click', () => safeRequestAction('Today', 1)); elToday.addEventListener('click', () => safeRequestAction('Today', 1));
elNext.addEventListener('click', () => safeRequestAction('Next', 1)); elNext.addEventListener('click', () => safeRequestAction('Next', 1));
// On load: cached sofort rendern
const cached = loadLast(); const cached = loadLast();
if (cached) render(cached); if (cached) render(cached);
// UI ready -> Queue flushen
window.__EnergyPieReady = true; window.__EnergyPieReady = true;
if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) { if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
const q = window.__EnergyPieQueue.splice(0); const q = window.__EnergyPieQueue.splice(0);
q.forEach(d => window.__EnergyPieConsume(d)); q.forEach(d => window.__EnergyPieConsume(d));
} }
// Refresh on start + on fullscreen/resize/visibility changes
safeRefreshSoon(); safeRefreshSoon();
document.addEventListener('visibilitychange', () => { document.addEventListener('visibilitychange', () => {