diff --git a/css/solar.css b/css/solar.css index 5d39d6e..3338a41 100644 --- a/css/solar.css +++ b/css/solar.css @@ -3614,7 +3614,7 @@ 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) * 1px + 5px); + stroke-width: calc(var(--breite, 0) * .7px + 5px); stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-width .8s; animation: enf-zeichnen .9s cubic-bezier(.5, 0, .2, 1) forwards; animation-delay: var(--verz); diff --git a/js/solar/energiefluss.js b/js/solar/energiefluss.js index 26c0a5e..cc51620 100644 --- a/js/solar/energiefluss.js +++ b/js/solar/energiefluss.js @@ -30,6 +30,21 @@ "use strict"; const NS = "http://www.w3.org/2000/svg"; + /** + * Wie voll der Ring bei dieser Leistung ist (0..1). + * + * Nicht linear: bei 15 kW Vollausschlag waeren 300 W ein Strich von zwei + * Grad - man saehe nicht, ob das Erdgeschoss 50 W oder 500 W zieht, und + * genau in diesem Bereich steht die Anlage die meiste Zeit. Die gestauchte + * Skala gibt dem unteren Zehntel knapp ein Drittel des Rings und laesst den + * vollen Ausschlag trotzdem genau bei "skala". + */ + function ringAnteil(w, skala) { + if (!(skala > 0)) return 0; + const teil = Math.max(0, Math.min(1, Math.abs(w) / skala)); + return Math.log10(1 + 9 * teil); + } + const RADIUS = 78; const RADIUS_GROSS = 92; const RAND = 60; // Luft um die äußersten Kreise @@ -481,10 +496,18 @@ while (e.segmente.length < segmente.length) { e.segmente.push(el("circle", { r: this.radius(k), class: "enf-bogen", pathLength: "100" }, e.ring)); } - let start = 0; + // Gerechnet wird ueber die Summe, nicht je Segment: die gestauchte + // Skala ist nicht additiv, sonst reichten drei Viertel-Segmente weiter + // als ein volles. + let start = 0, summe = 0; e.segmente.forEach((kreis, i) => { const s = segmente[i]; - let laenge = s ? Math.max(0, Math.min(100 - start, (s.w / skala) * 100)) : 0; + let laenge = 0; + if (s) { + const vorher = ringAnteil(summe, skala) * 100; + summe += Math.max(0, s.w); + laenge = Math.max(0, Math.min(100 - start, ringAnteil(summe, skala) * 100 - vorher)); + } if (laenge < 0.4) laenge = 0; const luecke = laenge > 0 && start > 0 ? 0.6 : 0; const a = (laenge - luecke).toFixed(2), off = (-(start + luecke)).toFixed(2); @@ -561,7 +584,10 @@ flussSetzen(f, w) { const a = Math.abs(w); const still = a < 15; - const breite = still ? 0 : 3.5 + 6.5 * (1 - Math.exp(-a / 3000)); + // Die Punktgroesse soll die Leistung erzaehlen: von 2,4 (ein paar + // hundert Watt) bis 13 (Volllast). Vorher lag alles ab 3 kW dicht + // beieinander. + const breite = still ? 0 : 2.4 + 11 * (1 - Math.exp(-a / 5000)); // Schneller bei mehr Leistung: 2,6 s je Abschnitt bei wenig, 0,7 s bei viel. // Gesetzt wird nicht die Dauer der CSS-Animation - eine neue Dauer // rechnet die Position neu, und die Punkte springen -, sondern ihre diff --git a/js/solar/energieflussKatalog.js b/js/solar/energieflussKatalog.js index aed464e..2b74630 100644 --- a/js/solar/energieflussKatalog.js +++ b/js/solar/energieflussKatalog.js @@ -24,7 +24,9 @@ x, y Mitte in der Queransicht (Zeichenfläche etwa 1400 x 850) hochX, hochY Mitte in der Hochkant-Ansicht, falls das blosse Tauschen von x und y den Kreis dort ungünstig stellt (optional) - skala Leistung in W, bei der der Ring voll ist + skala Leistung in W, bei der der Ring voll ist. Dazwischen ist die + Skala gestaucht (ringAnteil() in energiefluss.js): kleine + Leistungen bekommen mehr Ring als ihr Anteil klick {ansicht: "anlage"} oder {modal: "heater"} - Ziel beim Antippen optionen Vorgabe für die Optionen, die in den Einstellungen änderbar sind zonen nur Bewässerung: die Anzeigen, die solarMQTT.js beschreibt;