New FHEM Tablet UI

[MarcoE]

Hallo,
nun geht es auch bei mir. Habe die Limits nun auch auf -50,1 gesetzt (und dafür wirklich nur das delta zwischen innen und aussen genommen).

Vielen Dank dafür!
Nun habe ich nur manchmal das Problem, daß nach dem expliziten reload im Browser (egal ob Chrome oder FF) nur noch die Überschriften erscheinen (siehe falsch.png)
Nach Löschen des Cache und reload geht es dann wieder (siehe richtig.png). Wobei selbst dann manchmal z.B. die Icons des Homestatus nicht geladen werden.
Was mache ich da falsch?

Danke und Gruß,
Marco

[Brockmann]

Ich bastel gerade zum ersten Mal an einem Pagetab. Ist soweit klar, nur dass es etwas mühsam ist, den Browser zu einem echten Refresh zu überreden. Der aktualisiert dann vermutlich nur die Indexseite, aber nicht die Unterseite. Dazu muss man den Cache löschen oder jedes Mal ein Incognito-Tab aufmachen. Falls jemand einen Tipp hat, wie es einfacher geht... gerne.

Mein eigentliches Anliegen ist aber: Wäre es möglich, dem Pagetab eine ähnliche Funktionalität wie dem Popup zu geben, so dass es auf ein Reading in FHEM lauscht und dann automatisch zur entsprechenden Unterseite wechselt? Also dass man in FHEM set MenueDummy menueseite2.html sagt und dann wechselt Pagetab zu ...menue.html#menueseite2.html.

Die Idee dabei ist halt, beispielweise wenn es an der Haustür klingelt könnte das Pagetab automatisch zu der Unterseite wechseln, wo das Kamerabild angezeigt wird und man die Tür öffnen kann.

Sorry, falls das Thema schon mal angesprochen wurde.

[devil77]

Kleiner Tip für die die Chrome benutzen.

- F12 drücken für die Entwicklertools
- dann auf das Symbol für Seite Neuladen drücken und Maus gerückt halten
- Jetzt hat man die Auswahl für Seite direkt neu laden und nicht aus dem cache

Gerade in Testphasen nutze ich das um wirklich sicher zu stellen das ich den aktuellen Stand angezeigt bekommen.

[nojo0812]

Kleiner Tip für die die Chrome benutzen.

- F12 drücken für die Entwicklertools
- dann auf das Symbol für Seite Neuladen drücken und Maus gerückt halten
- Jetzt hat man die Auswahl für Seite direkt neu laden und nicht aus dem cache

Der Tipp ist super, vor allem beim Testen. Dafür gibt es bei den meisten Browsern auch eine schnelle Tastenkombination, meist Strg+F5 wie auch in Chrome.

https://de.m.wikipedia.org/wiki/Hilfe:Cache#Browsercache_.E2.80.9Eleeren.E2.80.9C.2Faktualisieren

Gesendet von meinem Nexus 5 mit Tapatalk

[andrece]

kann ich das Tablet UI einfach parallel zu meinem jetzigen fhem installieren. Das heisst das ich wie immer noch schauen kann wie jetzt oder mit anderem link auf die neue Oberfläche?

[Brockmann]

kann ich das Tablet UI einfach parallel zu meinem jetzigen fhem installieren. Das heisst das ich wie immer noch schauen kann wie jetzt oder mit anderem link auf die neue Oberfläche?

Ja. Wenn Du der Installationsanleitung folgst, passiert genau das.

[viegener]

Ich bastel gerade zum ersten Mal an einem Pagetab. Ist soweit klar, nur dass es etwas mühsam ist, den Browser zu einem echten Refresh zu überreden. Der aktualisiert dann vermutlich nur die Indexseite, aber nicht die Unterseite. Dazu muss man den Cache löschen oder jedes Mal ein Incognito-Tab aufmachen. Falls jemand einen Tipp hat, wie es einfacher geht... gerne.

Ich kenne das Verhalten eher im Javascript, dort schalte ich während der Entwicklung den http-cache ab (geht in firefox über about:config)
Die Raumseiten werden bei mir normalerweise problemlos refreshed, sobald ich die Seite neu lade, im Zweifelsfall halte ich beim neuladen gelegentlich shift fest, denn das übersteuert den Cache für die aktuelle Seite (Ctrl in IE).

Mein eigentliches Anliegen ist aber: Wäre es möglich, dem Pagetab eine ähnliche Funktionalität wie dem Popup zu geben, so dass es auf ein Reading in FHEM lauscht und dann automatisch zur entsprechenden Unterseite wechselt? Also dass man in FHEM set MenueDummy menueseite2.html sagt und dann wechselt Pagetab zu ...menue.html#menueseite2.html.

Die Idee dabei ist halt, beispielweise wenn es an der Haustür klingelt könnte das Pagetab automatisch zu der Unterseite wechseln, wo das Kamerabild angezeigt wird und man die Tür öffnen kann.

Es scheint eine entsprechende Funktion im pagetab code zu geben, diese wird über die Zuordnung der class "activate" aktiviert und setzt natürlich auch das setzen von data-device etc voraus. Ich habe das jetzt aber nicht ausprobiert.

