FTUI version 3

[pula]

Jetzt hab ich doch noch einen...
Ich hatte in ftui2 so eine lässige Anzeige für Temperaturen inkl. Trend, das sah so aus:

Code Auswählen Erweitern

<div data-type="klimatrend"
                    data-device="par01"
                    data-get="par04"
                    data-refperiod="1"
                    class="bigger"
                    style="display:inline"
                    data-refperiod="1"
                    data-stagnating-color="rgb(80,80,80)"
                    data-icon="fa-angle"
                    data-rising-color="rgb(180,80,80)"
                    data-falling-color="rgb(80,80,180)"
                    data-highmark="1"
                    data-highmark-icon="fa-angle-double"
                    data-highmark-rising-color="rgb(255,80,80)"
                    data-highmark-falling-color="rgb(80,80,255)">
                </div>

Könnte mir bitte jemand netterweise einen Denkanstoss geben, wie man so was mit ftui3 realisieren könnte?

[mr_petz]

Ok pula,
das geht alles mit FTUI3 Boardmitteln. Hier ein kleiner Denkanstoss...:

Code Auswählen Erweitern


<ftui-cell>
<ftui-row>
  <ftui-label text="22.5" class="size-5 thin" color="yellow"><span class="size-1" slot="unit">°C</span></ftui-label>
  <ftui-icon name="angle-double-down" size="-2" color="primary"></ftui-icon>
  <ftui-icon name="angle-double-up" size="-2" color="danger"></ftui-icon>
</ftui-row>
</ftui-cell>


Sieht dann aus wie im Anhang...
Liste aller Icons sind hier zu finden:
https://knowthelist.github.io/ftui/www/ftui/icons/demo.html
LG mr_petz

[pula]

Hallo mr_petz,

vielen Dank! Genau das hab ich gesucht
Jetzt muß ich nur noch rausfinden, wie ich die bedingte Formatierung mit ftui3 genau hinbekomme, das klimatrend-widget von ftui2 war hier genial...
cheers,
Pula

[pula]

Ich hab jetzt versucht, diesen Mega-Thread nach den Informationen zu durchforsten, die ich brauche.
Fred-Suche gibts ja leider keine, oder bin ich zu blöd?
Jedenfalls hab ich folgendes Problem:
Ich würde gerne die oben beschriebenen auf/ab-Symbole wie bei klimatrend in ftui2 abbilden.
Eigentlich sollte das ja mit pipe und map möglich sein, aber ich bin ein wenig ratlos.
Es gibt ja vom statistics-Modul die Werte, die man für diverse Readings in fhem erstellen lassen kann und die dann zb so aussehen:
statTemperatureTendency 1h: +0.4 2h: +0.0 3h: -0.2 6h: -0.5

Beispiele für diese Starts des jeweiligen Readings hab ich bei mir rausgesucht, die sehen zb so aus:
1h: +0
1h: +2.2
1h: -0.4
Ich würde jetzt gerne alles zwischen dem "1h:" und "2h:" auswerten und das Icon entsprechend setzen.
< 0 --> Pfeil nach unten in blau, =0 --> ein =-Icon, >0 --> Pfeil nach oben in rot.

Habe jetzt in diesem Mega-Thread ein Beispiel zur Verwendung eines Regex gefunden:

Code Auswählen Erweitern

<ftui-icon [name]="wz.heizkoerper:batteryLevel | map('`3 | 2.[89]`:battery, `2.[67]`:battery-3, `2.[345]`:battery-2, `2.[012]`:battery-1, `2`:battery-0')"
                           [color]="wz.heizkoerper:batteryLevel | map('3:green, 2.[6789]:secondary, 2.[345]:success, 2.[012]:warning, 2:danger')">
</ftui-icon>

Das wirft für mich als ftui3-Neuling ein paar Fragen auf:
Gibts hier auch die Möglichkeit, nur Teilstrings zu vergleichen (irgendwas war da doch mit split?).
Kann man das dann mittels pipe per regexp auswerten?
Wie wäre hier die Syntax?
Ein regexp, um hier nur den Teil zwischen 1h: und 2: rauszuholen wäre
(?<=1h:\s+).*?(?=\s+2h:)
aber wie kann dieser Inhalt dann ausgewertet und als Bedingung verwendet werden?

[OdfFhem]

@pula

Wenn Du in diesem Thread stehst und im Suchbegriff-Feld "replace" eingibst, dann erhälst Du quasi sofort eine Reihe brauchbarer Beispiele. Stehst Du irgendwo anders, sieht das Ergebnis relativ allgemein aus und nicht unbedingt zielführend.


Eine komplexere Lösung besteht in FTUI3 meist aus der Verkettung von Pipe-Funktionen. Z.B. zunächst replace, dann step ...

[pula]

@OdfFhem: danke. jetzt bin ich seit 6 jahren oder so fhem-Nutzer, aber das war mir noch neu
Da sind einige Beispiele, aus denen ich aber nicht ganz schlau werde (is schon spät).
Wie würde so eine Verkettung in meinem Fall aussehen? Also regexp und dann vergleich?

[OdfFhem]

@pula

Eine ungefähre, aber völlig ungetestete Idee:

Code Auswählen Erweitern


<ftui-label [text]="DEVICE:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:/,'$1') | round(0) | step('-50:angle-double-down, 0:ICON_NAME_FUER_=, 1:angle-double-up')"></ftui-label>


