FTUI version 3

octek0815 · 01 Dezember 2021, 19:50:39

Hallo,

align-items="right" scheint seit dem letzten Update nicht mehr zu funktionieren wenn in einem ftui-content file.
align-items="left" funktioniert wiederum.

VG

setstate · 01 Dezember 2021, 20:42:41

oh ja, danke.
Ist jetzt wieder gefixed.

https://knowthelist.github.io/ftui/www/ftui/examples/grid.html

octek0815 · 01 Dezember 2021, 21:03:56

Zitat von: setstate am 01 Dezember 2021, 20:42:41
oh ja, danke.
Ist jetzt wieder gefixed.

https://knowthelist.github.io/ftui/www/ftui/examples/grid.html

Besten Dank für die schnelle Behebung. Hast Du auch noch eine Idee zum anderen Thema vom mir mit dem hidden beim swiper?

setstate · 01 Dezember 2021, 22:45:25

Zitat von: octek0815 am 01 Dezember 2021, 09:12:49
Hallo setstate,

ich möchte diese Thema nochmal in Erinnerung bringen, da hidden leider weiterhin beim ftui-swiper nicht greift. Könntest Du dir das nochmal anschauen.
Im alten Post ist ein Beispiel GIF (animiert dazu).

VG
Olli

statt map() musst du step() benutzen

octek0815 · 02 Dezember 2021, 08:21:48

Zitat von: setstate am 01 Dezember 2021, 22:45:25
statt map() musst du step() benutzen

Oh ja, das hatte ich bereits geändert (im alten Post war noch die frühere alte Funktion).
Es sieht nun so aus, funktioniert aber genauso wenig bzw. hidden greift nicht.

Code Auswählen


<ftui-row>
	<ftui-swiper id="dwd" scrollbar auto-play interval="15">
		<ftui-content id="dwd_1" [hidden]="System_DWD_Wetter:a_count | step('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 | step('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 | step('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 | step('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 | step('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 | step('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 | step('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 | step('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 | step('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 | step('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 | step('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 | step('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>

yersinia · 02 Dezember 2021, 08:52:42

Zitat von: octek0815 am 02 Dezember 2021, 08:21:48Es sieht nun so aus, funktioniert aber genauso wenig bzw. hidden greift nicht.

Ja, das wäre schon cool wenn swiper hidden nicht ignoriert, dann könnte ich das bei meiner DWD Warn-Variante auch übernehmen.

setstate · 02 Dezember 2021, 09:01:33

dann habe ich auch keine Idee mehr, bei mir geht es. Was passiert bei diesem Beispiel? Geht es ohne content, nur mit label?

Code Auswählen


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

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

    <ftui-grid-tile row="3" col="1" height="4" width="4">

      <ftui-column>
        <ftui-button [ value]="ftuitest:count" (value)="setreading ftuitest:count" states="0,1,2,3,4,5,6,7,8">
          <ftui-label [text]="ftuitest:count"></ftui-label>
        </ftui-button>
        
        <ftui-swiper id="dwd" scrollbar dots auto-play interval="2">
          <ftui-content [hidden]="ftuitest:count | step('0:true, 1:false')"
                        file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
          <ftui-content [hidden]="ftuitest:count | step('0:true, 2:false')"
                        file="examples/contents/content-weather-day.html" day="fc1"></ftui-content>
          <ftui-content [hidden]="ftuitest:count | step('0:true, 3:false')"
                        file="examples/contents/content-weather-day.html" day="fc2"></ftui-content>
          <ftui-content [hidden]="ftuitest:count | step('0:true, 4:false')"
                        file="examples/contents/content-weather-day.html" day="fc3"></ftui-content>
          <ftui-content [hidden]="ftuitest:count | step('0:true, 5:false')"
                        file="examples/contents/content-weather-day.html" day="fc4"></ftui-content>
          <ftui-content [hidden]="ftuitest:count | step('0:true, 6:false')"
                        file="examples/contents/content-weather-day.html" day="fc5"></ftui-content>
          <ftui-content [hidden]="ftuitest:count | step('0:true, 7:false')"
                        file="examples/contents/content-weather-day.html" day="fc6"></ftui-content>
        </ftui-swiper>
      </ftui-column>

    </ftui-grid-tile>

    <ftui-grid-tile row="3" col="5" height="4" width="4">

      <ftui-column>
        <ftui-button [ value]="ftuitest:count" (value)="setreading ftuitest:count" states="0,1,2,3,4,5,6,7,8">
          <ftui-label [text]="ftuitest:count"></ftui-label>
        </ftui-button>
        
        <ftui-swiper scrollbar dots auto-play interval="1">
          <ftui-label [hidden]="ftuitest:count | step('0:true, 1:false')" size="6">1</ftui-label>
          <ftui-label [hidden]="ftuitest:count | step('0:true, 2:false')" size="6">2</ftui-label>
          <ftui-label [hidden]="ftuitest:count | step('0:true, 3:false')" size="6">3</ftui-label>
          <ftui-label [hidden]="ftuitest:count | step('0:true, 4:false')" size="6">4</ftui-label>
          <ftui-label [hidden]="ftuitest:count | step('0:true, 5:false')" size="6">5</ftui-label>
          <ftui-label [hidden]="ftuitest:count | step('0:true, 6:false')" size="6">6</ftui-label>
          <ftui-label [hidden]="ftuitest:count | step('0:true, 7:false')" size="6">7</ftui-label>
        </ftui-swiper>
      </ftui-column>

    </ftui-grid-tile>

  </ftui-grid>

