Slider immer auf 0 nach "Seitenwechel" (Navigation mit Link-Widget und data-load

Thyraz · 22 Januar 2020, 12:09:14

Hi,

mir ist aufgefallen, dass nach Seitenwechsel in meiner Navigation die Slider für die Lampen teilweise auf 0 bleiben.

Ich lade also zu Beginn die Seite, Slider stehen richtig.

Dann wechsel ich den Tab und dann wieder zurück.

Alle Anzeigen auf der Seite sehen immer noch gleich aus, nur die Slider sind plötzlich auf 0.
Das Komische ist, ich habe in der selben Ansicht auch Labels die ihre Farbe basierend auf dem selben Device und Reading aus FHEM ändern.
Und die zeigen weiterhin korrekt an.

Am Datenabruf von FHEM oder des Daten-Caches innerhalb FTUI kann es also eigentlich nicht liegen.

Sobald ich dann z.B. die Helligkeit eines Dimmers ändere springt der Slider in der aktuellen Ansicht dann auch wieder auf die korrekte Position.
Aber nur dieser.
Die restlichen (identisch konfigurierten) Slider auf der selben Seite bleiben bei 0 bis auch bei ihnen eine Änderung eintritt.

Hat jemand eine Idee wie man da weiter debuggen kann?

Thyraz · 22 Januar 2020, 12:28:56

Ohje.

Gerade nochmal auf dem iPhone getestet.
Dort dann festgestellt, dass das Problem schon behoben ist, wenn ich das Handy drehe.
Es sind danach alle Slider wieder auf der richtigen Position.

Es dürfte also ein reines UI Problem sein.
Entweder fehlendes UI-Update der Slider Elemente beim Seitenwechsel aus irgendeinem Grund (aber eben nicht immer), oder ein Timingproblem...

Das wird fies zu finden. $:-\$

@setstate wenn du Ideen hast und das zufällig siehst: Gerne her damit.

setstate · 22 Januar 2020, 12:41:30

Das sieht nach einem Problem mit der Berechnung der Weite/ Höhe aus. Bei Display: none; kann nichts berechnet werden. Ich würde einfach eine feste Breite vorgeben: data-width="120"

Thyraz · 22 Januar 2020, 13:42:14

Momentan hab ich data-width="100%" drin, da die Slider in einer Flexbox sitzenund entsprechend von der Größe angepasst werden sollen.
Eine Änderung zu data-width="200px" ändert aber auch nichts am Verhalten.

Kann es durch das Flex-Design sein, dass das update zu einem Zeitpunkt gemacht wird wenn das Design noch nicht komplett im finalen Zustand ist?
Aber müsste dann nicht am Ende ein resize Event kommen der das dann fixt?

Für weitere Eingebungen bin ich jederzeit offen.

Werde mal versuchen ein Beispiel ohne Flexbox zu testen, ob es da auch auftritt.

Thyraz · 22 Januar 2020, 21:44:29

Hab mal ein minimales Beispiel zusammengeklickt.
Dort ist nun gar kein User CSS mehr drin und das Beispiel ist praktisch der Sample Code aus Github + 1 Slider mit fester Breite.

Öffne ich die Seite mit dem Link zum ersten Tab: .../index.html#content_wohnen.html und klicke dann auf ein anderes Icon und wieder zurück zum ersten tritt der Effekt schon auf.

Wenn ich nur über .../index.htm ohne geladenen Content einsteige und dann erst auf die Tabs klicke dauert es meist ein paar Klicks mehr, aber es passiert dann auch recht schnell.

Kannst du mal testen ob das bei dir auch so ist (getestet mit Chrome und Safari am Mac und mobile Safari auf iPad und iPhone)?
Oder ob bei meiner Installation irgendwas komisch reagiert.
FHEM und TabletUI sind jedenfalls beide aktuell.

index.html mit Tabbar und 3 Links

Code Auswählen


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="longpoll_type" content="websocket">
    <meta name='longpoll_maxage' content='240'>
    <meta name='toast' content='0'>
    <meta name='debug' content='0'>

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

<body>
    <div id="panel">
        <div class="page" id="content-wohnen"></div>
        <div class="page" id="content-kind"></div>
        <div class="page" id="content-kind2"></div>
    </div>
    
    
    <footer>
        <div class="tab-bar" >  

            <div class="tab-link" >
                <div data-type="link"
                   data-load="div#content-kind"
                   data-url="#content_kind.html"
                   data-icon="fa-child"
                   data-color="black"
                   data-active-color="gray"
                   data-active-pattern=".*#content_kind.html">
                </div>
            </div>

            <div class="tab-link" >
                <div data-type="link"
                   data-load="div#content-wohnen"
                   data-url="#content_wohnen.html"
                   data-icon="fa-couch"
                   data-color="black"
                   data-active-color="gray"
                   data-active-pattern=".*#content_wohnen.html">
                </div>
            </div>
            
            <div class="tab-link" > 
                <div data-type="link"
                    data-load="#content-kind2"
                    data-url="#content_kind2.html"
                    data-icon="fa-child"
                    data-color="black"
                    data-active-color="gray"
                    data-active-pattern=".*#content_kind2.html">
                </div>
            </div>
            
        </div>
    </footer>
</body>
</html>

Seite für ersten Tabbar Button: content_wohnen.html

Code Auswählen


<!DOCTYPE html>
<html>
<body>
<div class="page" id="content-wohnen">
	<div>
    
        <!-- Start of template content -->

        <div style="height: 30px"></div>

        <div data-type="slider"
            data-device="HUEDevice1"
            data-get="pct"
            data-set="pct"
            data-min="0"
            data-max="100"
            data-width="200px"
            class="horizontal">
        </div>
        
        <div style="height: 30px"></div>

        <!-- End of template content -->
    
    </div>
</div>
</body>
</html>

Die anderen beiden Templates sind leer bis auf die Grundstruktur

content-kind.html

Code Auswählen


<!DOCTYPE html>
<html>
<body>
<div class="page" id="content-kind">
	<div>
    
        <!-- Start of template content -->
        
        <!-- End of template content -->
        
	</div>
</div>
</body>
</html>

content-kind2.html

Code Auswählen


<!DOCTYPE html>
<html>
<body>
<div class="page" id="content-kind2">
	<div>
	
        <!-- Start of template content -->

        <!-- End of template content -->
        
	</div>
</div>
</body>
</html>

setstate · 23 Januar 2020, 08:17:40

Danke für die Demoseiten. Das Problem kann ich bei mir nachstellen. Ich werde forschen.

Thyraz · 23 Januar 2020, 08:33:49

Super, danke dir.

setstate · 23 Januar 2020, 21:42:17

ich habe slider und link etwas angepasst, damit das Rendern sicherer funktioniert.

Thyraz · 23 Januar 2020, 22:01:05

Funktioniert einwandfrei.

Vielen Dank dir für die schnelle Lösung.