FTUI version 3

[juemuc]

Hi OldFhem,

funktioniert. Danke. Ich verstehe allerdings auch die Befehlskette nicht ganz. Ich versuche einmal das was ich verstanden habe, zu beschreiben.

• ftuitest:date2 ist das FHEM-Reading
• | toDate() wandelt das Reading in ein Datumsformat um
• t ist eine Variable, der ein Wert zugewiesen wird
• (t.toLocaleDateString()===(new Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY') habe ich nicht verstanden

Ich habe zwar die einzelnen Funktionen gefunden, verstehe hier aber die Zusammenhänge nicht. Kannst Du dies noch kurz auflösen  Danke
Viele Grüße
Jürgen

[OdfFhem]

Die Gasamt-Pipe besteht aus 3 Teilen:

Code Auswählen Erweitern


  #1 ... ftuitest:date2
  #2 ... toDate()
  #3 ... t=>(t.toLocaleDateString()===(new Date()).toLocaleDateString())
            ?'Heute'
            :ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')"


#1 stellt den aktuellen Wert des angegebenen Readings bereit
#2 erhält durch "interne" Übergabe den aktuellen Wert und macht aus der Zeichenkette ein Datum
#3 erhält durch "interne" Übergabe das Datum und stellt eine Pseudo-Funktion dar
#3.1 der linke Teil (bzgl. < der Pseudo-Funktion entspricht einem Paramterteil ; t ist dabei der Parameter, der das Datum aufnimmt
#3.2 der rechte Teil (bzgl. < der Pseudo-Funktion entspricht einem Ausführungsteil ; es handelt sich hier um das Kurzformat der "if then else"-Theorie
#3.3 das Kurzformat besteht aus drei Teilen ... aaa?bbb:ccc ... aaa entspricht einem logischen Ausdruck ... bbb wird angewendet bei positivem Ergebnis ... ccc ansonsten
#3.4 im logischen Ausdruck wird der Datumsanteil (Tag,Monat und Jahr) von t mit dem Datumsanteil von "jetzt" verglichen. Stimmen die Angaben überein, wird 'Heute' weitergegeben, ansonsten das Ergebnis der FTUI3-Funktion zur wunschgemäßen Formatierung eines Datums

[mr_petz]

@setstate,@OdfFhem

Ich habe mal zum Anliegen von @juemuc das Beispiel auf "meine" Art umgestellt:

Code Auswählen Erweitern


<ftui-label [text]="local:datum | t=>ftuiHelper.dateFormat(ftuiHelper.dateFromString(t),'D.M.YYYY')===new Date().toLocaleDateString()?'Heute':ftuiHelper.dateFormat(ftuiHelper.dateFromString(t),'eeee - D.MM.YYYY')"></ftui-label>

Im Normalfall sollte die Bedingung bei gleichen Datum (Bsp.:10.1.2023) auf true gehen und 'Heute' ausgeben...
Macht es aber nicht...
Ich weis jetzt auch Warum.
In Zeile:
https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.helper.js#L253
wird alles replaced was nach dem M kommt... Also in meinen Fall M. (Ich kenne von damals den Bug!)
Wenn man :

Code Auswählen Erweitern

<ftui-label [text]="local:datum | toDate() | format('D.M.YYYY')"></ftui-label>
definiert, dann wird der . vom Monat eliminiert... Ausgabe -> 10.12023
Man könnte jetzt als Zwischenlösung es so definieren mit extra Punkt:

Code Auswählen Erweitern

<ftui-label [text]="local:datum | toDate() | format('D.M..YYYY')"></ftui-label>
So erhält man die richtige Ausgabe -> 10.1.2023 und meine Spielerei funktioniert so auch:

Code Auswählen Erweitern


<ftui-label [text]="local:datum | t=>ftuiHelper.dateFormat(ftuiHelper.dateFromString(t),'D.M..YYYY')===new Date().toLocaleDateString()?'Heute':ftuiHelper.dateFormat(ftuiHelper.dateFromString(t),'eeee - D.MM.YYYY')"></ftui-label>

Oder man tausch diese Zeile im helper so aus:

Code Auswählen Erweitern


  ret = ret.replace(/M(?!a)(?!ä)/g, MM);

Ich gehe hier erstmal nur von März,Mai,March und May aus.
MM und MMMM funktionieren weiterhin.
Oder ist noch etwas anderes bei M zu erwarten?

LG mr_petz

[OdfFhem]

Macht es aber nicht...

Oder ist noch etwas anderes bei M zu erwarten?

Einsatz von ... Originalcode

Code Auswählen Erweitern


  <ftui-label [text]="ftuitest:date2 | toDate() | format('Mindestens bis zum --- Morgen ist --- eeee - D.M.YYYY')"></ftui-label>

Ergebnis ... 3nd0te0 b0 zu0--- 3rgen 0t --- Mittwoch - 22.32023

Einsatz von ... ret = ret.replace(/M(?!a)(?!ä)/g, MM);

Code Auswählen Erweitern


  <ftui-label [text]="ftuitest:date2 | toDate() | format('Mindestens bis zum --- Morgen ist --- eeee - D.M.YYYY')"></ftui-label>

Ergebnis ... 3ind0te0 b0 zu0--- 3orgen 0t --- Mittwoch - 22.3.2023

Einsatz von ... ret = ret.replace(/(^|[^\p{Letter}])(M)([^\p{Letter}]|$)/gu, '$1'+MM+'$3');

Code Auswählen Erweitern


  <ftui-label [text]="ftuitest:date2 | toDate() | format('Mindestens bis zum --- Morgen ist --- eeee - D.M.YYYY')"></ftui-label>

Ergebnis ... Mind0te0 b0 zu0--- Morgen 0t --- Mittwoch - 22.3.2023

Code Auswählen Erweitern


//  ret = ret.replace(/[^u]s/g, ss);
  ret = ret.replace(/(^|[^\p{Letter}])(s)([^\p{Letter}]|$)/gu, '$1'+ss+'$3');

Ergebnis ... Mindestens bis zu0--- Morgen ist --- Mittwoch - 22.3.2023

Code Auswählen Erweitern


//  ret = ret.replace(/m[^b]/g, mm);
  ret = ret.replace(/(^|[^\p{Letter}])(m)([^\p{Letter}]|$)/gu, '$1'+mm+'$3');

Ergebnis ... Mindestens bis zum --- Morgen ist --- Mittwoch - 22.3.2023



Es gibt noch weitere Stellen ...

[mr_petz]

Dein Einsatz ist wieder hervorragend 
Da zeigst du mal wieder dein Spezialgebiet....
Ist ein Extrembeispiel, aber Zeigt was man noch pimpen könnte und vielleicht auch sollte.

LG mr_petz

[OdfFhem]

Ist ein Extrembeispiel, aber Zeigt was man noch pimpen könnte und vielleicht auch sollte.

Insbesondere in Verbindung mit ago und till werden Zeitangaben mit Text angereichert - aus dem Grund verfolgt timeFormat einen ähnlichen Ansatz.

***

Befüllst Du local:datum erst durch eine Aktion oder gibt es einen direkten Weg ?

[mr_petz]

Mein local:datum war im Test ein button mit verschiedenen daten im states. Direkter Weg geht glaube auch.

Edit: Nur über Event oder Extrascript(=Direkt?).
Bsp.: setzen von local:datum:

Code Auswählen Erweitern


ftuiApp.fhemService.updateReadingItem('local-datum', {value: '20.03.2023'});


[TimoD]

Ich zitiere mich mal selber.
Mir ist gerade aufgefallen, dass @setstate (der Schlingel hat nichts erwähnt ) noch ein paar pipes eingebaut hat. Damit wird es einfacher etwas vorn oder hinten anzuhängen:

für vorn: prepend()
für hinten: append()

@SirMarco
Da ist es einfacher für dich und du kannst weiterhin mit href arbeiten und wir bleiben FTUI3-Konform:

Code Auswählen Erweitern


<a ftui-binding [href]="AgroWeather:fc0_weather00Icon | prepend('http://')" onclick="javascript:window.open(href,'_blank');return false;">Wettericon</a>


@stefan-dd
Auch hier wäre es mit append() besser:
https://forum.fhem.de/index.php/topic,115259.msg1203014.html#msg1203014

Code Auswählen Erweitern

<ftui-image base="icons/" [src]="AV_Receiver:currentStation | append('.png')"></ftui-image>

LG mr_petz

Hallo zusammen, ich kämpfe gerade mit dem Umstieg von FTUI 2 auf 3. In FTUI2 hatte ich immer einen Link Button um FTUI neu zu laden:

Code Auswählen Erweitern

<div class="top-narrow" data-type="link"data-url="index.html">

Wie bekomme ich das in FTUI 3 als Button hin? Habe folgenden Thread gefunden: https://forum.fhem.de/index.php?topic=127234.0

Was ich hier finde hilft mir aber nicht weiter, da ich keine externe Seite öffnen will sondern nur die aktuelle reloaden. Da muss es doch was einfach geben Ich hoffe ihr könnt mir helfen
Das hier hat nicht funktioniert wie gewünscht: <a ftui-binding onclick="javascript:window.open('http://index.html');return false;">Wettericon</a>

Grüße Timo

[TimoD]

Hallo zusammen, ich kämpfe gerade mit dem Umstieg von FTUI 2 auf 3. In FTUI2 hatte ich immer einen Link Button um FTUI neu zu laden:

Code Auswählen Erweitern

<div class="top-narrow" data-type="link"data-url="index.html">

Wie bekomme ich das in FTUI 3 als Button hin? Habe folgenden Thread gefunden: https://forum.fhem.de/index.php?topic=127234.0

Was ich hier finde hilft mir aber nicht weiter, da ich keine externe Seite öffnen will sondern nur die aktuelle reloaden. Da muss es doch was einfach geben Ich hoffe ihr könnt mir helfen
Das hier hat nicht funktioniert wie gewünscht: <a ftui-binding onclick="javascript:window.open('http://index.html');return false;">Wettericon</a>

Grüße Timo

Hab es hinbekommen: <ftui-button @click="javascript:location.reload()" color="current" fill="none" direction="vertical" gap="1">

[mr_petz]

@TimoD

Hast es ja hinbekommen.
Hier wäre die Lösung auch gewesen...:
https://forum.fhem.de/index.php/topic,115259.msg1233412/topicseen.html#msg1233412

LG

Edit: Wobei 'javascript:' nicht nötig ist...

[TimoD]

Frage, kann ich beim

<ftui-slider [(value)]="dummy3" max="80"
                   tick="10"
                   wide-tick="40"
                   color="cold-hot"
                   has-wide-ticks></ftui-slider>

irgendwie die Farbe nach dem Bereich einstellen? Wie bei FTUI2 bei Range:
data-limit-high="20" data-limit-low="7" data-color="#ffa500" data-color-high="#00e069" data-color-low="#FF3366"

Oder gibt es ein ähnliches Objekt welches dies kann?

Danke schonmal und einen schönen Abend

[mr_petz]

Frage, kann ich beim

<ftui-slider [(value)]="dummy3" max="80"
                   tick="10"
                   wide-tick="40"
                   color="cold-hot"
                   has-wide-ticks></ftui-slider>

irgendwie die Farbe nach dem Bereich einstellen? Wie bei FTUI2 bei Range:
data-limit-high="20" data-limit-low="7" data-color="#ffa500" data-color-high="#00e069" data-color-low="#FF3366"

Oder gibt es ein ähnliches Objekt welches dies kann?

Danke schonmal und einen schönen Abend

Dafür gibt es step() oder map() für color/value/text usw. Das kann man FTUI3weit anwenden. Bsp:

Code Auswählen Erweitern


<ftui-slider [(value)]="dummy3" max="80"
                   tick="10"
                   wide-tick="40"
                   [color]="dummy3 | step('0: success, 25: warning, 50: danger')"
                   has-wide-ticks></ftui-slider>


LG

[M.Piet]

Moin,

kurze Frage: ich habe in FTUI3 nichts gefunden, was an dem "Range" unter FTUI2 angelehnt ist.
Gibt es da etwas, was so ähnlich aussieht? Bei den Beispielen unter github habe ich nichts gefunden.

Danke schön.

[mr_petz]

Für Range könntest du den meter nehmen:
https://knowthelist.github.io/ftui/www/ftui/examples/meter.html

LG

[TimoD]

Dafür gibt es step() oder map() für color/value/text usw. Das kann man FTUI3weit anwenden. Bsp:

Code Auswählen Erweitern


<ftui-slider [(value)]="dummy3" max="80"
                   tick="10"
                   wide-tick="40"
                   [color]="dummy3 | step('0: success, 25: warning, 50: danger')"
                   has-wide-ticks></ftui-slider>


LG

Danke für deine ganze Arbeit! Hast du Paypal? Ich würde dir gerne einen Kaffee spendieren