FTUI version 3

mr_petz · 02 März 2023, 20:47:03

Hi, du könntest es so in der Art versuchen:
https://forum.fhem.de/index.php/topic,115259.msg1260606.html#msg1260606

LG

tobyDoh · 02 März 2023, 21:09:01

grandios, es wird auf jedem Fall was angezeigt. Muss noch ein bisschen dran arbeiten, dass es passend skaliert, aber die Animation ist schon mal da.

Vielen herzlichen Dank

mr_petz · 02 März 2023, 21:33:33

Wäre super wenn du dann alle Notwendigkeiten zur Anzeige postest um das wiki zu füllen.

LG

cotecmania · 03 März 2023, 13:49:55

Hallo,

versuche gerade einen farbigen Slider zu gestalten aber der ist immer grün ?
Auch in den Examples sollte hier doch ein Farbverlauf zu sehen sein (siehe Anhang 1)

Code Auswählen

      <ftui-slider [(value)]="dummy3" max="80"
                   tick="10"
                   wide-tick="40"
                   color="cold-hot"
                   has-wide-ticks></ftui-slider>

Ist das aktuell die einzige Möglichkeit einen Füllstand anzuzeigen ? In FTUI2 hatte ich einen "Range" : siehe Anhang 2

Gruss
Joe

curt · 03 März 2023, 14:00:48

Zitat von: cotecmania am 03 März 2023, 13:49:55
Auch in den Examples sollte hier doch ein Farbverlauf zu sehen sein (siehe Anhang 1)

Mit irgend einem Update scheint das verloren gegangen zu sein. Ich glaube @mr_petz zeigte mir und uns ein Beispiel. Das funktionierte. Obwohl ich den Code nie änderte, funktionierte es eines Tages dann nicht mehr.

mr_petz · 03 März 2023, 18:40:37

Zitat von: curt am 03 März 2023, 14:00:48
...@mr_petz zeigte mir und uns ein Beispiel....

Ich hatte wenn dann was zum ftui-meter geschrieben:
https://forum.fhem.de/index.php/topic,115259.msg1248030.html#msg1248030
und
https://forum.fhem.de/index.php/topic,115259.msg1263361.html#msg1263361

LG mr_petz

setstate · 03 März 2023, 19:11:11

Der color="cold-hot" Gradient funktioniert (bei mir), wenn im HTML <link href="themes/ftui-theme.css" rel="stylesheet"> dabei ist, bzw. jedes andere Theme, was die "./color-attributes.css" anzieht.

mr_petz · 03 März 2023, 19:30:39

@setstate

Seltsames Verhalten des slider bei Gradient. Im Firefox alles ok.
Im Chrome erst nach öffnen der Entwicklertools siehe animiertes gif.

Edit:
- Im Edge selbes verhalten wie im Chromebrowser. Schlecht zum Nachvollziehen...
- Unter Chrome, Fully und Wallpanel in Android auch nur grüner Balken.
- Im Samsungbrowser in Android alles ok...

LG mr_petz

mr_petz · 03 März 2023, 20:58:50

@setstate

Ich habe versucht der Sache nachzugehen.
Folgendes Ergebnis:
in der js folgendes vor @import der anderen css einfügen:

Code Auswählen


    <style> 
     .rangeable-progress {
      -webkit-mask: linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0);
      position: initial;
     }
    </style>

diesen obigen css Eintrag aus der slider css löschen.

Unter Chrome wird jetzt bei start/erstladen alles korrekt angezeigt...
Bei FF so auch alles ok.
Scheint mit der -webkit-mask zu tun zu haben...?

Edit:
Auch wenn ich nur den Eintrag
position: initial;
aus
.rangeable-progress
lösche, funktioniert es sofort unter Chrome...

LG mr_petz

Edit2:

mit:

Code Auswählen


  -webkit-mask-image: linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

bleibt auch der Gradient auf der gesamten länge bestehen und verschiebt sich nicht bei betätigen des handle...

curt · 03 März 2023, 21:03:49

Zitat von: mr_petz am 03 März 2023, 18:40:37
Ich hatte wenn dann was zum ftui-meter geschrieben:

