Hi!
Ich habe über ftui-meter nur in den Beispielen gefunden und noch nichts im Forum, deswegen hier meine Frage:
Gibt es eine Möglichkeit den "Pegel" von der Mitte heraus anzuzeigen anstatt immer vom linken Rand aus?
Anwendung: Einspeisung-Bezug am Netzanschluss, Laden-Entladen des Stromspeichers. Ich würde 0W in der Mitte Platzieren und hätte gerne, dass der Pegel nach links rot ausschlägt und nach rechts grün. Ist sowas möglich?
Gruß,
Burkhard
Bin mir nicht sicher, ob das mit <ftui-meter> geht, vielleicht kommst Du mit <ftui-slider> eher zum Ziel.
Hallo Burkhard,
es geht mit <ftui-meter>, du kannst durch symmetrisches Setzen von min und max die "0" in die Mitte setzen.
Die Farbe könntest du mit | step realisieren.
z.B.
<ftui-meter [value]="d_test01" min="-50" max="50" has-scale [color]="d_test01 | step('-50:success, 1:danger')" > </ftui-meter>
Gruß,
Matthias
P.S.: es wäre schön, wenn du uns zeigst, wie es aussieht:
https://forum.fhem.de/index.php?topic=136972.0 (https://forum.fhem.de/index.php?topic=136972.0)
Hi!
Vielen Dank für Eure Antworten.
ftui-meter ist ja eine Ableitung von slider, slider wäre für mich auch ok, aber ich habe bei beiden das gleiche Problem:
der Farbbalken beginnt immer links am Rand. Ich hätte aber gerne, dass er in der Mitte beginnt und dann nach links oder rechts ausschlägt,
vergleichbar mit dem Balance Regler an einem Audioverstärker.
Man müsste vermutlich den Wert des Ausgangspunktes angeben können wie z.B. center=0.
Gruß,
Burkhard
Ja, da hat JimKnopf recht, das ist mir bei meinen Versuchen gestern, auch aufgefallen, daß das immer nur von links nach rechts geht.
Ich hab' da im Moment auch keine Idee.
das hier kommt dem Gesuchten wohl nahe:
https://stackoverflow.com/questions/73705773/html-slider-input-of-type-range-centered-on-0 (https://stackoverflow.com/questions/73705773/html-slider-input-of-type-range-centered-on-0)
Evtl. kan uns ein Könner das ja einbauen ;) Odslh.png
Hi!
Ja, genau so in die Richtung hätte ich das gerne.
Leider bin ich in Perl nicht fit, sonst würde ich mich selbst dran vergreifen.
Gruß,
Burkhard
hallo.genau das such ich auch, aber für FTUI.
es würde schon genügen, wenn man die grafik tauschen könnte, wie bei RSS. also bei minuswerte rot, bei pluswerte grün.
quasi Code abhängig von vorzeichen der zahl
Das müsste mit etwas svg-code, FTUI3 binding und einem userreading gehen. Als Denkanstoß:
SVG code für die FTUI3 Seite:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect id="basis" x="0" width="400" height="40" rx="4" style="stroke: var(--border-color, blue); fill: var(--medium-color, grey);" />
<path id="middle" d="M199,0 V40" style="stroke: var(--dark, black); stroke-width: 2;"></path>
<polygon ftui-binding id="current" [points]="DEVICE:urPolyPoints" [style]="DEVICE:READING | step('-10000:`--red, red`, 1:`--success, green`') | prepend('fill: var(') | append(');')" />
</svg>(kleines Gimmick: der balken wechselt auf rot bei negativen und grün bei positiven Werten)
Für die Polygon-Werte benötigt man ein userreading in dem FHEM Device aus dem die Einspeise/Bezug Werte kommen, in etwa so:
urPolyPoints:READING.* {
my $maxValAbs = 1000; #maximum value of READING 100%
my $maxy = 400;
my $currenty = sprintf("%d", (($maxy/2) + (($maxy/2) * (ReadingsNum($name,"READING",0)/$maxValAbs))));
return ($maxy/2).",2 ".$currenty.",2 ".$currenty.",38 ".($maxy/2).",38 ".($maxy/2).",2";
}
Natürlich müssen DEVICE und READING entsprechend ersetzt und die Grenzwerte wie $maxValAbs angepasst werden.
Schöner machen kann man mit CSS3 entsprechend.
Zitat von: JimKnopf am 21 Februar 2024, 07:39:29Hi!
Ich habe über ftui-meter nur in den Beispielen gefunden und noch nichts im Forum, deswegen hier meine Frage:
Gibt es eine Möglichkeit den "Pegel" von der Mitte heraus anzuzeigen anstatt immer vom linken Rand aus?
Anwendung: Einspeisung-Bezug am Netzanschluss, Laden-Entladen des Stromspeichers. Ich würde 0W in der Mitte Platzieren und hätte gerne, dass der Pegel nach links rot ausschlägt und nach rechts grün. Ist sowas möglich?
Gruß,
Burkhard
hallo.
Habe es mit Zeiger geschafft
ftui-knob has-value-text has-scale has-needle
[(value)]="PylonTech_A:state" min="-90" max="90" readonly
[color]="PylonTech_A:state | step('-90: danger, 0: warning, 30: success')">
</ftui-knob>
Hallo zusammen,
ich habe auch mal ne Frage zum 'ftui-meter'.
In im alten FTUI habe ich das folgendermaßen gemacht:
<li data-row="4" data-col="8" data-sizex="1" data-sizey="2">
<header><div data-type="label" class="blue">Strom</div></header>
<div class="top-space">
<div data-type="range"
data-device="myShellyPro3"
data-high="Active_Power_S"
data-max="15000"
data-min="0"
data-limit-low="1500"
data-limit-high="5000"
data-width="20"
data-height="170"
data-color-low="#04B404"
data-color="#AEB404"
data-color-high="#FF0000"
class="inline">
</div>
</div>
<div class="cell">
<div data-type="label"
data-device="myShellyPro3"
data-get="Active_Power_S"
data-fix="0"
data-limits='[0,1500,9000]'
data-colors='["#04B404","#AEB404","#FF0000"]'
data-unit=" W" class="big inline">
</div>
</div>
</li>
Das sah dann so aus:
FTUI2_Strom.png
In FTUI3 habe ich es so gemacht:
<header><ftui-label color="primary">Strom</ftui-label></header>
<ftui-column>
<ftui-meter is-vertical has-scale
[value]="myShellyPro3:n_Active_Power_S" min="0" max="15000" height="15em"
color="ok-warning-alert">
</ftui-meter>
<ftui-label
[text]="myShellyPro3:Active_Power_S">
</ftui-label>
</ftui-column>
Das sieht dann so aus:
FTUI3_Strom.png
Kann man bei FTUI3 auch bestimmen ab welchem Wert die Farbe sich ändert?
Vermutlich sehe ich wieder den Wald vor lauter Bäumen wieder nicht.
Oder muss ich das anders machen?
Gruß
Andreas
... habe gefunden -->
[color]="DEVICE:READING | step('0:success, 1500:warning, 5000:alert')"
Mit dem Wald habe ich gar nicht so falsch gelegen 8)