New FHEM Tablet UI

[setstate]

Hier ein Nachfolgeupdate zu Thema Performance-Verbesserung für Tabwechsel/Refresh.
Ich habe jetzt mit Caching der Device-States noch einiges rausholen können. Damit werden die Widget schneller dargestellt und viel Zeit beim Updaten gespart, weil vorher die Notwendigkeit zum Aktualisieren überprüft wird.

[setstate]

so, Debug Modus getestet. Kein Unterschied.
Aso, ich weißt nicht ob es so rüber kam, aber Ein- und Ausschalten kann ich mit Tablet UI.
Nur der Status wird nicht aktualisiert.

Ich habe die Vermutung, dass dein Longpoll Output ein unerwartetes Format hat, wenn überhaupt was ankommt. Deshalb müsstest du mal folgende Zeile auskommentieren und in der Webconsole nachsehen was passiert und mir zukommen lassen http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers

fhem-tablet-ui.js
Zeile 336 //console.log('#'+line+'#');

evtl. auch Zeile 356 auskommentieren

[adb76]

Hier ein Nachfolgeupdate zu Thema Performance-Verbesserung für Tabwechsel/Refresh.
Ich habe jetzt mit Caching der Device-States noch einiges rausholen können. Damit werden die Widget schneller dargestellt und viel Zeit beim Updaten gespart, weil vorher die Notwendigkeit zum Aktualisieren überprüft wird.

Habe mir gleich das Update gezogen : Also die Geschwindigkeit hat sich nochmals deutlich verbessert!

Aber: mit dem Caching hat sich eventuell ein kleiner Bug eingeschlichen. Wenn ich meine Homepage neu lade und sich dann innerhalb der ersten 30 Sekunden der Status eines Device ändert, wird dieser neue Status nicht an der Oberfläche angezeigt z.B. Fenster auf/zu bleibt immer auf dem initialen Status beim data-type "symbol". Nach 30 Sekunden wird wieder jede Änderung direkt angezeigt. War vorher so nicht der Fall. Ach so: Longpoll steht bei mir auf "1".

Gruß,

André

[setstate]

longpoll started erst nach 30 Sekunden. Musste ich so machen, weil ich beim WVC Timeouts bekam. Die Wartezeit kann aber jetzt wieder auf 10 Sekunden runter. Ändere ich heute Abend.

[Raven]

Asche auf mein Haupt, ich hab es ggf. hier in diesem Thread u/o auch in dem User-Demo Thread übersehen wie man die FHEM-SVG plots einbindet.

Die Darstellung vom User CQuadrat aus diesem Thread http://forum.fhem.de/index.php/topic,34233.msg329336.html#msg329336 ist derzeit mein Favorit (insbd. wg. der Größe), aber ich habe keinen Code gefunden.
http://forum.fhem.de/index.php?action=dlattach;topic=34233.0;attach=36819;image

Beim User viegner aus dem User-Demo Thread http://forum.fhem.de/index.php/topic,37378.msg297617.html#msg297617 habe ich den Code gefunden, allerdings werde ich nicht richtig schlau draus, was alles komplett benötigt wird; insbsd. da ich die JS-Funktion für die Plot-"Navigation" nicht benötige.
http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=32511;image

Daher bin ich auf der Suche nach weiteren Code-Beispielen. Vielen Dank vorab.

[IROC_KNX]

Hier das Ergebnis aus der Konsole:
TEST +key:Whnz.Spots+  para:STATE+   val:Ein+
TEST +key:Whnz.Spots+  para:STATE+   val:Ein+
TEST +key:Whnz.Spots+  para:STATE+   val:Aus+
TEST +key:Whnz.Spots+  para:STATE+   val:Aus+

Es scheint ja was anzukommen..

Ich habe die Vermutung, dass dein Longpoll Output ein unerwartetes Format hat, wenn überhaupt was ankommt. Deshalb müsstest du mal folgende Zeile auskommentieren und in der Webconsole nachsehen was passiert und mir zukommen lassen http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers

fhem-tablet-ui.js
Zeile 336 //console.log('#'+line+'#');

evtl. auch Zeile 356 auskommentieren

[setstate]

Müsste dann die Definition nicht so aussehen?

