FTUI version 3

[octek0815]

@setstate

Mit dem letzten Update (made ftui-content more neutral in style) berücksichtigt der swiper bei content hidden nicht mehr.

Beispiel-Code:

Code Auswählen Erweitern


<ftui-row>
<ftui-swiper id="dwd" scrollbar auto-play interval="15">
<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>


Derzeit gibt es nur zwei Warnungen, es werden aber alle Swiper-Karten angezeigt.

[mr_petz]

Ich nochmal.
Wird es für das iframe auch wieder ein reload/refresh nach Zeit (wie in FTUI2: data-refresh="1") geben, oder geht das schon?

mfg Thomas

[setstate]

Perfekt. Vielen Dank! Läuft.

Hast du zum Dropdown noch ein paar Info's für uns?

Wie kann ich die list-Einträge mappen?
also sowas wie:

Code Auswählen Erweitern

list="weiss25:Weiß 25%, weiss50:Weiß 50%, rot:Rot"
oder:

Code Auswählen Erweitern

list="RauteMusik.FM%20Harder:RauteMusik-Harder, radio%20ffn%20101.9%20%28Hot%20AC%29:FFN"

ich habe einiges probiert... aber nichts klappt... und vorallem wie ist dann das linking zu "set"

ganz blicke ich durch FTUI 3 tatsächlich noch nicht durch... noch ist alles irgendwie "try and error"

Grüße^^

man kann jetzt die Liste als options - Kinderknoten angeben

Code Auswählen Erweitern


        <ftui-dropdown
          [value]="ftuitest:whiteValue"
          (value)="setreading ftuitest:whiteValue">
          <option value="white0">White 0%</option>
          <option value="white25">Weiß 25%</option>
          <option value="white50">Weiß 50%</option>
          <option value="white100">Weiß 100%</option>
        </ftui-dropdown>


[OdfFhem]

@octek0815, @setstate

Bzgl. Swiper habe ich ein wenig rumgespielt und nachvollzogen, dass die Badge-Darstellung nicht passt (s. angehängtes Bild).

• Die linke Kachel (ohne Swiper) zeigt eine typische Icon/Badge-Darstellung - funktioniert.


• Die mittlere Kachel (mit Swiper ; unveränderter Badge-Style) zeigt, dass die erste Badge-Darstellung (von der grauen Tonne) stehenbleibt - nur das Icon wechselt.


• Die rechte Kachel (mit swiper ; ab zweitem Badge mit "position:relative"-Style) zeigt, dass die erste Badge-Darstellung (von der grauen Tonne) nach wie vor stehenbleibt und das eigentlich erwartete Badge zumindest dargestellt wird.
  

Interessant ist weitherhin, dass der Swiper in der mittleren Kachel mit initialem autoplay keinen Wechsel vornimmt. Die Debug-Console zeigt aber, dass man stets zum scrollIntoView mit dem richtigen target kommt. Dann habe ich mal die dots aktiviert und man sieht, dass der active-dot wandert - die eigentliche Darstellung bleibt aber unverändert. Klickt man auf einen dot, wird die Darstellung aktualisiert, aber dann wandert wieder nur der dot. Schaltet man autoplay ab- und anschließend wieder an, dann kommt Schwung in die korrekte Darstellung. Bei der rechten Kachel klappt es ohne Zutun von Anfang an wie gewünscht ...

[setstate]

@OdfFhem

Kannst du den Test-Code bereitstellen, dann kann ich das schneller nachvollziehen.

Eigentlich müsste man sowas im JSfiddle, Stackblitz oder ähnlichem anbieten, um schneller debugged zu können. Habe es leider bis jetzt noch nicht hin bekommen oder es ist not for free.

[torte]

Hallöchen,

nach dem letzten update schein align-items="top"  bei row via content nicht mehr zu tun.
Muss das jetzt anders?

Grüße
Torte

[OdfFhem]

@setstate

Ich teste momentan vorrangig mit "Chromium - Version 86.0.4240.197 (Offizieller Build)".

Eben hatte ich auch noch unter "Firefox - 78.6.1esr" getestet.
- dort startet in der zweiten Kachel unmittelbar das autoplay
- beide swiper zeigen einen untenstehenden scrollbar ...
- das restliche Verhalten scheint identisch zum Chromium


Habe das Test-Exemplar noch ein wenig reduziert. Verhalten ist noch identisch und ich hoffe, dass es hilft ...

Code Auswählen Erweitern


<!DOCTYPE html>
<html>

