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?
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. ;)
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"
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.
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
<!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
<!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
<!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
<!DOCTYPE html>
<html>
<body>
<div class="page" id="content-kind2">
<div>
<!-- Start of template content -->
<!-- End of template content -->
</div>
</div>
</body>
</html>
Danke für die Demoseiten. Das Problem kann ich bei mir nachstellen. Ich werde forschen.
Super, danke dir. :)
ich habe slider und link etwas angepasst, damit das Rendern sicherer funktioniert.
Funktioniert einwandfrei.
Vielen Dank dir für die schnelle Lösung. :)