FTUI version 3

[curt]

Hi ich nochmal. Ich konnte es nicht lassen...

Das ist schön. (Ich mache einige Tage Pause, lese aber mit.)

Ich habe mal ein @click-script geschrieben.
Ich habe es bei mir gerade getestet. Hier im ftui-tab view="View2".
Wenn man auf diesen tab drückt springt er in den View1 (der ja hier im Beispiel Standard ist) nach 10s zurück:

Leider kann ich aktuell nichts testen. Aber genau das könnte die Lösung für das Link-Problem sein, was ich beschrieb (und Du antwortestest, dass Du das Problem nicht verstanden habest).

Und gleich mal noch eine andere Frage, möglicherweise auch schon gelöst:
In einem Reading ist textlich ein HTML-Script oder ein HTML-Codefragment. Dieses soll in einer Kachel zur Anzeige kommen (Bei ftui2 ging das, dwdweblink als Beispiel). Wie stellt man das denn bei ftui3 an?

Am Rande:
Du und andere haben den best-practices-Ball ja zu mir zurück gespielt. Ja klar, habe ich immer gemacht, kann ich auch wieder machen. Nur habe ich aktuell noch nichts, was man vorzeigen könnte.

[mr_petz]

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...

[mr_petz]

Das ist schön. (Ich mache einige Tage Pause, lese aber mit.)

Das machst du richtig!

Leider kann ich aktuell nichts testen. Aber genau das könnte die Lösung für das Link-Problem sein, was ich beschrieb (und Du antwortestest, dass Du das Problem nicht verstanden habest).

Ich weiss es trotzdem nicht genau was du willst. Kannst du es genauer Beschreiben?
@click hatte ich hier schon mehrfach erwähnt.

Und gleich mal noch eine andere Frage, möglicherweise auch schon gelöst:
In einem Reading ist textlich ein HTML-Script oder ein HTML-Codefragment. Dieses soll in einer Kachel zur Anzeige kommen (Bei ftui2 ging das, dwdweblink als Beispiel). Wie stellt man das denn bei ftui3 an?

Deswegen hatte ich auch schon erwähnt dass das Meiste schon im Thread steht.
Eine Antwort für dich:
https://forum.fhem.de/index.php/topic,115259.msg1184952.html#msg1184952

Am Rande:
Du und andere haben den best-practices-Ball ja zu mir zurück gespielt. Ja klar, habe ich immer gemacht, kann ich auch wieder machen. Nur habe ich aktuell noch nichts, was man vorzeigen könnte.

Jeder muss doch erstmal selber ein Grundkonzept/Aufbau erstellen. Wenn du alles nur copy/paste machst lernst du es nicht mit dem neuen FTUI3 umzugehen.
Beispiele (Teilbeispiele) von Usern sind hier im Thread auch schon zu hauf... (vielleicht nicht gleich und leicht zu finden, aber wer suchet der findet )
Und in den demos von setstate gibt es auch genug für den Anfang...

LG mr_petz

[meier81]

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 return/backToMain ins tab-modul mit einbauen...
LG mr_petz

Kurze Rückmeldung, eben eingebaut, getestet und: funktioniert tadellos 

Gruß Markus

[LuGu]

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);">


Durch Zufall entdeckt, eingebaut, läuft.
Prima, Danke mr_petz!

Gruß LuGu

[stefan-dd]

Was mache ich falsch? Oder geht es nicht?
ich möchte die Text Farbe Reading abhängig ändern. Irgendwie will es nicht. Eine feste Farbe vergeben funktioniert.

Code Auswählen Erweitern

    <ftui-label [text]="Fenster_state:windows"
                             [color]=Fenster_state:windows | map('keine: green, `.*`: red')"></ftui-label>

[OdfFhem]

@stefan-dd

Bei color fehlt vor Fenster ein doppeltes Anführungszeichen ...

[stefan-dd]

Das hat sich durchs probieren davon geschlichen, Danke.

[mr_petz]

@setstate

Dein ftui-tab timeout funktioniert
Hier ist nur zu erwähnen, dass bei jedem tab-click der alte Timer bleibt und ein neuer Timer gestartet wird.

Zum Test:
Def-Bsp.:

Code Auswählen Erweitern

<ftui-tab view="View3" direction="vertical" timeout="20">
Ich habe mehr als 3 ftui-tab´s. Bei denen habe ich je einen timer definiert. Einen mit 10s, mit 20s und einen mit 30s.
Ich clicke auf den ersten mit 10s, dann nach 5s auf den mit 30s. Jetzt sollte er ja 30s haben. Hat er aber nicht. Er springt nach weiteren 5s zurück zu Home. Wenn ich jetzt aber auf einen tab ohne timer gehe, sieht man dass er wieder nach 20s zurück geht auf Home und somit dass der 2.Timer auch an war. Sprich es waren beide gleichzeitig aktiv...
Das Beispiel ist mit 10s,20s und 30s natürlich ziehmlich kurz, aber bei einer längeren Zeit könnte er natürlich bei einer nachträglichen Bedienung ungewollt mehrfach zu Home springen durch die gestarteten Timer....
Irgenwie scheint das clearTimeout(this.timer) nicht zu wirken.
Ich weiss jetzt nicht ob das jetzt von Relevanz ist, ich denke aber es wäre besser wenn der timeout immer wieder neu von vorn beginnt oder?