Code Auswählen Erweitern

<div data-type="switch" class="cell"
                         data-device="Whnz.Spots"
                         data-get-on="Ein"
                         data-get-off="Aus"
            </div>


[IROC_KNX]

Top, das war es 

Ich hab jetzt folgende drei Zeilen etntfernt:
data-get="state"
data-set-on="Ein"
data-set-on="Aus"

Könntest du mir kurz erklären was diese Zeilen bewirken? Ich dachte u.a. "State" wäre wichtig.

Aber erst mal vielen Dank

Müsste dann die Definition nicht so aussehen?

Code Auswählen Erweitern

<div data-type="switch" class="cell"
                         data-device="Whnz.Spots"
                         data-get-on="Ein"
                         data-get-off="Aus"
            </div>


[setstate]

Man könnte es ach so angeben

Code Auswählen Erweitern


<div data-type="switch" class="cell"
                         data-device="Whnz.Spots"
                         data-get="STATE"
                         data-get-on="Ein"
                         data-get-off="Aus"
                         data-set-on="Ein"
                         data-set-off="Aus">
</div>

Aber da auch Defaults hinterlegt sind, kann man sich einiges sparen.
Für data-get ist der Default: "STATE", also muss man es auch nicht explizit angeben.
Für data-set-on ist der Default der Wert von data-get-on. Ebenso bei  data-set-off der Wert von  data-get-off. Wenn sich die Werte also nicht unterscheiden, muss man diese auch nicht extra angeben.
Ich habe deine Definition von data-get="state" auf data-get="STATE" geändert, weil im longpoll ja auch "STATE" publiziert wurde und nicht "state".

[IROC_KNX]

Danke für die Erklärung.
Hätte nicht gedacht, dass es Auswirkungen hat ob man Groß oder Klein schreibt.

[setstate]

Hinweis: Damit nach dem Update der Refresh des Simplechart wieder funktioniert, muss jetzt auch ein device angegeben werden, der das Refresh triggert.

Code Auswählen Erweitern


                    data-device="THSensorWZ"
                    data-logdevice="FileLog_THSensorWZ"


[selfarian]

Von was ist es eigentlich Abhängig, ob Widgets übereinander oder nebeneinander erscheinen?
Ich hatte mir gedacht, am sinnvollsten ist es, mein LED16 als template einzubauen:

Code Auswählen Erweitern

<li data-row="5" data-col="2" data-sizex="6" data-sizey="2" data-template="alarmanlage.html"></li>
und habe es dann so aufgebaut:

Code Auswählen Erweitern

<body>
        <header>LED16</header>
        <div class="container">
          <div class="left">

         <div data-type="symbol" data-device="og.sz.led.eg.fl.tuer" data-get-on='["off","green","orange","red"]' data-on-colors='["#505050","SeaGreen","GoldenRod","Crimson"]' data-icons='["fa-bell","fa-bell","fa-bell"]' class="cell"></div>
        <div data-type="symbol" data-device="og.sz.led.eg.az.fenster" data-get-on='["off","green","orange","red"]' data-on-colors='["#505050","SeaGreen","GoldenRod","Crimson"]' data-icons='["fa-bell","fa-bell","fa-bell"]' class="cell"></div>
.......

Leider erscheinen die "fa-bell"'s aber alle nebeinander.Ziel wäre im Prinzip 8 Bells übereinander mit Labels daneben und daneben dann nochmal Labels und Bells. Also im Prinzip wie das LED16 nur als Darstellung auf dem Tablet

[setstate]

Hallo selfarian,

ein normales DIV nach einem normalen DIV macht immer einen Zeilenumbruch. Will man zwei DIVs nebeneinander, muss man class="inline" hinzufügen.
Das LED16 kann man prinzipiell damit dann schon aufbauen.
In der obersten Ebene setzt man einfach zwei DIVs nebeneinander, linke Spalte und rechte Spalte. (Achtung: Breite der Gridster-Box muss ausreichend sein)
Jetzt füllt man jede Spalte mit Zeilen aus Symbol und Label - jeweils zwei DIVs mit class=inline", damit sie nebeneinander angeordnet werden. Die DIVs für die Zeilen brauchen keine besondere Klasse, damit werden sie untereinander angeordnet.
Dem Label habe ich noch die Klasse "w2x" und "left-align" bzw. "right-align" hinzugefügt, damit alle Labels eine feste Breite haben und der Text links bzw. recht angeordnet wird.

