FTUI3: Zweistufiges Menü

[Prof. Dr. Peter Henning]

Ein für mich noch ungelöstes Problem ist, in FTUI3 ein zweistufiges Menü zu realisieren.
In FTUI2 geht dies mit den Pagetabs problemlos

Ziel:
1. Zeile Tabs mit thematischen Icons. z.B. "Etagen", "Kontrolle", "Medien", "Energie"
2. Zeile Tabs mit weiteren Icons, z.B.
-- wenn das obere Tab auf "Etagen" steht: "Erdgeschoss", "Obergeschoss" etc.
-- wenn das obere Tab auf "Medien" steht: "Fernseher", "Blu-Ray", "Musik"

und natürlich dann darunter der jeweilige Content, siehe Bilder 1-3.

Für diesen Content gibt es template files, z.B. für das Bedienen eines Rollladens

Code Auswählen Erweitern

<ftui-column>
    <ftui-row>
      <ftui-slider max="100" is-vertical
       [(value)]="{{device}}">
       </ftui-slider>
    </ftui-row>
    <ftui-label text="{{label}}" class="size-1"></ftui-label>
</ftui-column>
Diese sind wiederum per ftui-content-Tag eingebettet in die jeweils aufgerufene Inhaltsdatei der zweituntersten Ebene, z.B.

Code Auswählen Erweitern

<ftui-grid base-width="60" base-height="60" margin="1" shape="round">
    <!-- Fenster Arbeitszimmer-->
    <ftui-grid-tile row="1" col="1" height="5" width="5" shape="round">
        <ftui-grid-header>Fenster Arbeitszimmer</ftui-grid-header>
        <ftui-row>
            <ftui-content file="window.html" device="AZ.Fen.K:pct" label="Dach L"></ftui-content>
            <ftui-content file="window.html" device="AZ.Fen.G:pct" label="Dach L"></ftui-content>
        </ftui-row>
    </ftui-grid-tile>
    <!-- Rollläden Arbeitszimmer-->
    <ftui-grid-tile row="1" col="6" height="5" width="5" shape="round">
        <ftui-grid-header>Rollläden Arbeitszimmer</ftui-grid-header>
        <ftui-row>
            <ftui-content file="roll.html" device="AZ.Roll.K:pct" label="Dach L"></ftui-content>
            <ftui-content file="roll.html" device="AZ.Roll.G:pct" label="Dach R"></ftui-content>
        </ftui-row>
    </ftui-grid-tile>
    <!-- Leuchten Gästezimmer-->
    <ftui-grid-tile row="6" col="1" height="5" width="5" shape="round">
    <ftui-grid-header>Leuchten Gästezimmer</ftui-grid-header>
    <ftui-row>
    <ftui-column width="10%">
    <ftui-content file="light.html" device="GZ.Strip" label="Strip"></ftui-content>
    <ftui-content file="light.html" device="GZ.4x" label="Decke"
    ></ftui-content>
    </ftui-column>
    </ftui-row>
    </ftui-grid-tile>
    <!-- Rollläden Gästezimmer-->
    <ftui-grid-tile row="6" col="6" height="5" width="5" shape="round">
        <ftui-grid-header>Rollläden Gästezimmer</ftui-grid-header>
        <ftui-row>
            <ftui-content file="roll.html" device="GZ.Roll.D:pct" label="Dach"></ftui-content>
            <ftui-content file="roll.html" device="GZ.Roll.F:pct" label="Giebel"></ftui-content>
        </ftui-row>
    </ftui-grid-tile>
</ftui-grid>

Was ich bisher ausprobiert habe, sind die folgenden Möglichkeiten:

