FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: andreas_r am 10 Oktober 2022, 09:24:55

Titel: [FTUI3] [solved] Sprung zur Startseite
Beitrag von: andreas_r am 10 Oktober 2022, 09:24:55
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
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: Dracolein am 10 Oktober 2022, 10:20:49
<ftui-tab view="View2" size="large" timeout="60">
kombiniert mit
<ftui-tab view="View1" size="large" active>

active = Definition der Defaultseite
timeout = Rückkehrzeit in Sekunden
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: andreas_r am 11 Oktober 2022, 08:56:56
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
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: mr_petz am 11 Oktober 2022, 14:44:12
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:

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

Zitat von: andreas_r am 11 Oktober 2022, 08:56:56
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
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: andreas_r am 11 Oktober 2022, 17:08:07
Hallo,

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

</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 (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
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: OdfFhem am 11 Oktober 2022, 18:58:40
Zitat von: andreas_r am 11 Oktober 2022, 17:08:07
Und zur anderen Frage: Habe das hier gefunden:
https://forum.fhem.de/index.php/topic,115259.msg1232877.html#msg1232877 (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 ...
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: andreas_r am 11 Oktober 2022, 19:44:52
Wäre super, wenn Du das hier zumindest posten könntest.

VG, Andreas
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: mr_petz am 11 Oktober 2022, 21:10:36
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:

@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:

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

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...
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: OdfFhem am 11 Oktober 2022, 21:16:39
@andreas_r, @mr_petz

Kann ich gerne posten, wird aber nix vor Freitag ...
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: andreas_r am 12 Oktober 2022, 08:25:07
@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
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: OdfFhem am 14 Oktober 2022, 23:43:28
Zitat von: OdfFhem am 11 Oktober 2022, 21:16:39
Kann ich gerne posten, wird aber nix vor Freitag ...

... gerade noch Freitag  ;D


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)

    //
    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)

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

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

Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: mr_petz am 15 Oktober 2022, 00:32:54
Zitat von: OdfFhem am 14 Oktober 2022, 23:43:28
... gerade noch Freitag  ;D

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

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

LG
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: OdfFhem am 15 Oktober 2022, 08:28:01
Zitat von: mr_petz am 15 Oktober 2022, 00:32:54
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.
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: andreas_r am 15 Oktober 2022, 17:09:11
@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!
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: andreas_r am 17 Oktober 2022, 13:29:51
Ich habe die Änderungen mal als Pull Request gestellt

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


VG, Andreas
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: C0mmanda am 18 Oktober 2022, 18:32:43
Zitat von: Dracolein am 10 Oktober 2022, 10:20:49
<ftui-tab view="View2" size="large" timeout="60">
kombiniert mit
<ftui-tab view="View1" size="large" active>

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

Moin,

würde das auch gern bei mir einbauen, allerdings sehen die <ftui-tab> Tags bei mir anders aus?!

Bei mir werden die Tabs mit
<ftui-tab-view id="View1">

geöffnet, nicht wie in deinem Beispiel mit

<ftui-tab view="View1">

Die Parameter funktionieren bei mir auch nicht...
Muss ich meine index.html umarbeiten oder was wäre hier die Lösung?

Vielen Dank!
Gruß
Sascha
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: mr_petz am 18 Oktober 2022, 20:00:14
setz doch einfach den ftui-tab blind mit rein und Verweise auf deinen ftui-tab-view:
Bsp:

<ftui-tab view="View1" style="pointer-events:none;min-height:0;width:0;height:0" active></ftui-tab>
<ftui-tab-view id="View1" size="large"></ftui-tab-view>


Ich frage mich nur wie du die ftui-tab-view Seiten aufrufst???

LG
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: OdfFhem am 18 Oktober 2022, 20:19:23
@C0mmanda

Zitat von: mr_petz am 18 Oktober 2022, 20:00:14
Ich frage mich nur wie du die ftui-tab-view Seiten aufrufst???

Das frage ich mich auch gerade ... wäre interessant, wie Du die Views "verwaltest" ... kannst Du einen kleinen Ausschnitt zeigen ?
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: C0mmanda am 18 Oktober 2022, 22:24:45
Oh Mann... :(
Jetzt hab ich es auch gefunden..

Nutze komplett den Standard, habe aber an der falschen Stelle geschaut. Sorry.
Fange gerade erst mit FTUI3 an und finde mich noch nicht so gut zurecht.

Es funktioniert jetzt, Danke! :)

Gruß
Titel: Antw:[FTUI3] Sprung zur Startseite
Beitrag von: andreas_r am 30 Oktober 2022, 21:40:38
Nur noch der Vollständigkeit halber: Setstate hat den Pull Request (https://github.com/knowthelist/ftui/pull/42 (https://github.com/knowthelist/ftui/pull/42)) dankenswerterweise übernommen. Die Funktion ist jetzt also im Standard vorhanden.
Thanks@all!

VG, Andreas