Tabellenposition ändert sich nach longpoll-Aktualisierung

Begonnen von hobby_musiker, 12 September 2016, 22:18:24

Vorheriges Thema - Nächstes Thema

hobby_musiker

Hallo allerseits,

ich hatte dieselbe Frage schon mal im Anfänger-Forum gestellt, dort aber keine Antwort erhalten und daher nach hier verschoben, vielleicht ist das ja doch eher was für Fortgeschrittene ;) Ich komme zumindest momentan nicht weiter.

Folgendes: Ich habe mir FLOORPLANs im LCARS-Design gebastelt (mit momentan 2 unterschiedlichen FLOORPLANs, zwischen denen man hin- und herschalten kann) und die Schriftart entsprechend im zugehörigen CSS eingestellt. In einem der FLOORPLANs wird das Wetter in einer Tabelle angezeigt - absichtlich nicht als WEBLINK, weil ich die Formatierung und die angezeigten Werte etwas anders haben möchte.

Wenn ich am Browser (bei mir: Firefox) die Wetter-FLOORPLAN-Seite neu lade oder vom anderen FLOORPLAN auf den Wetter-FLOORPLAN wechsle, wird alles korrekt angezeigt. Nach der ersten Longpoll-Aktualisierung durch "wetterinfoholen" (s.u.) rutscht die Wetteranzeige aber immer nach unten (Bilder siehe unten).

Habe mir daraufhin den generierten HTML-Code vorher und nachher mit BeyondCompare nochmal genauer angeschaut. Ergebnis: <div id="wetterinfo" ...> wird nach dem longpoll (?) noch in einen <pre> Tag eingepackt - vermutlich führt das zu der verschobenen Darstellung der Tabelle.
Hat jemand eine Anhnung woran das liegen könnte - d.h. wieso wird bei einer Longpoll-Aktualisierung zusätzlich ein <pre>-Tag eingefügt? Kann man das irgendwie abschalten oder gibt es einen workaround? Habe hier im Forum dazu nichts gefunden (und auch nicht bei Google zum Thema Firefox und longpoll). Vielleicht aber auch nach den falschen Stichworten gesucht  :'(


HTML vorher:
<form method="post" action="/fhem/floorplan/Infos/wetterinfo" autocomplete="off">
<table class="dummy fp_Infos" id="table-wetterinfo" align="center">
<tbody><tr class="devicestate fp_Infos" id="wetterinfo">
<td informid="wetterinfo" colspan="0"><div id="wetterinfo" style="text-align:left;font-family: lcars; font-size: 21px; color: rgb(247, 198, 74);" title="
<table padding-bottom=0 padding-top=0>
<tr>
<td><img width=87 src=/fhem/icons/weather/sunny></td>
<td><img width=87 src=/fhem/icons/weather/sunny></td>
<td><img width=87 src=/fhem/icons/weather/sunny></td>
<td><img width=87 src=/fhem/icons/weather/sunny></td>
<td><img width=87 src=/fhem/icons/weather/mostly_sunny></td>
</tr>
<tr>
<td>Akt: klar</td>
<td>Do: sonnig</td>
<td>Fr: sonnig</td>
<td>Sa: sonnig</td>
<td>So: heiter</td>
</tr>
<tr>
<td>24°C, 62%</td>
<td>min 13°C</td>
<td>min 16°C</td>
<td>min 19°C</td>
<td>min 20°C</td>
</tr>
<tr>
<td>Wind: 11 km/h</td>
<td>max 29°C</td>
<td>max 31°C</td>
<td>max 32°C</td>
<td>max 30°C</td>
</tr>
</table>" class="col2">
<table padding-bottom="0" padding-top="0">
<tbody><tr>
<td><img src="/fhem/icons/weather/sunny" width="87"></td>
<td><img src="/fhem/icons/weather/sunny" width="87"></td>
<td><img src="/fhem/icons/weather/sunny" width="87"></td>
<td><img src="/fhem/icons/weather/sunny" width="87"></td>
<td><img src="/fhem/icons/weather/mostly_sunny" width="87"></td>
</tr>
<tr>
<td>Akt: klar</td>
<td>Do: sonnig</td>
<td>Fr: sonnig</td>
<td>Sa: sonnig</td>
<td>So: heiter</td>
</tr>
<tr>
<td>24°C, 62%</td>
<td>min 13°C</td>
<td>min 16°C</td>
<td>min 19°C</td>
<td>min 20°C</td>
</tr>
<tr>
<td>Wind: 11 km/h</td>
<td>max 29°C</td>
<td>max 31°C</td>
<td>max 32°C</td>
<td>max 30°C</td>
</tr>
</tbody></table></div>
</td></tr>
</tbody></table></form>


