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 13:31:48 +01:00
parent e31ad76616
commit 78299cee43
1 changed files with 127 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
Energy_Pie/module.html
View File

@@ -1,5 +1,4 @@
<div 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;">
@@ -25,14 +24,17 @@
<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>
<!-- 2 Donuts -->
<div id="grid"
style="margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;max-width:880px;">
</div>
<!-- Fehler/Status sichtbar machen (damit es nicht einfach "leer" ist) -->
<div id="err" style="margin-top:10px;font-size:12px;opacity:0.8;color:#ffb4b4;"></div>
</div>
<script>
(function () {
const elRange = document.getElementById('range');
const elDate = document.getElementById('date');
const elPrev = document.getElementById('prev');
@@ -41,22 +43,27 @@
const elPeriod = document.getElementById('period');
const elHint = document.getElementById('hint');
const elGrid = document.getElementById('grid');
const elErr = document.getElementById('err');
// Trigger sofort bei Änderung
elRange.addEventListener('change', () => requestAction('SetRange', elRange.value));
let dateTimer = null;
function pushDateNow() {
if (dateTimer) clearTimeout(dateTimer);
dateTimer = setTimeout(() => requestAction('SetDate', elDate.value), 80);
// --- helpers ---
function toNum(x) {
const n = Number(x);
return Number.isFinite(n) ? n : 0;
}
function clamp01(x) {
if (!Number.isFinite(x)) return 0;
if (x < 0) return 0;
if (x > 1) return 1;
return x;
}
function escapeHtml(s) {
return String(s)
.replaceAll('&','&amp;')
.replaceAll('<','&lt;')
.replaceAll('>','&gt;')
.replaceAll('"','&quot;')
.replaceAll("'",'&#039;');
}
elDate.addEventListener('input', pushDateNow);
elDate.addEventListener('change', pushDateNow);
elPrev.addEventListener('click', () => requestAction('Prev', 1));
elToday.addEventListener('click', () => requestAction('Today', 1));
elNext.addEventListener('click', () => requestAction('Next', 1));
function fmtDateTime(d) {
const yyyy = d.getFullYear();
const mm = String(d.getMonth() + 1).padStart(2,'0');
@@ -66,31 +73,42 @@
return `${dd}.${mm}.${yyyy} ${hh}:${mi}`;
}
function escapeHtml(s) {
return String(s)
.replaceAll('&','&amp;')
.replaceAll('<','&lt;')
.replaceAll('>','&gt;')
.replaceAll('"','&quot;')
.replaceAll("'",'&#039;');
// --- make requestAction safe (wait until available) ---
function safeRequestAction(ident, value) {
const tryCall = () => {
if (typeof requestAction === 'function') {
try { requestAction(ident, value); } catch (e) { showErr(e); }
return true;
}
return false;
};
if (tryCall()) return;
// retry a few times (fullscreen reload timing)
let tries = 0;
const timer = setInterval(() => {
tries++;
if (tryCall() || tries >= 25) clearInterval(timer);
}, 120);
}
function toNum(x) {
const n = Number(x);
return Number.isFinite(n) ? n : 0;
function safeRefreshSoon() {
setTimeout(() => safeRequestAction('Refresh', 1), 150);
}
function clamp01(x) {
if (!Number.isFinite(x)) return 0;
if (x < 0) return 0;
if (x > 1) return 1;
return x;
function showErr(e) {
const msg = (e && e.message) ? e.message : String(e);
elErr.textContent = 'JS-Fehler: ' + msg;
}
// Global error trap (damit wir sehen, wenn’s crasht)
window.addEventListener('error', (ev) => showErr(ev.error || ev.message));
window.addEventListener('unhandledrejection', (ev) => showErr(ev.reason));
// --- donut card ---
function donutCard({ title, percent, subtitle, color }) {
// percent: 0..100
const share = clamp01(percent / 100);
const r = 56;
const c = 2 * Math.PI * r;
const dash = share * c;
@@ -101,10 +119,8 @@
display:flex;align-items:center;justify-content:center;min-height:210px;">
<div style="position:relative;width:170px;height:170px;">
<svg width="170" height="170" viewBox="0 0 170 170" style="display:block;">
<!-- track -->
<circle cx="85" cy="85" r="${r}"
fill="none" stroke="rgba(255,255,255,0.10)" stroke-width="18" />
<!-- arc -->
<circle cx="85" cy="85" r="${r}"
fill="none" stroke="${color}" stroke-width="18"
stroke-linecap="butt"
@@ -129,7 +145,8 @@
`;
}
function render(values, meta) {
function render(data) {
const values = data?.values || {};
const prod = toNum(values?.Produktion);
const cons = toNum(values?.Hausverbrauch); // Verbrauch
const grid = toNum(values?.Netz); // Netzbezug
@@ -140,8 +157,26 @@
const evq = (prod > 0) ? (eigenClamped / prod * 100) : 0;
const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
// Hinweise
if (meta?.hasData === false) {
// 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);
elPeriod.textContent = isTotal
? 'Zeitraum: Gesamt'
: `Zeitraum: ${fmtDateTime(s)} – ${fmtDateTime(e)}`;
} else {
elPeriod.textContent = '';
}
// Hint
if (data?.hasData === false) {
elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.';
} else {
elHint.textContent =
@@ -153,63 +188,77 @@
title: 'EVQ',
percent: clamp01(evq / 100) * 100,
subtitle: 'Eigenverb. / Produktion',
color: '#63B3FF' // blau
color: '#63B3FF'
}),
donutCard({
title: 'Autarkiegrad',
percent: clamp01(autark / 100) * 100,
subtitle: 'Eigenverb / Verbrauch',
color: '#A855F7' // lila
subtitle: 'Eigenverb. / Verbrauch',
color: '#A855F7'
})
].join('');
elErr.textContent = ''; // clear errors if render succeeded
}
// --- cache last payload so fullscreen reload still shows something immediately ---
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;
}
}
// Symcon -> Tile
window.handleMessage = function (data) {
// Symcon liefert manchmal JSON als String
if (typeof data === 'string') {
try { data = JSON.parse(data); } catch(e) {}
}
if (!data) return;
// Controls sync
if (data.range) elRange.value = data.range;
if (data.date) elDate.value = data.date;
// total: Datum deaktivieren
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);
elPeriod.textContent = isTotal
? 'Zeitraum: Gesamt'
: `Zeitraum: ${fmtDateTime(s)} – ${fmtDateTime(e)}`;
} else {
elPeriod.textContent = '';
}
render(data.values || {}, { hasData: data.hasData });
saveLast(data);
render(data);
};
function requestRefreshSoon() {
setTimeout(() => requestAction('Refresh', 1), 150);
}
// UI events (safe)
elRange.addEventListener('change', () => safeRequestAction('SetRange', elRange.value));
// 1) beim Start
requestRefreshSoon();
let dateTimer = null;
function pushDateNow() {
if (dateTimer) clearTimeout(dateTimer);
dateTimer = setTimeout(() => safeRequestAction('SetDate', elDate.value), 80);
}
elDate.addEventListener('input', pushDateNow);
elDate.addEventListener('change', pushDateNow);
// 2) wenn das Tile neu sichtbar wird (z.B. nach Maximieren)
document.addEventListener('visibilitychange', () => {
if (!document.hidden) requestRefreshSoon();
});
elPrev.addEventListener('click', () => safeRequestAction('Prev', 1));
elToday.addEventListener('click', () => safeRequestAction('Today', 1));
elNext.addEventListener('click', () => safeRequestAction('Next', 1));
// 3) bei Größenänderung (Maximieren/Responsive)
let rsTimer = null;
window.addEventListener('resize', () => {
clearTimeout(rsTimer);
rsTimer = setTimeout(() => requestAction('Refresh', 1), 200);
});
// On load: render cached immediately, then refresh when ready
const cached = loadLast();
if (cached) render(cached);
// Refresh on start + on fullscreen/resize/visibility changes
safeRefreshSoon();
document.addEventListener('visibilitychange', () => {
if (!document.hidden) safeRefreshSoon();
});
window.addEventListener('resize', () => {
// some Symcon fullscreen transitions trigger resize + reload timing
safeRefreshSoon();
});
// pageshow covers some "recreated webview" cases
window.addEventListener('pageshow', () => {
safeRefreshSoon();
});
})();
</script>