Hier mal für 8 LEDs als Beispiel:

Code Auswählen Erweitern

<li data-row="4" data-col="4" data-sizex="6" data-sizey="3">
        <header>LED16 EXAMPLE</header>
        <div class="inline">
            <div>
                <div data-type="symbol" data-device="og.sz.led.eg.fl.tuer1" data-get-on='["off","green","orange","red"]' data-on-colors='["#505050","SeaGreen","GoldenRod","Crimson"]' data-icons='["fa-bell","fa-bell","fa-bell"]' class="narrow inline"></div>
                <div data-type="label" class="w2x left-align darker inline">LED 1</div>
            </div>
            <div>
                <div data-type="symbol" data-device="og.sz.led.eg.fl.tuer3" data-get-on='["off","green","orange","red"]' data-on-colors='["#505050","SeaGreen","GoldenRod","Crimson"]' data-icons='["fa-bell","fa-bell","fa-bell"]' class="narrow inline"></div>
                <div data-type="label" class="w2x left-align darker inline">LED 3</div>
            </div>
            <div>
                <div data-type="symbol" data-device="og.sz.led.eg.fl.tuer5" data-get-on='["off","green","orange","red"]' data-on-colors='["#505050","SeaGreen","GoldenRod","Crimson"]' data-icons='["fa-bell","fa-bell","fa-bell"]' class="narrow inline"></div>
                <div data-type="label" class="w2x left-align darker inline">LED 5</div>
            </div>
            <div>
                <div data-type="symbol" data-device="og.sz.led.eg.fl.tuer7" data-get-on='["off","green","orange","red"]' data-on-colors='["#505050","SeaGreen","GoldenRod","Crimson"]' data-icons='["fa-bell","fa-bell","fa-bell"]' class="narrow inline"></div>
                <div data-type="label" class="w2x left-align darker inline">LED 7</div>
            </div>
        </div>
        <div class="inline">
            <div>
                <div data-type="label" class="w2x right-align darker inline">LED 2</div>
                <div data-type="symbol" data-device="og.sz.led.eg.fl.tuer2" data-get-on='["off","green","orange","red"]' data-on-colors='["#505050","SeaGreen","GoldenRod","Crimson"]' data-icons='["fa-bell","fa-bell","fa-bell"]' class="narrow inline"></div>
            </div>
            <div>
                <div data-type="label" class="w2x right-align darker inline">LED 4</div>
                <div data-type="symbol" data-device="og.sz.led.eg.fl.tuer4" data-get-on='["off","green","orange","red"]' data-on-colors='["#505050","SeaGreen","GoldenRod","Crimson"]' data-icons='["fa-bell","fa-bell","fa-bell"]' class="narrow inline"></div>
            </div>
            <div>
                <div data-type="label" class="w2x right-align darker inline">LED 6</div>
                <div data-type="symbol" data-device="og.sz.led.eg.fl.tuer6" data-get-on='["off","green","orange","red"]' data-on-colors='["#505050","SeaGreen","GoldenRod","Crimson"]' data-icons='["fa-bell","fa-bell","fa-bell"]' class="narrow inline"></div>
            </div>
            <div>
                <div data-type="label" class="w2x right-align darker inline">LED 8</div>
                <div data-type="symbol" data-device="og.sz.led.eg.fl.tuer8" data-get-on='["off","green","orange","red"]' data-on-colors='["#505050","SeaGreen","GoldenRod","Crimson"]' data-icons='["fa-bell","fa-bell","fa-bell"]' class="narrow inline"></div>
            </div>
        </div>
      </li>


[DJ_SAMMY190]

Also seit dem update wird auf dem Tablet der Heizungsregler ist wert nicht mehr angezeigt. Am PC schon. Auch manche Buttons aktualisieren sich nicht mehr. Auch wenn es 10 min aktiv ist.

Gesendet von meinem Z30 mit Tapatalk

[selfarian]

Hallo setstate,

jetzt klappt es, vielen Dank!