<head>
  <base href="../" />
  <script src="ftui.js"></script>
  <link href="ftui.css" rel="stylesheet">
  <link href="themes/ftui-theme.css" rel="stylesheet">
  <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <style>
    .my-fg-black { color:#000000; }
    .my-fg-white { color:#FFFFFF; }

    .my-bg-muell-braun { background-color: #8D6039; }
    .my-bg-muell-gelb  { background-color: #FFFF00; }
    .my-bg-muell-gruen { background-color: #007F00; }
    .my-bg-muell-grau  { background-color: #808080; }

    .my-fg-muell-braun { color: #8D6039; }
    .my-fg-muell-gelb  { color: #FFFF00; }
    .my-fg-muell-gruen { color: #007F00; }
    .my-fg-muell-grau  { color: #808080; }
  </style>

  <title>FTUI Swiper Test Example</title>
</head>

<body>

  <ftui-grid base-width="75" base-height="60" margin="1" shape="round">

    <ftui-grid-tile row="12" col="4" height="2" width="2">
      <label>abfall1.auto-play</label>
        <ftui-checkbox value="on" @value-change="abfall1.autoPlay = (event.detail==='on')">
      </ftui-checkbox>
    </ftui-grid-tile>
    <ftui-grid-tile row="12" col="6" height="2" width="2">
      <label>abfall2.auto-play</label>
      <ftui-checkbox value="on" @value-change="abfall2.autoPlay = (event.detail==='on')">
      </ftui-checkbox>
    </ftui-grid-tile>

    <ftui-grid-tile row="14" col="2" height="2" width="2">
      <ftui-column>
        <ftui-icon name="trash"
                   [class-name]="Abfalltermin:GelbeTonne | map('`^0$`:my-fg-muell-gelb emptying,`^1$`:my-fg-muell-gelb rolling,.*:my-fg-muell-gelb')"></ftui-icon>
        <ftui-badge [class-name]="Abfalltermin:GelbeTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-gelb')"
                    [text]="Abfalltermin:GelbeTonne"></ftui-badge>
      </ftui-column>
    </ftui-grid-tile>

    <ftui-grid-tile row="14" col="4" height="2" width="2">
      <ftui-column>
        <ftui-swiper id="abfall1" auto-play interval="2" dots>
          <ftui-row>
            <ftui-icon name="trash"
                       [class-name]="Abfalltermin:GraueTonne | map('`^0$`:my-fg-muell-grau emptying,`^1$`:my-fg-muell-grau rolling,.*:my-fg-muell-grau')"></ftui-icon>
            <ftui-badge [class-name]="Abfalltermin:GraueTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-grau')"
                        [text]="Abfalltermin:GraueTonne"></ftui-badge>
          </ftui-row>
          <ftui-row>
            <ftui-icon name="trash"
                       [class-name]="Abfalltermin:GrueneTonne | map('`^0$`:my-fg-muell-gruen emptying,`^1$`:my-fg-muell-gruen rolling,.*:my-fg-muell-gruen')"></ftui-icon>
            <ftui-badge [class-name]="Abfalltermin:GrueneTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-gruen')"
                        [text]="Abfalltermin:GrueneTonne"></ftui-badge>
          </ftui-row>
          <ftui-row>
            <ftui-icon name="trash"
                       [class-name]="Abfalltermin:GelbeTonne | map('`^0$`:my-fg-muell-gelb emptying,`^1$`:my-fg-muell-gelb rolling,.*:my-fg-muell-gelb')"></ftui-icon>
            <ftui-badge [class-name]="Abfalltermin:GelbeTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-gelb')"
                        [text]="Abfalltermin:GelbeTonne"></ftui-badge>
          </ftui-row>
          <ftui-row>
            <ftui-icon name="trash"
                       [class-name]="Abfalltermin:BrauneTonne | map('`^0$`:my-fg-muell-braun emptying,`^1$`:my-fg-muell-braun rolling,.*:my-fg-muell-braun')"></ftui-icon>
            <ftui-badge [class-name]="Abfalltermin:BrauneTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-braun')"
                        [text]="Abfalltermin:BrauneTonne"></ftui-badge>
          </ftui-row>
        </ftui-swiper>
      </ftui-column>
    </ftui-grid-tile>

    <ftui-grid-tile row="14" col="6" height="2" width="2">
      <ftui-column>
        <ftui-swiper id="abfall2" auto-play interval="2" dots>
          <ftui-row>
            <ftui-icon name="trash"
                       [class-name]="Abfalltermin:GraueTonne | map('`^0$`:my-fg-muell-grau emptying,`^1$`:my-fg-muell-grau rolling,.*:my-fg-muell-grau')">
            </ftui-icon>
            <ftui-badge [class-name]="Abfalltermin:GraueTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-grau')"
                        [text]="Abfalltermin:GraueTonne">
            </ftui-badge>
          </ftui-row>
          <ftui-row>
            <ftui-icon name="trash"
                       [class-name]="Abfalltermin:GrueneTonne | map('`^0$`:my-fg-muell-gruen emptying,`^1$`:my-fg-muell-gruen rolling,.*:my-fg-muell-gruen')"></ftui-icon>
            <ftui-badge [class-name]="Abfalltermin:GrueneTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-gruen')"
                        [text]="Abfalltermin:GrueneTonne" style="position:relative;"></ftui-badge>
          </ftui-row>
          <ftui-row>
            <ftui-icon name="trash"
                       [class-name]="Abfalltermin:GelbeTonne | map('`^0$`:my-fg-muell-gelb emptying,`^1$`:my-fg-muell-gelb rolling,.*:my-fg-muell-gelb')"></ftui-icon>
            <ftui-badge [class-name]="Abfalltermin:GelbeTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-gelb')"
                        [text]="Abfalltermin:GelbeTonne" style="position:relative;"></ftui-badge>
          </ftui-row>
          <ftui-row>
            <ftui-icon name="trash"
                       [class-name]="Abfalltermin:BrauneTonne | map('`^0$`:my-fg-muell-braun emptying,`^1$`:my-fg-muell-braun rolling,.*:my-fg-muell-braun')"></ftui-icon>
            <ftui-badge [class-name]="Abfalltermin:BrauneTonne | map('`(0|1)`:my-fg-white my-bg-red,.*:my-fg-black my-bg-muell-braun')"
                        [text]="Abfalltermin:BrauneTonne" style="position:relative;"></ftui-badge>
          </ftui-row>
        </ftui-swiper>
      </ftui-column>
    </ftui-grid-tile>

  </ftui-grid>

</body>

</html>


[setstate]

Hallöchen,

nach dem letzten update schein align-items="top"  bei row via content nicht mehr zu tun.
Muss das jetzt anders?

Grüße
Torte

Ich habe mich entschieden, dass ftui-content so weit wie möglich unsichtbar sein soll. Also kein richtiges Element ist. Als wenn dessen Inhalt stattdessen dort eingeschoben ist. Man muss also im content das Alignment einbauen.

[Eisix]

Hallo,

ich möchte ein Attribut statt eines readings verändern, geht das?

Code Auswählen Erweitern


                                <ftui-button [value]="{{FBH}}:tempDay"
                                        (value)="add(-0.5) | attr {{FBH}} tempDay $value"
                                        states="$value"
                                        fill="">
                                        <ftui-icon class="size-1"
                                                name="minus"
                                                color="blue">
                                        </ftui-icon>
                                </ftui-button>


Mein Beispiel erzeugt "set attr FHB tempDay 22", wie kriege ich das set weg?

Gruß
Eisix

[setstate]

Hallo,

ich möchte ein Attribut statt eines readings verändern, geht das?

attr, das benutze ich fast nie. Habe ich vergessen.
Ist jetzt mit als gültiger Befehl aufgenommen:

set, setreading, attr

In Sachen Semantik ist auch noch viel Platz nach oben bei FHEM

[Eisix]

attr, das benutze ich fast nie. Habe ich vergessen.
Ist jetzt mit als gültiger Befehl aufgenommen:

set, setreading, attr

In Sachen Semantik ist auch noch viel Platz nach oben bei FHEM

Funktioniert, danke.

Gruß
Thorsten

[setstate]

@setstate
..
Habe das Test-Exemplar noch ein wenig reduziert. Verhalten ist noch identisch und ich hoffe, dass es hilft ...

Danke für das kompakte TestFile.

Mit ftui-badge als Child von ftui-icon klappt das

Code Auswählen Erweitern


            <ftui-icon>
                <ftui-badge></ftui-badge>
            </ftui-icon>


Den anderen Fehler, dass es nicht los läuft, suche ich noch.

Zwischenstand:
Das scrollIntoView()  im Zusammenhang mit scroll-behavior: smooth; macht Probleme bei mehreren Elementen zur selben Zeit. => Workaround bis jetzt: interval="2.1" beim einen und interval="2" beim anderen.

Bei Firefox und Safari gibt es keine Probleme mit dem Auto-Scrolling. Safari hat nur keine Animation dabei.
Wenn man scroll-behavior: smooth; wegnimmt, geht es auch bei Chromium, nur ohne Animation, wie bei Safari.

[Eisix]

@setstate

Da ich jetzt Attribute setzen kann möchte ich sie auch danach mit "save" sichern. Wie?
Oder besser generell gefragt wie kriegt man fhem-Befehle übergeben? (save, backup, shutdown restart, update,...)

Gruß
Eisix

[willi§99]

Hallo zusammen,
in der weather.maps.js fehlen folgende Einträge:

Proplanta:
klar: 'CLEAR'

Kleinklima:
CLEAR: './icons/weather/kleinklima/clear.png'

Meteocons:
CLEAR: './icons/moon.svg'

Gruß
Wilfried

d

[setstate]

@willi§99: danke, ist eingepflegt