octek0815 · 02 Dezember 2021, 09:37:28

Zitat von: setstate am 02 Dezember 2021, 09:01:33
dann habe ich auch keine Idee mehr, bei mir geht es. Was passiert bei diesem Beispiel? Geht es ohne content, nur mit label?

Code Auswählen Erweitern
<ftui-grid base-width="75" base-height="60" margin="1" shape="round"> <ftui-grid-tile row="1" col="1" height="2" width="2"> <label>dwd.auto-play</label> <ftui-checkbox value="on" @value-change="dwd.autoPlay = (event.detail==='on')"> </ftui-checkbox> </ftui-grid-tile> <ftui-grid-tile row="3" col="1" height="4" width="4"> <ftui-column> <ftui-button [ value]="ftuitest:count" (value)="setreading ftuitest:count" states="0,1,2,3,4,5,6,7,8"> <ftui-label [text]="ftuitest:count"></ftui-label> </ftui-button> <ftui-swiper id="dwd" scrollbar dots auto-play interval="2"> <ftui-content [hidden]="ftuitest:count | step('0:true, 1:false')" file="examples/contents/content-weather-day.html" day="fc0"></ftui-content> <ftui-content [hidden]="ftuitest:count | step('0:true, 2:false')" file="examples/contents/content-weather-day.html" day="fc1"></ftui-content> <ftui-content [hidden]="ftuitest:count | step('0:true, 3:false')" file="examples/contents/content-weather-day.html" day="fc2"></ftui-content> <ftui-content [hidden]="ftuitest:count | step('0:true, 4:false')" file="examples/contents/content-weather-day.html" day="fc3"></ftui-content> <ftui-content [hidden]="ftuitest:count | step('0:true, 5:false')" file="examples/contents/content-weather-day.html" day="fc4"></ftui-content> <ftui-content [hidden]="ftuitest:count | step('0:true, 6:false')" file="examples/contents/content-weather-day.html" day="fc5"></ftui-content> <ftui-content [hidden]="ftuitest:count | step('0:true, 7:false')" file="examples/contents/content-weather-day.html" day="fc6"></ftui-content> </ftui-swiper> </ftui-column> </ftui-grid-tile> <ftui-grid-tile row="3" col="5" height="4" width="4"> <ftui-column> <ftui-button [ value]="ftuitest:count" (value)="setreading ftuitest:count" states="0,1,2,3,4,5,6,7,8"> <ftui-label [text]="ftuitest:count"></ftui-label> </ftui-button> <ftui-swiper scrollbar dots auto-play interval="1"> <ftui-label [hidden]="ftuitest:count | step('0:true, 1:false')" size="6">1</ftui-label> <ftui-label [hidden]="ftuitest:count | step('0:true, 2:false')" size="6">2</ftui-label> <ftui-label [hidden]="ftuitest:count | step('0:true, 3:false')" size="6">3</ftui-label> <ftui-label [hidden]="ftuitest:count | step('0:true, 4:false')" size="6">4</ftui-label> <ftui-label [hidden]="ftuitest:count | step('0:true, 5:false')" size="6">5</ftui-label> <ftui-label [hidden]="ftuitest:count | step('0:true, 6:false')" size="6">6</ftui-label> <ftui-label [hidden]="ftuitest:count | step('0:true, 7:false')" size="6">7</ftui-label> </ftui-swiper> </ftui-column> </ftui-grid-tile> </ftui-grid>

