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:
<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>
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 ...
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
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.
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 (https://forum.fhem.de/index.php/topic,70377.msg679044.html#msg679044)
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.
so ganz ist es mir noch nicht klar, was ich alles bei mir jetzt muss (ich steh grad aufm Schlauch)
<div class="hide nopagination" data-type="swiper" ...
Nur das hide hinzufügen.
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
Mit einem Update sollte er jetzt auch bei dir passen. Ich habe alles nötige eingebaut
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