FTUI version 3

[OdfFhem]

@moonsorrox

Lösungen helfen also nicht immer 


Ich nutze in der Hauptseite z.B.:

Code Auswählen Erweitern


  <ftui-grid-tile row="7" col="1" height="2" width="13" shape="round">
    <ftui-row>
      <ftui-content file="content_abfall.html" device="Abfalltermin"></ftui-content>
      ...
    </ftui-row>
  </ftui-grid-tile>

  <ftui-grid-tile row="13" col="1" height="4" width="26" shape="round">
    <ftui-row>
      <ftui-content file="content_thermostat.html" device="HM_xyz_Clima"></ftui-content>
      ...
    </ftui-row>
  </ftui-grid-tile>


Sieht ja recht ähnlich aus und funktioniert problemlos - vielleicht ist Dein Problem dann eher im content-File ...

[octek0815]

Danke Dir

Du könntest es auch noch ein wenig ausdünnen und eleganter machen.

Beispiel:

Popup Aufruf:

Code Auswählen Erweitern


<ftui-button (value)="System_Verpasste_Anrufe" states='0' fill="clear">
<ftui-icon name="phone1" class="hop" popup-target="popup-verpasste-anrufe"></ftui-icon>
<ftui-badge [text]="System_Verpasste_Anrufe"></ftui-badge>
</ftui-button>


Popup:

Code Auswählen Erweitern


<ftui-popup id="popup-verpasste-anrufe" timeout="60" width="89%" height="74%">
<header>Verpasste Anrufe</header>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe.html"></ftui-content>
</ftui-popup>



content-popup-verpasste-anrufe.html

Code Auswählen Erweitern


<ftui-column>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="1"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="2"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="3"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="4"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="5"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="6"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="7"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="8"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="9"></ftui-content>
<ftui-content file="./_contents/tablet-flur/content-popup-verpasste-anrufe-content-anrufer.html" nummer="10"></ftui-content>
</ftui-column>


content-popup-verpasste-anrufe-content-anrufer.html

Code Auswählen Erweitern


<ftui-row>
<ftui-column align-items="left" width="1%">
<ftui-icon [name]="System_Fritzbox_Anruferliste:{{nummer}}-state | map('`<=`:_phone_call_end_out, `<= X`:_phone_missed_out, `=>`:_phone_call_end_in, `=> X`:_phone_missed_in, `=> ((o))`:_phone_ring_in, `=> [=]`:_phone_call, `=> O_O`:_phone_answering, `<= ((o))`:_phone_ring_out, `<= [=]`:_phone_call')" [color]="System_Fritzbox_Anruferliste:{{nummer}}-state | map('`<=`:green, `<= X`:green, `=>`:blue, `=> X`:danger, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:blue, `<= ((o))`:green, `<= [=]`:green')"></ftui-icon>
</ftui-column>
<ftui-column align-items="left" width="17%">
<ftui-label [text]="System_Fritzbox_Anruferliste:{{nummer}}-timestamp"><span slot="start">&nbsp;&nbsp;</span></ftui-label>
</ftui-column>
<ftui-column align-items="left" width="17%">
<ftui-label style="overflow:hidden; text-overflow:ellipsis;" [text]="System_Fritzbox_Anruferliste:{{nummer}}-number"></ftui-label>
</ftui-column>
<ftui-column align-items="left" width="45%">
<ftui-label style="overflow:hidden; text-overflow:ellipsis;" [text]="System_Fritzbox_Anruferliste:{{nummer}}-name"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="7%">
<ftui-label [text]="System_Fritzbox_Anruferliste:{{nummer}}-duration"></ftui-label>
</ftui-column>
</ftui-row>


Styling, Größen, Klassen usw. habe ich entfernt, müsstest Du dann selbst definieren.
So sparst Du Code und es macht das Ganze übersichtlicher.

Grüße
Olli

[OdfFhem]

@moonsorrox