Ähmm, ja. Ich las leider zu schnell.

Dieses Konstrukt geht nicht mehr, jedenfalls bei mir:

Code Auswählen


<ftui-meter [value]="my_dummy:state" min="10" max="40" width="10px" height="70px"
                   color="low-medium-high-invert"
                   is-vertical has-scale has-color-scale>
        </ftui-meter>

cotecmania · 04 März 2023, 12:14:17

Hallo,

der Farbverlauf macht mich noch wahnsinnig.
Bin jetzt umgestiegen auf "ftui-meter"
Folgende Vorgehensweise lässt das Problem reproduzieren :

- Beispielseite "FTUI meter" von @mr_petz funktioniert immer bei mir im Browser (Windows Chrome)
- Gradient-Beispiel rechts unten 1:1 in meine Seite kopiert --> Farbverlauf ok
- umgestellt auf "is-vertical" --> Farbverlauf ok
- min angepasst von "-10" auf "0" -->kein Farbeverlauf mehr, nur noch grau
- min wieder zurück auf "-10" --> Farbverlauf wieder ok

Aber auf meinem Android Tablet gehts immer, auch mit min="0" !

Somit hat Windows Chrome ein Darstellungsproblem bei bestimmten Konstellationen ...

EDITH :
- Windows Chrome und Edge stellen keinen Farbverlauf dar bei min="0"
- gerade Firefox installiert, der zeigt den Farbverlauf an bei min="0" (sowie Android tablet)

Gruss
Joe

mr_petz · 04 März 2023, 14:37:35

@setstate
Mal zum Test wäre die einfachste Lösung im ftui-meter diese:

Code Auswählen


  static get properties() {
    return {
      height: '',
      width: '',
      color: 'primary',
      min: 0,
      max: 100,
      value: 0.1,
      isVertical: false,
    };
  }

Da funktioniert es sofort im Chromebrowser.
Der vorbelegte Wert 0 im value scheint da mitzuwirken.
Einfach mal so testen.

LG mr_petz

cotecmania · 05 März 2023, 17:01:27

Hallo,

jetzt bin ich beim swiper angelangt und stelle auch Bugs fest :

Dieser swiper im Popup funktioniert problemlos

Code Auswählen


           <ftui-swiper id="SWP_Klingel" scrollbar>
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_1.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_2.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_3.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_4.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_5.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_6.jpg" width="795px" height="582px"></ftui-image>	 
           </ftui-swiper>

Sobald ich nun davor und danach einen back/next einbaue läuft der Swiper gleich beim anzeigen des Popups von alleine durch

Code Auswählen


         <ftui-row>
           <ftui-icon name="chevron-left" @click="SWP_Klingel.back()"></ftui-icon>

           <ftui-swiper id="SWP_Klingel" scrollbar>
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_1.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_2.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_3.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_4.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_5.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_6.jpg" width="795px" height="582px"></ftui-image>	 
           </ftui-swiper>

           <ftui-icon name="chevron-right" @click="SWP_Klingel.next()"></ftui-icon>
         </ftui-row>

Nehme ich das Konstrukt aus dem Beispiel und setze beide in einem grid dahinter dann laufen die Bilder nicht durch

Code Auswählen

           <ftui-swiper id="SWP_Klingel" scrollbar>
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_1.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_2.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_3.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_4.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_5.jpg" width="795px" height="582px"></ftui-image>	 
             <ftui-image src="http://192.168.1.150:8099/fhem/ipcam/IPCAM_Einfahrt_snapshot_6.jpg" width="795px" height="582px"></ftui-image>	 
           </ftui-swiper>

          <ftui-grid-tile row="4" col="8" height="2" width="4" is-row>
            <ftui-icon name="chevron-left" @click="SWP_Klingel.back()"></ftui-icon>
            <ftui-icon name="chevron-right" @click="SWP_Klingel.next()"></ftui-icon>
          </ftui-grid-tile>
	
         </ftui-row>