A: Verschachtelte <ftui-tab> Einträge
Das funktioniert im Prinzip, allerdings kann das Attribut "active" mit der Zweistufigkeit nichts anfangen - von den Tabs 1. und 2. Stufe wird immer nur eines als "active" angesehen und entsprechend eingefärbt. Außerdem müssen die Tabs der 2. Stufe in jeder "View" der 2. Stufe ebenfalls definiert werden. Man kann also _nicht_, wie bei FTUI2 mit den Pagetabs, die beiden Ebenen sauber voneinander trennen. Das mit der Farbgebung der Icons lässt sich möglicherweise hinbekommen, indem man das "Etagen"-icon auf der obersten Ebene mit einem Mapping versieht. Allerdings habe ich bisher nicht herausbekommen, welche Variable ich hier abfragen kann, um herauszufinden, welche Datei auf der zweituntersten Ebene (also z.B. "Erdgeschoss") gerade geladen ist. Weiterer Nachteil: Natürlich merkt sich die Oberfläche nicht, welche Datei der zweituntersten Ebene geladen war, wenn man die oberste Ebene wechselt.
Also z.B.: "Etagen"->"Erdgeschoss" sei default, wechsele dies auf "Obergeschoss", wechsele in der obersten Ebene auf "Medien", wechsele zurück auf "Etagen" - und lande nicht bei "Obergeschoss", sondern wieder beim default "Erdgeschoss".

B: <ftui-popup> für die Dateien der zweituntersten Ebene, also z.B. "Erdgeschoss".
Problem dabei ist, dass das Hauptfenster den Fokus verliert, wenn das Popup erscheint. Man muss also zweimal auf das Icon "Medien" klicken, um dorthin zu wechseln - und natürlich ist das Hintergrundfenster auch abgeblendet, siehe 2. Bild.

C: <ftui-swiper> für die Dateien der zweituntersten Ebene.
Das funktioniert vom Wechsel her ganz nett, siehe 3. Bild. Allerdings frisst FTUI3 in diesem Prozess die Höhenangaben der Zellen für Slider und die "column"-Attribute, die in den beiden anderen Möglichkeiten für eine vertikale Anordnung sorgen.

D: Einbetten der kompletten 2. Ebene in ein <iframe>.
Das geht gar nicht, die Daten der zweituntersten Ebene werden nicht mehr richtig dargestellt. Und die Tab-Leiste der 2. Ebene verschwindet komplett, sobald einer der Tabs dort ausgewählt wird

[Eisix]

Hallo,

Ich habe es anders angeordnet, also klassisch 1 Ebene links(tab-view) und dann 2 Ebene unten. Damit kann ich dann die einzelnen Player durchschalten über hidden.
 

Code Auswählen Erweitern


<ftui-grid base-width="72" base-height="59" margin="1">
␀␀␀␀␀␀␀␀<ftui-grid-tile row="17" col="1" height="1" width="18"  style="background-color: #0d0d0d !important;">
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-row width="40%">

<!-- iPad  -->

␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-button class="size-1" shape="circle" color="third" fill="solid" (value)="FTUI3_Musik" states="Bose"
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀[class-name]="FTUI3_Musik |  map('Bose:size-2, Onkyo:myimage, MediaPad:myimage, Yoga:myimage, LMS:myimage')"
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀><ftui-icon class="size-1" [class-name]="FTUI3_Musik | map('Bose:size-2, Onkyo:size-1, MediaPad:size-1, Yoga:size-1, LMS:size-1')" name="Bose_Soundtouch10"></ftui-icon>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-button>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-button class="size-1" shape="circle" color="third" fill="solid" (value)="FTUI3_Musik" states="Onkyo"
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀[class-name]="FTUI3_Musik |  map('Bose:myimage, Onkyo:size-2, MediaPad:myimage, Yoga:myimage, LMS:myimage')"
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀><ftui-icon class="size-1" [class-name]="FTUI3_Musik | map('Bose:size-1, Onkyo:size-2, MediaPad:size-1, Yoga:size-1, LMS:size-1')" name="onkyo_tx-nr807"></ftui-icon>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-button>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-button class="size-1" shape="circle" color="third" fill="solid" (value)="FTUI3_Musik" states="MediaPad"
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀[class-name]="FTUI3_Musik |  map('Bose:myimage, Onkyo:myimage, MediaPad:size-2, Yoga:myimage, LMS:myimage')"
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀><ftui-icon class="size-1" [class-name]="FTUI3_Musik | map('Bose:size-1, Onkyo:size-1, MediaPad:size-2, Yoga:size-1, LMS:size-1')" name="mediapad" ></ftui-icon>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-button>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-button class="size-1" shape="circle" color="third" fill="solid" (value)="FTUI3_Musik" states="Yoga"
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀[class-name]="FTUI3_Musik |  map('Bose:myimage, Onkyo:myimage, MediaPad:myimage, Yoga:size-2, LMS:myimage')"
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀><ftui-icon class="size-1" [class-name]="FTUI3_Musik | map('Bose:size-1, Onkyo:size-1, MediaPad:size-1, Yoga:size-2, LMS:size-1')" name="yoga"></ftui-icon>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-button>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-button class="size-1" shape="circle" color="third" fill="solid" (value)="FTUI3_Musik" states="LMS"
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀[class-name]="FTUI3_Musik |  map('Bose:myimage, Onkyo:myimage, MediaPad:myimage, Yoga:myimage, LMS:size-2')"

