FTUI version 3

[mr_petz]

Hi @yersinia,

man könnte dein Beispiel bis aufs Jahr 2099 pimpen...

Code Auswählen Erweitern

<ftui-label [text]="device:reading | toDate() | format('eeee, D. MMMM YY') | replace(/20([0-9])/g,'$1')"></ftui-label>
oder

Code Auswählen Erweitern

<ftui-label [text]="device:reading | toDate() | format('eeee, D. MMMM YY') | replace(/20(\d\d)/,'$1')"></ftui-label>

Zum anpassen im helper würde auch das gehen:

Code Auswählen Erweitern

const YY = date.getFullYear().toString().substring(2);oder

Code Auswählen Erweitern

const YY = date.getFullYear().toString().slice(2,4);aber setstate wollte bestimmt das machen:

Code Auswählen Erweitern

const YY = date.getFullYear().toString().slice(-2);

LG mr_petz

[Superposchi]

Kann man die Margin/Padding-Eigenschaften wie im normalen HTLM auch nur in eine Richtung geltend machen oder gilt es immer nur in alle vier Richtungen?

[TimoD]

Und das funktioniert perfekt, danke dafür!!

Leider nicht ganz...
Aber jetzt. Jetzt wird auch der active-Status mit gesetzt!:

Code Auswählen Erweitern

<ftui-tab view="View2" direction="vertical" @click="setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),10000);">
Leider ist das active im tab und da musste ich ein neuen forEach machen.
Ich denke setstate kann einen autoreturn/backToMain ins tab-modul mit einbauen...
LG mr_petz

Edit: Das einzige was jetzt passieren kann ist, dass immer ein neuer timer bei jedem click auf einem tab oder was auch immer gesetzt wird!
Also wenn man seinen ganzen view durchklickt und bei jedem ein @click hat wie oben, dann wird immer wieder ein neuer timer gestartet... leider .
Mal sehen ob das auch anders geht...

Edit 2:
So ist besser im ftui-grid-tile vom eigenen Menü Bsp.:

Code Auswählen Erweitern

<ftui-grid-tile row="2" col="1" height="10" width="1" shape="round" @click="clearTimeout(this.timer);this.timer = setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),10000);">Hier brauch man nur einmal definieren und bei jedem click wird der alte timer als erstes gelöscht.
Also beim ersten click wird der timer gelöscht und die Zeit neu gesetzt, bei jedem weiteren click geht die Zeit von vorne los...

ps. View1 in den eigenen Startview umbenennen und hinten die Zeit in ms...

Hab folgendes ergänzt:

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="1" height="29" width="1" shape="round" @click="clearTimeout(this.timer);this.timer = setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),30000);">
Allerdings wird der Timer bei Benutzung von FTUI nicht gerestet. Es springt immer nach 30 Sekunden zurück. Was mache ich denn hier falsch?

Zweitens, die Frage gibt es die Möglichkeit für einzelne Tab-Views verschiedene Timeouts zu definieren?

Vorab vielen Dank

Grüße Timo

[mr_petz]

Hab folgendes ergänzt:

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="1" height="29" width="1" shape="round" @click="clearTimeout(this.timer);this.timer = setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))})&ftuiHelper.selectAll('ftui-tab').forEach(elem => {(elem.view !== 'View1'?elem.removeAttribute('active'):elem.setAttribute('active',''))}),30000);">
Allerdings wird der Timer bei Benutzung von FTUI nicht gerestet. Es springt immer nach 30 Sekunden zurück. Was mache ich denn hier falsch?

Zweitens, die Frage gibt es die Möglichkeit für einzelne Tab-Views verschiedene Timeouts zu definieren?

Vorab vielen Dank

Grüße Timo

Die ehemalige @click Funktion von mir wird nicht mehr benötigt da setstate timeout für den tab bereits eingebaut hat.
Die Funktion funktioniert wenn es nach 30sec zurück zu home springt. Einen anderen Zweck hatte sie nicht.

LG mr_petz

Edit:
Mehrere gehen wie hier im example vom tab:
https://github.com/knowthelist/ftui/blob/13db8daa62c845c5f83920498850afef7b624fce/www/ftui/examples/tab.html#L41

[setstate]

Kann man die Margin/Padding-Eigenschaften wie im normalen HTLM auch nur in eine Richtung geltend machen oder gilt es immer nur in alle vier Richtungen?

Man kann Margin/Padding flexibel wie im CSS angeben. Entweder 1 Wert für alle Seiten oder getrennt.

margin="alle"
margin="oben rechts unten links"
margin="oben seitlich unten"
margin="oben/unten seitlich"

Code Auswählen Erweitern

margin="-20px 0 0 0"

margin="1"

margin="-1em"

padding="0 1em 0"

padding="2em 1em"


[Superposchi]

Gibt es beim Dropdown eine Möglichkeit Alternativbegriffe anzeigen zu lassen?

Code Auswählen Erweitern

<ftui-dropdown width="200px" list="sleep,fresh,strong,auto,close" [(value)]="tuya_local_bf75378cf6e13718e0rvcj:mode""></ftui-dropdown>Ich würde "sleep,fresh,strong,auto,close" gerne durch "Schlafmodus,Fresh-Modus,Max-Modus,Auto,Aus" ersetzen, aber im Reading müssen die ersteren Begriffe eingetragen werden bzw. per Set-Befehl gesendet werden.

[Superposchi]

Kann ich beim Switch-Element die Breite des Schalters beeinflussen?
width="xxx" funktioniert nicht und class="size-x" wirkt sich auf die komplette Größe - also auch die Höhe - aus.

