FTUI version 3

[Stonemuc]

Code Auswählen Erweitern

<ftui-column>
<ftui-button
                          shape="circle"
                          [(value)]="Licht_Flur_OG" states="An,Aus"
                          [fill]="Licht_Flur_OG | map('Aus:outline, An:solid')">
              <ftui-icon name="lightbulb"></ftui-icon>
            </ftui-button>
<ftui-label text="Flur OG"></ftui-label>
</ftui-column>
und

Code Auswählen Erweitern

<ftui-column>
<ftui-button
                          shape="circle"
                          (value)="Licht_Naehzimmer" [value]"Licht_Naehzimmer:state"
                          [fill]="Licht_Naehzimmer | map('off:outline, on:solid')">
              <ftui-icon name="lightbulb"></ftui-icon>
            </ftui-button>
<ftui-label align-items="top" margin="1" text="Gästezimmer"></ftui-label>
</ftui-column>

funktionieren....wobei die erste Variante schneller im FTUI den neuen Status zeigt. Also nehm ich die...danke für die Hilfe.

Hier hast du ja data-get="state" angegeben!

Dann gib entweder den state im map on/off mit an.
oder ohne state mit states="An,Aus" und im map auch mit An/Aus ohne state.
Eines der beiden szenarien muss dann gehen.

A

Code Auswählen Erweitern


<ftui-button
                shape="circle"
               (value)="Licht_Flur_EG" [value]="Licht_Flur_EG:state">
                         <ftui-icon name="lightbulb" [color]="Licht_Flur_EG:state | map('on:primary, off:dark')"></ftui-icon>
            </ftui-button>
<ftui-label text="Flur EG"></ftui-label>

B

Code Auswählen Erweitern


<ftui-button
                shape="circle"
               [(value)]="Licht_Flur_EG" states="An,Aus">
                         <ftui-icon name="lightbulb" [color]="Licht_Flur_EG | map('An:primary, Aus:dark')"></ftui-icon>
            </ftui-button>
<ftui-label text="Flur EG"></ftui-label>


Edit oder noch
C

Code Auswählen Erweitern


<ftui-button
                shape="circle"
               [(value)]="Licht_Flur_EG:state">
                         <ftui-icon name="lightbulb" [color]="Licht_Flur_EG:state | map('on:primary, off:dark')"></ftui-icon>
            </ftui-button>
<ftui-label text="Flur EG"></ftui-label>


Habe gerade nochmal in der ftui.binding.js nachgeschaut.
inputBinding=STATE ->https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L276
outputBinding=STATE ->https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L288

[mr_petz]

Ok super und danke für die Rückmeldung.
So können andere User die auch mit eventMap arbeiten das Szenario anwenden.
LG

[mr_petz]

Leider ist es so, das reguläre Ausdrücke mich beherrschen.

Einen hab ich noch....
Vielleicht ist es so für dich beherrschbar?:

Code Auswählen Erweitern


<ftui-label [text]="ftuitest:string | (txt)=>{return txt.substr(0, 4)}"></ftui-label>

LG

[setstate]

Einen hab ich noch....
Vielleicht ist es so für dich beherrschbar?:

Code Auswählen Erweitern


<ftui-label [text]="ftuitest:string | (txt)=>{return txt.substr(0, 4)}"></ftui-label>

LG

  Nice!

Geht sogar noch kürzer:

| txt => txt.substr(0, 4)

Ich habe auch die ganze Zeit überlegt, wie man die vielen schönen JS String Funktionen als Pipe-Funktion nutzen könnte.

btw: bei der Frage, welche Funktion man dafür fest einbauen sollte, ist mir noch slice eingefallen

Code Auswählen Erweitern


  <ftui-label [text]="dummy2 | slice(0,2)"></ftui-label>


Ist zwar nicht so intuitiv, aber mächtiger, da man mit negativen Werten arbeiten kann.

danger | slice(0,2) => da
danger | slice(0,3) => dan
danger | slice(1,-1) => ange
danger | slice(3) => ger

Wert2 | slice(0,-1) => Wert
Wert2 | slice(4) => 2

[OdfFhem]

@mr_petz

Arrow functions were introduced in ES6.
You don't need the function keyword, the return keyword, and the curly brackets.
You can only omit the return keyword and the curly brackets if the function is a single statement.

