FTUI version 3

mr_petz · 26 September 2023, 21:05:19

Entweder mit class Bsp.:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/icon.html#L105

oder mit size Bsp.:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/icon.html#L162

Schau dir am besten immer die examples an, da sieht man schon viel...

LG

Andre09 · 27 September 2023, 19:10:03

Zitat von: mr_petz am 26 September 2023, 21:05:19Entweder mit class Bsp.:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/icon.html#L105

oder mit size Bsp.:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/icon.html#L162

Schau dir am besten immer die examples an, da sieht man schon viel...

LG

Danke dir. Klappt soweit.

Wo ich aber überhaupt nicht weiterkomme.... Vorher konnte ich Readings abfragen mit "!Test" also bei "alles außer Test mache das". Wie krieg ich das in der Map Funktion hin. Da klappt das !Test nicht. Ich möchte also z.B. Icon 1 wenn Wert X = "test" und Icon 2 wenn Wert X nicht-"Test". Wie kann ich das nicht umsetzen?

2. Frage: Wenn ich ein Label abfrage, konnte ich vorher autohide setzen. Also wenn ein bestimmter WErt da steht wird er nicht angezeigt.

Hintergrund ist, das ich Abfrage wann der Regen beginnt. Ist kein regen gemeldet soll ein anderes Icon kommen als beim regen. Und ist da Regen, soll auch die Beginnzeit da stehen. Aber nicht "unknown" wenn kein regen ist

So war das vorher mal...

Code Auswählen

 
    <div data-type="symbol"
           data-device="BR"
           data-get="rainBegin"
           data-get-on="unknown"
           data-get-off="!on"
           data-icon="wi wi-rain"
           data-on-color="black"
           data-off-color="white"
         class="big top-narrow "> 
    </div> 	
         </div> 
             <div class="col-1-2">
      <div data-type="label"
           data-device="BR"
           data-get="rainBegin"
           data-hide-on="unknown"
           data-color="white"
           class="autohide big thin">
    </div>
         <div data-type="label"
           data-device="BR"
           data-get="rainEnd"
           data-hide-on="unknown"
           data-color="white"
           class="autohide big thin">

also zusammengefasst fehlt mir die Umsetzung von "autohide" und von der Abfrage mit "!"

juemuc · 27 September 2023, 20:16:47

Hallo Andreas,

ich mache das z.B. so:

Code Auswählen

| map('2|3|4|5:false, .*:true')"
Mit "hidden" könnte es so aussehen:

Code Auswählen

    <ftui-content [hidden]="Unwetterzentrale:WarnCount | map('1:false, .*:true')" 
            id="Warn_1" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_1">
    </ftui-content>
    <ftui-label color="green" size="4" [hidden]="Unwetterzentrale:WarnCount | map('0:false, .*:true')"
          text="Aktuell keine Warnmeldungen">
    </ftui-label>

Viele Grüße
Jürgen

mr_petz · 27 September 2023, 20:39:15

Ich antworte auch und gebe meinen Senf dazu

zu 1. Bsp.:

Code Auswählen

<ftui-icon [name]="Reading | map('Test:icon1,.*:icon2')"></ftui-icon>

zu 2. Bsp.:

Code Auswählen

<ftui-label [text]="Reading" [hidden]="Reading | isNot('regen')"></ftui-label>

hier wird aber immer die Zeilenhöhe verändert.

Um Abhilfe zu schaffen, eine feste Höhe angeben in einer row.
Bsp:

Code Auswählen

<ftui-row height="20px">
<ftui-label [text]="Reading" [hidden]="Reading | isNot('regen')"></ftui-label>
</ftui-row>

LG

Andre09 · 29 September 2023, 09:32:57

Vielen dank euch für die prompten Antworten. Das hat wunderbar geklappt

Leider sind solche "Kleinigkeiten" in diesem riesen Thread oder den Examples nicht oder schwer zu finden, so dass man als FTUI3-noob da erstmal sich durchfragen muss.
Daher lass ich nochmal eine Frage liegen:

mein altens FTUI hat mir aus Proplanta das Datum aus fc0-date umgerechnet in den Wochentag "Donnerstag". Hab gerade kein Zugriff auf den alten Code aber das ging irgendwie mit "data-substitution to = eeee" .. so grob aus Erinnerung. Wenn dazu auch jemand ein Tip hat gerne

Grund: Will bei der Wettervorhersage nicht "heute" "morgen" "übermorgen" im Header haben sondern die Tage.