HTML nachher:
<form method="post" action="/fhem/floorplan/Infos/wetterinfo" autocomplete="off">
<table class="dummy fp_Infos" id="table-wetterinfo" align="center">
<tbody><tr class="devicestate fp_Infos" id="wetterinfo">
<td informid="wetterinfo" colspan="0"><pre><div id="wetterinfo" style="text-align:left;font-family: lcars; font-size: 21px; color: rgb(247, 198, 74);" title="
<table padding-bottom=0 padding-top=0>
<tr>
<td><img width=87 src=/fhem/icons/weather/sunny></td>
<td><img width=87 src=/fhem/icons/weather/sunny></td>
<td><img width=87 src=/fhem/icons/weather/sunny></td>
<td><img width=87 src=/fhem/icons/weather/sunny></td>
<td><img width=87 src=/fhem/icons/weather/mostly_sunny></td>
</tr>
<tr>
<td>Akt: klar</td>
<td>Do: sonnig</td>
<td>Fr: sonnig</td>
<td>Sa: sonnig</td>
<td>So: heiter</td>
</tr>
<tr>
<td>24°C, 62%</td>
<td>min 13°C</td>
<td>min 16°C</td>
<td>min 19°C</td>
<td>min 20°C</td>
</tr>
<tr>
<td>Wind: 11 km/h</td>
<td>max 29°C</td>
<td>max 31°C</td>
<td>max 32°C</td>
<td>max 30°C</td>
</tr>
</table>" class="col2">
<table padding-bottom="0" padding-top="0">
<tbody><tr>
<td><img src="/fhem/icons/weather/sunny" width="87"></td>
<td><img src="/fhem/icons/weather/sunny" width="87"></td>
<td><img src="/fhem/icons/weather/sunny" width="87"></td>
<td><img src="/fhem/icons/weather/sunny" width="87"></td>
<td><img src="/fhem/icons/weather/mostly_sunny" width="87"></td>
</tr>
<tr>
<td>Akt: klar</td>
<td>Do: sonnig</td>
<td>Fr: sonnig</td>
<td>Sa: sonnig</td>
<td>So: heiter</td>
</tr>
<tr>
<td>24°C, 62%</td>
<td>min 13°C</td>
<td>min 16°C</td>
<td>min 19°C</td>
<td>min 20°C</td>
</tr>
<tr>
<td>Wind: 11 km/h</td>
<td>max 29°C</td>
<td>max 31°C</td>
<td>max 32°C</td>
<td>max 30°C</td>
</tr>
</tbody></table></div></pre></td></tr>
</tbody></table></form>