Dieses Feature wird schon gerne bei den Komponenten genutzt. Dass man es quasi als anonyme Funktion auch im Pipe-Bereich verwenden kann, verdeutlicht die Möglichkeiten - sehr gut 

Die minifizierte Version wäre übrigens noch kürzer ... t=>t.substr(0, 4) ... 

[mr_petz]

@OdfFhem

Wie immer war es zu erwarten dass du es erläuterst
Habe auch extra die Pfeilfunktion gewählt fur´s ES6.
Zum, in meinen Augen, besseren "nachvollziehen" habe ich die return Anweisung benutzt.
Das es auch kürzer geht war mir bewusst...
Das sollte auch nochmal ein Anschubser für setstate sein. Hat funktioniert


@setstate

slice() ist eine super Idee als pipe.

Hier eine kleine Einschätzung von mir:
Die slice() und substr() Funktion ist ja "ähnlich".
substr() kann auch mit negativen Werten umgehen. Hier wird der negative Wert ausschließlich als erstes gesetzt und zählt von string.lenght rückwärts.
Bei slice() hingegen kann man mit 2 negativen Werten arbeiten.
danger | substr(2) => nger
danger | substr(-3) => ger
danger | substr(0,2) => da
danger | substr(0,3) => dan
danger | substr(-5,4) => ange
danger | substr(-3,2) => ge

Da ist dann slice() in meinen Augen die bessere Wahl.
slice() ist sehr logisch aufgebaut, funktional und flexibel.

Mit substring() kann man natürlich auch alle Varianten durchspielen, aber man muss immer Start und End mit angeben.

Fazit: Für die pipe würde ich dann schon slice() anwenden.

LG mr_petz

Edit: jetzt erst gesehen sorry... Du hast slice als pipe bereits eingebaut.

[grossmaggul]

Irgendwas klemmt da wohl beim letzten Update, nachdem ich es eingespielt habe und die Seite neu geladen wurde, wird die Seite dunkler(man kann die ftui Oberfläche noch erkennen) und sie lässt sich nicht mehr bedienen, sprich es lässt sich keine Button etc. mehr anwählen.

Edit: Hat wohl was mit meiner selbstedfinierten Klasse semitransparent zu tun, ich weiß nur noch nicht was, ich forsche noch.
Edit2: Wohl doch nicht.

[stefan-dd]

Habe das gleiche Problem.
Mit einer älteren ftui.js funktioniert es wieder.

[meier81]

Habe das gleiche Problem.
Mit einer älteren ftui.js funktioniert es wieder.

Bei mir läuft soweit alles ohne Probleme, bin auf dem aktuellen Stand mit fhem und ftui.

[moonsorrox]

schließe mich dem an, Seite lädt erst und wird dann schwarz.
Vorherige ftui.js zurück kopiert und es funktioniert wieder.

[LuGu]

Habe das gleiche Problem.
Mit einer älteren ftui.js funktioniert es wieder.

Ich habe mit der aktuellen Version keine Probleme.
Getestet mit verschiedenen Browsern und auf verschiedenen OSen.

Gruß LuGu

[mr_petz]

@all die Probleme haben.
Habt ihr auch mal den Browsercache geleert und mit Standardtheme getestet?

LG mr_petz

[grossmaggul]

Habt ihr auch mal den Browsercache geleert und mit Standardtheme getestet?

Ja, habe ich und habe z.B. auch mal das retro theme benutzt, selbes Problem.
Da ich keine alte ftui.js hatte, habe ich versucht anhand des Patch Logs die Änderungen rückgängig zu machen, das Problem bleibt aber.

[Stonemuc]

Bei mir läuft es nur im Microsoft Edge...Firefox bleibt die Seite nach dem Laden schwarz

[mr_petz]

@grossmaggul

Ja, habe ich und habe z.B. auch mal das retro theme benutzt, selbes Problem.
Da ich keine alte ftui.js hatte, habe ich versucht anhand des Patch Logs die Änderungen rückgängig zu machen, das Problem bleibt aber.

Ich hänge hier mal die vorhergehenden Dateien die geändert worden für dich an bis es gefixt ist.
Das hilft natürlich nicht bei der Fehleranalyse...

LG mr_petz

Edit: Oder du nimmst die aus meinem Thermostat-Branch. Das ist die vorhergehende Version:
https://github.com/mr-petz/ftui/tree/thermostat