Tablet UI -Icons mal da , mal nicht

rasti · 23 Januar 2016, 21:13:19

Hallo,

ich habe mal angefangen mit Tablet UI ein wenig rumzuspielen.
Ich sehe mir das ganze an einem 10 Zoll Tablet an mit dem Boat Browser
im Fullscreen-Modus an, im Prinzip funktioniert es auch.

Ein Problem das ich habe, ist dass auf einer Seite nie alle Icons/Buttons
zu sehen sind, ich hänge mal die Screenshots an, wie die Seite aussieht,
wenn ich jeweils nach ein paar Mal auf Reload drücke.

Code ist unten, Screenshots auch.

Hat evtl. noch jemand diesen Effekt gesehen ?

Woran liegt das ?

Gruss

Ralf

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
    <meta name="widget_base_width" content="145">
    <meta name="widget_base_height" content="145">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- 1=output to console;0=no output -->

    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

    <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>


    <title>FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>HOME</header>
<div data-type="pagebutton" data-url="index.html" class="cell" data-icon="fa-info" class="cell"></div>
        <div data-type="label" class="cell">Haupt&uuml;bersicht</div>
</li>
    
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
        <header>BAD</header>
        <div data-type="thermostat" data-device="BadHeizung_Clima" data-valve="ValvePosition" class="cell left"></div>
        <div class="cell right">
                <div data-type="symbol" data-device="BadFenster" class="narrow"></div>
                <div data-type="label" class="narrow darker small">Fenster</div>
        </div>
</li>
<li data-row="1" data-col="3" data-sizex="2" data-sizey="1">
        <header>SCHLAFZIMMER</header>
        <div data-type="thermostat" data-device="SchlafzimmerHeizung_Clima" data-valve="ValvePosition" class="cell left"></div>
        <div class="cell right">
                <div data-type="symbol" data-device="SchlafzimmerFenster" class="narrow"></div>
                <div data-type="label" class="narrow darker small">Fenster</div>
        </div>
</li>

<li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
        <header>WOHNZIMMER</header>
        <div data-type="switch" data-device="FS20_Steckdose_2" class="cell" data-icon="fa-music" ></div>
        <div data-type="label" class="cell">Volumio Server</div>
</li>

<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
        <header>WOHNZIMMER 2</header>
        <div data-type="switch" data-device="FS20_Steckdose_4" class="cell"></div>
        <div data-type="label" class="cell">Lichterkette</div>
</li>

<li data-row="1" data-col="8" data-sizex="1" data-sizey="1">
        <header>WOHNZIMMER 3</header>
        <div data-type="switch" data-device="FS20_Steckdose_4" class="cell"></div>
        <div data-type="label" class="cell">Lichterkette</div>
</li>
 
<li data-row="2" data-col="1" data-sizex="8" data-sizey="4">
<div class="embed-container">
    <iframe width=1250px  height=550px src="http://192.168.178.7" frameborder="0" ></iframe>
</div>
 </li>
</ul>
</div>
</body>
</html>

chunter1 · 23 Januar 2016, 22:36:03

Hab das gleiche Problem.
Anbei die originale example page vom tablet-ui mit fehlenden Zahlen.

setstate · 24 Januar 2016, 02:52:55

Wenn die Thermostatzahlen fehlen, liegt das definitiv am falschen Device/Reading Einstellungen. Wenn du die Parameter aus dem Example 1:1 unverändert übernommen hast und diese Geräte nicht hast, kann nichts korrektes angezeigt werden.
Die DIV-Elemente, die ihr nicht als Device habt, sollten gelöscht werden.

rasti · 24 Januar 2016, 13:14:51

Zitat von: setstate am 24 Januar 2016, 02:52:55
Wenn die Thermostatzahlen fehlen, liegt das definitiv am falschen Device/Reading Einstellungen. Wenn du die Parameter aus dem Example 1:1 unverändert übernommen hast und diese Geräte nicht hast, kann nichts korrektes angezeigt werden.
Die DIV-Elemente, die ihr nicht als Device habt, sollten gelöscht werden.

bei mir werden aber auch vorhandene Elemente oft nicht angezeigt....

setstate · 24 Januar 2016, 13:20:05

Das können die falschen Elemente verursachen! Schau doch mal ins Fhem log (hoher Debuglevel), da gibt es bestimmt jede Menge Fehlermeldungen: Device unbekannt ...
Das stört ...

chunter1 · 24 Januar 2016, 14:23:43

Wenn ich mein tablet-ui aus FHEM heraus öffne, steht z.B. beim Dimmer immer ein alter, falscher Wert.
Wenn ich dann in tablet-ui einen neuen Dimmer Wert setze übernimmt die ui den Wert sofort richtig und der Dimmer geht auch auf den neuen Wert.
Wenn ich das ganze nochmal von ganz vorne mache, steht wieder der gleiche alte, falsche Dimmer Wert in der tablet-ui.
Was mach ich denn da falsch?

Die Temperatursensor Werte werden übrigens auch erst anzgezeigt, wenn ein Event vom jeweiligen Sensor eintrifft.
Beim ersten Aufruf der tablet-ui fehlen also die kompletten Temperaturwerte; genauso wenn amn einen Reload der Webpage macht.

