[FTUI3] [solved] Sprung zur Startseite

[andreas_r]

Hallo zusammen,

ich habe derzeit eine FTUI3 Oberfläche im Testbetrieb, die auf einem Tablet läuft. Ich verwende ein ftui-grid mit mehreren Unterseiten, die jede als ftui-tab-view realisiert sind.

Meine Frage: Gibt es eine Möglichkeit, nach einer bestimmten Zeit (oder Zeit von Inaktivität) automatisch auf die erste Default Unterseite zu springen?

Viele Grüße,
Andreas

[Dracolein]

Code Auswählen Erweitern

<ftui-tab view="View2" size="large" timeout="60">
kombiniert mit

Code Auswählen Erweitern

<ftui-tab view="View1" size="large" active>

active = Definition der Defaultseite
timeout = Rückkehrzeit in Sekunden

[andreas_r]

Danke, das war es.

Noch eine Frage: geht das irgendwie auch bei der mobilen Variante, bei der ja die ftui-view statt des ftui-tab verwendet wird?
Ich habe hier mal auf die Schnelle ebenfalls eine ftui-view als active gekennzeichnet und eine zweite ftui-view mit dem timeout versehen, aber das scheint nicht zu klappen.

Und noch was:Gibt es eine Möglichkeit (zB per URL Parameter o.ä.) die FTUI3 Seite aufzurufen und direkt auf eine andere View zu gehen als die, die im Standard als "Active" gekennzeichnet ist?

Viele Grüße,
Andreas

[mr_petz]

auf der mobilen Seite musst du das wie hier im example im footer lösen:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/mobile.html#L92
Bsp:

Code Auswählen Erweitern


  <footer class="row fixed border-top">
    <ftui-tab fill="clear" direction="vertical" view="View1" title="Tab1" active>
      <ftui-icon name="home"></ftui-icon>
      <label class="small">Tab1</label>
    </ftui-tab>
    <ftui-tab fill="clear" direction="vertical" view="View2" title="Tab2" timeout="60">
      <ftui-icon name="cog"></ftui-icon>
      <label class="small">Tab2</label>
    </ftui-tab>
    <ftui-tab fill="clear" direction="vertical" view="View3" title="Tab3" timeout="60">
      <ftui-icon name="clock-o"></ftui-icon>
      <label class="small">Tab3</label>
    </ftui-tab>
  </footer>

Um dir besser helfen zu können, solltest du deinen Code der Seite posten...

Und noch was:Gibt es eine Möglichkeit (zB per URL Parameter o.ä.) die FTUI3 Seite aufzurufen und direkt auf eine andere View zu gehen als die, die im Standard als "Active" gekennzeichnet ist?

Hier solltest du die SuFu im Hauptthread benutzen, da wirst du fündig...

LG

[andreas_r]

Hallo,

ich habe es ohne den Footer aufgesetzt. Meine mobile Seite hat (gekürzt) folgende Struktur:

Code Auswählen Erweitern


</ftui-view-stage>
<ftui-view id="home" active>
    <ftui-view-toolbar>Hausautomatisierung</ftui-view-toolbar>
    <ftui-view-item target="eg">
        <ftui-icon name="arrow-down" color="blue" slot="start" invert></ftui-icon>
        Erdgeschoss
    </ftui-view-item>
    <ftui-view-item target="og">
        <ftui-icon name="arrow-up" color="blue" slot="start" invert></ftui-icon>
        1. Stock
    </ftui-view-item>
</ftui-view>

    <ftui-view id="og">
      <ftui-view-toolbar>
        <ftui-nav-link slot="start"></ftui-nav-link>
        1. Stock
      </ftui-view-toolbar>
      ...
    </ftui-view>

        <ftui-view id="eg">
      <ftui-view-toolbar>
        <ftui-nav-link slot="start"></ftui-nav-link>
        Erdgeschoss
      </ftui-view-toolbar>
      ...
    </ftui-view>

</ftui-view-stage>


Kann ich hier ebenfalls irgendwie auf die "home" View zurückkehren?

Und zur anderen Frage: Habe das hier gefunden:
https://forum.fhem.de/index.php/topic,115259.msg1232877.html#msg1232877
Leider klappt der Aufruf mit dem URL Parameter nicht. Brauche ich hier eine besondere FTUI Version?

Viele Grüße

[OdfFhem]

Und zur anderen Frage: Habe das hier gefunden:
https://forum.fhem.de/index.php/topic,115259.msg1232877.html#msg1232877
Leider klappt der Aufruf mit dem URL Parameter nicht. Brauche ich hier eine besondere FTUI Version?

Dies ist bislang nur eine individuelle Erweiterung. Ich kann die Anpassungen bereitstellen, aber besser wäre das Feature im Original aufgehoben ...

[andreas_r]

Wäre super, wenn Du das hier zumindest posten könntest.

VG, Andreas

[mr_petz]

Ich hatte mal was für ftui-tab programmiert:
https://forum.fhem.de/index.php/topic,115259.msg1196540.html#msg1196540
bis setstate das integriert hatte.