Hier noch der relevante Ausschnitt aus meiner fhem.cfg:
define wetterinfo dummy
attr wetterinfo alias 1
attr wetterinfo devStateStyle style="text-align:left;;font-family: lcars;; font-size: 21px;; color: rgb(247, 198, 74);;"
attr wetterinfo fp_Infos 308,320,0,
attr wetterinfo group Wetterliste
attr wetterinfo room Wettervorhersage
define wetterinfoholen at +*00:05:00 { \
    fhem("set wetterinfo " . \
        sprintf("\
            <table padding-bottom=\"0\" padding-top=\"0\">\
                <tr>\
                   <td><img width=\"87\" src=\"/fhem/icons/weather/%s\"></td>\
                   <td><img width=\"87\" src=\"/fhem/icons/weather/%s\"></td>\
                   <td><img width=\"87\" src=\"/fhem/icons/weather/%s\"></td>\
                   <td><img width=\"87\" src=\"/fhem/icons/weather/%s\"></td>\
                   <td><img width=\"87\" src=\"/fhem/icons/weather/%s\"></td>\
                </tr>\
                <tr>\
                   <td>Akt: %s</td>\
                   <td>%s: %s</td>\
                   <td>%s: %s</td>\
                   <td>%s: %s</td>\
                   <td>%s: %s</td>\
                </tr>\
                <tr>\
                   <td>%s°C, %s%%</td>\
                   <td>min %s°C</td>\
                   <td>min %s°C</td>\
                   <td>min %s°C</td>\
                   <td>min %s°C</td>\
                </tr>\
                <tr>\
                  <td>Wind: %s km/h</td>\
                  <td>max %s°C</td>\
                  <td>max %s°C</td>\
                  <td>max %s°C</td>\
                  <td>max %s°C</td>\
                </tr>\
            </table>",\
            ReadingsVal("MeinWetter","icon",0),\
            ReadingsVal("MeinWetter","fc1_icon",0),\
            ReadingsVal("MeinWetter","fc2_icon",0),\
            ReadingsVal("MeinWetter","fc3_icon",0),\
            ReadingsVal("MeinWetter","fc4_icon",0),\
            ReadingsVal("MeinWetter","condition",0),\
            ReadingsVal("MeinWetter","fc1_day_of_week",0),\
            ReadingsVal("MeinWetter","fc1_condition",0),\
            ReadingsVal("MeinWetter","fc2_day_of_week",0),\
            ReadingsVal("MeinWetter","fc2_condition",0),\
            ReadingsVal("MeinWetter","fc3_day_of_week",0),\
            ReadingsVal("MeinWetter","fc3_condition",0),\
            ReadingsVal("MeinWetter","fc4_day_of_week",0),\
            ReadingsVal("MeinWetter","fc4_condition",0),\
            ReadingsVal("MeinWetter","temp_c",0),\
            ReadingsVal("MeinWetter","humidity",0),\
            ReadingsVal("MeinWetter","fc1_low_c",0),\
            ReadingsVal("MeinWetter","fc2_low_c",0),\
            ReadingsVal("MeinWetter","fc3_low_c",0),\
            ReadingsVal("MeinWetter","fc4_low_c",0),\
            ReadingsVal("MeinWetter","wind_speed",0),\
            ReadingsVal("MeinWetter","fc1_high_c",0),\
            ReadingsVal("MeinWetter","fc2_high_c",0),\
            ReadingsVal("MeinWetter","fc3_high_c",0),\
            ReadingsVal("MeinWetter","fc4_high_c",0),\
        )\
   );;\
}
attr wetterinfoholen room Wettervorhersage


UliM

Hi,
woher das <pre> kommt weiss ich leider nicht, longpoll steckt in FHEMWEB (pl und js)
Hast Du mal versucht, von Anfang an ein <pre> einzubauen - in der Hoffnung dass dann kein weiteres <pre> eingefügt wird und sich nix mehr verschiebt?
Gruß, Uli
RPi4/Raspbian, CUL V3 (ca. 30 HomeMatic-devices), LAN (HarmonyHub, alexa etc.).  Fördermitglied des FHEM e.V.

hobby_musiker

#2
Hallo Uli,

ja, hab ich schon probiert. Resultat war lediglich, dass dann auch noch ein falscher Font in der Tabelle angezeigt wurde (was sich vermutlich im CSS hätte beheben lassen, hab ich aber nicht versucht, weil die verschobene Anzeige nach longpoll-Aktualisierung bestehen blieb).

Nach dem Longpoll waren dann 2 <pre> Tags (samt jeweiligem zugehörigen </pre>) im HTML-Code....

Gruß Micha

pano

Hallo,