Ja mit Label funktioniert es. Mit content wiederum nicht.
Es werden dann weiterhin die vermeintlich versteckten Karten angezeigt und man kann durchswipen.
Allerdings funktioniert Autoplay richtig und scrollt automatisch nur durch die Karten die auch dagestellt werden sollen.
Die restlichen Karten die zwar da sind werden von Autoplay ignoriert.

tomster · 02 Dezember 2021, 10:40:44

Zitat von: yersinia am 02 Dezember 2021, 08:52:42
Ja, das wäre schon cool wenn swiper hidden nicht ignoriert, dann könnte ich das bei meiner DWD Warn-Variante auch übernehmen.

Ich dachte grad noch: komisch, bei mir geht's doch. Aber dann ist mir eingefallen, dass ich das Swiper-"Widget" gar nicht mehr verwende, sondern mir vor einiger Zeit (eigentlich für einen Nachrichtenüberblick) ein "Fade-Widget" gebaut habe.
Ich hab zwar keine Ahnung, ob ich dieses nach der "setstate'schen FTUI3-Konvention" aufgebaut habe, aber für meine Zwecke reicht es. Vielleicht mag ja einer der Code-Experten die angehängte Datei Mal querlesen. Dann könnte man das ja auch in's Repo aufnehmen, falls es jemand Anderes auch gebrauchen kann.

Im HTML-Code funktioniert damit das hidden für die einzelnen content-Seiten wunderbar:

Code Auswählen


<!-- Wetterwarnungen -->
<ftui-grid-tile row="2" col="13"  width="13" color="primary" align-items="top" [hidden]="ZAMG_Warn:properties_warnings_01_properties_chgid:invalid">
                        <ftui-row align-items="left top">
                <ftui-fade interval="20">
                        <ftui-content file="content_ZAMG.html" warnid="ZAMG_Warn:properties_warnings_01"></ftui-content>
                        <ftui-content file="content_ZAMG.html" warnid="ZAMG_Warn:properties_warnings_02" [hidden]="ZAMG_Warn:properties_warnings_02_properties_chgid:invalid"></ftui-content>
                        <ftui-content file="content_ZAMG.html" warnid="ZAMG_Warn:properties_warnings_03" [hidden]="ZAMG_Warn:properties_warnings_03_properties_chgid:invalid"></ftui-content>
                </ftui-fade>
                </ftui-row>
                </ftui-row>
</ftui-grid-tile>

setstate · 02 Dezember 2021, 10:52:10

Zitat von: octek0815 am 02 Dezember 2021, 09:37:28
Ja mit Label funktioniert es. Mit content wiederum nicht.
Es werden dann weiterhin die vermeintlich versteckten Karten angezeigt und man kann durchswipen.
Allerdings funktioniert Autoplay richtig und scrollt automatisch nur durch die Karten die auch dagestellt werden sollen.
Die restlichen Karten die zwar da sind werden von Autoplay ignoriert.

Der Swiper bekommt von den hidden gesetzen Items nix mit und zeigt erst einmal alle an. Erst wenn man einmal schiebt, wird das ganze Konstrukt aktualisiert und es ist die richtige Anzahl da. Beim Autoplay passiert das nach dem ersten Interval. Kannst du das so bestätigen, dass das das Problem ist?

Dann müsste man sich überlegen, wie die Änderung der Unteritems nach oben notifiziert werden kann.

setstate · 02 Dezember 2021, 10:57:04

