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:33:45 +01:00
parent d1f0b876aa
commit 80e35c372e
2 changed files with 167 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
Energy_Pie/module.html
View File

@@ -39,59 +39,67 @@
@media (max-width: 720px) { @media (max-width: 720px) {
#grid { grid-template-columns: 1fr !important; } #grid { grid-template-columns: 1fr !important; }
} }
/* Quantum-Waves Hintergrund */ /* Statischer "Fluid" Hintergrund in Donut-Farben */
#wrap{ #wrap{
position:relative; position:relative;
overflow:hidden; overflow:hidden;
min-height:100vh; min-height:100vh;
/* Grundton, damit es nicht "lochig" wirkt */
background: rgba(18, 18, 22, 1);
} }
#wrap::before{ /* Nur EIN Layer, statisch */
#wrap::before{
content:""; content:"";
position:absolute; position:absolute;
inset:-50%; inset:-35%;
background: background:
radial-gradient(circle at 20% 25%, rgba(99,179,255,.20), transparent 45%), radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,0.42), transparent 60%),
radial-gradient(circle at 80% 35%, rgba(168,85,247,.18), transparent 50%), radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,0.38), transparent 62%),
radial-gradient(circle at 55% 80%, rgba(255,255,255,.07), transparent 55%); radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,0.26), transparent 64%),
filter: blur(20px); radial-gradient(700px 560px at 35% 70%, rgba(168,85,247,0.22), transparent 66%),
opacity:.9; radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,0.06), transparent 70%);
animation: qDrift 14s ease-in-out infinite alternate; filter: blur(18px); /* weniger blur = mehr sichtbar */
opacity: 1;
pointer-events:none; pointer-events:none;
z-index:0; z-index:0;
} }
#wrap::after{ /* Content über dem Background */
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;
z-index:0;
}
#wrap > *{ #wrap > *{
position:relative; position:relative;
z-index:1; z-index:1;
} }
@keyframes qDrift{ #period {
from{ transform: translate3d(-2%, -2%, 0) scale(1.02) rotate(-2deg); } font-size: 15px; /* größer */
to { transform: translate3d( 2%, 2%, 0) scale(1.08) rotate( 2deg); } font-weight: 600; /* dicker */
} letter-spacing: 0.2px;
@keyframes qWaves{ opacity: 0.95;
from{ transform: translate3d(0,0,0) rotate(0deg); } }
to { transform: translate3d(6%, -4%, 0) rotate(360deg); } /* 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> </style>
<!-- 1) Puffer-Handler: fängt Symcon-Messages ab, selbst wenn UI noch nicht ready ist --> <!-- 1) Puffer-Handler: fängt Symcon-Messages ab, selbst wenn UI noch nicht ready ist -->
<script> <script>
window.__EnergyPieQueue = window.__EnergyPieQueue || []; window.__EnergyPieQueue = window.__EnergyPieQueue || [];
@@ -177,54 +185,48 @@
setTimeout(() => safeRequestAction('Refresh', 1), 150); setTimeout(() => safeRequestAction('Refresh', 1), 150);
} }
// --- donut card --- // --- donut card ---
function donutCard({ title, percent, subtitle, color }) { function donutCard({ title, percent, subtitle, color }) {
const share = clamp01(percent / 100); const share = clamp01(percent / 100);
const r = 56; const r = 56;
const c = 2 * Math.PI * r; const c = 2 * Math.PI * r;
const dash = share * c; let dash = share * c;
const gap = c - dash; // Schutz gegen Rundungs-Artefakte bei 99.9..100%
return ` if (dash > c - 0.01) dash = c;
<div style="border:1px solid rgba(255,255,255,0.12); return `
border-radius:16px; <div style="padding:18px 10px;
padding:14px; width:100%;
min-height:260px; display:flex;
width:100%; flex-direction:column;
display:flex; align-items:center;
flex-direction:column; justify-content:center;
align-items:center; gap:12px;">
justify-content:center; <div style="font-size:15px;font-weight:800;opacity:.95;">
gap:12px; ${escapeHtml(title)}
background:rgba(0,0,0,0.08); </div>
backdrop-filter: blur(2px);"> <div style="position:relative;width:180px;height:180px;">
<div style="font-size:14px;font-weight:700;opacity:.9;"> <svg width="180" height="180" viewBox="0 0 180 180">
${escapeHtml(title)} <!-- Anteilsegment -->
</div> <circle cx="90" cy="90" r="${r}"
<div style="position:relative;width:180px;height:180px;"> fill="none"
<svg width="180" height="180" viewBox="0 0 180 180"> stroke="${color}"
<circle cx="90" cy="90" r="${r}" stroke-width="18"
fill="none" stroke-linecap="butt"
stroke="rgba(255,255,255,0.10)" stroke-dasharray="${dash} ${c}"
stroke-width="18" /> transform="rotate(-90 90 90)"
<circle cx="90" cy="90" r="${r}" style="filter: drop-shadow(0 0 12px ${color});" />
fill="none" </svg>
stroke="${color}" <div style="position:absolute;inset:0;display:flex;
stroke-width="18" align-items:center;justify-content:center;
stroke-linecap="butt" font-weight:900;font-size:26px;">
stroke-dasharray="${dash} ${gap}" ${escapeHtml(percent.toFixed(1))}%
transform="rotate(-90 90 90)" />
</svg>
<div style="position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;
font-weight:800;font-size:24px;">
${escapeHtml(percent.toFixed(1))}%
</div>
</div>
<div style="font-size:12px;opacity:.65;text-align:center;">
${escapeHtml(subtitle)}
</div>
</div> </div>
`; </div>
} <div style="font-size:13px;opacity:.75;text-align:center;">
${escapeHtml(subtitle)}
</div>
</div>
`;
}
function render(data) { function render(data) {
const values = data?.values || {}; const values = data?.values || {};
const prod = toNum(values?.Produktion); const prod = toNum(values?.Produktion);
@@ -250,8 +252,12 @@
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 {
elHint.textContent = elHint.innerHTML = `
`Produktion: ${prod.toFixed(2)} kWh · Verbrauch: ${cons.toFixed(2)} kWh · Netzbezug: ${grid.toFixed(2)} kWh · Eigenverbrauch: ${eigenClamped.toFixed(2)} kWh`; <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>
`;
} }
elGrid.innerHTML = [ elGrid.innerHTML = [
donutCard({ donutCard({

179
Energy_Pie/module.php
View File

@@ -3,7 +3,6 @@
declare(strict_types=1); declare(strict_types=1);
class Energy_Pie extends IPSModule class Energy_Pie extends IPSModule
{ {
// Attribute keys for UI state
private const ATTR_RANGE = 'Range'; private const ATTR_RANGE = 'Range';
private const ATTR_DATE = 'Date'; private const ATTR_DATE = 'Date';
public function Create(): void public function Create(): void
@@ -14,28 +13,30 @@ class Energy_Pie extends IPSModule
$this->RegisterPropertyInteger('VarConsumption', 0); $this->RegisterPropertyInteger('VarConsumption', 0);
$this->RegisterPropertyInteger('VarFeedIn', 0); $this->RegisterPropertyInteger('VarFeedIn', 0);
$this->RegisterPropertyInteger('VarGrid', 0); $this->RegisterPropertyInteger('VarGrid', 0);
// Default range for first startup
$this->RegisterPropertyString('DefaultRange', 'day');
// Persisted UI state // Persisted UI state
$this->RegisterAttributeString(self::ATTR_RANGE, 'day'); $this->RegisterAttributeString(self::ATTR_RANGE, 'day');
$this->RegisterAttributeString(self::ATTR_DATE, date('Y-m-d')); $this->RegisterAttributeString(self::ATTR_DATE, date('Y-m-d'));
// Enable individual visualization (HTML-SDK) // Enable individual visualization (HTML-SDK)
$this->SetVisualizationType(1); $this->SetVisualizationType(1);
// IMPORTANT: Timer calls global helper below (must exist!)
$this->RegisterTimer('AutoPush', 0, 'IPS_RequestAction($_IPS["TARGET"], "Refresh", 1);');
} }
public function ApplyChanges(): void public function ApplyChanges(): void
{ {
parent::ApplyChanges(); parent::ApplyChanges();
// First-time init: if range is empty, set it to property default // ensure range valid
$range = $this->ReadAttributeString(self::ATTR_RANGE); $range = $this->ReadAttributeString(self::ATTR_RANGE);
if ($range === '') { if (!in_array($range, ['day', 'week', 'month', 'total'], true)) {
$this->WriteAttributeString(self::ATTR_RANGE, $this->ReadPropertyString('DefaultRange')); $this->WriteAttributeString(self::ATTR_RANGE, 'day');
} }
// ensure date valid (not empty/invalid/future)
$date = $this->ReadAttributeString(self::ATTR_DATE); $date = $this->ReadAttributeString(self::ATTR_DATE);
// Wenn Datum leer/ungültig oder in der Zukunft -> heute setzen
if ($date === '' || !$this->isValidDate($date) || strtotime($date . ' 00:00:00') > time()) { if ($date === '' || !$this->isValidDate($date) || strtotime($date . ' 00:00:00') > time()) {
$this->WriteAttributeString(self::ATTR_DATE, date('Y-m-d')); $this->WriteAttributeString(self::ATTR_DATE, date('Y-m-d'));
} }
// Push initial view data // Fullscreen-Fix: push periodically (adjust as you like)
// 2000ms = alle 2 Sekunden (stabil, aber nicht ganz so brutal wie 1000ms)
$this->SetTimerInterval('AutoPush', 2000);
$this->RecalculateAndPush(); $this->RecalculateAndPush();
} }
public function GetVisualizationTile(): string public function GetVisualizationTile(): string
@@ -52,16 +53,15 @@ class Energy_Pie extends IPSModule
case 'SetRange': case 'SetRange':
$range = (string)$Value; $range = (string)$Value;
if (!in_array($range, ['day', 'week', 'month', 'total'], true)) { if (!in_array($range, ['day', 'week', 'month', 'total'], true)) {
throw new Exception('Invalid range: ' . $range); return;
} }
$this->WriteAttributeString(self::ATTR_RANGE, $range); $this->WriteAttributeString(self::ATTR_RANGE, $range);
$this->RecalculateAndPush(); $this->RecalculateAndPush();
break; break;
case 'SetDate': case 'SetDate':
// Expect YYYY-MM-DD from HTML <input type="date">
$date = (string)$Value; $date = (string)$Value;
if (!$this->isValidDate($date)) { if (!$this->isValidDate($date)) {
throw new Exception('Invalid date: ' . $date); return;
} }
$this->WriteAttributeString(self::ATTR_DATE, $date); $this->WriteAttributeString(self::ATTR_DATE, $date);
$this->RecalculateAndPush(); $this->RecalculateAndPush();
@@ -76,98 +76,73 @@ class Energy_Pie extends IPSModule
$this->RecalculateAndPush(); $this->RecalculateAndPush();
break; break;
default: default:
throw new Exception('Unknown Ident: ' . $Ident); // ignore unknown
return;
} }
} }
/** private function RecalculateAndPush(): void
* Compute values (later from archive), then push to tile via UpdateVisualizationValue. {
*/ $range = $this->ReadAttributeString(self::ATTR_RANGE);
private function RecalculateAndPush(): void $date = $this->ReadAttributeString(self::ATTR_DATE);
{ [$tStart, $tEnd] = $this->getRange($range, $date);
$dbgProd = [];
$dbgFeed = [];
$range = $this->ReadAttributeString(self::ATTR_RANGE); $dbgGrid = [];
$date = $this->ReadAttributeString(self::ATTR_DATE); $prod = $this->readDelta($this->ReadPropertyInteger('VarProduction'), $tStart, $tEnd, $dbgProd);
$feed = $this->readDelta($this->ReadPropertyInteger('VarFeedIn'), $tStart, $tEnd, $dbgFeed);
[$tStart, $tEnd] = $this->getRange($range, $date); $grid = $this->readDelta($this->ReadPropertyInteger('VarGrid'), $tStart, $tEnd, $dbgGrid);
// Debug-Container initialisieren (sonst "Undefined variable") $hasData = (($dbgProd['count'] ?? 0) > 0) || (($dbgFeed['count'] ?? 0) > 0) || (($dbgGrid['count'] ?? 0) > 0);
$dbgProd = []; // Auto-jump to last log day if none found
$dbgFeed = []; if (!$hasData && $range !== 'total') {
$dbgGrid = []; $lastTs = $this->getLastLogTimestamp($this->ReadPropertyInteger('VarProduction'));
$prod = $this->readDelta($this->ReadPropertyInteger('VarProduction'), $tStart, $tEnd, $dbgProd); if ($lastTs > 0) {
$feed = $this->readDelta($this->ReadPropertyInteger('VarFeedIn'), $tStart, $tEnd, $dbgFeed); $this->WriteAttributeString(self::ATTR_DATE, date('Y-m-d', $lastTs));
$grid = $this->readDelta($this->ReadPropertyInteger('VarGrid'), $tStart, $tEnd, $dbgGrid); $date = $this->ReadAttributeString(self::ATTR_DATE);
[$tStart, $tEnd] = $this->getRange($range, $date);
$hasData = (($dbgProd['count'] ?? 0) > 0) || (($dbgFeed['count'] ?? 0) > 0) || (($dbgGrid['count'] ?? 0) > 0); $prod = $this->readDelta($this->ReadPropertyInteger('VarProduction'), $tStart, $tEnd, $dbgProd);
if (!$hasData && $range !== 'total') { $feed = $this->readDelta($this->ReadPropertyInteger('VarFeedIn'), $tStart, $tEnd, $dbgFeed);
// nimm Produktion als Referenz für "letzte Daten" $grid = $this->readDelta($this->ReadPropertyInteger('VarGrid'), $tStart, $tEnd, $dbgGrid);
$lastTs = $this->getLastLogTimestamp($this->ReadPropertyInteger('VarProduction')); $hasData = (($dbgProd['count'] ?? 0) > 0) || (($dbgFeed['count'] ?? 0) > 0) || (($dbgGrid['count'] ?? 0) > 0);
if ($lastTs > 0) { }
$this->WriteAttributeString(self::ATTR_DATE, date('Y-m-d', $lastTs));
// Range neu berechnen für dieses Datum
$date = $this->ReadAttributeString(self::ATTR_DATE);
[$tStart, $tEnd] = $this->getRange($range, $date);
// Deltas nochmal holen (jetzt sollte count>0 werden)
$prod = $this->readDelta($this->ReadPropertyInteger('VarProduction'), $tStart, $tEnd, $dbgProd);
$feed = $this->readDelta($this->ReadPropertyInteger('VarFeedIn'), $tStart, $tEnd, $dbgFeed);
$grid = $this->readDelta($this->ReadPropertyInteger('VarGrid'), $tStart, $tEnd, $dbgGrid);
$hasData = (($dbgProd['count'] ?? 0) > 0) || (($dbgFeed['count'] ?? 0) > 0) || (($dbgGrid['count'] ?? 0) > 0);
} }
// House = Prod - Feed + Grid
$house = $prod - $feed + $grid;
if ($house < 0) $house = 0.0;
$payload = [
'range' => $range,
'date' => $date,
'tStart' => $tStart,
'tEnd' => $tEnd,
'hasData' => $hasData,
'values' => [
'Produktion' => (float)$prod,
'Einspeisung' => (float)$feed,
'Netz' => (float)$grid,
'Hausverbrauch' => (float)$house
],
// kannst du später entfernen
'debug' => [
'prod' => $dbgProd,
'feed' => $dbgFeed,
'grid' => $dbgGrid
]
];
$this->UpdateVisualizationValue(json_encode($payload, JSON_THROW_ON_ERROR));
} }
$house = $prod - $feed + $grid;
if ($house < 0) $house = 0.0;
$payload = [
'range' => $range,
'date' => $date,
'tStart' => $tStart,
'tEnd' => $tEnd,
'hasData' => $hasData,
'values' => [
'Produktion' => (float)$prod,
'Einspeisung' => (float)$feed,
'Netz' => (float)$grid,
'Hausverbrauch' => (float)$house
],
'debug' => [
'prod' => $dbgProd,
'feed' => $dbgFeed,
'grid' => $dbgGrid
]
];
$this->UpdateVisualizationValue(json_encode($payload, JSON_THROW_ON_ERROR));
}
/**
* Range rules:
* - day: chosen date 00:00:00 .. next day 00:00:00
* - week: Monday 00:00:00 .. next Monday 00:00:00 (Mo–So)
* - month: first of month 00:00:00 .. first of next month 00:00:00
* - total: 0 .. now (placeholder)
*/
private function getRange(string $range, string $dateYmd): array private function getRange(string $range, string $dateYmd): array
{ {
$now = time(); $now = time();
if ($range === 'total') { if ($range === 'total') {
// Later: use oldest log timestamp as start
return [0, $now]; return [0, $now];
} }
$base = strtotime($dateYmd . ' 00:00:00'); $base = strtotime($dateYmd . ' 00:00:00') ?: strtotime(date('Y-m-d') . ' 00:00:00');
if ($base === false) {
// fallback to today
$base = strtotime(date('Y-m-d') . ' 00:00:00');
}
switch ($range) { switch ($range) {
case 'day': case 'day':
$start = $base; return [$base, $base + 86400];
$end = $start + 86400;
return [$start, $end];
case 'week': case 'week':
// date('N'): 1=Mon .. 7=Sun $dow = (int)date('N', $base); // 1=Mon..7=Sun
$dow = (int)date('N', $base); $start = $base - (($dow - 1) * 86400);
$start = $base - (($dow - 1) * 86400); // Monday return [$start, $start + 7 * 86400];
$end = $start + (7 * 86400); // next Monday
return [$start, $end];
case 'month': case 'month':
$start = strtotime(date('Y-m-01 00:00:00', $base)); $start = strtotime(date('Y-m-01 00:00:00', $base));
$end = strtotime(date('Y-m-01 00:00:00', strtotime('+1 month', $start))); $end = strtotime(date('Y-m-01 00:00:00', strtotime('+1 month', $start)));
@@ -176,7 +151,12 @@ private function RecalculateAndPush(): void
return [$base, $base + 86400]; return [$base, $base + 86400];
} }
} }
public function GetVisualizationPopup(): string
{
// Popup (Fullscreen) soll das gleiche HTML wie das Tile anzeigen
$this->RecalculateAndPush();
return $this->GetVisualizationTile();
}
private function readDelta(int $varId, int $tStart, int $tEnd, array &$dbg): float private function readDelta(int $varId, int $tStart, int $tEnd, array &$dbg): float
{ {
$dbg = [ $dbg = [
@@ -228,24 +208,16 @@ private function RecalculateAndPush(): void
if ($archiveID <= 0) { if ($archiveID <= 0) {
return 0; return 0;
} }
// Hole den letzten Eintrag (0..now, limit=1 -> der neueste)
$values = @AC_GetLoggedValues($archiveID, $varId, 0, time(), 1); $values = @AC_GetLoggedValues($archiveID, $varId, 0, time(), 1);
if (empty($values)) { if (empty($values)) {
return 0; return 0;
} }
// Bei limit=1 kommt genau ein Eintrag (der neueste)
return (int)$values[0]['TimeStamp']; return (int)$values[0]['TimeStamp'];
} }
/**
* Buttons for quick navigation.
*/
private function ShiftDate(string $action): void private function ShiftDate(string $action): void
{ {
$range = $this->ReadAttributeString(self::ATTR_RANGE); $range = $this->ReadAttributeString(self::ATTR_RANGE);
if ($range === 'total') { if ($range === 'total') {
// total ignores date
return; return;
} }
if ($action === 'Today') { if ($action === 'Today') {
@@ -253,10 +225,7 @@ private function RecalculateAndPush(): void
return; return;
} }
$date = $this->ReadAttributeString(self::ATTR_DATE); $date = $this->ReadAttributeString(self::ATTR_DATE);
$base = strtotime($date . ' 00:00:00'); $base = strtotime($date . ' 00:00:00') ?: strtotime(date('Y-m-d') . ' 00:00:00');
if ($base === false) {
$base = strtotime(date('Y-m-d') . ' 00:00:00');
}
$sign = ($action === 'Prev') ? -1 : 1; $sign = ($action === 'Prev') ? -1 : 1;
switch ($range) { switch ($range) {
case 'day': case 'day':
@@ -273,13 +242,13 @@ private function RecalculateAndPush(): void
} }
private function isValidDate(string $ymd): bool private function isValidDate(string $ymd): bool
{ {
// expects YYYY-MM-DD
if (!preg_match('/^\d{4}-\d{2}-\d{2}$/', $ymd)) { if (!preg_match('/^\d{4}-\d{2}-\d{2}$/', $ymd)) {
return false; return false;
} }
[$y, $m, $d] = array_map('intval', explode('-', $ymd)); [$y, $m, $d] = array_map('intval', explode('-', $ymd));
return checkdate($m, $d, $y); return checkdate($m, $d, $y);
} }
} }
?> ?>