[FTUI3] ftui-meter

[JimKnopf]

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

[grossmaggul]

Bin mir nicht sicher, ob das mit <ftui-meter> geht, vielleicht kommst Du mit <ftui-slider> eher zum Ziel.

[MDietrich]

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.

Code Auswählen Erweitern

<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

[JimKnopf]

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

[grossmaggul]

Ja, da hat JimKnopf recht, das ist mir bei meinen Versuchen gestern, auch aufgefallen, daß das immer nur von links nach rechts geht.

[MDietrich]

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

Evtl. kan uns ein Könner das ja einbauen  Du darfst diesen Dateianhang nicht ansehen.

[JimKnopf]

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

[satprofi]

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

[yersinia]

Das müsste mit etwas svg-code, FTUI3 binding und einem userreading gehen. Als Denkanstoß:
SVG code für die FTUI3 Seite:

Code Auswählen Erweitern

  <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:

Code Auswählen Erweitern

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.

[satprofi]

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

hallo.
Habe es mit Zeiger geschafft

Code Auswählen Erweitern

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>