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

Uebersicht: Ladestaende deutlicher, dunkle Bahn unter den Punkten weg

Browse Source 
Die Fuellung war mit 14 Prozent Deckung kaum zu sehen; jetzt 22 Prozent,
beim Laden 32, dazu die Wasserlinie als eigene Kante. Ohne gemeldeten Stand
bleibt die Fuellung ganz weg - eine Wallbox ohne Auto zeigte sonst eine
Linie am unteren Rand. Das Bett ist nur noch eine duenne Linie und
verschwindet, sobald Punkte laufen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
admin
2026-09-16 10:01:17 +02:00
co-authored by Claude Opus 5
parent fe12e57d88
commit 357c73cf8a
2 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/solar.css
+16 -5
View File
@@ -3560,10 +3560,19 @@ svg.enf.enf-hoch { max-height: none; }
/* --- Füllstand als Welle ------------------------------------------------ */
.enf .enf-fuellung {
--r: 67;
opacity: 0;
transform: translateY(calc(var(--r) * (1 - 2 * var(--stand)) * 1px));
transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), opacity .6s;
}
.enf .enf-welle { fill: var(--farbe); fill-opacity: .14; animation: enf-wogen 8s linear infinite; }
/* Ladestand: Flaeche etwas kraeftiger als frueher, dazu die Wasserlinie als
eigene Kante - so sieht man auf einen Blick, wie voll Akku oder Auto sind. */
.enf .enf-stand .enf-fuellung { opacity: 1; }
.enf .enf-welle { fill: var(--farbe); fill-opacity: .22; animation: enf-wogen 8s linear infinite; }
.enf .enf-welle-kante {
fill: none; stroke: var(--farbe); stroke-width: 2.2; stroke-opacity: .85;
animation: enf-wogen 8s linear infinite;
}
.enf .enf-laden .enf-welle { fill-opacity: .32; }
@keyframes enf-wogen { to { transform: translateX(calc(var(--r) * 2px)); } }
/* --- Symbole ------------------------------------------------------------ */
@@ -3613,12 +3622,14 @@ svg.enf.enf-hoch { max-height: none; }
/* --- Flüsse -------------------------------------------------------------- */
.enf .enf-bett {
fill: none; stroke: #252b31; stroke-linecap: round;
stroke-width: calc(var(--breite, 0) * .7px + 5px);
fill: none; stroke: #2b333a; stroke-linecap: round;
stroke-width: 2.5;
stroke-dasharray: 1 1; stroke-dashoffset: 1;
transition: stroke-width .8s;
transition: opacity .6s;
animation: enf-zeichnen .9s cubic-bezier(.5, 0, .2, 1) forwards; animation-delay: var(--verz);
}
/* Fliesst etwas, tragen die Punkte den Weg allein. */
.enf .enf-fluss:not(.enf-still) .enf-bett { opacity: 0; }
@keyframes enf-zeichnen { to { stroke-dashoffset: 0; } }
.enf .enf-strom,
.enf .enf-strom-hof {
js/solar/energiefluss.js
+9 -4
View File
@@ -366,10 +366,12 @@
const ri = r - 11;
fuellung = el("g", { class: "enf-fuellung", style: `--stand:0;--r:${ri}` }, clip);
const b = ri * 4;
el("path", {
class: "enf-welle",
d: `M${-b} 0 q${ri / 2} -9 ${ri} 0` + ` t${ri} 0`.repeat(7) + ` V${ri * 2} H${-b} Z`,
}, fuellung);
const bogen = `M${-b} 0 q${ri / 2} -9 ${ri} 0` + ` t${ri} 0`.repeat(7);
el("path", { class: "enf-welle", d: bogen + ` V${ri * 2} H${-b} Z` }, fuellung);
// Dieselbe Linie noch einmal als Kante: die Flaeche allein ist so
// blass, dass man den Ladestand suchen muss. Die Kante zeichnet die
// Wasserlinie scharf nach.
el("path", { class: "enf-welle-kante", d: bogen }, fuellung);
}
const symbol = el("g", {
@@ -525,6 +527,9 @@
const zu = z.zustand || {};
e.g.classList.toggle("enf-an", !!zu.an);
e.g.classList.toggle("enf-laden", !!zu.laden);
// Ohne gemeldeten Stand bleibt die Fuellung ganz weg: sonst stuende
// bei einer Wallbox ohne Auto eine Wasserlinie am unteren Rand.
e.g.classList.toggle("enf-stand", zu.stand !== undefined && isFinite(zu.stand));
if (zu.stand !== undefined && isFinite(zu.stand)) {
const s = Math.max(0, Math.min(1, zu.stand)).toFixed(3);
if (e.g.style.getPropertyValue("--stand") !== s) {