FTUI version 3

[cotecmania]

Hallo,

Kann man ein Popup auch größer darstellen als das umgebende "grid-tile" ?

Wenn eine Popup-Funktion innerhalb eines "grid-tile" definiert ist, nimmt es auch nur dessen Platz ein bzw. kann nicht größer werden und wird innerhalb dessen Grenzen dargestellt.

Bei contentfiles habe ich dann das Problem, dass Popups, die innerhalb definiert sind, nie größer werden können als die Kachel drumrum
Ich möchte das popup aber mittig aufm Bildschirm platzieren.

Contenfiles werden so aufgerufen :

Code Auswählen Erweitern


  <ftui-grid base-width="600" base-height="400" shape="round">

    <ftui-grid-tile row="1" col="1" height="1" width="1" shape="round">
      <ftui-content file="content_cam.html" IP="96" Label="Einfahrt"></ftui-content>
    </ftui-grid-tile>

    <ftui-grid-tile row="1" col="2" height="1" width="1" shape="round">
      <ftui-content file="content_cam.html" IP="95" Label="Haustuere"></ftui-content>
    </ftui-grid-tile>

    <ftui-grid-tile row="2" col="1" height="1" width="1" shape="round">
      <ftui-content file="content_cam.html" IP="94" Label="Gartentor"></ftui-content>
    </ftui-grid-tile>

    <ftui-grid-tile row="2" col="2" height="1" width="1" shape="round">
      <ftui-content file="content_cam.html" IP="93" Label="Gartenhaus"></ftui-content>
    </ftui-grid-tile>
 
  </ftui-grid>


Contentfile :

Code Auswählen Erweitern



    <ftui-image src="http://192.168.1.{{IP}}:88/cgi-bin/CGIStream.cgi?cmd=GetMJStream"
                width="595px"
                height="395px"
            @click="POP_{{Label}}.open()"
                >  
    </ftui-image>

    <ftui-popup id="POP_{{Label}}" timeout="60" width="800px" height="600px">
      <ftui-row color="dark" height="18px"><ftui-label text="{{Label}}"></ftui-label></ftui-row>
      <ftui-image src="http://192.168.1.{{IP}}:88/cgi-bin/CGIStream.cgi?cmd=GetMJStream"
                  style="-webkit-border-radius:10px;"
                  padding="3px"
          width="795px"
      height="582px"
                  >  
  </ftui-image>
    </ftui-popup>


Gruss
Joe

[mr_petz]

@cotecmania
Das erreichst du mit:

Code Auswählen Erweitern


<ftui-popup id="POP_{{Label}}" timeout="60" width="800px" height="600px" position="page">

https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/contents/content-popup.html
@setstate
hier ist noch popup-target drin...

LG mr_petz

[cotecmania]

Schade dass sowas nicht in den normalen Examples zum Popup drin ist, dann hätte ich es gefunden https://knowthelist.github.io/ftui/www/ftui/examples/popup.html

[mr_petz]

@setstate

Info zum swiper!
Ich denke ich habe die Ursache?
Wenn eine bestimmte Breite (width<60%) angegeben wird kommt es zum Fehlverhalten und der swiper überspringt den 1. oder 2.View.
Mit:

Code Auswählen Erweitern


this.submitChange('value', this.value);

in Zeile 90 (@cotecmania Zeile 90!)) geht es
wenn man in Zeile 112 target.offsetLeft-500 (bei grid-tile width:1000px) oder target.offsetLeft-this.parentElement.offsetLeft rechnet (siehe unten im Edit) und der swiper mittig ist:

Code Auswählen Erweitern


this.container.scrollTo({ left: target.offsetLeft-this.parentElement.offsetLeft, behavior: 'smooth' });

Warum gerade 500??? k.A. Oder grid-width/2 weil left 50%?
getestet unter Chrome und FF.
hier mein Test (liegt in einem ftui-tab-view):

Code Auswählen Erweitern


<ftui-row height="5%">
<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>
<ftui-row width="75%" height="5%">
<ftui-icon name="chevron-left" @click="swiper11.back()"></ftui-icon>
  <ftui-swiper id="swiper11" scrollbar>
   <ftui-content id="sw1_11" file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
   <ftui-content id="sw1_21" file="examples/contents/content-weather-day.html" day="fc1"></ftui-content>
   <ftui-content id="sw1_31" file="examples/contents/content-weather-day.html" day="fc2"></ftui-content>
   <ftui-content id="sw1_41" file="examples/contents/content-weather-day.html" day="fc3"></ftui-content>
   <ftui-content id="sw1_51" file="examples/contents/content-weather-day.html" day="fc4"></ftui-content>
   <ftui-content id="sw1_61" file="examples/contents/content-weather-day.html" day="fc5"></ftui-content>
   <ftui-content id="sw1_71" file="examples/contents/content-weather-day.html" day="fc6"></ftui-content>
  </ftui-swiper>
