FTUI und jQuery; möglich oder mein Unverständnis (addon swiper) ?

[MichaelT]

Sorry, ich wollte es noch vermerken

Siehe meine Signatur, der erste Update Befehl. Einfach in die Fhem Web  commandline eingeben und enger drücken.

Hallo setstate,

ich habe gerade deinen letzten Stand einschließlich popup rausgeholt. Bei mir kommt das Layout durcheinander und die caption vom popup fehlt.
Wenn ich diese Zeilen auskommentiere ist alle wieder in Ordnung.

Code Auswählen Erweitern


Zeile 92,93:

dialog.detach();
$('body').append(dialog);


Muss ich bei mir Anpassungen machen?

Code Auswählen Erweitern


<div class="dialog">
      <header>Küche</header>
     <div data-type="spinner"
      data-device="EG_WZ_RT"
      data-min="10"
      data-max="30"
      data-unit="°"
      data-get="desired-temp"
      data-set="desired-temp"
      data-on="100"
      data-off="0"
      class="value">
    </div>
</div>



Bild: Oben ist mit deiner Änderung, unten sind die beiden Zeilen auskommentiert.

[FHEm2005]

@setstate
Ich konnte leider erst heute das Pop-Up im Swiper testen. Bis auf eine Kleinigkeit ist alles ok: Wenn das Pop-up größer ist als das swiper-Widget wird der "Überlauf" abgeschnitten und ist nicht mehr sichtbar.  Das geschieht auch bei normalen Popups, bei denen versucht wird sie in der Bildschirmmitte zu positionieren und damit das swiper-Widget verlassen.

Ich habe dunkel im Kopf, dass das Pop-up positionierbar geworden ist. Ich finde den Hinweis zum Verrecken nicht mehr, oder war ein Wunsch der Vater des Gedankens?

Gruß Eberhard

Edit: Ich habe das Gefühl, dass das Popup Fenster abgeblendet ist? Da ich nicht alles sehe kann ich auch falsch liegen.

[MichaelT]

@setstate
Ich konnte leider erst heute das Pop-Up im Swiper testen. Bis auf eine Kleinigkeit ist alles ok: Wenn das Pop-up größer ist als das swiper-Widget wird der "Überlauf" abgeschnitten und ist nicht mehr sichtbar.  Das geschieht auch bei normalen Popups, bei denen versucht wird sie in der Bildschirmmitte zu positionieren und damit das swiper-Widget verlassen.

Ich habe dunkel im Kopf, dass das Pop-up positionierbar geworden ist. Ich finde den Hinweis zum Verrecken nicht mehr, oder war ein Wunsch der Vater des Gedankens?

Gruß Eberhard

Hallo Eberhard,

hast du nicht die Layout-Veränderungen im Popup die ich beschrieben habe?

Gruß
Michael

[FHEm2005]

Hallo Michael,

ich habe extra noch ein Update der eval-Version gemacht, um die neueste Version zu haben. Ich habe nichts verändert. Meine Umgebung ist Windows Vista (das ist ja mal noch ein Schätrzchen  ) mit Firefox.

Auf meinem Anrdoid-Tablet mit FULLY hatte ich für eine halbe Stunde mal ein Bildelement verschoben, das ist aber jetzt auch wieder weg.

Obwohl in meinem Swiper richtig viele Elemente ( 6 swiper, je ca. 20 Elementen) sind, habe ich (bis jetzt) nirgendwo Probleme - abgesehen von den aufgeführten Teilen - bemerken können.

In dem Pop-ups habe ich - soweitich sie sehen kann - keine Verschiebungen gesehen.

Gruß Eberhard

[setstate]

Wenn jetzt das Popup immer ausserhalb vom Gridster aufgehangen ist, musste CSS-mässig auch noch einiges beachtet werden, damit alles wieder wie gewohnt mittig angeordnet wird. Ist jetzt gefixed.

Die Position des Popup kann man mit data-left und data-top vorgeben:

Code Auswählen Erweitern