Thanks a lot, und cool wie schnell und gut aussehend FTUI3 ist. Bin bisher echt begeistert auch wenn im Gegegensantz zum Vorgänger das "Naschlagen" echt schwieriger ist

yersinia · 29 September 2023, 10:28:06

Zitat von: Andre09 am 29 September 2023, 09:32:57mein altens FTUI hat mir aus Proplanta das Datum aus fc0-date umgerechnet in den Wochentag "Donnerstag". Hab gerade kein Zugriff auf den alten Code aber das ging irgendwie mit "data-substitution to = eeee" .. so grob aus Erinnerung. Wenn dazu auch jemand ein Tip hat gerne

Code Auswählen

<ftui-label [text]="deinproplantadevice:fc0_date | toDate() | format('eeee')"></ftui-label>=> Freitag

Code Auswählen

<ftui-label [text]="deinproplantadevice:fc0_date | toDate() | format('eeee, D MMMM')"></ftui-label>=> Freitag, 30. September

Andre09 · 29 September 2023, 16:29:21

Zitat von: yersinia am 29 September 2023, 10:28:06
Zitat von: Andre09 am 29 September 2023, 09:32:57mein altens FTUI hat mir aus Proplanta das Datum aus fc0-date umgerechnet in den Wochentag "Donnerstag". Hab gerade kein Zugriff auf den alten Code aber das ging irgendwie mit "data-substitution to = eeee" .. so grob aus Erinnerung. Wenn dazu auch jemand ein Tip hat gerne
Code Auswählen Erweitern
<ftui-label [text]="deinproplantadevice:fc0_date | toDate() | format('eeee')"></ftui-label>=> Freitag

Code Auswählen Erweitern
<ftui-label [text]="deinproplantadevice:fc0_date | toDate() | format('eeee, D MMMM')"></ftui-label>=> Freitag, 30. September

Mega danke. Ihr seit echt die besten. Man selber dockert rum wie bescheuert und Zack eine Lösung

mal gucken wann das nächste Problem kommt

chrisse111179 · 09 Oktober 2023, 20:42:27

Hallo,
ich habe mich jetzt auch mal an FTUI3 gewagt und, dank der Beispiele und dieser Diskussion hier, recht schnell recht viel umgestetzt bekommen. Also vielen Dank erstmal für die ganze Arbeit die da drin steckt!
Ich scheitere allerdings an einem simplen Untermenü.
Also:

Tab1->Tab1.1->Inhalt
Tab2->Tab2.1->Inhalt
Tab3->Tab3.1->Inhalt

Wie habt ihr das umgesetzt?

Viele Grüße,
Christian

mr_petz · 09 Oktober 2023, 22:13:26

Hi Christian,
hier 2 Bsp.:
https://forum.fhem.de/index.php?topic=115259.msg1240981#msg1240981
oder
https://forum.fhem.de/index.php?topic=115259.msg1241007#msg1241007

LG

chrisse111179 · 09 Oktober 2023, 22:24:18

Zitat von: mr_petz am 09 Oktober 2023, 22:13:26Hi Christian,
hier 2 Bsp.:
https://forum.fhem.de/index.php?topic=115259.msg1240981#msg1240981
oder
https://forum.fhem.de/index.php?topic=115259.msg1241007#msg1241007

LG

Hi mr_petz,
danke für den Schubs in die richtige Richtung...ich habe mich dusselig gesucht!

Ich habe das jetzt einfach mal kopiert und eingefügt und das scheint ziemlich genau das zu sein was ich gesucht habe. Ich schaue es mir morgen an um dahinter zu steigen.

Danke nochmal und einen schönen Abend!
Christian

castor.srs · 09 Oktober 2023, 22:42:30

Moin,

lieben Dank an die Entwickler und Eure viele Zeit, die Ihr in Ftui und dieses Forum gesteckt habt.

Ist es möglich, mit Ftui-Bordmitteln ein Binding mit zwei verschiedenen Readings oder Devices zu speisen (z. B. zwei Flügel eines Doppelfenster oder Zustand und Erreichbarkeit), ohne dafür ein FHEM ein Dummy anlegen zu müssen? Falls es noch nicht geht, wäre es super, wenn das über die Pipes gehen würde, also wenn z. B. add () der Wert eines weiteren Readings übergeben würde.

Beste Grüße

mr_petz · 10 Oktober 2023, 10:43:58

@castor.srs

2 Devices oder Readings geht unter Umständen so, dass du ein ; dazwischen schreibst.
Macht nur sinn bei map oder step.
Müsstest deinen Anwendungsfall konkreter beschreiben.