Weiterhin funktioniert das klicken von "back/next" nicht sauber, vor allem wenn man mehrmals schnell hintereinander klickt.
Das ist irgendwie nicht "entprellt"
Auch im Example-Beispiel links oben (Wetter-swiper) kommt das durcheinander, wenn man zu oft klickt und dann wieder am Ende ankommt.

EDITH : Im Firefox scrollen die Bilder auch mit Version 2 durch, im Chrome nicht
EDITH2 :
Komischerweise kann ich das mit dem Durchlaufen beim LAden im Beispiel nicht nachstellen, da funktionierts. Aber back/next auch nicht zuverlässig

Code Auswählen


    <ftui-row>
      <ftui-icon name="chevron-left" @click="swiper1.back()"></ftui-icon>

	  <ftui-swiper id="swiper1" scrollbar>
        <ftui-content id="sw1_1" file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
        <ftui-content id="sw1_2" file="examples/contents/content-weather-day.html" day="fc1"></ftui-content>
        <ftui-content id="sw1_3" file="examples/contents/content-weather-day.html" day="fc2"></ftui-content>
        <ftui-content id="sw1_4" file="examples/contents/content-weather-day.html" day="fc3"></ftui-content>
        <ftui-content id="sw1_5" file="examples/contents/content-weather-day.html" day="fc4"></ftui-content>
        <ftui-content id="sw1_6" file="examples/contents/content-weather-day.html" day="fc5"></ftui-content>
        <ftui-content id="sw1_7" file="examples/contents/content-weather-day.html" day="fc6"></ftui-content>
      </ftui-swiper>

      <ftui-icon name="chevron-right" @click="swiper1.next()"></ftui-icon>
    </ftui-row>

Gruss
Joe

cotecmania · 05 März 2023, 17:28:28

Zitat von: mr_petz am 08 Januar 2023, 20:31:05
Habe zum Verhalten im swiper was rausgefunden...
Wenn man diese Zeile vom swiper:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/swiper/swiper.component.js#L90
mit dieser ersetzt:
Code Auswählen Erweitern
this.submitChange('value', this.value);
dann funktioniert das @click="swiper1.next()" oder @click="swiper1.value = 'sw2'"
Warum wissen nur die kenner...

Jetzt habe ich soeben das obige gefunden. Ist mittlerweile Zeile 91 aber wenn ich es so wie oben anpassen ist das mit dem automatischen Durchlauf behoben
Allerdings scrollt beim ersten klicken auf next das Ganze um 2 Bilder und die Steuerung mit den Pfeilen funktioniert auch noch nicht 100%

Gruss
Joe

mr_petz · 05 März 2023, 19:47:28

@setstate
Ich leider nochmal

Nochmal zum slider. Wenn du in der css folgendes:

Code Auswählen


.rangeable-progress {
  -webkit-mask: linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0);
  background-size: var(--ftui-slider-bgimage-w) var(--ftui-slider-bgimage-h);
  background-image: var(--color-base, #20639b);
}

.rangeable-progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-base, #20639b);
}

.rangeable-container.rangeable-vertical .rangeable-progress {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  left: 0.5px;
  --color-base: linear-gradient(var(--cold-color) 35%, var(--hot-color) 65%);
}

und in der js die Zeile11:

Code Auswählen


import { getStylePropertyValue,isVisible} from '../../modules/ftui/ftui.helper.js';

und Zeile43

Code Auswählen


if (isVisible(this)) {

tauschst,
und nach Zeile 129 das:

Code Auswählen


    if (this.rangeable.axis==='x') {
      this.style.setProperty('--ftui-slider-bgimage-w',getStylePropertyValue('width',this.shadowRoot.querySelector('.wrapper')));
      this.style.setProperty('--ftui-slider-bgimage-h','100%');
    } else {
      this.style.setProperty('--ftui-slider-bgimage-w','100%');
      this.style.setProperty('--ftui-slider-bgimage-h',getStylePropertyValue('height',this.shadowRoot.querySelector('.wrapper')));
    }

einträgst, dann hast du bei gradientcolor wieder die volle Länge und er staucht sich beim schieben nicht mehr zusammen.
Vielleicht hilfts.

LG mr_petz