Die "Lösung" besteht aus 4 Komponenten:
- DEVICE:READING
- replace-Funktion zum Ausschneiden des relevanten Teile
- round, falls Nachkommastellen vorhanden wären
- step, um ab -50, ab 0 bzw. ab 1 ein Icon festzulegen

[pula]

@odfFhem:
erstmal danke für deine ausführliche Antwort. es ist also hier tatsächlich möglich, analog zur shell commands zu pipen. lässig!
gibts dazu irgendwo eine genauere doku, was alles möglich ist?
aktuell hänge ich allerdings grade. ich hab dein snippet mal so übernommen und damit herumgespielt.
zum debuggen habe ich jetzt mal nur folgendes gemacht:

Code Auswählen Erweitern

<ftui-label [text]="{{device}}:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:/, '$1')"></ftui-label>

Das reading sieht aktuell so aus:

Code Auswählen Erweitern

1h: -0.1 2h: +0.1 3h: +0.1 6h: +0.2
und das Ergebnis im html sieht so aus:

Code Auswählen Erweitern

-0.1 +0.1 3h: +0.1 6h: +0.2
Es sieht also so aus, als ob das replace die beiden Strings "1h:" und "2h:" herausschneiden würde, anstatt den String dazwischen zurückzugeben.
Verstehen tu ich das momentan nicht, diverse regexp-Tester (zb regex101.com) zeigen korrekt die Group1 als -0.1 an, die dann ja eigentlich von replace in $1 geliefert werden müsste?!

[OdfFhem]

@pula

Im regulären Ausdruck fehlt hinter "2h:" noch ein ".*"; damit sollte dann auch alles dahinter weggeschnitten werden ...

[pula]

@OdfFhem:
vielen DANK, das wars!
eine derartige Fehldiagnose durch mich ist ja peinlich...
Cheers,
Pula

[pula]

Guten Morgen!

Diesmal hätte ich eine Frage aus der Kategorie html für Anfänger (naja, zu meiner Zeit habe ich noch tables als ulitmative Waffe bei der Positionierung benutzt )
Ich arbeite noch immer an diesem content zur Anzeige von Temperaturen und Luftfeuchtigkeit.
Der Code sieht momentan so aus:

Code Auswählen Erweitern

<ftui-label size="3">{{name}}</ftui-label>
<ftui-label size="2" padding="0" margin="0"
        [text]="{{device}}:temperature">
        <span class="size-0" slot="unit">°C</span>
</ftui-label>
<ftui-icon margin="0" padding="0"
        [name]="{{device}}:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-50:angle-double-down, 0:equal, 1:angle-double-up')"
        [color]="{{device}}:statTemperatureTendency | replace(/1h:\s+(.*?)\s+2h:.*/, '$1') | step('-50:primary, 0:secondary, 1:red')">
</ftui-icon>

Die Anzeige wie in dem angehängten Bild. Könnte mir bitte jemand auf die Sprünge helfen, wie ich es schaffe, das Tendenz-Icon nicht unter sondern neben der Temperatur anzuzeigen?

[mr_petz]

@pula

Hatte ich dir schon gezeigt:
https://forum.fhem.de/index.php/topic,115259.msg1231347.html#msg1231347

[pula]

@pula

Hatte ich dir schon gezeigt:
https://forum.fhem.de/index.php/topic,115259.msg1231347.html#msg1231347

@mr_petz sorry, daran hatte ich nicht gedacht (wald, bäume und so)
verstehen würde ich das aber auch gern. ist das nur das ftui-row, das das bewirkt?

[meier81]

Hallo pula,

du hast ftui-row für die Zeilen und ftui-column für die Spalten, hier mal ein Beispiel von mir:

Code Auswählen Erweitern


<ftui-row>
  <ftui-column>
    <ftui-label>Agip</ftui-label>
  </ftui-column>

  <ftui-column>
    <ftui-label>HEM</ftui-label>
  </ftui-column>

  <ftui-column>
    <ftui-label>JET</ftui-label>
  </ftui-column>

  <ftui-column>
    <ftui-label>bft</ftui-label>
  </ftui-column>
</ftui-row>

<ftui-row>
  <ftui-column>
    <ftui-label [text]="NN_xx_SW_Agip:SuperE10"><span class="size-0" slot="unit"> €</span></ftui-label>
  </ftui-column>

  <ftui-column>
    <ftui-label [text]="NN_xx_SW_HEM:SuperE10"><span class="size-0" slot="unit"> €</span></ftui-label>
  </ftui-column>

  <ftui-column>
    <ftui-label [text]="NN_xx_SW_JET:SuperE10"><span class="size-0" slot="unit"> €</span></ftui-label>
  </ftui-column>

  <ftui-column>
    <ftui-label [text]="NN_xx_SW_bft:SuperE10"><span class="size-0" slot="unit"> €</span></ftui-label>
  </ftui-column>
</ftui-row>

<ftui-row>
  <ftui-column>
    <ftui-button (value)="set NN_xx_SW_Agip reread; set NN_xx_SW_HEM reread; set NN_xx_SW_JET reread; set NN_xx_SW_bft reread">aktualisieren</ftui-button>
  </ftui-column>
</ftui-row>


LG Markus

[pula]

@meier: danke sehr!