LG

castor.srs · 11 Oktober 2023, 18:34:48

Zitat von: mr_petz am 10 Oktober 2023, 10:43:58@castor.srs

2 Devices oder Readings geht unter Umständen so, dass du ein ; dazwischen schreibst.
Macht nur sinn bei map oder step.
Müsstest deinen Anwendungsfall konkreter beschreiben.

LG

Moin Mr. Petz,

ich habe verschiedene Möglichkeiten ausprobiert, mehrere Readings mit ; zu kombinieren. Er verwendet jedoch nur das erste Reading.

Anwendungsfälle sind z. B.
- bei einem Icon für den Öffnungszustand eines Fensters die Farben light und primary für device.status open/closed, die Farbe red für device.alive=dead und gelb für device.battery=low zu setzen,
- bei einem Doppelfenster, das für jeden Flügel einen eigenen Sensor hat, das Icon-Bild aus fa_openautomation für die jeweilige Kombination des Öffnungszustands beider Fensterflügel auszuwählen (links offen -> 1, rechts offen -> 2, Ergebnis zur Auswahl des konkreten Bildes über map(0, 1, 2, 3).

Beste Grüße

mr_petz · 12 Oktober 2023, 11:09:17

Dann schau mal hier:
https://forum.fhem.de/index.php?topic=115259.msg1254997#msg1254997

So in der Richtung sollte es gehen.
Bin gerade unterwegs und kann nichts testen.

LG

castor.srs · 12 Oktober 2023, 22:36:02

Zitat von: mr_petz am 12 Oktober 2023, 11:09:17Dann schau mal hier:
https://forum.fhem.de/index.php?topic=115259.msg1254997#msg1254997

So in der Richtung sollte es gehen.
Bin gerade unterwegs und kann nichts testen.

LG

Ha, vielen lieben Dank. Diese Technik habe ich gesucht. Und über den Post https://forum.fhem.de/index.php/topic,115259.msg1243306.html#msg1243306 dann verstanden. Jetzt funktioniert es:

Ist der Fensterzustand offen oder geschlossen, erhält das Icon die Farbe primary bzw. light. Ist der Batteriezustand des Geräts "low", wird das Icon ungeachtet des Öffnungszustands gelb (warning). Ist es nicht erreichbar (:activity==dead), wird die Farbe ungeachtet aller anderen Readings rot.

Code Auswählen

[color]="
   d_Feko_Bad | c1=>{this.reading1=c1, this.c1=(
      this.reading3=='dead'?'red':
      this.reading2=='low'?'warning':
      this.reading1=='offen'?'primary':
      this.reading1=='geschlossen'?'light':'black'
   )}| ()=>this.color=this.c1; 
   d_Feko_Bad:battery | c2=>{this.reading2=c2, this.c2=(
      this.reading3=='dead'?'red':
      this.reading2=='low'?'warning':
      this.reading1=='offen'?'primary':
      this.reading1=='geschlossen'?'light':'black'
   )} | ()=>this.color=this.c2 ;
   d_Feko_Bad:activity | c3=>{this.reading3=c3, this.c3=(
      this.reading3=='dead'?'red':
      this.reading2=='low'?'warning':
      this.reading1=='offen'?'primary':
      this.reading1=='geschlossen'?'light':'black'
   )} | ()=>this.color=this.c3
"

Zu jedem Reading wird der Wert des Readings über die Variablen c1 bis c3 an die jeweilige Funktion dahinter übergeben. Im ersten Teil der Funktion wird dieser Wert der Objektvariablen (this.reading1 etc) zugewiesen, damit er von den Funktionen der anderen Readings verwendet werden kann. Im zweiten Teil der Funktion wird der weiteren neuen Objektvariable this.c1 etc. über die if-else-Abfragen der Wert zugewiesen, den das Attribut im Ergebnis erhalten soll. Dieses wird dem Attribut dann im letzten Teil der jeweiligen Pipeline zugewiesen.

Nochmals danke für den Anstoß und weiter so!

Edit 17.10.2023:
Code und Beschreibung überarbeitet. In der früheren Fassung funktionierte der Code nur bei Erstaufruf der FTUI-Seite. Bei Aktualisierung eines Readings wird jedoch nur der Code nach dem jeweiligen Reading ausgeführt. Um bei jeder Aktualisierung die gesamte Bedingungskette zu berücksichtigen, muss bei jedem Reading die vollständige Bedingung abgefragt werden.