diff --git a/css/solar.css b/css/solar.css index 3338a41..833d5a0 100644 --- a/css/solar.css +++ b/css/solar.css @@ -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 { diff --git a/js/solar/energiefluss.js b/js/solar/energiefluss.js index cc51620..e6a7172 100644 --- a/js/solar/energiefluss.js +++ b/js/solar/energiefluss.js @@ -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) {