[Superposchi]

Das mit dem margin klappt bei mir nicht.
Habe es in einem ftui-row Objekt ausprobiert, aber das einzige was eine Wirkung zeigt ist der einzelne Wert der sich in alle Richtungen auswirkt.

Muss da vielleicht was im css angepasst werden?

[Superposchi]

Und noch ein Problem, diesmal mit dem Segment-Typ:

Ich habe mir aus den Examples das Segment Beispiel Binding herauskopiert und angepasst. Klappt auch soweit gut.
Nur, dass er nach dem Auswählen eines Segments zwar den Wert in Fhem übernimmt und anzeigt, aber im FTUI immer wieder auf das erste Segment zurückspringt. Nur wenn ich dann noch einmal auf das ausgewählte Segment klicke, bleibt er auch darauf stehen.

Was übersehe ich?

Der Code lautet:

Code Auswählen Erweitern

<ftui-segment [(value)]="tuya_local_bf5df91a3950a0df0csgf7:colortype" @value-change="console.log($event.detail)">
<ftui-segment-button value="1">
  <ftui-label>Gradiant</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="2">
  <ftui-label>Fix</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="3">
  <ftui-label>Nachtlicht</ftui-label>
</ftui-segment-button>
</ftui-segment>


[Superposchi]

Kann ich bei einem Slider das senden des Befehls verzögern?

Der Befehl wird immer schon abgesetzt während der Slider noch bewegt wird, was zu einem hin und her führt.

[Cleverly74]

Hallo zusammen,

gibt es eine Möglichkeit mit dem
ftui-clock format
irgendwie an die Kalenderwoche zu kommen?

Grüße Andi

[mr_petz]

Hi Andi,
direkt aus der ftui-clock geht es nicht, aber mit extrascript könnte man es umsetzen:
https://forum.fhem.de/index.php?topic=115259.msg1179813#msg1179813

Code Auswählen Erweitern


<ftui-cell class="size-3">
  <script>
    const date = new Date();
    const currentThursday = new Date(date.getTime() +(3-((date.getDay()+6) % 7)) * 86400000);
    const yearOfThursday = currentThursday.getFullYear();
    const firstThursday = new Date(new Date(yearOfThursday,0,4).getTime() +(3-((new Date(yearOfThursday,0,4).getDay()+6) % 7)) * 86400000);
    const weekNumber = Math.floor(1 + 0.5 + (currentThursday.getTime() - firstThursday.getTime()) / 86400000/7);
    document.write(weekNumber+'. Kalenderwoche');
  </script>
</ftui-cell>


Edit: (Code geändert)
ein Pipeeinzeiler würde auch gehen. Bsp.:

Code Auswählen Erweitern

<ftui-label [text]="Device:time | ()=>Math.floor(1 + 0.5 + ((new Date(new Date().getTime() +(3-((new Date().getDay()+6) % 7)) * 8.64e7)).getTime() - (new Date(new Date((new Date(new Date().getTime() +(3-((new Date().getDay()+6) % 7)) * 8.64e7)).getFullYear(),0,4).getTime() +(3-((new Date((new Date(new Date().getTime() +(3-((new Date().getDay()+6) % 7)) * 8.64e7)).getFullYear(),0,4).getDay()+6) % 7)) * 86400000)).getTime())/8.64e7/7)+'.KW'"></ftui-label>
Hier spielt die ankommende Zeit keine Rolle...

LG mr_petz

[Superposchi]

Zwei Fragen:

1)
Kann ich beim Setzen eines Dropdown andere Elemente auf der Seite Aktualisieren?

Wenn ich das Dropdown ändere wird per notify eine Reihe Readings Rosetten und auf 0 gestellt, aber die Anzeige auf der Seite wird nicht aktualisiert?

2)
Wie kann ich bei einem Button den gesendeten Befehl teilweise oder ganz aus einem Reading auslesen?

[Cleverly74]

Hi Andi,
direkt aus der ftui-clock geht es nicht, aber mit extrascript könnte man es umsetzen:
https://forum.fhem.de/index.php?topic=115259.msg1179813#msg1179813

Code Auswählen Erweitern


<ftui-cell class="size-3">
  <script>
    const date = new Date();
    const currentThursday = new Date(date.getTime() +(3-((date.getDay()+6) % 7)) * 86400000);
    const yearOfThursday = currentThursday.getFullYear();
    const firstThursday = new Date(new Date(yearOfThursday,0,4).getTime() +(3-((new Date(yearOfThursday,0,4).getDay()+6) % 7)) * 86400000);
    const weekNumber = Math.floor(1 + 0.5 + (currentThursday.getTime() - firstThursday.getTime()) / 86400000/7);
    document.write(weekNumber+'. Kalenderwoche');
  </script>
</ftui-cell>


Edit:
ein Pipeeinzeiler würde auch gehen. Bsp.:

Code Auswählen Erweitern

<ftui-label [text]="device:time | ()=>Math.ceil((new Date().getDay() + 1 + Math.floor((new Date() - new Date(new Date().getFullYear(),0,1)) / 86400000)) / 7)+'.KW'"></ftui-label>
Hier spielt die ankommende Zeit keine Rolle...

LG mr_petz

Danke

[Superposchi]

Ich vermisse schmerzhaft die Möglichkeit Texte im Hintergrund einzufärben.
Bei FTUI2 konnte man Vorder- und Hintergrundfarbe separat einstellen.
Bei FTUI3 gibt es die Background-Color nur noch beim chart-Objekt soweit ich gesehen habe.

Kann man das nicht für das Label-Objekt auch wieder einführen?