Jetzt gebe ich dir eine Version für die Mobile Ansicht:

Code Auswählen Erweitern


@click="clearTimeout(this.timer);this.timer = setTimeout(() => ftuiHelper.selectAll('ftui-view').forEach(elem => {elem.id==='home'?elem.removeAttribute('outside'):elem.setAttribute('outside','')}),10000);"

hier geht es nach 10sec zurück zu id 'home' egal wo du hin navigierst
Also für dich:

Code Auswählen Erweitern


<ftui-view-stage @click="clearTimeout(this.timer);this.timer = setTimeout(() => ftuiHelper.selectAll('ftui-view').forEach(elem => {elem.id==='home'?elem.removeAttribute('outside'):elem.setAttribute('outside','')}),10000);">
  <ftui-view id="home">


Ich bin natürlich auch an @OdfFhem´s Lösung interessiert...

LG

Edit: Hier war noch meine "Linklösung":
https://forum.fhem.de/index.php/topic,115259.msg1207098.html#msg1207098

Edit2: Im ftui-view-stage ist der @click besser, da dann der timer auch bei den ftui-view-item´s neu gesetzt und ausgeführt wird...

[OdfFhem]

@andreas_r, @mr_petz

Kann ich gerne posten, wird aber nix vor Freitag ...

[andreas_r]

@mr_petz: Super, danke Dir für die Rückmeldung. Ich hätte es wahrscheinlich jetzt (ohne Deine elegante Variante hier) so gelöst, dass ich einen URL Parameter mitgegeben hätte, der dann von einem eigenen Javascript ausgewertet worden wäre, das - ähnlich wie Dein Skript -  die Elemente durchgegangen wäre und die Outside Attribute entsprechend gesetzt hätte. Aber so ist es natürlich viel schöner gelöst. Ich wusste gar nicht, dass man das Click Event entsprechend nutzen kann. Ich dachte, dass geht nur bei den Objekten, die in der Doku erwähnt sind.

@OdfFhem: ich bin ebenfalls gespannt auf Deine Lösung. Vielleicht können wir ja einen Pull Request machen, der die Änderung enthält.

Viele Grüße

[OdfFhem]

Kann ich gerne posten, wird aber nix vor Freitag ...

... gerade noch Freitag 


Bei mir habe ich zum Thema folgende Anpassungen vorgenommen ... ob's jeden Anwendungsfall abdeckt, wäre noch zu klären:

ftui.app.js (lt. GitHub-Stand vom heutigen Tag, vor Zeile #60 einfügen)

Code Auswählen Erweitern


    //
    this.initialView = (new URLSearchParams(window.location.search)).get('initialView');
    this.homeView = (new URLSearchParams(window.location.search)).get('homeView');


tab.component.js (lt. GitHub-Stand vom heutigen Tag: Part #1 vor Zeile #24 einfügen; Zeile #97 mit Part #2 ersetzen)

Code Auswählen Erweitern


      // Part #1
      selectAll(`ftui-tab[group="${this.group}"]`).forEach(elem => {
        if (window.ftuiApp.initialView) (elem.view === window.ftuiApp.initialView)?elem.setAttribute("active","active"):elem.removeAttribute('active');
        if (window.ftuiApp.homeView) (elem.view === window.ftuiApp.homeView)?elem.setAttribute("home","home"):elem.removeAttribute('home');
      });

    // Part #2
    if ((homeElem) && (homeElem.id !== this.id)) {



Neben der index-Datei kann man nun mit dem Parameter initialView die Startansicht und mit dem Parameter homeView die Standardansicht beeinflussen.

Code Auswählen Erweitern


http://raspberrypiX:8083/fhem/ftui3/index_X.html
http://raspberrypiX:8083/fhem/ftui3/index_X.html?initialView=View6
http://raspberrypiX:8083/fhem/ftui3/index_X.html?homeView=View3
http://raspberrypiX:8083/fhem/ftui3/index_X.html?initialView=View6&homeView=View3


[mr_petz]

... gerade noch Freitag 

Da hast du ja nochmal Glück gehabt. Sonst wäre hier vielleicht noch ein Shitstorm los gegangen...

Danke für deine Veröffentlichung. Man muss immer nur eins bedenken... Bei jedem UpdateAll is es weg....

LG

[OdfFhem]

Man muss immer nur eins bedenken... Bei jedem UpdateAll is es weg....

Stimmt ... oder setstate übernimmt es (so oder so ähnlich).
Praktisch ist auf jeden Fall, dass man je nach Raum die gleiche Oberfläche, aber im Zweifel eine "passendere" Startseite hat.

[andreas_r]

@OdfFhem: Vielen Dank für Deine Lösung. Funktioniert super.
Also mein Vote hättest Du dafür, dass setstate das mit in den Standard übernimmt.

Viele Grüße und nochmal Danke!

[andreas_r]

Ich habe die Änderungen mal als Pull Request gestellt

https://github.com/knowthelist/ftui/pull/42


VG, Andreas