<ftui-icon name="chevron-right" @click="swiper11.next()"></ftui-icon>
</ftui-row>
<ftui-row width="50%" height="5%">
<ftui-icon name="chevron-left" @click="swiper10.back()"></ftui-icon>
  <ftui-swiper id="swiper10" scrollbar>
   <ftui-content id="sw1_10" file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
   <ftui-content id="sw1_20" file="examples/contents/content-weather-day.html" day="fc1"></ftui-content>
   <ftui-content id="sw1_30" file="examples/contents/content-weather-day.html" day="fc2"></ftui-content>
   <ftui-content id="sw1_40" file="examples/contents/content-weather-day.html" day="fc3"></ftui-content>
   <ftui-content id="sw1_50" file="examples/contents/content-weather-day.html" day="fc4"></ftui-content>
   <ftui-content id="sw1_60" file="examples/contents/content-weather-day.html" day="fc5"></ftui-content>
   <ftui-content id="sw1_70" file="examples/contents/content-weather-day.html" day="fc6"></ftui-content>
  </ftui-swiper>
<ftui-icon name="chevron-right" @click="swiper10.next()"></ftui-icon>
</ftui-row>
<ftui-row width="25%" height="5%">
<ftui-icon name="chevron-left" @click="swiper100.back()"></ftui-icon>
  <ftui-swiper id="swiper100" scrollbar>
   <ftui-content id="sw1_100" file="examples/contents/content-weather-day.html" day="fc0"></ftui-content>
   <ftui-content id="sw1_200" file="examples/contents/content-weather-day.html" day="fc1"></ftui-content>
   <ftui-content id="sw1_300" file="examples/contents/content-weather-day.html" day="fc2"></ftui-content>
   <ftui-content id="sw1_400" file="examples/contents/content-weather-day.html" day="fc3"></ftui-content>
   <ftui-content id="sw1_500" file="examples/contents/content-weather-day.html" day="fc4"></ftui-content>
   <ftui-content id="sw1_600" file="examples/contents/content-weather-day.html" day="fc5"></ftui-content>
   <ftui-content id="sw1_700" file="examples/contents/content-weather-day.html" day="fc6"></ftui-content>
  </ftui-swiper>
<ftui-icon name="chevron-right" @click="swiper100.next()"></ftui-icon>
</ftui-row>


Ich hoffe das können noch mehr bestätigen und es hilft dir einwenig

Edit:
Achso. Noch zu erwähnen: die Breite meines grid-tile ist 1045px.
Und es funktioniert nur wenn der swiper mittig ist...?
Also man braucht eine Berechnung die immer von der Mitte aus gesehen die Position des swiper und die Breite des grid-tile oder anderes Element wo er drin steckt kennt und das von left abzieht?
Das:

Code Auswählen Erweitern


this.container.scrollTo({ left: target.offsetLeft-this.parentElement.offsetLeft, behavior: 'smooth' });

funktioniert auch wenn der swiper mittig ist.

LG mr_petz

Edit2:
Habe mal die Berechnungen anzeigen lassen siehe Bildanhang.
Da sieht man gut das beim target.offsetLeft zuviel draufgerechnet wird. Vergleich 2.Spalte und 5.Spalte.
Es müssen die icon,gridbreite mit einbezogen werden.
Rechnung ist diese: target.offsetLeft-this.parentElement.offsetLeft
womit es in meinen Test funktioniert.
Aufbau der Tabelle:
von oben nach unten 1. - 4.swiper im 4erBlock
und jeder weitere Block ein Bild weiter.
Nur bei voller Breite (100%) und >60% ist alles gut.

Edit3:
Ich nochmal. Anderer Lösungsweg:
nach Zeile18 das einfügen:

Code Auswählen Erweitern


    this.tempIndex = 0;

und auch wieder Zeile90 (91 wenn oben eingefügt) ersetzen mit:

Code Auswählen Erweitern


          this.submitChange('value', this.value);

und die Zeile112 ersetzen mit:

Code Auswählen Erweitern


            if (this.currentIndex > this.tempIndex) {
              this.tempIndex = this.currentIndex;
              this.container.scrollLeft += target.offsetWidth;
            }
            if (this.currentIndex < this.tempIndex) {
              this.tempIndex = this.currentIndex;
              this.container.scrollLeft -= target.offsetWidth;
            }
            if (this.tempIndex === this.slides.length-1) {
              this.tempIndex = this.currentIndex;
              this.container.scrollLeft = target.offsetWidth*this.slides.length-1;
            }
            if (this.currentIndex === 0) {
              this.tempIndex = this.currentIndex;
              this.container.scrollLeft = 0;
            }