Zitat von: tomster am 02 Dezember 2021, 10:40:44
Ich dachte grad noch: komisch, bei mir geht's doch. Aber dann ist mir eingefallen, dass ich das Swiper-"Widget" gar nicht mehr verwende, sondern mir vor einiger Zeit (eigentlich für einen Nachrichtenüberblick) ein "Fade-Widget" gebaut habe.
Ich hab zwar keine Ahnung, ob ich dieses nach der "setstate'schen FTUI3-Konvention" aufgebaut habe, aber für meine Zwecke reicht es. Vielleicht mag ja einer der Code-Experten die angehängte Datei Mal querlesen. Dann könnte man das ja auch in's Repo aufnehmen, falls es jemand Anderes auch gebrauchen kann.

Im HTML-Code funktioniert damit das hidden für die einzelnen content-Seiten wunderbar:
Code Auswählen Erweitern
 <ftui-grid-tile row="2" col="13" width="13" color="primary" align-items="top" [hidden]="ZAMG_Warn:properties_warnings_01_properties_chgid:invalid"> <ftui-row align-items="left top"> <ftui-fade interval="20"> <ftui-content file="content_ZAMG.html" warnid="ZAMG_Warn:properties_warnings_01"></ftui-content> <ftui-content file="content_ZAMG.html" warnid="ZAMG_Warn:properties_warnings_02" [hidden]="ZAMG_Warn:properties_warnings_02_properties_chgid:invalid"></ftui-content> <ftui-content file="content_ZAMG.html" warnid="ZAMG_Warn:properties_warnings_03" [hidden]="ZAMG_Warn:properties_warnings_03_properties_chgid:invalid"></ftui-content> </ftui-fade> </ftui-row> </ftui-row> </ftui-grid-tile>

Hallo tomster,

ist das nicht das ftui-rotor nur mit anderen Effekten?
Das könnte man zusammenführen, mit einem effect-Attribute oder beide von einer gemeinsamen Basis-Klasse ableiten.

tomster · 02 Dezember 2021, 11:03:27

Zitat von: setstate am 02 Dezember 2021, 10:57:04
Hallo tomster,

ist das nicht das ftui-rotor nur mit anderen Effekten?
Das könnte man zusammenführen, mit einem effect-Attribute oder beide von einer gemeinsamen Basis-Klasse ableiten.

Mist, erwischt

Aber was will man als Code-DAU auch Anderes machen, als Dinge, die nachweislich funktionieren schlichtweg "adaptieren"...

Aber zurück zu Deiner Frage:
Logo könnte man das. Dafür haben aber meine Fähigkeiten nicht gereicht, auch wenn es wohl nur ein case=... oder so gebraucht hätte.

presskopf · 02 Dezember 2021, 11:55:29

Vielleicht stehe ich auf dem Schlauch oder habe es einfach nicht im Forum gefunden.

Ich habe ein Tile, welches ich tabellarisch mit Device-Informationen fülle.
Hier tät ich gerne ein Popup-Integrieren, um meinetwegen einen Chart im Popup zu zeigen.

Dabei dachte ich an ein Icon, welches (halb)transparent vor oder hinter dem Tabellentext liegt und auf das Popup referenziert.

Kann man das machen und wenn ja wie?
Bei meinen bisherigen Versuchen wurde das Icon im voran oder hintendran gestellt.

octek0815 · 02 Dezember 2021, 11:58:08

Zitat von: setstate am 02 Dezember 2021, 10:52:10
Der Swiper bekommt von den hidden gesetzen Items nix mit und zeigt erst einmal alle an. Erst wenn man einmal schiebt, wird das ganze Konstrukt aktualisiert und es ist die richtige Anzahl da. Beim Autoplay passiert das nach dem ersten Interval. Kannst du das so bestätigen, dass das das Problem ist?

Dann müsste man sich überlegen, wie die Änderung der Unteritems nach oben notifiziert werden kann.

Nein das kann ich so nicht bestätigen. Es werden gleich alle Karten (in meinem Code-Beispiel 12) angezeigt.
AutoPlay scrollt dann aber nur automatisch durch Anzahl der Karten zu der auch mein a_count passt.
Manuell kann man leider durch alle 12 Karten swipen und die scrollbar länge ist dann natürlich auch flasch.

setstate · 02 Dezember 2021, 12:17:09

okay, stimmt. Das kann ich bestätigen. Ich arbeite dran ...

Update: ist jetzt gefixed