Probleme mit Swiper

Begonnen von betonmoewe, 05 September 2017, 15:44:16

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

betonmoewe

05 September 2017, 15:44:16
Hallo zusammen,

ich versuche seit einiger Zeit, mir eine "FrontPage" für TabletUI (für mein iPad) zu bauen. Dabei würde ich gerne die Möglichkeit haben, mittels Swiper Modul zwischen verschiedenen Informationen wie Pollen, Wetter und Heizung (wird leider bald wieder wichtig) durchzu"swipen" ;) . Prinzipiell geht es auch (bis auf ein paar keline Formatierungsprobleme, nur beim allerersten Aufruf bekomme ich einen Mischmasch von verschiedenen "Swipe" Seiten angezeigt (siehe Screenshot). Wie kann ich dieses denn vermeiden / oder was mache ich falsch?

Gruß und schon mal Danke!

Die Betonmoewe

hier der Swipe Code meiner Seite:

Code Auswählen

<li data-row="2" data-col="1" data-sizey="4" data-sizex="5">
      <!-- place your widget here -->
      <div data-type="swiper" data-height="700px" data-width="650px" class="top-space swiper-container swiper-container-horizontal" style="width: 650px; height: 700px;">
      <ul class="swiper-wrapper" style="transition-duration: 100ms; transform: translate3d(-1600px, 0px, 0px);">
          <li class="swiper-slide" style="height: 700px; width: 650px;"><div class="row-2-3 container bg-gray center large">
            <div class="cell">
             <header>Warnungen Frankfurt</header>
             <div class="col-1-2 inline cell">
              <div data-type="uwz" data-device="Unwetterzentrale" data-width="550" data-height="200" data-detail='["WarnUWZLevel_Color", "IconURL", "ShortText","WarnTime"]' data-imgsize="30" data-max="5" class="centered small"></div>
             </div>
             <div class="col-1-2 inline cell">
              <div data-type="image" data-refresh="900" data-width="250" data-height="200" data-url="http://www.unwetterzentrale.de/images/map/hessen_index.png" class="centered top-space"></div>
             </div>
            </div>
          </div></li>
          <li class="swiper-slide" style="height: 700px; width: 650px;"><div class="row-2-3 container bg-gray center large">


          <div class="cell">
              <header>Wetter</header>
          <div class="row">
          <div class="col-1-3">
          <div data-type="label" class="cell top-space narrow small">morgens</div>
          <div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima" class="small"></div>
          <div data-type="label" data-device="AgroWeather" data-get="fc0_weatherMorning" class="cell top-narrow"></div>
          <div data-type="label" data-device="AgroWeather" data-get="fc0_temp06" data-unit="%B0C%0A" class="cell" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
          </div>
          <div class="col-1-3">
          <div data-type="label" class="cell top-space narrow">mittags</div>
          <div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell small"></div>
          <div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class="cell top-narrow"></div>
          <div data-type="label" data-device="AgroWeather" data-get="fc0_temp12" data-unit="%B0C%0A" class="cell" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
          </div>
          <div class="col-1-3">
          <div data-type="label" class="cell top-space narrow">abends</div>
          <div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima" class="cell small"></div>
          <div data-type="label" data-device="AgroWeather" data-get="fc0_weatherEvening" class="cell top-narrow"></div>
          <div data-type="label" data-device="AgroWeather" data-get="fc0_temp18" data-unit="%B0C%0A" class="cell" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
          </div>
          </div>
          </div>

          </div></li>
          <li class="swiper-slide" style="height: 700px; width: 400px;"><div class="row-2-3 container bg-gray center large">
            <div class="cell">
             <header>Außen</header>
             <br>
             <br>
             <br>
             <div class="container top-space">

              <div class="col-1-2">
                <div class="right-align right-space white bigger">Temperatur:</div>
              </div>
              <div class="col-1-2">
                <div data-type="label"
                  data-device="MYSENSOR_102"
                  data-get="temperature"
                  data-limits='[0,20,30]'
                  data-colors='["#6699FF","#AA6900","#FF0000"]'
                  data-unit="%B0C%0A"
                  class="left-align bigger">
                </div>
              </div>
              <div class="col-1-2">
                <div class="right-align right-space white bigger">Luftdruck:</div>
              </div>
              <div class="col-1-2">
                <div data-type="label"
                  data-device="MYSENSOR_102"
                  data-get="pressure6"
                  data-unit="hPa%0A"
                  class="left-align bigger">
                </div>
              </div>
              <div class="col-1-2">
                <div class="right-align right-space white bigger">Luftfeuchte:</div>
              </div>
              <div class="col-1-2">
                <div data-type="label"
                  data-device="MYSENSOR_102"
                  data-get="humidity4"
                  data-unit="%%0A"
                  class="left-align bigger">
                </div>
              </div>
              <div class="col-1-2">
                <div class="right-align right-space white bigger">Regen:</div>
              </div>
              <div class="col-1-2">
                <div data-type="label"
                  data-device="MYSENSOR_106"
                  data-get="value2"
                  data-unit="%0A"
                                     data-substitution='["0","Trocken","1","Nieselregen","2","Regen","3","Starkregen"]'
                  data-limits='[0,1,2,3]'
                  data-colors='["#33cc33","6699FF","#AA6900","#FF0000"]'
                  class="left-align bigger">
                </div>
              </div>
              <div class="col-1-2">
                  <div class="right-align right-space white bigger">Mond:</div>
              </div>
              <div class="col-1-2">
                  <div data-type="label"
                    data-device="Mond"
                    data-unit="%0A"
                    class="left-align bigger">
                  </div>
              </div>
              <div class="col-1-2">
                  <div class="right-align right-space white bigger">Sonnenaufgang:</div>
              </div>
              <div class="col-1-2">
                  <div data-type="label"
                    data-device="Sonnenaufgang"
                    data-unit="%0A"
                    class="left-align bigger">
                  </div>
              </div>
              <div class="col-1-2">
                  <div class="right-align right-space white bigger">Sonnenuntergang:</div>
              </div>
              <div class="col-1-2">
                  <div data-type="label"
                    data-device="Sonnenuntergang"
                    data-unit="%0A"
                    class="left-align bigger">
                  </div>
              </div>
              <div class="col-1-2">
                  <div class="right-align right-space white bigger">Mondaufgang:</div>
              </div>
              <div class="col-1-2">
                  <div data-type="label"
                    data-device="Mond"
                    data-get="Mondaufgang"
                    data-unit="%0A"
                    class="left-align bigger">
                  </div>
              </div>
              <div class="col-1-2">
                  <div class="right-align right-space white bigger">Monduntergang:</div>
              </div>
              <div class="col-1-2">
                  <div data-type="label"
                    data-device="Mond"
                    data-get="Monduntergang"
                    data-unit="%0A"
                    class="left-align bigger">
                  </div>
              </div>
             </div>
            </div>
          </div></li>
          <li class="swiper-slide" style="height: 700px; width: 400px;"><div class="row-2-3 container bg-gray center large">

            <div class="sheet">

              <header>Pollenflug</header>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
                      <div data-type="readingsgroup" data-device="rgPollenvorhersage_wichtig"></div>
              </div>
            </div>
          </div></li>
       </ul>
       <div class="swiper-pagination swiper-pagination-clickable"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div></div>



</li>

setstate

#1
05 September 2017, 20:40:47 Letzte Bearbeitung: 06 September 2017, 00:21:39 von setstate
Deine "Formatierungsprobleme" kommen eher daher, dass das Widget erst nach dem Laden der HTML Seite initialisiert wird. Also die Zuweisung, was ist aktuell versteckt und was angezeigt, passiert nachher. Deshalb sieht man erst alles und dann wie gewünscht.

Man könnte erst alle Widgets ausblenden class="hide" und nach der Initialisierung erst anzeigen.

Teste mal die geänderte Version, ob das besser aussieht damit ...

betonmoewe

#2
06 September 2017, 09:37:20
Guten Morgen

Leider hat das veränderte .js nicht geholfen :(

Aber das mit dem "nicht initialisiert" klingt logisch ... blos ... wie stelle ich fest, das die Initialisierung beendet ist und wie kann ich dann alle auf "hide" gesetzten Widgets dann auch sichtbar setzen ???? Mir fehlt hier grad die Idee

Gruß und Danke für die schnelle Antwort

Die Betonmoewe   

setstate

#3
06 September 2017, 10:05:07
Einblenden nach dem Initialisieren habe ich in diese Version schon eingebaut. Wenn der Swiper auf einer Pagetab Unterseite liegt, klappt das auch schon ganz gut. Wenn bei dir der Swiper direkt in der index.html liegt, könntest du class="hide" beim div mit data-type="swipe" setzen.

Ich habe nur noch das Problem, dass ein ausgeblendeter Swiper sich falsch initialisiert und danach nicht mehr richtig zu bedienen geht und sich nicht per Reading updatet (Page-Auswahl). Da bin ich aber dran.

Paul.baumann

#4
06 September 2017, 10:20:41
Zitat von: setstate am 06 September 2017, 10:05:07
Ich habe nur noch das Problem, dass ein ausgeblendeter Swiper sich falsch initialisiert und danach nicht mehr richtig zu bedienen geht und sich nicht per Reading updatet (Page-Auswahl). Da bin ich aber dran.

Meinst du damit auch das prefetch-Problem: https://forum.fhem.de/index.php/topic,70377.msg679044.html#msg679044
FHEM auf Raspberry 3
MaxCube (V1.20.04 a-culfw) für HM, MaxCube (V1.20.04 a-culfw) für diverse Max!, NanoCul 433/868, TinyTX-Nachbauten
Multiroom: mehrere Squeezelite-Clients auf Raspberry B+ und LMS auf QNap
Huger WM918 Wetterstation integriert
Tiao-Sprinkler (Open-Sprinkler) integriert

setstate

#5
06 September 2017, 10:42:50
Genau, da äußert sich das auch. Und jetzt neu, wenn man alle Widgets ausgeblendet initialisiert.
Die neuste Swiper Version bringt auch keine Besserung, aber ein resize des Browsers re-initialisiert Swiper.
Das muss man jetzt "nur" noch beim Einblenden auch nochmal machen.

betonmoewe

#6
06 September 2017, 14:28:59
so ganz ist es mir noch nicht klar, was ich alles bei mir jetzt muss (ich steh grad aufm Schlauch)

setstate

#7
06 September 2017, 19:24:30
Code Auswählen
<div class="hide nopagination" data-type="swiper" ...

Nur das hide hinzufügen.

betonmoewe

#8
07 September 2017, 13:02:30 Letzte Bearbeitung: 07 September 2017, 13:08:18 von betonmoewe
ok, genau dies hatte  ich schon versucht, aber mit dem Ergebnis, dass sich in der Darstellung immer noch 2 Bereiche überschnitten und dass zusätzlich die Swipe Funktion nicht mehr funktionierte (d.h. es war nicht mehr möglich zu wechseln. Ich konnte zwar mit der Swipe Bewegung die neue Seite "reinziehen", aber die Darstellung sprang nach loslassen einfach wieder zurück auf die alte Seite). Schade  :(

Anm.: ich bin grad im anderen aktuellen Swiper Thread auf die observer Funktion gestoßen ... kannst Du mir den Code auch zukommen lassen?

Gruß

die Betonmoewe

setstate

#9
08 September 2017, 00:49:18
Mit einem Update sollte er jetzt auch bei dir passen. Ich habe alles nötige eingebaut

betonmoewe

#10
08 September 2017, 08:47:43
Klasse, jetzt läuft (in Bezug auf das Swiper Modul) alles wie erwartet/erhofft. Danke für Deie Arbeit!
Nur ... mal wieder das Update Abenteuer ... jetzt läuft die Uhr nicht mehr (cant find Variable: loadplugin)
:(
Muss ich mir mal heut Abend ansehen, was da geändert wurde (oder gibt es hier schon eine Idee?)
Gruß
Die Betonmoewe
Drucken
Nach oben Seiten1
Benutzer-Aktionen