admin/Smart-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard: Doppelungen zusammengelegt, Lade- und Renderlast gesenkt

Browse Source 
Zusammenlegung
- Die sechs Endpunkte getConsData_/getProdData_{month,year,decade}.php sind
  ajax/energyHistory.php?series=&range= gewichen, der gemeinsame Aufbau der
  Chart-Daten steht in ajax/chartData.php. Die erzeugte SQL wurde gegen alle
  sechs Originale abgeglichen.
- Die 13 Raeume der Home-Ansicht stehen nur noch in restricted/rooms.php.
  home.php rendert die SVG-Kacheln daraus, homeMQTT.js bekommt dieselbe
  Tabelle als JSON (346 -> 222 bzw. 428 -> 197 Zeilen).
- Gemeinsame JS-Helfer in js/solar/common.js; geteilte Bausteine fuer
  Wetterkacheln, Chart-Skripte und das Formular der Ladesteuerung.
- Seitenvorlagen sind jetzt .php und werden eingebunden, statt per
  file_get_contents zusammengesetzt zu werden.

Fehlerbehebungen
- ?action=weather fuehrte auf eine leere Seite, es gibt jetzt weather.php.
- homeMQTT.js griff auf ein #meteogram zu, das home.php nie hatte, und brach
  damit den readystatechange-Handler ab.
- Die Heizungsseite abonnierte weatherStation/#, zeigte die Werte aber nie an.

Ladelast
- Chart.js, MQTT und Meteogramm werden nur noch auf den Seiten geladen, die
  sie brauchen; die Seitentabelle dafuer steht in index.php.
- mqtt.js durch die minifizierte Fassung ersetzt (859 -> 359 KB). MQTT.js
  5.14.1, byte-identisch mit dem signierten npm-Tarball.
- Rund 3,1 MB ungenutzte Vendor-Reste und AdminLTE-Demobilder entfernt.
- Solar 1796 -> 1240 KB, Home 1796 -> 873 KB, Historie 1796 -> 843 KB.

Speicher im Browser
- Chart.defaults.devicePixelRatio auf 1.5 gedeckelt. Die Zeichenpuffer der
  Diagramme waren mit 20-45 MB der groesste Posten der Seite.
- Das Meteogramm-iframe laedt erst beim Hinscrollen.

Realtime-SVG
- Filterbereiche auf das noetige Mass verkleinert und den wirkungslosen
  feOffset-Durchgang entfernt: 60 % weniger gerasterte Filterflaeche bei
  pixelgleichem Ergebnis.
- Die Fluss-Animation laeuft ueber transform statt stroke-dashoffset, mit
  Punkten statt Strichmuster; sie ruht, wo kein Fluss anliegt.
- Der Wertupdate schreibt nur noch bei echter Aenderung und benutzt
  textContent statt innerHTML: 9 statt 86 Elemente pro Update, davon keines
  mit Filter. describeArc rundet auf volle Grad.