Das alles soll nur ein Hinweis sein.
ps. vielleicht liege ich hier aber auch falsch? k.A.
vielleicht falsch definiert? k.A.

LG mr_petz

Edit: Ich hoffe du verstehst was ich damit sagen möchte...

[LuGu]

@setstate

Dein ftui-tab timeout funktioniert
Hier ist nur zu erwähnen, dass bei jedem tab-click der alte Timer bleibt und ein neuer Timer gestartet wird.

LG mr_petz

Edit: Ich hoffe du verstehst was ich damit sagen möchte...

Moin mr_petz,

das war doch bei deiner Lösung auch so, oder hatte ich da was falsch übernommen?
Ein globaler Timer wäre natürlich schöner.

Gruß LuGu

[mr_petz]

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...

Hi LuGu.
Hatte ich geändert. wie hier oben im Zitat.
Vielleicht sollte das setstate auch in den ftui-grid-tile einbauen. k.A.?

LG mr_petz

[LuGu]

Hi LuGu.
Hatte ich geändert. wie hier oben im Zitat.
Vielleicht sollte das setstate auch in den ftui-grid-tile einbauen. k.A.?

LG mr_petz

Hi mr_petz,

war meine Vermutung ja richtig, dass ich es falsche implementiert habe.
Ich habe "Edit 2" wohl überlesen.

Edit:
Ich habe es in ftui-grid implementiert, da ich zwei ftui-grid-tile mit einem Tab-Menue habe.

Edit 2:
Hat den Vorteil, dass wenn ich auf einem tab-view etwas bediene, der timeout immer wieder neu gestartet wird.
Nach der letzten Bedienung und dem anschließenden timeout wird dann auf view1 zurückgeschaltet.
So ist es für mich perfekt.

Gruß LuGu

[megadodopublications]

Hallo setstate

vielen Dank für die Timeout Funktion in ftui-tab.

Ich habe eine Verständnisfrage:

Code Auswählen Erweitern

<ftui-tab view="Lights-Overview-2" class="size-5" timeout="10">

Es gibt einen Timeout, um die Ansicht 5 Sekunden nach Aufruf des View "Lights-Overview-2" zurückzusetzen.

Was mir fehlt, ist die Möglichkeit, ein "Sprungziel" angeben zu können... ? also wohin wird nach 5 Sekunden gesprungen?


Vielen Dank und einen Guten Rutsch nach 2022!!
Ralph

[mr_petz]

@megadodopublications
Er geht zum Startview. heisst ja auch im git "goHome timeout"...

@all
Mal was ganz anderes.
Hat jemand interresse an einer TV-Programm Übersicht unabhängig von fhem?
Daten werden direkt online geholt.
Zum verdeutlichen hier mal ein Bsp wie man es aufbauen könnte zum testen:

Code Auswählen Erweitern


<ftui-button class="size-1" id="Button1" popup-target="Popup1"></ftui-button>
<ftui-popup id="Popup1" timeout="20" width="70%" height="25%"></ftui-popup>
<script>
  const button1 = document.getElementById("Button1");
  const popup1 = document.getElementById("Popup1");
  fetchdata();
  function fetchdata(){
  fetch('https://api.factmaven.com/xml-to-json/?xml=https://www.tvspielfilm.de/tv-programm/rss/heute2015.xml')
   .then(response => response.json())
   .then(tv => {
    const info = tv.rss.channel.item[0].title.split('|');
    button1.innerHTML = info[1]+' '+info[0];
    popup1.innerHTML = '<header slot=\"header\">'+info[1]+' '+info[0]+'<\/header>';
    popup1.innerHTML += '<p style=\"padding-left:5px;\">'+info[2]+'<\/p><span style=\"padding-left:5px;\">'+tv.rss.channel.item[0].encoded+'<\/span>';
    })
  };
  setInterval(() => fetchdata(),3600*1000);
</script>


Also, macht das für jemanden sinn?
Im Anhang sieht man das popup was über den Button aufgerufen wird.
Das soll nur Beispielhaft sein wie es aussehen könnte...

LG und guten Start ins neue Jahr
mr_petz

[OdfFhem]

@all
FROHES NEUES JAHR

@mr_petz
Vor Kurzem habe ich mit einer Komponente für TV-Programmübersicht begonnen. Um das generelle FTUI3-Thema zu "schonen", wäre die Anlage eines neuen Themas zum Gedankenaustausch bzgl. TV-Programm vermutlich besser geeignet, oder ?