><ftui-icon class="size-1" [class-name]="FTUI3_Musik | map('Bose:size-1, Onkyo:size-1, MediaPad:size-1, Yoga:size-1, LMS:size-2')" name="logitech"></ftui-icon>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-button>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-row>
␀␀␀␀␀␀␀␀</ftui-grid-tile>
<!-- Onkyo-Player -->
 ␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-grid-tile row="1" col="1" height="16" width="7"  class="mybgimage" [hidden]="FTUI3_Musik | map('Onkyo:false, `[Bose|MediaPad|Yoga|LMS]`:true')">
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<header>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀Onkyo Player
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</header>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-content file="templates/Media_Player.html" PLAYER="a6408518c456"></ftui-content>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-grid-tile>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-grid-tile row="1" col="8" height="2" width="7"  class="mybgimage" [hidden]="FTUI3_Musik | map('Onkyo:false, `[Bose|MediaPad|Yoga|LMS]`:true')">
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<header>Radiosender</header>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-content file="templates/Media_Radio.html" PLAYER="a6408518c456"></ftui-content>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-grid-tile>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-grid-tile row="3" col="8" height="2" width="7"  class="mybgimage" [hidden]="FTUI3_Musik | map('Onkyo:false, `[Bose|MediaPad|Yoga|LMS]`:true')">
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<header>Playlists</header>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-content file="templates/Media_Playlist.html" PLAYER="a6408518c456"></ftui-content>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-grid-tile>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-grid-tile class="mybgimage" row="5" col="8" height="12" width="11"  class="" [hidden]="FTUI3_Musik | map('Onkyo:false, `[Bose|MediaPad|Yoga|LMS]`:true')">
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<header>Medien</header>

<ftui-content file="templates/Media_Medienliste.html" PLAYER="a6408518c456"></ftui-content>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-grid-tile>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-grid-tile row="1" col="15" height="4" width="4"  class="mybgimage" [hidden]="FTUI3_Musik | map('Onkyo:false, `[Bose|MediaPad|Yoga|LMS]`:true')">
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-content file="templates/Media_Lautstaerke.html" PLAYER="a6408518c456"></ftui-content>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-grid-tile>
<!-- Onkyo-Player -->

<!-- Bose-Player -->
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-grid-tile row="1" col="1" height="16" width="7"  class="mybgimage" [hidden]="FTUI3_Musik | map('Bose:false, `[Onkyo|MediaPad|Yoga|LMS]`:true')">
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<header>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀Bose Player
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</header>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-content file="templates/Media_Player.html" PLAYER="b827eb969346"></ftui-content>
 ␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-grid-tile>

...


Vielleicht bringt dich der Ansatz weiter.

Gruß
Eisix

[Prof. Dr. Peter Henning]

Danke für das Beispiel, ich schau es mir mal an.

LG
pah