Gruss,
Johannes

[viegener]

Es scheint eine entsprechende Funktion im pagetab code zu geben, diese wird über die Zuordnung der class "activate" aktiviert und setzt natürlich auch das setzen von data-device etc voraus. Ich habe das jetzt aber nicht ausprobiert.

Ich habe das mal selber ausprobiert, allerdings habe ich es nicht zum Laufen zu bekommen.

Anbei findet sich ein widget_pagetab, bei dem man die Aktivierung über die class activate steuern kann.
Es gibt zwei EInschränkungen:
- Es funktioniert nicht mit Arrays in data-get-on
- Der Tag wird nur beim Erreichen eines Wertes/Status von einem anderen Wert erreicht. Damit man manuell wieder auf die ursprüngliche Seite wechseln kann. Erst wenn zwischendurch ein anderer Status beim tablet UI ankam ist wieder ein Wechsel möglich. Im Prinzip ist das auch klar, denn sonst wäre ja keine andere Seite anwählbar, da die Bedingung für den Wechsel immernoch erfüllt ist.

@Brockmann: Vielleicht kannst Du das ja mal ausprobieren und Rückmeldung geben?

[hillbicks]

Da ich das circlemenu nicht ans Laufen bekommen habe, habe ich mal die index-example.html im Browser aufgerufen und die sieht folgendermassen aus:

(http://i.imgur.com/SHjMzUn.png)

Verschiedene Browser ausprobiert, eben auch nochmal ein update gemacht.

Kann mir jemand sagen was mir fehlt/falsch ist?

[DJ_SAMMY190]

in der example ist ein </div> zu viel^^

[setstate]

in der example ist ein </div> zu viel^^

Vielen Dank für den Hinweis.
Ist korrigiert.

[Brockmann]

@Brockmann: Vielleicht kannst Du das ja mal ausprobieren und Rückmeldung geben?

Danke, ich schaue es mir an und melde mich dann.

[reichi]

Ich hätte da ein Anliegen... Im Beispiel:

Entweder das laden der javascript libs ans ende des bodys (also direkt vor </body>), das wäre die "olschool high-compatibility" version.
Oder jedes mit dem defer attribut versehen: <script type="text/javascript"... defer></script>

[reichi]

Ich hätte da ein Anliegen... Im Beispiel:

Entweder das laden der javascript libs ans ende des bodys (also direkt vor </body>), das wäre die "olschool high-compatibility" version.
Oder jedes mit dem defer attribut versehen: <script type="text/javascript"... defer></script>

[Brockmann]

Nochmal zum Thema Pagetab:

@viegener: Deine Version habe ich nicht so hinbekommen, dass irgendetwa passiert wäre. Aber das kann an mir liegen. Aber auf Deinen Hinweis, dass für das Standard-Pagetab ein "activate" vorgesehen sei, habe ich noch mal gesucht und die Infos bzw. ein Beispiel dafür gefunden. Damit klappt es im Prinzip auch (und jetzt kommt das ABER).

Ich habe es mal beispielhaft so gemacht (ein Pagetab mit vier Seiten, die man sowohl per UI als auch aus FHEM heraus steuern können soll):

Code Auswählen Erweitern


<html>
<body>
    <div class="cell">
        <div data-type="pagetab" data-device="Datastore"
data-get-on='["1","2","3","4"]'
data-icons='["fa-home activate","fa-home","fa-home","fa-home"]'
data-url="nexus_1.html" class="cell">
</div>
        <div data-type="pagetab" data-device="Datastore"
data-get-on='["1","2","3","4"]'
data-icons='["fa-sliders","fa-sliders activate","fa-sliders","fa-sliders"]'
data-url="nexus_2.html" class="cell">
</div>
        <div data-type="pagetab" data-device="Datastore"
data-get-on='["1","2","3","4"]'
data-icons='["fa-music","fa-music","fa-music activate","fa-music"]'
data-url="nexus_3.html" class="cell">
</div>
        <div data-type="pagetab" data-device="Datastore"
data-get-on='["1","2","3","4"]'
data-icons='["fa-hotel","fa-hotel","fa-hotel","fa-hotel activate"]'
data-url="nexus_4.html" class="cell">
</div>
    </div>
</body>
</html>


Das funktioniert soweit auch, nur dass immer nur das Icon des gerade geöffneten Tabs korrekt angezeigt wird. Bei den anderen sieht man nur ein Kreissymbol (siehe Bild). Das Problem dürfte sein, dass bei dieser Definition alle Icons immer "on" sind.
Ich habe schon alle möglichen Varianten durchprobiert, Vorgaben für Farben usw. zu machen, bin aber zu keiner Lösung gekommen. Hinzu kommt, dass der manuell gewählte Pagetab nicht mit dem Reading in FHEM synchron ist. Also wenn man erst per Reading zu Tab 2 wechselt und dann manuell zu Tab 1 zurück, steht das Reading immer noch auf Tab 1, was das verwendet von data...s-Attributen schwierig macht.

Ich habe das Gefühl, dass das ein grundlegendes Problem des Pagetab-Widgets ist, aber vielleicht gibt es ja auch eine einfache Lösung, die ich übersehe?