Manche "anzeigen" doppelt

[derhelge]

Hallo,

ich habe mir Tablet UI zusammengebaut. Allerdings habe ich das Problem das dass Thermostat oft doppelt angzeigt wird, ich muss die Seit dann mehrfach neu laden und irgendwann ist es weg.
Cache leere bringt auch nix, getestet am PC mit Chrome und Edge, Handy mit mehreren Browsern überall das Problem.

Hier ist mein benutzter Code :

Code Auswählen Erweitern

  <li data-row="2" data-col="1" data-sizex="4" data-sizey="4">
    <header>Stube</header>
<div class="left">
<div data-type="label" data-device="Stube_Heizung" data-get="mode" class=""></div>
<div data-type="thermostat" data-device="Stube_Heizung"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature"
data-max="31" data-boost="auto"
class="">
</div>
<div data-type="symbol" data-device="Stube_Fenster" data-get-on="!off" data-get-off="closed" class="bigger"></div>
<div data-type="label"
data-device="Stube_Temp"
data-get="temperature"
data-limits='[16,21,27]'
data-colors='["blue","orange","red"]'
data-unit="&deg;C"
class="big">
</div>
<div data-type="label"
data-device="Stube_Temp"
data-get="humidity"
data-limits='[20,40,66]'
data-colors='["white","orange","red"]'
data-unit="%"
class="big">
</div>
</div>

[Gollum2]

Moin...

hast du das </li> vergessen zu kopieren oder ist es wirklich nicht da?

[derhelge]

Das ist weiter unten da ist noch code von den anderen anzeigen (licht, steckdosen etc.) und dann kommt das </li>

[Gollum2]

ok...

wenn ich mich nicht irre wird der Value Wert oberhalb des Widgets angezeigt.
Das sollte aber nicht so sein.

ggf. ist es die Formatierung (sprich der Platz)

Teste mal ohne
data-valve="valveposition"

[Gollum2]

da ich auch schon oft an der Ausrichtung und Positionierung verzweifelt habe, mache ich jetzt immer folgendes

<div class="container left inline">
...hier kommen meine Elemente rein, die links im ersten Container unter einander stehen.
Alle bekommen in class min. den Wert "cell"
</div>

<div class="container left inline">
...hier kommen die nächste  Elemente rein, die links neben dem ersten Container unter einander stehen. sollen (also die zweite Reihe)
Alle bekommen in class min. den Wert "cell"
</div>

usw...

[derhelge]

wenn ich mich nicht irre wird der Value Wert oberhalb des Widgets angezeigt.
Das sollte aber nicht so sein.

Doch soll er das habe ich extra gemacht um zu sehen ob das Ventil im Auto der Manuell Mode ist das steht ja auch eine Zeile weiter oben

Code Auswählen Erweitern

<div data-type="label" data-device="Stube_Heizung" data-get="mode" class=""></div>

Das komisch ist halt das es nach ein paar mal Laden stimmt (siehe das zweite Bild).

[Tedious]

Exakt das Problem habe ich auch (und noch nicht lösen können), tritt bei mir aber ausschließlich auf dem IPad auf....

[derhelge]

Das ist ja verrückt und bei mir tritt das am iPad am seltensten auf im Safari, am meisten im Chrome. Das ist nervig irgendwie verstellen sich auch oft die eingestellten Werte bei den Heizungen wenn die Anzeige nicht stimmt.

[derhelge]

Hat niemand weiter eine Idee. Das Problem liegt wohl irgendwie am Thermostate Widget, es wird doppelt geladen teilweise.
Nehme ich das Widget aus meinem TabletUI funktioniert alles wunderbar.

[Gollum2]

Tritt das Problem auch auf, wenn du das Widget alleine in die Box setzt? (ohne weitere Elemente)

[Syrex-o]

@derhelge
probier es mal die Objekte als inline zu plazieren. Hatte mal ein ähnliches Problem mit der Positionierung.
Oder gib dem Thermostat einzeln nochmal ne Genaue Positionierung (inline oder container).

[setstate]

1. keine Doppelnennung der fhem-tablet-ui.js im HTML
2. Probier mal ohne jegliche Pagetab / Pagebutton, ist es dann immer noch doppelt

