no message
This commit is contained in:
@@ -39,59 +39,67 @@
|
||||
@media (max-width: 720px) {
|
||||
#grid { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
/* Quantum-Waves Hintergrund */
|
||||
/* 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:-50%;
|
||||
inset:-35%;
|
||||
background:
|
||||
radial-gradient(circle at 20% 25%, rgba(99,179,255,.20), transparent 45%),
|
||||
radial-gradient(circle at 80% 35%, rgba(168,85,247,.18), transparent 50%),
|
||||
radial-gradient(circle at 55% 80%, rgba(255,255,255,.07), transparent 55%);
|
||||
filter: blur(20px);
|
||||
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;
|
||||
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;
|
||||
}
|
||||
@keyframes qDrift{
|
||||
from{ transform: translate3d(-2%, -2%, 0) scale(1.02) rotate(-2deg); }
|
||||
to { transform: translate3d( 2%, 2%, 0) scale(1.08) rotate( 2deg); }
|
||||
#period {
|
||||
font-size: 15px; /* größer */
|
||||
font-weight: 600; /* dicker */
|
||||
letter-spacing: 0.2px;
|
||||
opacity: 0.95;
|
||||
}
|
||||
@keyframes qWaves{
|
||||
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>
|
||||
|
||||
<!-- 1) Puffer-Handler: fängt Symcon-Messages ab, selbst wenn UI noch nicht ready ist -->
|
||||
<script>
|
||||
window.__EnergyPieQueue = window.__EnergyPieQueue || [];
|
||||
@@ -181,45 +189,39 @@
|
||||
const share = clamp01(percent / 100);
|
||||
const r = 56;
|
||||
const c = 2 * Math.PI * r;
|
||||
const dash = share * c;
|
||||
const gap = c - dash;
|
||||
let dash = share * c;
|
||||
// Schutz gegen Rundungs-Artefakte bei 99.9..100%
|
||||
if (dash > c - 0.01) dash = c;
|
||||
return `
|
||||
<div style="border:1px solid rgba(255,255,255,0.12);
|
||||
border-radius:16px;
|
||||
padding:14px;
|
||||
min-height:260px;
|
||||
<div style="padding:18px 10px;
|
||||
width:100%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
gap:12px;
|
||||
background:rgba(0,0,0,0.08);
|
||||
backdrop-filter: blur(2px);">
|
||||
<div style="font-size:14px;font-weight:700;opacity:.9;">
|
||||
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">
|
||||
<circle cx="90" cy="90" r="${r}"
|
||||
fill="none"
|
||||
stroke="rgba(255,255,255,0.10)"
|
||||
stroke-width="18" />
|
||||
<!-- Anteilsegment -->
|
||||
<circle cx="90" cy="90" r="${r}"
|
||||
fill="none"
|
||||
stroke="${color}"
|
||||
stroke-width="18"
|
||||
stroke-linecap="butt"
|
||||
stroke-dasharray="${dash} ${gap}"
|
||||
transform="rotate(-90 90 90)" />
|
||||
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:800;font-size:24px;">
|
||||
font-weight:900;font-size:26px;">
|
||||
${escapeHtml(percent.toFixed(1))}%
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:12px;opacity:.65;text-align:center;">
|
||||
<div style="font-size:13px;opacity:.75;text-align:center;">
|
||||
${escapeHtml(subtitle)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -250,8 +252,12 @@
|
||||
if (data?.hasData === false) {
|
||||
elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.';
|
||||
} else {
|
||||
elHint.textContent =
|
||||
`Produktion: ${prod.toFixed(2)} kWh · Verbrauch: ${cons.toFixed(2)} kWh · Netzbezug: ${grid.toFixed(2)} kWh · Eigenverbrauch: ${eigenClamped.toFixed(2)} kWh`;
|
||||
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>
|
||||
`;
|
||||
}
|
||||
elGrid.innerHTML = [
|
||||
donutCard({
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
declare(strict_types=1);
|
||||
class Energy_Pie extends IPSModule
|
||||
{
|
||||
// Attribute keys for UI state
|
||||
private const ATTR_RANGE = 'Range';
|
||||
private const ATTR_DATE = 'Date';
|
||||
public function Create(): void
|
||||
@@ -14,28 +13,30 @@ class Energy_Pie extends IPSModule
|
||||
$this->RegisterPropertyInteger('VarConsumption', 0);
|
||||
$this->RegisterPropertyInteger('VarFeedIn', 0);
|
||||
$this->RegisterPropertyInteger('VarGrid', 0);
|
||||
// Default range for first startup
|
||||
$this->RegisterPropertyString('DefaultRange', 'day');
|
||||
// Persisted UI state
|
||||
$this->RegisterAttributeString(self::ATTR_RANGE, 'day');
|
||||
$this->RegisterAttributeString(self::ATTR_DATE, date('Y-m-d'));
|
||||
// Enable individual visualization (HTML-SDK)
|
||||
$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
|
||||
{
|
||||
parent::ApplyChanges();
|
||||
// First-time init: if range is empty, set it to property default
|
||||
// ensure range valid
|
||||
$range = $this->ReadAttributeString(self::ATTR_RANGE);
|
||||
if ($range === '') {
|
||||
$this->WriteAttributeString(self::ATTR_RANGE, $this->ReadPropertyString('DefaultRange'));
|
||||
if (!in_array($range, ['day', 'week', 'month', 'total'], true)) {
|
||||
$this->WriteAttributeString(self::ATTR_RANGE, 'day');
|
||||
}
|
||||
// ensure date valid (not empty/invalid/future)
|
||||
$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()) {
|
||||
$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();
|
||||
}
|
||||
public function GetVisualizationTile(): string
|
||||
@@ -52,16 +53,15 @@ class Energy_Pie extends IPSModule
|
||||
case 'SetRange':
|
||||
$range = (string)$Value;
|
||||
if (!in_array($range, ['day', 'week', 'month', 'total'], true)) {
|
||||
throw new Exception('Invalid range: ' . $range);
|
||||
return;
|
||||
}
|
||||
$this->WriteAttributeString(self::ATTR_RANGE, $range);
|
||||
$this->RecalculateAndPush();
|
||||
break;
|
||||
case 'SetDate':
|
||||
// Expect YYYY-MM-DD from HTML <input type="date">
|
||||
$date = (string)$Value;
|
||||
if (!$this->isValidDate($date)) {
|
||||
throw new Exception('Invalid date: ' . $date);
|
||||
return;
|
||||
}
|
||||
$this->WriteAttributeString(self::ATTR_DATE, $date);
|
||||
$this->RecalculateAndPush();
|
||||
@@ -76,45 +76,36 @@ class Energy_Pie extends IPSModule
|
||||
$this->RecalculateAndPush();
|
||||
break;
|
||||
default:
|
||||
throw new Exception('Unknown Ident: ' . $Ident);
|
||||
// ignore unknown
|
||||
return;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Compute values (later from archive), then push to tile via UpdateVisualizationValue.
|
||||
*/
|
||||
private function RecalculateAndPush(): void
|
||||
{
|
||||
|
||||
|
||||
$range = $this->ReadAttributeString(self::ATTR_RANGE);
|
||||
$date = $this->ReadAttributeString(self::ATTR_DATE);
|
||||
|
||||
[$tStart, $tEnd] = $this->getRange($range, $date);
|
||||
// Debug-Container initialisieren (sonst "Undefined variable")
|
||||
$dbgProd = [];
|
||||
$dbgFeed = [];
|
||||
$dbgGrid = [];
|
||||
$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);
|
||||
// Auto-jump to last log day if none found
|
||||
if (!$hasData && $range !== 'total') {
|
||||
// nimm Produktion als Referenz für "letzte Daten"
|
||||
$lastTs = $this->getLastLogTimestamp($this->ReadPropertyInteger('VarProduction'));
|
||||
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 = [
|
||||
@@ -129,6 +120,7 @@ private function RecalculateAndPush(): void
|
||||
'Netz' => (float)$grid,
|
||||
'Hausverbrauch' => (float)$house
|
||||
],
|
||||
// kannst du später entfernen
|
||||
'debug' => [
|
||||
'prod' => $dbgProd,
|
||||
'feed' => $dbgFeed,
|
||||
@@ -137,37 +129,20 @@ private function RecalculateAndPush(): void
|
||||
];
|
||||
$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
|
||||
{
|
||||
$now = time();
|
||||
if ($range === 'total') {
|
||||
// Later: use oldest log timestamp as start
|
||||
return [0, $now];
|
||||
}
|
||||
$base = strtotime($dateYmd . ' 00:00:00');
|
||||
if ($base === false) {
|
||||
// fallback to today
|
||||
$base = strtotime(date('Y-m-d') . ' 00:00:00');
|
||||
}
|
||||
$base = strtotime($dateYmd . ' 00:00:00') ?: strtotime(date('Y-m-d') . ' 00:00:00');
|
||||
switch ($range) {
|
||||
case 'day':
|
||||
$start = $base;
|
||||
$end = $start + 86400;
|
||||
return [$start, $end];
|
||||
return [$base, $base + 86400];
|
||||
case 'week':
|
||||
// date('N'): 1=Mon .. 7=Sun
|
||||
$dow = (int)date('N', $base);
|
||||
$start = $base - (($dow - 1) * 86400); // Monday
|
||||
$end = $start + (7 * 86400); // next Monday
|
||||
return [$start, $end];
|
||||
$dow = (int)date('N', $base); // 1=Mon..7=Sun
|
||||
$start = $base - (($dow - 1) * 86400);
|
||||
return [$start, $start + 7 * 86400];
|
||||
case 'month':
|
||||
$start = strtotime(date('Y-m-01 00:00:00', $base));
|
||||
$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];
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
{
|
||||
$dbg = [
|
||||
@@ -228,24 +208,16 @@ private function RecalculateAndPush(): void
|
||||
if ($archiveID <= 0) {
|
||||
return 0;
|
||||
}
|
||||
// Hole den letzten Eintrag (0..now, limit=1 -> der neueste)
|
||||
$values = @AC_GetLoggedValues($archiveID, $varId, 0, time(), 1);
|
||||
if (empty($values)) {
|
||||
return 0;
|
||||
}
|
||||
// Bei limit=1 kommt genau ein Eintrag (der neueste)
|
||||
return (int)$values[0]['TimeStamp'];
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Buttons for quick navigation.
|
||||
*/
|
||||
private function ShiftDate(string $action): void
|
||||
{
|
||||
$range = $this->ReadAttributeString(self::ATTR_RANGE);
|
||||
if ($range === 'total') {
|
||||
// total ignores date
|
||||
return;
|
||||
}
|
||||
if ($action === 'Today') {
|
||||
@@ -253,10 +225,7 @@ private function RecalculateAndPush(): void
|
||||
return;
|
||||
}
|
||||
$date = $this->ReadAttributeString(self::ATTR_DATE);
|
||||
$base = strtotime($date . ' 00:00:00');
|
||||
if ($base === false) {
|
||||
$base = strtotime(date('Y-m-d') . ' 00:00:00');
|
||||
}
|
||||
$base = strtotime($date . ' 00:00:00') ?: strtotime(date('Y-m-d') . ' 00:00:00');
|
||||
$sign = ($action === 'Prev') ? -1 : 1;
|
||||
switch ($range) {
|
||||
case 'day':
|
||||
@@ -273,13 +242,13 @@ private function RecalculateAndPush(): void
|
||||
}
|
||||
private function isValidDate(string $ymd): bool
|
||||
{
|
||||
// expects YYYY-MM-DD
|
||||
if (!preg_match('/^\d{4}-\d{2}-\d{2}$/', $ymd)) {
|
||||
return false;
|
||||
}
|
||||
[$y, $m, $d] = array_map('intval', explode('-', $ymd));
|
||||
return checkdate($m, $d, $y);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
|
||||
Reference in New Issue
Block a user