hatte grade das selbe Problem in einem ähnlichen Konstrukt. Bei mir hat es zum einen die Formatirungen (Schriftart) zerschossen, zum anderen die Tabellenpositionen.
Das mit den Formatierungen hab ich dadurch gelöst, dass die Schriftart-Styles statt wie ürsprünglich nur im body auch zusätzlich dem pre zugewiesen habe.

body,a,pre { font-family: 'Oswald'; text-decoration:none; font-weight:300;}

Der Verschieber in der Tabellenposition kam durch Zeilenumbrüche im ursprünglichen HTML-Code. Ich vermute mal, Du hast der Tabelle bzw. den Zellen keine festen Breiten und Höhen mitgegeben, zumindest war es bei mir so. Die Lösung für mich war den kompletten <tr>...</tr> und alle enthaltenen <td> und Inhalte ohne Zeilenumbrüche in den Quellcode zu generieren (macht ein Perl für mich):

Vorher:

<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>
<a href="#">Link</a>
<a href="#">noch ein Link</a>
</td>
</tr>


Nachher:

<tr><td>AAA</td><td>BBB</td><td>CCC</td><td><a href="#">Link</a><a href="#">noch ein Link</a></td></tr>
<tr><td>AAA</td><td>BBB</td><td>CCC</td><td><a href="#">Link</a><a href="#">noch ein Link</a></td></tr>


Unleserlicher, aber funktioniert. Alternativ alles mit Layern/Divs und dann über CSS Positionierung arbeiten.

Ganz nebenbei, wie realisierst Du die dynamischen Inhalte denn allgemein?

Ich habe bei mir ein notify bzw. at, welches ein Perl-Script triggert. Das Perl-Script wiederum schreibt den HTML Code in den State eines dummys.
Der Dummy schlussendlich wird im Floorplan eingebunden. Klappt, fühlt sich aber eirgendwie "durch die Brust ins Auge an". Mit Readingsgroup konnte ich das nicht umsetzen, da zu starre Darstellungsform.
Bin hier für neue Ideen sehr offen.

VG, Pano

hobby_musiker

Hallo Pano,

vielen Dank für den Tip!

Darauf, das <pre>-Tag in die Formatierung des CSS aufzunehmen, hätte ich auch selbst kommen können...  ::)

Ich hab mittlerweile mein Floorplan-Design so angepasst, dass ich die Wetterdaten vertikal anzeigen kann, somit ist die Antwort für mich nicht mehr ganz so wichtig.

Ich hab es aber interessehalber trotzdem mal ausprobiert - vielleicht brauche ich so ein Konstrukt ja mal für was anderes.

Ergebnis: Die Zeilenumbrüche und überflüssigen Leerzeichen rauszunehmen hat es in Verbindung mit folgender Formatierung über CSS gebracht:
pre {
   margin: 0px;
}


Trotzdem sehe ich das eher als "Workaround", außer das Hinzufügen des <pre>-Tags (nur beim Longpoll!?) ist eine technische Notwendigkeit und genau so gewollt... was ich eher bezweifle. Da kenne ich mich aber leider zu wenig mit dem Thema Browserdarstellung (und mit Perl) aus.

Zitat von: pano am 29 November 2016, 18:35:58
Ganz nebenbei, wie realisierst Du die dynamischen Inhalte denn allgemein?

Welche dynamischen Inhalte meinst Du konkret?

Die Buttons sind als Dummys realisiert, deren Aussehen mit via devStateIcon referenzierten SVG-Icons gesteuert wird. Zustandsänderungen mache ich meist mit DOIF, das notify finde ich von der Handhabung her schwieriger und unübersichtlicher.

Für meine bisherigen Anwendungsfälle (Rolläden rauf und runterfahren samt Anzeige, Schalter ein/aus samt Anzeige sowie Füllstand Zisterne anzeigen) hat das bisher ausgereicht. Für die restlichen Sachen verwende ich fertige Module (konkret: Weather und DBPlan). An Perl hab ich mich noch nicht rangewagt.

Gruß Micha