[Grml]

Ich hänge mich hier mal ran, ich habe nämlich exakt das gleiche Problem, die Thermostat-Widges werden sehr oft doppelt geladen, geschätzt bei 60 - 70 % aller Seitenaufrufe. Erst nach 1 - 5 Reloads ist es dann ok, bis es beim nächsten Reload wieder passiert.

@setstate:
Ich habe die zwei Punkte bei mir mal gegengecheckt.
Es scheint in der Tat an Punkt 2 zu liegen! Sobald ich meine Pagetab-Elemente ausblende lädt es sauber. Zumindest habe ich die Seite gerade 40 - 50 aktualisiert und kein einziges mal mehr ein doppeltes Thermostat-Widget bekommen.

Nachtrag: Beim Homestatus-Widget passiert das doppelte Laden auch.

[Markus9]

Ich habe das gleiche Problem: Homestate wird doppelt angezeigt und die Werte werden verändert. Ich verwende auch Pagetab.
Gibt's dazu mittlerweile eine Lösung? Oder eine Idee für einen Workaround?

[haxtibal]

Ich habe das gleiche Problem wie ihr und konnte es soweit eingrenzen, dass es für einen Workaround gereicht hat.

Das Problem ist, dass init() aus widget_thermostat.js, L.157 manchmal doppelt oder noch öfter aufgerufen wird, wenn pagetab verwendet wird. Bei diesem init() wird jedem gefundenen <div data-type="thermostat"> Element ein Knob Widget hinzugefügt. Und wenn init() öfter als einmal aufgerufen wird, bekommt das Thermostat Element eben auch mehr als ein Knob Widget.

Ich hab das Problem auf die Schnelle damit gelöst, dass die Initialisierung eines Thermostat Elements beim wiederholten init() Aufruf übersprungen wird:

Code Auswählen Erweitern


    function init() {

        me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
        me.elements.each(function (index) {
            var elem = $(this);

            // Workaround: Skip element if it was already initialized before.
            if (elem.data('get'))
                return;

            elem.initData('get', 'desired-temp');
            // ...


Für einen echten Bugfix müsste man wohl zuerst wissen, ob es per Design erlaubt sein soll, dass eine Plugin init() Funktion mehrfach aufgerufen wird. Falls es nur einmal aufgerufen werden darf, wäre der Bug an zentraler Stelle irgendwo richtung ftui.loadPlugin in fhem-tablet-ui.js zu suchen. Dann müsste es aber eigentlich auch andere Widgets treffen..?

[haxtibal]

Autsch, falscher Alarm...

Das Problem ist, dass init() aus widget_thermostat.js, L.157 manchmal doppelt oder noch öfter aufgerufen wird

Das war meine Schuld. Ich hatte <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script> mehrfach in meiner index.html stehen und hab es nicht bemerkt.

setstate hat das weiter oben ja schon geschrieben:

1. keine Doppelnennung der fhem-tablet-ui.js im HTML

Nachdem ich das korrigiert habe, kann ich trotz pagetab keine doppelten Widgets mehr reproduzieren.

[peterboeckmann]

Hallo zusammen,

ich beobachte das Phänomen auch. Genau wie beschrieben bei thermostat und HomeStatus.

Zusätzlich habe ich gelegentlich die Fehlermeldung

Code Auswählen Erweitern


fhem.tablet-ui.js:1759
InvalidAccessError: A parameter or an operation is not supported by the underlying object.


Ich benutze Version 2.5.

Hat schon jemand eine Lösung gefunden?

[setstate]

Du solltest mal die Version 2.6.29 probieren ? 

[yamizo]

Hallo,

jetzt hat's mich auch erwischt: das Widget wind_direction wird doppelt angezeigt!

Ich habe meine (noch recht kurze) index.html durchsucht und nur einen Aufruf der "fhem-tablet-ui.js" gefunden.

Ich habe über

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="/fhem/tablet/nav_left.html"></li>
eine Menüspalte mit pagetab-Widgets eingebaut. Wenn diese Zeile drin ist, ist auch die Wind_direction doppelt. Wenn ich statt data-template die pagetabs direkt in der index.html einsetze ist nichts doppelt...

So sieht die nav_left.html aus:

Code Auswählen Erweitern

<html>
<body>
     <div class="sheet">
        <div class="row">
            <div class="cell top-align">
                <div data-type="clock" data-format="l" class="large bold"></div>
                <div data-type="clock" data-format="j. F Y" class="large bold"></div>
                <div data-type="clock" data-format="H:i" class="tall bold"></div>
               
                <div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="fa-home" class="cell big top-space-3x"></div>
                <div data-type="label" class="darker top-narrow">Übersicht</div>
                <div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="fa-fire" class="cell big top-space-3x"></div>
                <div data-type="label" class="darker top-narrow">Heizung</div>
                <div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="wi wi-strong-wind" class="cell big top-space-3x"></div>
                <div data-type="label" class="darker top-narrow">Lüftung</div>
                <div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="fa-cloud" class="cell big top-space-3x"></div>
                <div data-type="label" class="darker top-narrow">Wetter</div>
                <div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="fa-bar-chart" class="cell big top-space-3x"></div>
                <div data-type="label" class="darker top-narrow">Statistik</div>
            </div>
        </div>
    </div>
</body>
</html>
Hat jemand eine Idee?

EDIT:
Auch "inline" verursachen die pagetab-Widgets doppelte Windrosen ... das wars also nicht. Nur, wenn ich die pagetabs komplett auskommentiere bleibts auch bei mehrfachem Neuladen der Seite bei einer einfachen Windrose.

Ach ja: Die Windgeschwindigkeit wird auch nicht angezeigt ... aber das ist vermutlich ein anderes Problem, oder?

Hier mal meine Widget-Zeile:

Code Auswählen Erweitern

                    <div data-type="wind_direction" data-device="myWeather" data-direction="wind_direction" data-speed="wind_speed" class="mini"></div>


[viegener]

@yazo: Eine Seite die durch pagetab geladen wird sollte nur den gridster-teil enthalten, denn in der aktuellen Seite wird der inhalt des gridsters durch den pagetab ersetzt. Also wenn Du ein pagetab hast, der index.html läd ist vermutlich ganz viel dabei, was Du nicht nochmals laden willst. zumindest wenn Deine index.html normal ist. Unten mal eine Seite wie ich sie durch pagetab lade:

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
<title>Detail</title>
</head>

<body>

<div class="gridster">
<!-- ********************** Hier kommt der Inhalt hin ************************************ -->
</div>
</body>
</html>

[peterboeckmann]

Hallo nochmal,

Du solltest mal die Version 2.6.29 probieren ? 

Das Update hab ich gerade gemacht - und zunächst keine JS-Fehlermeldungen mehr bekommen.

Zurück zum Thema "doppelte Anzeigen".

@yazo: Eine Seite die durch pagetab geladen wird sollte nur den gridster-teil enthalten, denn in der aktuellen Seite wird der inhalt des gridsters durch den pagetab ersetzt. Also wenn Du ein pagetab hast, der index.html läd ist vermutlich ganz viel dabei, was Du nicht nochmals laden willst. zumindest wenn Deine index.html normal ist.

Der Tipp hat mir sehr geholfen.
Ich habe meine index.html so weit zusammengeschnitten, dass nur noch das PageTab-Menü drin ist.
Aus den drei verlinkten Seiten "heizung.html", "haus.html" und "garten.html" habe ich die Zeile

Code Auswählen Erweitern

<script src="js/fhem-tablet-ui.js" defer></script> entfernt.

Zum "abgucken" hänge ich meine Dateien hier einfach mal dran.

Vielen Dank für die Hilfen!

[yamizo]

Hi viegender,

@yazo: Eine Seite die durch pagetab geladen wird sollte nur den gridster-teil enthalten, denn in der aktuellen Seite wird der inhalt des gridsters durch den pagetab ersetzt. Also wenn Du ein pagetab hast, der index.html läd ist vermutlich ganz viel dabei, was Du nicht nochmals laden willst.

Meinst Du daran liegt's? Ich hatte die index.html da nur als Platzhalter drin, weil das derzeit die einzige andere html-Seite ist, die ich habe  . Hatte dabei noch gar nicht versucht, das Menu zu "nutzen".

Versuche ich gleich mal - unabhängig davon: Vielen Dank für die Hilfe!

[EDIT:]
Ich denke, das war zumindest nicht die einzige Fehlerursache. Bei einem refresh über den Browser ist das Windrichtungs-Widget doppelt. Bei Seitenwechseln über die Pagetab-Buttons nicht mehr. Meine HTMLs sehen derzeit so aus:

"Normaler" Header in der index.html:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
    <!--
     * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
   -->

    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <script src="/fhem/tablet/js/fhem-tablet-ui.js" defer></script>
   
    <title>Home</title>
</head>
<body>

   
<div class="gridster">
<ul>

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="/fhem/tablet/nav_left.html">
    </li>

    <li data-row="1" data-col="2" data-sizex="7" data-sizey="1" class="left-align">
        <div class="sheet">
            <div class="row">

                <!-- Aktuelles Wetter in Statusseite -->       
                <div class="cell center-align">
                    <div data-type="label" class="big">Nowcasting</div>
                    <div data-type="weather" data-device="myWeather" data-get="fc1_condition" class="big"></div>
                    <div data-type="label" data-device="myWeather" data-get="condition" class="normal"></div>
                </div>
                <div class="cell center-align">
                    <div data-type="label" class="top-space-2x">Temperatur</div>
                    <div data-type="label" data-device="myWeather" data-get="temp_c" data-unit="&deg;C" class=""></div>
                    <div data-type="label">Luftfeuchte</div>
                    <div data-type="label" data-device="myWeather" data-get="humidity" data-unit="%" class=""></div>
                </div>
                <div class="cell center-align">
                    <div data-type="wind_direction" data-device="myWeather" data-direction="wind_direction" data-speed="wind_speed" class="mini"></div>
<!--                    <div data-type="label" data-device="myWeather" data-get="wind-speed" data-unit=" km/h" class="big"></div>-->
                </div>
                <div class="cell center-align">
                    <div data-type="label" class="big">Messung</div>
                    <div data-type="label" class="top-space">Aussentemperatur (Heizung)</div>
                    <div data-type="label" data-device="Aussentemperatur" data-get="Aussentemperatur" data-unit="&deg;C" class="big"></div>
                    <div data-type="label">Aussenluft (Lueftung)</div>
                    <div data-type="label" data-device="Lueftung" data-get="Temp_Aussen" data-unit="&deg;C" class="big"></div>
                </div>
            </div>
        </div>
    </li>

.... darunter noch weitere <li data-row.....>...</li> für weitere Inhalte
   
Um nach dem Umschalten auf andere Seiten auch wieder die Hauptseite sehen zu können, habe ich deren Elemente nochmal mit leerem Header in der main.html drin (natürlich jedesmal mit eingebundener Navigations-Leiste:

Code Auswählen Erweitern

!DOCTYPE html>
<html>
<head>
   
    <title>Home</title>
</head>
<body>

   
<div class="gridster">
<ul>

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="/fhem/tablet/nav_left.html">
    </li>
   
    <li data-row="1" data-col="2" data-sizex="7" data-sizey="1" class="left-align">
        <div class="sheet">
            <div class="row">

                <!-- Aktuelles Wetter in Statusseite -->       
                <div class="cell center-align">
.....

Alle weiteren Unterseiten fangen dann genauso an, wie die main.html - haben aber natürlich abgesehen von der eingebundenen pagetab-Spalte anderen Inhalt. Dadurch ist der Header (mit dem Aufruf von hem-tablet-ui.js auf jeden Fall nur einmal in der ganzen Sammlung vorhanden und die index.html wird auch nicht mehrfach aufgerufen...

Ich bin ratlos 

Ach ja: Die Windgeschwindigkeit wird auch nicht angezeigt, obwohl im wind_direction-Widget per data-get="wind_speed" referenziert.

Yazo

[nokion]

Hallo yazo,


füge für die wind_speed noch folgende Zeile ein:

Code Auswählen Erweitern

<div data-type="label" data-device="MyWeather" data-get="wind" data-unit="km/h"></div>

Bei mir läuft es so, zumidest mit Proplanta.

T

[yamizo]

Hi Notion,

vielen Dank für den Tip. Als Label hab ich die Geschwindigkeit nun auch umgesetzt. Die Anzeige direkt über das wind_direction-Widget hat nicht funktioniert.

Viele Grüße,
Yano

[yamizo]

Hallo nochmal  ,

für die Kenner der Materie. Ich habe die FTUI-Seite mit den Entwicklerwerkzeugen von Firefox überprüft.
Die Zeile in meiner .html-Datei sieht so aus:

Code Auswählen Erweitern


<div class="cell center-align">
        <div data-type="wind_direction" data-device="myWeather" data-direction="wind_direction" class="mini"></div>
        <div data-type="label" data-device="myWeather" data-get="wind" data-unit=" km/h" class="big top-space"></div>
</div>

Beim Laden der Seite wird dann meistens die Windrose doppelt dargestellt und dann sieht das per "Inspektor" dargestellte html so aus:

Code Auswählen Erweitern


<div class="cell center-align">
     <div data-type="wind_direction" data-device="myWeather" data-direction="wind_direction" class="mini readonly">
          <div style="display:inline;width:52px;height:52px;">
              <canvas width="104" height="104" style="width: 52px; height: 52px;"></canvas>
              <input value="10" disabled="disabled" readonly="readonly" style="width: 30px; height: 17px; position: absolute; vertical-align: middle; margin-top: 17px; margin-left: -41px; border: 0px none; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; font: 10px &quot;Helvetica Neue&quot;,&quot;Helvetica&quot;,&quot;Open Sans&quot;,&quot;Arial&quot;,sans-serif; text-align: center; color: rgb(255, 255, 255); padding: 0px; visibility: visible;" type="text">
          </div>
          <div class="overlay"></div>
          <div style="display:inline;width:52px;height:52px;">
             <canvas width="104" height="104" style="width: 52px; height: 52px;"></canvas>
             <input value="10" disabled="disabled" readonly="readonly" style="width: 30px; height: 17px; position: absolute; vertical-align: middle; margin-top: 17px; margin-left: -41px; border: 0px none; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; font: 10px &quot;Helvetica Neue&quot;,&quot;Helvetica&quot;,&quot;Open Sans&quot;,&quot;Arial&quot;,sans-serif; text-align: center; color: rgb(255, 255, 255); padding: 0px; visibility: visible;" type="text">
         </div>
         <div class="overlay"></div>
     </div>
     <div data-type="label" data-device="myWeather" data-get="wind" data-unit=" km/h" class="big top-space">22<span class="label-unit"> km/h</span></div>
</div>


Da wird also auf jeden Fall ein zweites <div class="display...."> angelegt, dass da nicht sein sollte!

Vielleicht hat ja noch jemand eine Idee, wie ich das weiter analysieren kann.

Viele Grüße,
Yano

[viegener]

@yazo: Das einzige was mir einfällt, ist, dass Du nochmal die Korrektheit der HTML-Dateien überprüfen solltest, also sicherstellen, dass insbesonder die divs alle geschlossen sind und keine sonstigen Fehler fehlende oder nicht geschlossene Anführungszeichen etc da sind.

Es ist aber nicht auszuschliessen, dass es einen Fehler im javascript code gibt

[Loetfreund]

Hallo,

Ich hatte heute das gleiche Problem und habe es durch die Einhaltung dieser Regeln gelöst bekommen.
Wie baue ich ein Menü mit dem Pagetab Widget auf?
Grundsätzliche Struktur:

index.html -> Header-Files (css/js), Nur ein Gridster-Element zum Import des Templates "menu.html"
menu.html -> eine Liste von Pagetab Widgets mit Links zu den Unterseiten
sub*.html -> Unterseiten mit den eigentlichen Widgets, keine Header-Files (css/js), ein Gridster-Element für menu.html

[All_Starzes]

Hallo nochmal  ,

für die Kenner der Materie. Ich habe die FTUI-Seite mit den Entwicklerwerkzeugen von Firefox überprüft.
Die Zeile in meiner .html-Datei sieht so aus:

Code Auswählen Erweitern


<div class="cell center-align">
        <div data-type="wind_direction" data-device="myWeather" data-direction="wind_direction" class="mini"></div>
        <div data-type="label" data-device="myWeather" data-get="wind" data-unit=" km/h" class="big top-space"></div>
</div>

Beim Laden der Seite wird dann meistens die Windrose doppelt dargestellt und dann sieht das per "Inspektor" dargestellte html so aus:

Code Auswählen Erweitern


<div class="cell center-align">
     <div data-type="wind_direction" data-device="myWeather" data-direction="wind_direction" class="mini readonly">
          <div style="display:inline;width:52px;height:52px;">
              <canvas width="104" height="104" style="width: 52px; height: 52px;"></canvas>
              <input value="10" disabled="disabled" readonly="readonly" style="width: 30px; height: 17px; position: absolute; vertical-align: middle; margin-top: 17px; margin-left: -41px; border: 0px none; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; font: 10px &quot;Helvetica Neue&quot;,&quot;Helvetica&quot;,&quot;Open Sans&quot;,&quot;Arial&quot;,sans-serif; text-align: center; color: rgb(255, 255, 255); padding: 0px; visibility: visible;" type="text">
          </div>
          <div class="overlay"></div>
          <div style="display:inline;width:52px;height:52px;">
             <canvas width="104" height="104" style="width: 52px; height: 52px;"></canvas>
             <input value="10" disabled="disabled" readonly="readonly" style="width: 30px; height: 17px; position: absolute; vertical-align: middle; margin-top: 17px; margin-left: -41px; border: 0px none; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; font: 10px &quot;Helvetica Neue&quot;,&quot;Helvetica&quot;,&quot;Open Sans&quot;,&quot;Arial&quot;,sans-serif; text-align: center; color: rgb(255, 255, 255); padding: 0px; visibility: visible;" type="text">
         </div>
         <div class="overlay"></div>
     </div>
     <div data-type="label" data-device="myWeather" data-get="wind" data-unit=" km/h" class="big top-space">22<span class="label-unit"> km/h</span></div>
</div>


Da wird also auf jeden Fall ein zweites <div class="display...."> angelegt, dass da nicht sein sollte!

Vielleicht hat ja noch jemand eine Idee, wie ich das weiter analysieren kann.

Viele Grüße,
Yano

Hallo Leute,

ich kann mich Yano nur anschließen.
Ich habe ebenfalls das Problem sobald ich die Pagetabs in der separaten HTML Seite in die index.html einbinde, erhalte ich die doppelten Einträge.
In der Separaten Datei ist nur ein DIV und keine weiteren scripte etc... werden geladen. Doppelte Einträge erhalte ich dann vom Type VOLUME und THERMOSTAT.
Mit den Entwickler Tools sieht es dann genauso aus wie bei Yano...

Hier der HTML Code für mein Thermostat. Nicht besonderes. Dennoch doppelt.

Code Auswählen Erweitern

<li data-row="4" data-col="7" data-sizex="1" data-sizey="2">
<header><div data-type="label" class="large">Badezimmer Temp.</div></header>
<div class="sheet">
<div class="row">
<div data-type="thermostat" data-device="BA_Heizung_Clima" data-get="desired-temp" data-temp="measured-temp" data-min="4" data-off="off" data-max="31" data-boost="boost"></div>
</div>
</div>
</li>


Das ganze muss jedoch irgendwie mit den Page Tabs zusammen hängen...Sobald die Weg sind wird auch alles anständig angezeigt und dann ist auch der GET Parameter richtig.

Jemand noch ne Idee?

Grüße Benn

[viegener]

Pagetabs ersetzen den grössten Teil der HTML-Seite (alles innerhalb des Gridsters), die sind deshalb relativ anfällig für inkorrektes HTML (also nichtgeschlossene tags / fehlerhafte Strings / fehlende Leerzeichen etc / mehrfach geladene Skripts). Meine Empfehlung ist zu überprüfen ob das HTML korrekt ist - Vielleicht hilft ja einer der HTML-Validierer weiter?

[peterboeckmann]

Pagetabs ersetzen den grössten Teil der HTML-Seite (alles innerhalb des Gridsters), die sind deshalb relativ anfällig für inkorrektes HTML (also nichtgeschlossene tags / fehlerhafte Strings / fehlende Leerzeichen etc / mehrfach geladene Skripts). Meine Empfehlung ist zu überprüfen ob das HTML korrekt ist - Vielleicht hilft ja einer der HTML-Validierer weiter?

Darum ist es auch wichtig, den script-Verweis im Head nur in der ersten Datei zu haben. Die Inhalte der verlinkten Dateien sind ja nur im Gridster eingebunden. Wenn da auch nochmal das Javascript aus dem Head ausgeführt wird, werden die Thermostate doppelt angezeigt.

Gesendet von meinem SM-G930F mit Tapatalk

[setstate]

Hat jemand schon drauf verwiesen?

https://wiki.fhem.de/wiki/FHEM_Tablet_UI_FAQ#Wie_baue_ich_ein_Men.C3.BC_mit_dem_Pagetab_Widget_auf.3F

Und wie peterboeckmann schon sagte:     <script src="js/fhem-tablet-ui.js" defer></script> nur einmal in der index.html , nicht in den Subfiles

[nokion]

Und bitte die index.html NICHT mit in die Datei menu.html aufnehmen, sonst ist wieder alles doppelt.

VG
T

[OdfFhem]

Da mich die doppelte Darstellung langsam nervt und bei mir auch kein mehrmaliges Refreshen der Seite zu einem Ende der fehlerhaften Darstellung führt, habe ich einmal einen (hoffentlich) "ballastfreien" Testfall konstruiert (fhem-tablet-ui.js nicht mehrfach vorhanden, kein pagetab, ...).

Das Beispiel enthält lediglich
- einmal ein thermostat-Widget, direkt eingebettet in ein div-Tag (Anzeige 1x)
- einmal ein thermostat-Widget, über ein include-Widget vollkommen identisch eingebettet in ein div-Tag (Anzeige 2x, davon 1x ohne Messwert-Darstellung)

index_doppelt.html

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
  <script src="js/fhem-tablet-ui.js" defer></script>
  <title>doppelt-Test</title>
</head>
<body>
  <div style="background-color:#CCB487;">
    <div data-type="include" data-url="template_neu_thermostat1.html" data-parameter='{"param01":"ftuitest","param02":"SZ1"}'></div>
  </div>
  <div style="background-color:#A5C19D;">
    <header class="">SZ2</header>
    <div data-type="thermostat" data-device="ftuitest" data-get="userRead_desired_temp_celsius"
         data-temp="userRead_measured_temp_celsius" data-min="15" data-max="25" data-step="1"></div>
  </div>
</body>
</html>


template_neu_thermostat1.html

Code Auswählen Erweitern


<header>param02</header>
<div data-type="thermostat" data-device="param01" data-get="userRead_desired_temp_celsius"
    data-temp="userRead_measured_temp_celsius" data-min="15" data-max="25" data-step="1"></div>


Da das Verhalten in Chrome sowie Firefox identisch ist (Desktop und auch Tablet), habe ich die Hoffnung, dass vielleicht doch noch die Ursache gefunden werden kann ...


Die Doppelung habe ich übrigens auch schon beim weather-Widget festgestellt; auch hier wurde dauerhaft das zur Wetterlage passende "Icon" 2x dargestellt.

[setstate]

Gute Demo, damit kann man arbeiten

Es scheint ein Race Condition Problem sein. Während das include noch lädt, initialisiert das thermostat widget beide gefundene.

Da muss ich noch Verrieglungen einbauen.

Update:

Ich muss in jedes Modul einen Marker einbauen, dass des Element schon einmal initialisiert wurde

Code Auswählen Erweitern


        me.elements = $('[data-type="' + me.widgetname + '"]:not([data-ready])', me.area);
        me.elements.each(function (index) {
            var elem = $(this);
            elem.attr("data-ready", "");


[setstate]

Die Änderung ist eingebaut. -> Update

[OdfFhem]

@setstate
Ich habe vor einer Weile das Update eingespielt und bislang noch keine Ungereimtheit festgestellt; es scheint soweit alles zu laufen und ich sehe auch keine Doppelgänger mehr.

Desweiteren habe ich das oben angesprochene weather-Widget-Konstrukt in ein Template ausgelagert und auch das funktionierte auf Anhieb - perfekt.


Vielen Dank für die schnelle Lokalisierung und Beseitigung dieses lästigen Verhaltens.


P.S.: Und das "-" von gestern ist auch weg ...