oder vielleicht die bessere Wahl:

Code Auswählen Erweitern


            if (this.currentIndex > this.tempIndex) {
              this.tempIndex = this.currentIndex;
              this.container.scrollLeft = target.offsetWidth)*this.currentIndex;
            }
            if (this.currentIndex < this.tempIndex) {
              this.tempIndex = this.currentIndex;
              this.container.scrollLeft = target.offsetWidth*this.currentIndex;
            }
            if (this.tempIndex === this.slides.length-1) {
              this.tempIndex = this.currentIndex;
              this.container.scrollLeft = target.offsetWidth*this.slides.length-1;
            }
            if (this.currentIndex === 0) {
              this.tempIndex = this.currentIndex;
              this.container.scrollLeft = 0;
            }

oder mit scrollTo():

Code Auswählen Erweitern


            if (this.currentIndex > this.tempIndex) {
              this.tempIndex = this.currentIndex;
              this.container.scrollTo({left: target.offsetWidth*this.currentIndex, behavior: 'smooth',});
            }
            if (this.currentIndex < this.tempIndex) {
              this.tempIndex = this.currentIndex;
              this.container.scrollTo({left: target.offsetWidth*this.currentIndex, behavior: 'smooth',});
            }
            if (this.tempIndex === this.slides.length-1) {
              this.tempIndex = this.currentIndex;
              this.container.scrollTo({left: target.offsetWidth*this.slides.length-1, behavior: 'smooth',});
            }
            if (this.currentIndex === 0) {
              this.tempIndex = this.currentIndex;
              this.container.scrollTo({left: 0, behavior: 'smooth',});
            }


und schon läüft es egal wie Breit oder an welcher Position der swiper platziert ist.
Ja ist mehr Code, aber man braucht nicht die Elternelemente in einer Berechnung mit einbeziehen. Was nu besser?
Animiertes gif angehangen.

[cotecmania]

@mr_petz
Hast Du den z.B. Pfeil rechts auch mehrmals schnell hintereinander geklickt ?
Da kam bei mir das Ganze durcheinander

[mr_petz]

@cotecmania
Teste mal Final Variante hier unten und sag ob es geht.
Im animierten gif drücke ich ja schon schnell...

LG

ps. Mir geht es in erster Linie hier um das richtige Darstellen/ um den richtigen Sprung zum Bild.
Wenn der swiper durch durchklicken durcheinander kommt, das war nicht mein Ziel.
Er kommt ja wie in meinem ersten Test schon beim normalen durchschalten durcheinander bei einer row mit 50% oder kleiner...

Edit:
Beim sehr sehr schnellen durchschalten wird der interne Index immer richtig gezählt, aber der scroll kommt mit setzen nicht hinterher. Müsste vielleicht ein timeout rein bis das Bild fertig gewechselt hat.?
Oder der Nutzer muss halt normal clicken oder mit touch nach links und rechts schieben.
Die this.container.scrollLeft+=target.offsetWidth variante ist von der Berechnung die Beste...

Edit2:
Ich habe mal oben noch eine multiplikation von index und width angehangen. Da scheint es auch bei wilden clicken immer zugehen...
Wobei die Ergebnisse, der beiden Varianten, unterschiedlich sind bei:

Code Auswählen Erweitern


target.offsetWidth*this.currentIndex,this.container.scrollLeft+=target.offsetWidth

Diese Berechnung haut auch nicht hin:

Code Auswählen Erweitern


(((this.parentElement.offsetWidth-this.container.offsetWidth)/2)+target.offsetWidth)*this.currentIndex

Da komme ich aber sehr nahe an den optimalen wert mit this.container.scrollLeft+=target.offsetWidth ran.

Edit3:
Jetzt habe ich die richtige Berechnung fürs wilde clicken. Es ist egal wie Breit oder wie Weit er von links ist, es passt.
Hier wird durch den index immer die richtige Stelle gesetzt.
Die ganzen ifs von oben können raus.

Code Auswählen Erweitern


              this.container.scrollTo({left: ((target.offsetWidth+50)*this.currentIndex)-50, behavior: 'smooth',});

Jetzt switcht er immer richtig beim durchschalten...
Die 50 sind die margin-right. Muss nach einer Änderung hier berücksichtigt werden!

Final:
Und damit es für das Auswahlbuttonbeispiel auch funktioniert so Zeile 112 (113 wenn this.tempIndex eingetragen) austauschen:

Code Auswählen Erweitern


           this.tempIndex < this.currentIndex && this.currentIndex !== this.slides.length-1 ? this.tempIndex++ : this.tempIndex = this.currentIndex;
           this.container.scrollTo({left: (target.offsetWidth+50)*(this.tempIndex!==this.currentIndex?this.tempIndex:this.currentIndex)-50, behavior: 'smooth',});