- waterInfo auf scale(0.90) wie die uebrigen Info-Gruppen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
admin
2026-08-26 22:54:28 +02:00
co-authored by Claude Opus 5
parent 29f752eafe
commit 6b8556567b
68 changed files with 1555 additions and 60085 deletions
Download Patch File Download Diff File Expand all files Collapse all files
restricted/home.php
+24 -149
View File
@@ -1,3 +1,4 @@
<?php require_once(__DIR__ . "/rooms.php"); ?>
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
@@ -104,142 +105,22 @@
<use href="#floorBtn" stroke="#aa7713" />
<text fill="#aa7713" style="font: 3em sans-serif;" transform="translate(63,90)">UG</text>
</g>
<g id="OG_Info" <?php if($_GET["floor"] != "OG"){echo "display='none'";} ?> >
<g transform="translate(180,140)" onclick="openHeaterSettings('OG_Wohnzimmer');" cursor="pointer">
<?php foreach ($floors as $floor): ?>
<g id="<?= $floor ?>_Info" <?php if ($floor != "OG") echo 'opacity="0" '; ?><?php if($_GET["floor"] != $floor){echo "display='none'";} ?> >
<?php foreach (roomsOnFloor($floor) as $room): ?>
<g transform="translate(<?= $room["x"] ?>,<?= $room["y"] ?>)" onclick="openHeaterSettings('<?= $floor ?>_<?= $room["mqtt"] ?>');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="OG_wozi_heater" href="#heater" display="none" />
<use id="OG_wozi_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;" cursor="pointer">
<tspan id="OG_pres_wozi" y="5" x="12" text-anchor="middle" cursor="pointer">---- hPa</tspan>
<tspan id="OG_tmp_wozi" x="12" dy="1em" font-size="1.6em" text-anchor="middle" cursor="pointer">--,- °C</tspan>
<tspan id="OG_hum_wozi" x="12" dy="1.2em" text-anchor="middle" cursor="pointer">-- %rF</tspan>
</text>
</g>
<g transform="translate(130,80)" onclick="openHeaterSettings('OG_KiZi');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="OG_kizi_heater" href="#heater" display="none" />
<use id="OG_kizi_buffer" href="#buffer" display="none" />
<use id="<?= $floor ?>_<?= $room["id"] ?>_heater" href="#heater" display="none" />
<use id="<?= $floor ?>_<?= $room["id"] ?>_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;">
<tspan id="OG_pres_kizi" y="5" x="12" text-anchor="middle" >---- hPa</tspan>
<tspan id="OG_tmp_kizi" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="OG_hum_kizi" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
</text>
</g>
<g transform="translate(235,70)" onclick="openHeaterSettings('OG_Schlafzimmer');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="OG_schlafen_heater" href="#heater" display="none" />
<use id="OG_schlafen_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;">
<tspan id="OG_pres_schlafen" y="5" x="12" text-anchor="middle" >---- hPa</tspan>
<tspan id="OG_tmp_schlafen" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="OG_hum_schlafen" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
</text>
</g>
<g transform="translate(260,120)" onclick="openHeaterSettings('OG_Bad');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="OG_bad_heater" href="#heater" display="none" />
<use id="OG_bad_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;">
<tspan id="OG_pres_bad" y="5" x="12" text-anchor="middle" >---- hPa</tspan>
<tspan id="OG_tmp_bad" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="OG_hum_bad" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
</text>
</g>
<g transform="translate(265,175)" onclick="openHeaterSettings('OG_Buero');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="OG_buero_heater" href="#heater" display="none" />
<use id="OG_buero_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;">
<tspan id="OG_pres_buero" y="5" x="12" text-anchor="middle" >---- hPa</tspan>
<tspan id="OG_tmp_buero" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="OG_hum_buero" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
</text>
</g>
</g>
<g id="EG_Info" opacity="0" <?php if($_GET["floor"] != "EG"){echo "display='none'";} ?> >
<g transform="translate(185,150)" onclick="openHeaterSettings('EG_Wohnzimmer');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="EG_wozi_heater" href="#heater" display="none" />
<use id="EG_wozi_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;">
<tspan id="EG_pres_wozi" y="5" x="12" text-anchor="middle" >---- hPa</tspan>
<tspan id="EG_tmp_wozi" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="EG_hum_wozi" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
</text>
</g>
<g transform="translate(130,90)" onclick="openHeaterSettings('EG_Florian');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="EG_kizi_heater" href="#heater" display="none" />
<use id="EG_kizi_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;">
<tspan id="EG_pres_kizi" y="5" x="12" text-anchor="middle" >---- hPa</tspan>
<tspan id="EG_tmp_kizi" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="EG_hum_kizi" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
</text>
</g>
<g transform="translate(235,80)" onclick="openHeaterSettings('EG_Schlafen');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="EG_schlafen_heater" href="#heater" display="none" />
<use id="EG_schlafen_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;">
<tspan id="EG_pres_schlafen" y="5" x="12" text-anchor="middle" >---- hPa</tspan>
<tspan id="EG_tmp_schlafen" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="EG_hum_schlafen" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
</text>
</g>
<g transform="translate(253,130)" onclick="openHeaterSettings('EG_Bad');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="EG_bad_heater" href="#heater" display="none" />
<use id="EG_bad_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;">
<tspan id="EG_pres_bad" y="5" x="12" text-anchor="middle" >---- hPa</tspan>
<tspan id="EG_tmp_bad" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="EG_hum_bad" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
</text>
</g>
<g transform="translate(258,180)" onclick="openHeaterSettings('EG_Magdalena');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="EG_buero_heater" href="#heater" display="none" />
<use id="EG_buero_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;">
<tspan id="EG_pres_buero" y="5" x="12" text-anchor="middle" >---- hPa</tspan>
<tspan id="EG_tmp_buero" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="EG_hum_buero" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
</text>
</g>
</g>
<g id="UG_Info" opacity="0" <?php if($_GET["floor"] != "UG"){echo "display='none'";} ?> >
<g transform="translate(140,140)" onclick="openHeaterSettings('UG_Buero');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="UG_buero_heater" href="#heater" display="none" />
<use id="UG_buero_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;">
<tspan id="UG_pres_buero" y="5" x="12" text-anchor="middle" >---- hPa</tspan>
<tspan id="UG_tmp_buero" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="UG_hum_buero" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
</text>
</g>
<g transform="translate(210,80)" onclick="openHeaterSettings('UG_Bad');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="UG_bad_heater" href="#heater" display="none" />
<use id="UG_bad_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;">
<tspan id="UG_pres_bad" y="5" x="12" text-anchor="middle" >---- hPa</tspan>
<tspan id="UG_tmp_bad" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="UG_hum_bad" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
</text>
</g>
<g transform="translate(190,195)" onclick="openHeaterSettings('UG_Kueche');" cursor="pointer">
<rect width="24" height="19" rx="5" fill="#0006" />
<use id="UG_kueche_heater" href="#heater" display="none" />
<use id="UG_kueche_buffer" href="#buffer" display="none" />
<text fill="#fff" style="font: 4px sans-serif;">
<tspan id="UG_pres_kueche" y="5" x="12" text-anchor="middle" >---- hPa</tspan>
<tspan id="UG_tmp_kueche" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="UG_hum_kueche" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
<tspan id="<?= $floor ?>_pres_<?= $room["id"] ?>" y="5" x="12" text-anchor="middle">---- hPa</tspan>
<tspan id="<?= $floor ?>_tmp_<?= $room["id"] ?>" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
<tspan id="<?= $floor ?>_hum_<?= $room["id"] ?>" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
</text>
</g>
<?php endforeach; ?>
</g>
<?php endforeach; ?>
</g>
</svg>
</div>
@@ -327,21 +208,15 @@
</main>
<!--end::App Main-->
<?php
if(isset($_GET["floor"])){
echo "<script> document.addEventListener('readystatechange', function () {
if (event.target.readyState === 'complete') {";
switch($_GET["floor"]){
case "EG":
echo "switchFloor('EG');";
break;
case "OG":
break;
case "UG":
echo "switchFloor('UG');";
break;
}
echo "}
});</script>";
}
?>
<script>
// Raumtabelle aus restricted/rooms.php - homeMQTT.js aktualisiert darueber
// die SVG-Kacheln, ohne die Raeume noch einmal aufzufuehren.
const homeRooms = <?= json_encode($rooms) ?>;
<?php if ($_GET["floor"] != "OG" && in_array($_GET["floor"], $floors)): ?>
document.addEventListener('readystatechange', function () {
if (event.target.readyState === 'complete') {
switchFloor('<?= $_GET["floor"] ?>');
}
});
<?php endif; ?>
</script>