Code Auswählen Erweitern


  <ftui-slider [(value)]=SB3_DreamSqueezy:volume"
            [color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:blue, 50:yellow, 70:crimson')"
    [text]="SB3_DreamSqueezy:volume" text="0"
    max="100" tick="10" wide-tick="50" handle="" has-ruler has-wide-ticks>
  </ftui-slider>


Hinter [(value)]= fehlt ein Anführungszeichen ... falls der Code 1:1 mit dem verwendeten übereinstimmt 

[ToM_ToM]

Hey, ich habe ein Problem mit dem circlemenü seit ich bei den Buttons value und states hinzugefügt habe, und auf einen button clicke, nachdem sich das circlemenü geöffent hat, schließt es zwar und der Befehl wird ausgeführt, das Display (quasi das unkle overlay) bleibt aber. Man kann dann nichts mehr bedienen.

Code Auswählen Erweitern


          <ftui-circlemenu class="size-5">
                <ftui-icon [name]="HM_KU_Shutter:1.LEVEL | map('0:fts_window_2w, 20:fts_shutter_20, 30:fts_shutter_30, 40:fts_shutter_40, 50:fts_shutter_50, 60:fts_shutter_60, 80:fts_shutter_80, 100:fts_shutter_100')" path="/fhem/www/images/openautomation"></ftui-icon>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="0">
<ftui-icon name="fts_window_2w" path="/fhem/www/images/openautomation"></ftui-icon>
                </ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="20">
<ftui-icon name="fts_shutter_20" path="/fhem/www/images/openautomation"></ftui-icon>
                </ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="30">
<ftui-icon name="fts_shutter_30" path="/fhem/www/images/openautomation"></ftui-icon>
                </ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="40">
<ftui-icon name="fts_shutter_40" path="/fhem/www/images/openautomation"></ftui-icon>
                </ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="50">
<ftui-icon name="fts_shutter_50" path="/fhem/www/images/openautomation"></ftui-icon>
                </ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="60">
<ftui-icon name="fts_shutter_60" path="/fhem/www/images/openautomation"></ftui-icon>
                </ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="80">
<ftui-icon name="fts_shutter_80" path="/fhem/www/images/openautomation"></ftui-icon>
                </ftui-button>
<ftui-button shape="circle" fill="outline" color="light" (value)="HM_KU_Shutter:control" states="100">
<ftui-icon name="fts_shutter_100" path="/fhem/www/images/openautomation"></ftui-icon>
                </ftui-button>
          </ftui-circlemenu>


Hat jemand eine Idee?

[Eisix]

Habe ich auch schon mehrfach gehabt, tritt seit der letzten Änderungen an ftui-grid auf wenn ich mich richtig erinnere.
Konnte aber noch nicht genau festmachen woran das liegt.

Gruß
Eisix

[khk123]

Doch das geht.

Probiere mal so, Du hast übrigens ein </ftui-row> und ein</ftui-column> vergessen:

Code Auswählen Erweitern


<ftui-row>
   <ftui-column>
       <ftui-row popup-target="wetter">
          <ftui-label>Heute</ftui-label>
      </ftui-row>
  </ftui-column>
</ftui-row>

oder wenn die gesamte column als klickbarer Bereich genutzt werden soll, so

Code Auswählen Erweitern


<ftui-row>
   <ftui-column popup-target="wetter">
       <ftui-row>
          <ftui-label>Heute</ftui-label>
      </ftui-row>
  </ftui-column>
</ftui-row>

@grossmaggul
Die letzte Code-Zeile war leider etwas unglücklich formatiert. </ftui-row> und </ftui-column> sind definiert, aber nicht mit im Code-Schnipsel. Ich hatte versucht durch .... anzudeuten.
Korrekt wäre es so gewesen:

Code Auswählen Erweitern


ftui-row popup-target="wetter">
   <ftui-column>
       <ftui-row>
          <ftui-label popup-target="wetter">Heute</ftui-label>
      </ftui-row>
...


Deine erste Version funktioniert bei mir. Die zweite allerdings nicht.

@SirMarco
Deine Version geht. Aber sobald ich noch <ftui-column> reinpacke geht es nicht mehr.

Code Auswählen Erweitern


<ftui-row popup-target="wetter" height="50px" style="background-color:red">
<ftui-column>
<ftui-label>Heute</ftui-label>
</ftui-column> 
</ftui-row>

<ftui-popup id="wetter" timeout="0" width="400px" height="400px" shape="round">
  heute
</ftui-popup>


Was mir noch aufgefallen ist. Wenn der Cursor über dem Labeltext "Heute" steht wird zwar der Auswahlcursor immer noch angezeigt, aber es wird nicht mehr auf den Klick reagiert. Auch muss die popup-id anscheinend eindeutig sein, denn wenn zweimal die id wetter vorkommt, dann werden auch beide popups übereinander gelegt.

[moonsorrox]

@moonsorrox

Hinter [(value)]= fehlt ein Anführungszeichen ... falls der Code 1:1 mit dem verwendeten übereinstimmt 

ja Danke der fehlt tatsächlich und habe ich ergänzt manchmal sind es die kleinen Dinge...

Warum er das zweite Fenster nicht anzeigt habe ich bisher noch nicht gefunden, ich hattee das schon einmal in meinem Code, vor einiger Zeit.
Bisher hatte ich das dann so gelöst, dass ich es in die index.html eingetragen habe, warum das auslagern nur bei bestimmten Codeteilen nicht funktioniert ist mir noch ein Rätsel.

Der Mediaplayer ist exakt der selbe nur eben mit meiner anderen Box, soll heißen es ist nur der device Name ausgetauscht, der Slider mit dem Fehler [(value)]= fehlt ein Anführungszeichen - ist da noch gar nicht dabei weil ich diesen erst am bauen bin. Daran kann es also nicht liegen.

Aber das er gar nichts anzeigt ist mir noch nicht klar....  zumal jetzt das zweite mal

[grossmaggul]

Du könntest es auch noch ein wenig ausdünnen und eleganter machen.

Beispiel:

Ich habe jetzt auch versucht die Anrufliste mittels content auszulagern, aber irgendwie gibt das Probleme mit der Formatierung.
Egal was ich anstelle, mal wird die Liste korrekt angezeigt, dann mal wieder so wie unten.

Meine content Calllist sieht so aus:

Code Auswählen Erweitern

<ftui-row>
    <!-- Icon -->
    <ftui-column align-items="left" width="10px">
        <ftui-icon path="../images/openautomation/"
                   [name]="fritzlist:{{nummer}}-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out,  `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
                [color]="fritzlist:{{nummer}}-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')">
        </ftui-icon>
    </ftui-column>

    <!-- Name -->
    <ftui-column align-items="left">
        <ftui-label [text]="fritzlist:{{nummer}}-timestamp"></ftui-label>
    </ftui-column>

    <!-- Nummer -->
    <ftui-column align-items="left">
        <ftui-label [text]="fritzlist:{{nummer}}-number"></ftui-label>
    </ftui-column>

    <!-- Timestamp -->
    <ftui-column align-items="left">
        <ftui-label [text]="fritzlist:{{nummer}}-name"></ftui-label>
    </ftui-column>

    <!-- Dauer -->
    <ftui-column align-items="left">
        <ftui-label [text]="fritzlist:{{nummer}}-duration"></ftui-label>
    </ftui-column>
   
    <!-- Anruferbild -->
    <ftui-column align-items="left">
        <ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/"
                    [src]="fritzlist:{{nummer}}-image" width="40px" shape="circle"></ftui-image>
    </ftui-column>
</ftui-row>

Das Popup so:

Code Auswählen Erweitern

<ftui-column>
    <ftui-content file="./content/calllist.html" nummer="1"></ftui-content>

    <ftui-content file="./content/calllist.html" nummer="2"></ftui-content>

    <ftui-content file="./content/calllist.html" nummer="3"></ftui-content>

    <ftui-content file="./content/calllist.html" nummer="4"></ftui-content>

    <ftui-content file="./content/calllist.html" nummer="5"></ftui-content>
   
    <ftui-content file="./content/calllist.html" nummer="6"></ftui-content>
   
    <ftui-content file="./content/calllist.html" nummer="7"></ftui-content>
</ftui-column>

Ist da ein Fehler drin, den ich nicht sehe?

[moonsorrox]

@grossmaggul

ich wollte das mal nachbauen um zu schauen ob es bei mir funktioniert, aber ich bekomme damit

Code Auswählen Erweitern

vAnrufliste:{{nummer}}-state

gar nichts angezeigt... 

[moonsorrox]

@setstate
ich muss jetzt nochmal fragen wegen der Auslagerung einiger Seiten oder auch Popups, welche mir ums verrecken absolut nicht angezeigt werden.

selbst wenn ich den selben Inhalt in die ausgelagerte Datei schreibe wird mir nichts angezeigt, dass Fenster ist einfach leer ich begreife es absolut nicht
Beide Dateien sind natürlich vorhanden... muss ich evtl eine ID vergeben oder warum geht das nicht. Ich habe selbiges Problem auch noch mit einem Popup, aber das lasse ich hier mal.

Dafür mal hier das Beispiel zweier Mediaplayer. (mit Screenshot)
Ich habe in der index.html diese beiden Player folgendermaßen eingebunden. Der Code des unteren ist rechts im Screenshot zu sehen

Code Auswählen Erweitern

<ftui-tab-view id="View4">
      <!--ftui-grid-tile row="4" col="2" height="5" width="9">
        <div class="size-10">Tab4</div>
      </ftui-grid-tile-->
<ftui-grid-tile row="4" col="2" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia1.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>

<ftui-grid-tile row="4" col="19" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia.html"></ftui-content>
</ftui-row>
</ftui-grid-tile> 
    </ftui-tab-view>

hier mal ein Media Player dazu

Code Auswählen Erweitern

<header class="size-4 thin"><ftui-label color="MediumSpringGreen">DreamSqueezy - Mediaplayer</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="45%" color="">
<ftui-image [src]="SB3_DreamSqueezy:coverarturl" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%" color="">
<ftui-dropdown [list]="SB3_DreamSqueezy:ftuiPlaylistsAlias" [(value)]="SB3_DreamSqueezy:playlists" [color]="SB3_DreamSqueezy:playlists"></ftui-dropdown>
<ftui-label class="size-3" color="darkorange" [text]="SB3_DreamSqueezy:currentArtist"></ftui-label>
<ftui-label class="size-2" color="white" [text]="SB3_DreamSqueezy:currentTitle"></ftui-label>
</ftui-column>
</ftui-row>
     
<!-- Fortschrittanzeige -->
<ftui-row height="10%">
<ftui-column align-items="right" width="20%">
<ftui-label [text]="SB3_DreamSqueezy:duration | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="SB3_DreamSqueezy:duration" [(value)]="SB3_DreamSqueezy:currentTrackPosition" handle="none" color="royalblue1"></ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="SB3_DreamSqueezy:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
</ftui-row>

<!-- Power Botton -->
<ftui-row height="10%">
<ftui-column width="25%">
<ftui-row>
<ftui-button [(value)]="SB3_DreamSqueezy" [fill]="SB3_DreamSqueezy | map('on:solid, off:outline')"
[color]="SB3_DreamSqueezy | map('on:crimson, off:MediumSpringGreen')" shape="normal">
<ftui-icon [name]="SB3_DreamSqueezy | map('on:power-off, off:power-off')"
   [color]="SB3_DreamSqueezy | map('on:black, off:MediumSpringGreen')">
</ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>

<!-- Bedienungsleiste -->
<ftui-column width="75%">
<ftui-row>
<!-- Previous -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:prev" [color]="SB3_DreamSqueezy | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-backward" [name]="SB3_DreamSqueezy:prev | map('on:step-backward, off:step-backward')" [color]="SB3_DreamSqueezy | map('on:white, off:white')"></ftui-icon>
</ftui-button>

<!-- Play/Pause -->
<ftui-button shape="normal" fill="outline" [value]="SB3_DreamSqueezy:playStatus | map('playing: play, paused|stopped: pause')" (value)="SB3_DreamSqueezy" states="play,pause" [color]="SB3_DreamSqueezy:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:playStatus | map('playing:pause1, paused|stopped: play')" [color]="SB3_DreamSqueezy:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>

<!-- Stop -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:stop" [color]="SB3_DreamSqueezy:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:playStatus | map('playing:stop, paused|stopped:stop')" [color]="SB3_DreamSqueezy:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>

<!-- Next -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:next" [color]="SB3_DreamSqueezy | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-forward" [name]="SB3_DreamSqueezy:next | map('on:step-forward, off:step-forward')" [color]="SB3_DreamSqueezy | map('on:white, off:white')"></ftui-icon>
</ftui-button>

<!-- Shuffle -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:shuffle" states="off,song,album" [color]="SB3_DreamSqueezy:shuffle | map('off:royalblue1, song:royalblue1, album:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:shuffle | map('off:lines, song:random, album:image')" states="off,song,album" [color]="SB3_DreamSqueezy:shuffle | map('off:white, song:white, album:white')"></ftui-icon>
</ftui-button>

<!-- Repeat -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:repeat" states="off,one,all" [color]="SB3_DreamSqueezy:repeat | map('off:royalblue1, one:royalblue1, all:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:repeat | map('off:ban, one:repeat1, all:circle-o-notch')" states="off,song,album" [color]="SB3_DreamSqueezy:repeat | map('off:white, one:white, all:white')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>

<!-- Volume -->
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>


[octek0815]

@setstate

Wäre es möglich bei ftui-label noch eine unit-size (in %) einzuführen.
Derzeit nutze ich <span slot="end"> und eine eigene Klasse um die Unit-Größe auf 50% zu reduzieren.

Grüße
Olli

[SirMarco]

@setstate
ich muss jetzt nochmal fragen wegen der Auslagerung einiger Seiten oder auch Popups, welche mir ums verrecken absolut nicht angezeigt werden.

selbst wenn ich den selben Inhalt in die ausgelagerte Datei schreibe wird mir nichts angezeigt, dass Fenster ist einfach leer ich begreife es absolut nicht
Beide Dateien sind natürlich vorhanden... muss ich evtl eine ID vergeben oder warum geht das nicht. Ich habe selbiges Problem auch noch mit einem Popup, aber das lasse ich hier mal.

Dafür mal hier das Beispiel zweier Mediaplayer. (mit Screenshot)
Ich habe in der index.html diese beiden Player folgendermaßen eingebunden. Der Code des unteren ist rechts im Screenshot zu sehen

Code Auswählen Erweitern

<ftui-tab-view id="View4">
      <!--ftui-grid-tile row="4" col="2" height="5" width="9">
        <div class="size-10">Tab4</div>
      </ftui-grid-tile-->
<ftui-grid-tile row="4" col="2" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia1.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>

<ftui-grid-tile row="4" col="19" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia.html"></ftui-content>
</ftui-row>
</ftui-grid-tile> 
    </ftui-tab-view>

hier mal ein Media Player dazu

Code Auswählen Erweitern

<header class="size-4 thin"><ftui-label color="MediumSpringGreen">DreamSqueezy - Mediaplayer</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="45%" color="">
<ftui-image [src]="SB3_DreamSqueezy:coverarturl" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%" color="">
<ftui-dropdown [list]="SB3_DreamSqueezy:ftuiPlaylistsAlias" [(value)]="SB3_DreamSqueezy:playlists" [color]="SB3_DreamSqueezy:playlists"></ftui-dropdown>
<ftui-label class="size-3" color="darkorange" [text]="SB3_DreamSqueezy:currentArtist"></ftui-label>
<ftui-label class="size-2" color="white" [text]="SB3_DreamSqueezy:currentTitle"></ftui-label>
</ftui-column>
</ftui-row>
     
<!-- Fortschrittanzeige -->
<ftui-row height="10%">
<ftui-column align-items="right" width="20%">
<ftui-label [text]="SB3_DreamSqueezy:duration | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="SB3_DreamSqueezy:duration" [(value)]="SB3_DreamSqueezy:currentTrackPosition" handle="none" color="royalblue1"></ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="SB3_DreamSqueezy:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
</ftui-row>

<!-- Power Botton -->
<ftui-row height="10%">
<ftui-column width="25%">
<ftui-row>
<ftui-button [(value)]="SB3_DreamSqueezy" [fill]="SB3_DreamSqueezy | map('on:solid, off:outline')"
[color]="SB3_DreamSqueezy | map('on:crimson, off:MediumSpringGreen')" shape="normal">
<ftui-icon [name]="SB3_DreamSqueezy | map('on:power-off, off:power-off')"
   [color]="SB3_DreamSqueezy | map('on:black, off:MediumSpringGreen')">
</ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>

<!-- Bedienungsleiste -->
<ftui-column width="75%">
<ftui-row>
<!-- Previous -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:prev" [color]="SB3_DreamSqueezy | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-backward" [name]="SB3_DreamSqueezy:prev | map('on:step-backward, off:step-backward')" [color]="SB3_DreamSqueezy | map('on:white, off:white')"></ftui-icon>
</ftui-button>

<!-- Play/Pause -->
<ftui-button shape="normal" fill="outline" [value]="SB3_DreamSqueezy:playStatus | map('playing: play, paused|stopped: pause')" (value)="SB3_DreamSqueezy" states="play,pause" [color]="SB3_DreamSqueezy:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:playStatus | map('playing:pause1, paused|stopped: play')" [color]="SB3_DreamSqueezy:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>

<!-- Stop -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:stop" [color]="SB3_DreamSqueezy:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:playStatus | map('playing:stop, paused|stopped:stop')" [color]="SB3_DreamSqueezy:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>

<!-- Next -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:next" [color]="SB3_DreamSqueezy | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-forward" [name]="SB3_DreamSqueezy:next | map('on:step-forward, off:step-forward')" [color]="SB3_DreamSqueezy | map('on:white, off:white')"></ftui-icon>
</ftui-button>

<!-- Shuffle -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:shuffle" states="off,song,album" [color]="SB3_DreamSqueezy:shuffle | map('off:royalblue1, song:royalblue1, album:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:shuffle | map('off:lines, song:random, album:image')" states="off,song,album" [color]="SB3_DreamSqueezy:shuffle | map('off:white, song:white, album:white')"></ftui-icon>
</ftui-button>

<!-- Repeat -->
<ftui-button shape="normal" fill="outline" [(value)]="SB3_DreamSqueezy:repeat" states="off,one,all" [color]="SB3_DreamSqueezy:repeat | map('off:royalblue1, one:royalblue1, all:royalblue1')">
<ftui-icon [name]="SB3_DreamSqueezy:repeat | map('off:ban, one:repeat1, all:circle-o-notch')" states="off,song,album" [color]="SB3_DreamSqueezy:repeat | map('off:white, one:white, all:white')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>

<!-- Volume -->
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB3_DreamSqueezy:volume"
[color]="SB3_DreamSqueezy:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB3_DreamSqueezy:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>


Also bei mir werden beide Player angezeigt.
Lade doch mal deine komplette Index.html hoch

Ps: update gemacht?

Grüsse

[octek0815]

@setstate

Ich sehe in der Console vom Browser den im Bild dargestellten Fehler.
Ist das bedingt dadurch das ich mit hidden arbeite um Karten auszublenden?
Wenn ja, könnte man das abfangen?

Swiper nutze ich derzeit nur an einer Stelle. Hier der Code:

Code Auswählen Erweitern


<ftui-row>
<ftui-swiper id="dwd" scrollbar auto-play>
<ftui-content id="dwd_1" [hidden]="System_DWD_Wetter:a_count | map('0:true, 1:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_0"></ftui-content>
<ftui-content id="dwd_2" [hidden]="System_DWD_Wetter:a_count | map('0:true, 2:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_1"></ftui-content>
<ftui-content id="dwd_3" [hidden]="System_DWD_Wetter:a_count | map('0:true, 3:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_2"></ftui-content>
<ftui-content id="dwd_4" [hidden]="System_DWD_Wetter:a_count | map('0:true, 4:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_3"></ftui-content>
<ftui-content id="dwd_5" [hidden]="System_DWD_Wetter:a_count | map('0:true, 5:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_4"></ftui-content>
<ftui-content id="dwd_6" [hidden]="System_DWD_Wetter:a_count | map('0:true, 6:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_5"></ftui-content>
<ftui-content id="dwd_7" [hidden]="System_DWD_Wetter:a_count | map('0:true, 7:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_6"></ftui-content>
<ftui-content id="dwd_8" [hidden]="System_DWD_Wetter:a_count | map('0:true, 8:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_7"></ftui-content>
<ftui-content id="dwd_9" [hidden]="System_DWD_Wetter:a_count | map('0:true, 9:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_8"></ftui-content>
<ftui-content id="dwd_10" [hidden]="System_DWD_Wetter:a_count | map('0:true, 10:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_9"></ftui-content>
<ftui-content id="dwd_11" [hidden]="System_DWD_Wetter:a_count | map('0:true, 11:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_10"></ftui-content>
<ftui-content id="dwd_12" [hidden]="System_DWD_Wetter:a_count | map('0:true, 12:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_11"></ftui-content>
</ftui-swiper>
</ftui-row>


[setstate]

@setstate

Ich sehe in der Console vom Browser den im Bild dargestellten Fehler.
Ist das bedingt dadurch das ich mit hidden arbeite um Karten auszublenden?
Wenn ja, könnte man das abfangen?

Swiper nutze ich derzeit nur an einer Stelle. Hier der Code:

Code Auswählen Erweitern


<ftui-row>
<ftui-swiper id="dwd" scrollbar auto-play>
<ftui-content id="dwd_1" [hidden]="System_DWD_Wetter:a_count | map('0:true, 1:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_0"></ftui-content>
<ftui-content id="dwd_2" [hidden]="System_DWD_Wetter:a_count | map('0:true, 2:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_1"></ftui-content>
<ftui-content id="dwd_3" [hidden]="System_DWD_Wetter:a_count | map('0:true, 3:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_2"></ftui-content>
<ftui-content id="dwd_4" [hidden]="System_DWD_Wetter:a_count | map('0:true, 4:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_3"></ftui-content>
<ftui-content id="dwd_5" [hidden]="System_DWD_Wetter:a_count | map('0:true, 5:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_4"></ftui-content>
<ftui-content id="dwd_6" [hidden]="System_DWD_Wetter:a_count | map('0:true, 6:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_5"></ftui-content>
<ftui-content id="dwd_7" [hidden]="System_DWD_Wetter:a_count | map('0:true, 7:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_6"></ftui-content>
<ftui-content id="dwd_8" [hidden]="System_DWD_Wetter:a_count | map('0:true, 8:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_7"></ftui-content>
<ftui-content id="dwd_9" [hidden]="System_DWD_Wetter:a_count | map('0:true, 9:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_8"></ftui-content>
<ftui-content id="dwd_10" [hidden]="System_DWD_Wetter:a_count | map('0:true, 10:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_9"></ftui-content>
<ftui-content id="dwd_11" [hidden]="System_DWD_Wetter:a_count | map('0:true, 11:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_10"></ftui-content>
<ftui-content id="dwd_12" [hidden]="System_DWD_Wetter:a_count | map('0:true, 12:false')" file="./_contents/tablet-flur/content-popup-dwd-wetterwarung-swiper-content.html" warn-number="a_11"></ftui-content>
</ftui-swiper>
</ftui-row>


Den Fehler kann ich nicht nachvollziehen. Eigentlich läuft das so. Nur wartet das AutoPlay auch bei den nicht sichtbaren Slides 5s. Dadurch wirkt der Ablauf nicht gerade gleichmässig.

[octek0815]

Den Fehler kann ich nicht nachvollziehen. Eigentlich läuft das so. Nur wartet das AutoPlay auch bei den nicht sichtbaren Slides 5s. Dadurch wirkt der Ablauf nicht gerade gleichmässig.

Ich habe das hidden mal überall rausgenommen. Selber Fehler.

Nachtrag:

Es liegt auch nicht am Browser (Chrome). In Firefox das Selbe.