Hauptmenü

[FTUI3] ftui-meter

Begonnen von JimKnopf, 21 Februar 2024, 07:39:29

Vorheriges Thema - Nächstes Thema

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
FHEM,LaCrosse,PCA301,Revolt,MAX!,HM,FS20, MQTT2, ebusd 3.4.v3.4-96-g96d5623, ebus Adapter 3.0 mit 20201219-offset , Wolf  CGB (-K)-20, Wolf ISM7, Wolf Solar SM, Speicher/WR E3DC S10, eGolf, Keba P30, Phoenix Contact EV, OpenWB

grossmaggul

Bin mir nicht sicher, ob das mit <ftui-meter> geht, vielleicht kommst Du mit <ftui-slider> eher zum Ziel.
FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

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.

<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
FB 6591 Cable / Raspberry 3b+ (Bookworm) / 4xECHO DOT 4/ Homematic Thermostate, Fenster- und Fenster-Sensoren / Philips HUE / CUL-HM /  Zigbee Schalter und Lampen / Shelly 1

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
FHEM,LaCrosse,PCA301,Revolt,MAX!,HM,FS20, MQTT2, ebusd 3.4.v3.4-96-g96d5623, ebus Adapter 3.0 mit 20201219-offset , Wolf  CGB (-K)-20, Wolf ISM7, Wolf Solar SM, Speicher/WR E3DC S10, eGolf, Keba P30, Phoenix Contact EV, OpenWB

grossmaggul

Ja, da hat JimKnopf recht, das ist mir bei meinen Versuchen gestern, auch aufgefallen, daß das immer nur von links nach rechts geht.
FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

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.
FB 6591 Cable / Raspberry 3b+ (Bookworm) / 4xECHO DOT 4/ Homematic Thermostate, Fenster- und Fenster-Sensoren / Philips HUE / CUL-HM /  Zigbee Schalter und Lampen / Shelly 1

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
FHEM,LaCrosse,PCA301,Revolt,MAX!,HM,FS20, MQTT2, ebusd 3.4.v3.4-96-g96d5623, ebus Adapter 3.0 mit 20201219-offset , Wolf  CGB (-K)-20, Wolf ISM7, Wolf Solar SM, Speicher/WR E3DC S10, eGolf, Keba P30, Phoenix Contact EV, OpenWB

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
gruss
-----------------------------------------------------------------------
beelink miniPC - Fhem 6.x CUL 868, FS20, NetIO230 CUL 433
HMLAN, HM-CC-RT-DN,Homematic Actoren,LD382A,Telegram

yersinia

#8
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.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

satprofi

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>


gruss
-----------------------------------------------------------------------
beelink miniPC - Fhem 6.x CUL 868, FS20, NetIO230 CUL 433
HMLAN, HM-CC-RT-DN,Homematic Actoren,LD382A,Telegram

Loetkolben

#10
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:
Du darfst diesen Dateianhang nicht ansehen.

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:
Du darfst diesen Dateianhang nicht ansehen.

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
1x Pi3, 1x Pi4, CUL V3, miniCUL433+868, IKEA-Steckdosen, sonoff, shelly1, Conbee II, div. Zigbee-Leuchten, Alexa, Homematic, Tablet UI

Loetkolben

... habe gefunden -->
[color]="DEVICE:READING | step('0:success, 1500:warning, 5000:alert')"
Mit dem Wald habe ich gar nicht so falsch gelegen 8)
1x Pi3, 1x Pi4, CUL V3, miniCUL433+868, IKEA-Steckdosen, sonoff, shelly1, Conbee II, div. Zigbee-Leuchten, Alexa, Homematic, Tablet UI