<div data-type="popup" data-height="300px" data-width="400px"
    data-left="100px">
    <div>open me</div>
    <div class="dialog">
         <header>BAD</header>
         <div>Heizung</div>
         <div data-type="spinner"
          data-device="BadHeizung_Clima"
          data-min="10"
          data-max="30"
          data-unit="°"
          data-get="desired-temp"
          data-set="desired-temp"
          data-on="100"
          data-off="0"
          class="value centered">
        </div>
        <div data-type="label"
         data-device="BadHeizung_Clima"
         data-min="10"
         data-max="30"
         data-unit="°"
         data-get="measured-temp">
         </div>
    </div>
</div>

[FHEm2005]

Wow! das ist ja richtig flott! Vielen Dank.  Ab Morgen im Update?
Gruß Eberhard

[MichaelT]

Wenn jetzt das Popup immer ausserhalb vom Gridster aufgehangen ist, musste CSS-mässig auch noch einiges beachtet werden, damit alles wieder wie gewohnt mittig angeordnet wird. Ist jetzt gefixed.

Die Position des Popup kann man mit data-left und data-top vorgeben:

.....

Hallo setstate,

muss ich jetzt bei jedem Widget im popup Anpassungen machen?
Nach deiner Änderung von gerade ist der Effekt bei mir immer noch vorhanden.
Es sieht so aus, als wenn durch das Umhängen an "body" die relative Koordinaten nicht mehr passen.
Es rutscht alles ein wenig nach links.

Gruß Michael

[FHEm2005]

Hallo setstate,

Wenn jetzt das Popup immer ausserhalb vom Gridster aufgehangen ist, musste CSS-mässig auch noch einiges beachtet werden, damit alles wieder wie gewohnt mittig angeordnet wird. Ist jetzt gefixed.

Die Position des Popup kann man mit data-left und data-top vorgeben:

nach einem Update funktioniert weder das eine, noch das andere bei mir.    Ein Updateversuch zeigt mir "nothing to do..." Das Pop-Up-Fenster wird nach wie vor in der Fenstermitte dargestellt, und die eingegebenen top und left-Werte haben keine Auswirkung, das zeigt der FF-Inspektor. Die Top und left-Werte ändern sich nur bei einer Größenänderung des Fensters. Außerdem wird das Pop-Up Fenster wirklich mit dem shade überdeckt.  In der widget-popup.js (Zeile 114) wird in einer Zeile auf die  Klasse 'noshade' geprüft, die ich aber in der fhem-tablet-ui.css nicht gefunden habe. Muss ich dennoch die Klasse 'noshade' hinzufügen?

Zur Info Mein Coverart-Element sieht wie folgt aus:

Code Auswählen Erweitern

<!-- Coverart -->
<div data-type  = "popup"
data-height = "500px" 
data-width  = "500px"
data-left   = "10px"
data-top    = "10px"
style="position:relative;
top: 47px !important;
left: 0px !important;">
<div class="left"
data-type="image"
style = "margin: 0px 10px 0px 5px;
background-color:none;"
data-device="SB3.Buero"
data-get="coverarturl"
data-size="100%"
data-height="182px"
data-width="182px"
data-opacity = "1" >
</div>
<div class="dialog " style="border: 1px solid;">
<div data-type="image" style = "margin: 0px;
background-color:none;"
data-device="SB3.Buero"
data-get="coverarturl"
data-size="100%"
data-height="495px"
data-width="498px"
data-opacity = "1"
class="left" >
</div>
</div>
</div> 

Die zusätzlich vorhandenen Positionsangaben sind für die pixelgenauen Position dieser Elemente erforderlich. Da ist ja sonst nix Aufregendes drin.

Gruß Eberhard

[setstate]

Habe es gerade noch einmal bei mir getestet, inkl. update all: Popup auf Swiper -> ohne Probleme und startet auch ganz links.
Da musst du deine Files mal überprüfen, ob die wirklich neu geholt wurden.

https://github.com/knowthelist/fhem-tablet-ui/blob/eval/www/tablet_eval/js/widget_popup.js

[FHEm2005]

Danke für die Datei!
Gruß Eberhard

Edit:

Es funktioniert, nachdem ich alles nochmal neu gemacht habe. Einige Elemente sind noch verschoben, habe aber noch ein paar Bilder nicht in den entsprechenden Verzeichissen.