Manche "anzeigen" doppelt

Begonnen von derhelge, 19 Oktober 2016, 08:08:59

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten 1 2 3 Alle
Benutzer-Aktionen

haxtibal

#15
02 Oktober 2017, 21:42:57
Autsch, falscher Alarm...

Zitat von: haxtibal am 01 Oktober 2017, 21:49:04
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:
Zitat1. keine Doppelnennung der fhem-tablet-ui.js im HTML

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

peterboeckmann

#16
03 November 2017, 18:17:40
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

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

#17
03 November 2017, 18:45:00
Du solltest mal die Version 2.6.29 probieren ?  ::)

yamizo

#18
03 November 2017, 22:56:41 Letzte Bearbeitung: 03 November 2017, 23:27:43 von yazo
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
<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
<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
                    <div data-type="wind_direction" data-device="myWeather" data-direction="wind_direction" data-speed="wind_speed" class="mini"></div>

viegener

#19
04 November 2017, 01:35:17
@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

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

<body>

<div class="gridster">
<!-- ********************** Hier kommt der Inhalt hin ************************************ -->
</div>
</body>
</html>
Kein Support über PM - Anfragen gerne im Forum - Damit auch andere profitieren und helfen können

peterboeckmann

#20
04 November 2017, 13:33:07
Hallo nochmal,

Zitat von: setstate am 03 November 2017, 18:45:00
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".
Zitat von: viegener am 04 November 2017, 01:35:17
@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
<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

#21
04 November 2017, 20:18:59 Letzte Bearbeitung: 05 November 2017, 13:55:08 von yazo
Hi viegender,

Zitat@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
<!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
!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

#22
08 November 2017, 20:57:31
Hallo yazo,


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

Code Auswählen
<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

#23
10 November 2017, 21:45:57
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

#24
10 November 2017, 22:07:32
Hallo nochmal  8),

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

<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

<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

#25
11 November 2017, 01:57:32
@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
Kein Support über PM - Anfragen gerne im Forum - Damit auch andere profitieren und helfen können

Loetfreund

#26
12 November 2017, 16:09:30
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

#27
14 November 2017, 16:46:22
Zitat von: yazo am 10 November 2017, 22:07:32
Hallo nochmal  8),

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

<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

<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
<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

#28
14 November 2017, 18:35:54
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?
Kein Support über PM - Anfragen gerne im Forum - Damit auch andere profitieren und helfen können

peterboeckmann

#29
14 November 2017, 18:41:55
Zitat von: viegener am 14 November 2017, 18:35:54
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

Drucken
Nach oben Seiten 1 2 3 Alle
Benutzer-Aktionen