und

Code Auswählen Erweitern

this.tempIndex=0;
muss nach Zeile18 rein.

und auch wieder Zeile 90 (91 wenn this.tempIndex eingetragen) ersetzen mit:

Code Auswählen Erweitern

          this.submitChange('value', this.value);

Jetzt seid ihr dran mit testen und @setstate könnte es so umsetzen wenn ihr damit keine Probleme mehr habt.
Einen guten Vergleich hat man im example vom swiper. im popup taucht mit dieser Berechnung jetzt auch Bild1 auf beim autoscroll.

[cotecmania]

@mr_petz

Ich tu mich jetzt schwer die ganzen Änderungen richtig einzupflegen.
Kannst Du die modifizierten Files hier einstellen dann teste ich das ...

Gruss
Joe

[mr_petz]

Eigentlich nur das nach Final eintragen/ändern.
Das andere ist nur zum veranschaulichen der Vorgehensweise zum Lösungsansatz gedacht.
Ich möchte hier auch nicht @setstate vorgreifen. Sein Urteil ist hier bindend und er wird das bestimmt in seiner Form umsetzen.
Ich versuche hier nur zu unterstützen mit diesen Lösungsansatz.

Ich hänge mal temporär für ca. eine Woche an.

LG mr_petz

[cotecmania]

Nach rechts geht jetzt alles aber wenn ich nach links (langsam) immer weiter klicke springt er wieder wild umher ...

Ich fände es auch gut wenn man das Verhalten am Ende (links/rechts) so einstellen könnte, dass er da "anhält" und nicht wieder zum anderen Ende springt.
Ende bleibt Ende und Start bleibt Start.

[mr_petz]

Ja da gebe ich dir Recht.
Nach Links habe ich garnicht mit in betracht gezogen
Liegt an dem tempIndex.
Mal sehen ob das auch anders geht.
...

Neuer Test temporär im Anhang

LG mr_petz

Edit: Das stoppen am Ende und Anfang wäre optional bestimmt auch kein Ding...
erstmal sollten jetzt noch andere testen und @setstate sein Urteil sagen...

[cotecmania]

Jetzt funktionierts auch links 

[cotecmania]

Sorry aber weiterer Bug ...

Wenn man unten mit dem Scrollbar navigiert und danach die Pfeile nutzt also back/next, dann passt es in manchen Konstellationen nicht mehr

z.B. ich habe 6 Bilder
Wenn ich den Swiper anzeige wird Bild 1 angezeigt
Dann gehe ich durch Benutzung des Scrollbars auf Bild 4
dann auf den Pfeil rechts (next), dann springt er auf Bild 2.

Der interne PositionsMerker wird bei Benutzung des Scrollbars nicht auf den richtigen Wert gesetzt.

Gruss
Joe

[mr_petz]

Ja die scrollbar ist so jetzt nicht verknüpft.
Geht nur bei der originalen Version von setstate mit dem "Sprungfehler".
Teufelskreis....
Ich kann da jetzt auch nichts mehr machen. Mein Ziel war der Sprung per Pfeil links/rechts...

LG mr_petz

Edit:
Jetzt muss man noch unterscheiden zwischen Chrome und Firefox bzgl. scrollbar.
Bei FF und Chrome hängt es mit der onIntersectionChange-Geschichte im Code zusammen, wobei die bei Chrome nur beim ersten start zieht und bei FF durcheinander kommt.
Jetzt kann ich es auch nachvollziehen warum er so zuckt....

[Superposchi]

Hallo, ich bin ein Fan von geraden Linien und Kanten, daher tue ich mich mit den Tags <ftui-row> und <ftui-column> schwer.
Damit bekomme ich keine saubere Ausrichtung untereinander hin (siehe Screenshot).

Ich möchte die Beschriftungstexte und die Haken bzw. switches sauber runtereinander angeordnet haben.
Wie kann ich eine Ausrichtung aller Beschriftungstexte Linksbündig erreichen?

Auch stört mich die Überschneidung bei Müll (Switch rechts oben). Da bekomme ich keine Trennung wie im linken Grid hin.

[cotecmania]

Versuche es mal auf der rechten Seite mit 2 Spalten denen Du eine prozentuale Breite gibst
Ohne Codebeispiel wirds aber schwierig Dir zu helfen

z.B.

Code Auswählen Erweitern


   <ftui-row>
     <ftui-column width="50%">

     </ftui-column>

     <ftui-column width="50%">

     </ftui-column>

     </ftui-row>


Dann kannst noch mit der Ausrichtung arbeiten ...