rasti · 24 Januar 2016, 15:10:35

Zitat von: setstate am 24 Januar 2016, 13:20:05
Das können die falschen Elemente verursachen! Schau doch mal ins Fhem log (hoher Debuglevel), da gibt es bestimmt jede Menge Fehlermeldungen: Device unbekannt ...
Das stört ...

Ich habe nun alle unbekannten Elemene rausgeworfen und diie erste Zeile mit Link-Buttons und FHEM-bekannten FS20 Schaltern belegt.
Problem bleibt leider bestehen ...

Stril · 24 Januar 2016, 15:47:30

Hallo!

Siehst Du die Elemente, wenn Du aktualisierst?
Bei mir bringt oft erst der zweite oder dritte Reload alle Elemente und ich habe auch keine unbekannten Elemente, etc.

Phil

setstate · 24 Januar 2016, 15:48:11

Was sagt der Netzwerkmonitor des Browsers? Sind alles Files geladen worden? Ohne Cache? Dazu debug=1 in der HTML einstellen.

rasti · 24 Januar 2016, 15:58:16

Zitat von: Stril am 24 Januar 2016, 15:47:30
Hallo!

Siehst Du die Elemente, wenn Du aktualisierst?
Bei mir bringt oft erst der zweite oder dritte Reload alle Elemente und ich habe auch keine unbekannten Elemente, etc.

Phil

Das ist leider unterschiedlich und anscheinend nicht reproduzierbar.

Ein Beispiel.
1) Browser an, alles wird korrekt dargestellt.
2) 1xreload, gar keine Graphiken da, nur Textseite
3) nochmal reload ,wieder alles korrekt vorhanden
4) nochmal reload, Seite korrekt, alle Icons fehlen
5) nochmal reload, nur ein Icon fehlt,Rest OK
6,7,8,9,10,......... das kann man nun beliebig fortführen....
Leider mit allen Browsern unter Android so ziemlich das gleiche Problem
Safari unter WIndows geht hingegen fehlerfrei, aber das nützt mir nix....

Gruß
Ralf

chunter1 · 24 Januar 2016, 16:50:04

Zitat von: rasti am 24 Januar 2016, 15:58:16
Das ist leider unterschiedlich und anscheinend nicht reproduzierbar.

Ein Beispiel.
1) Browser an, alles wird korrekt dargestellt.
2) 1xreload, gar keine Graphiken da, nur Textseite
3) nochmal reload ,wieder alles korrekt vorhanden
4) nochmal reload, Seite korrekt, alle Icons fehlen
5) nochmal reload, nur ein Icon fehlt,Rest OK
6,7,8,9,10,......... das kann man nun beliebig fortführen....
Leider mit allen Browsern unter Android so ziemlich das gleiche Problem
Safari unter WIndows geht hingegen fehlerfrei, aber das nützt mir nix....

Gruß
Ralf

hier das gleiche... auf ipad gehts mal so mal so...

Doggiebert · 24 Januar 2016, 16:58:18

Ich hatte das Problem auch, aber irgendwo gabs mal eine Anleitung, wie man die Seiten von Apache ausliefern lässt und nicht von FHEMWEB, und seither keine Probleme

rasti · 24 Januar 2016, 17:43:53

Zitat von: Doggiebert am 24 Januar 2016, 16:58:18
Ich hatte das Problem auch, aber irgendwo gabs mal eine Anleitung, wie man die Seiten von Apache ausliefern lässt und nicht von FHEMWEB, und seither keine Probleme

Hallo,

hört sich schonmal gut an, dass jemand schonmal dieses Problem hatte und auch gelöst hat !

FHEM läuft bei dir auf einem Raspberry Pi?

Könntest du vielleicht noch ein paar erklärende Sätze dazu schreiben ?

Gruß

Ralf

Doggiebert · 24 Januar 2016, 22:54:48

Ja, FHEM läuft auf nem Raspi 2
Ich hatte den Tipp von hier: http://forum.fhem.de/index.php/topic,34233.msg306293.html#msg306293 und ein paar der Folgeposts.
Bei dem Standard raspbian läuft ja schon ein Apache mit (Dateien liegen unter /var/www), ich hab mir einfach dort einen symbolischen Link auf mein FTUI-Verzeichnis gelegt, damit ich alles wie gewohnt unter dem /opt/fhem/www Verzeichnis habe.

rasti · 25 Januar 2016, 01:09:10

Danke.

Ich hab's noch nicht hingekriegt

Aber festgestellt habe ich, dass es in Chrome unter Android auch einwandfrei läuft.

Nur hat Chrome einen Mixed-Content-Blocker, d.h. ich kann http und https Seiten
nicht zusammen auf einer Seite einbringen, was sich bei Tablet UI und Iframes
ja wunderbar anbietet....

Hat jemand mit einem anderen Browser als Chrome die Tablet UI unter Android am Laufen ?

Oder was mir auch helfen würde, wie bringe ich Chrome dazu,Mixed-Content doch anzuzeigen ?
In den Settings habe ich nirgendwo was gefunden, wo man das einstellen könnte...

Gruss

Ralf