New FHEM Tablet UI

[onkeltom]

Hallo onkeltom,

willkommen hier!

Wenn du schon soweit gekommen bist, sind alle Requirements erfüllt.

Das Problem mit den Thermostaten sollte mit dem neuen Update jetzt gelöst sein. Also die js/fhem-tablet-ui.js
noch mal neu holen und ins Fhem kopieren.

Zum Thema Lampen poste mal die beiden Werte, die FHEM anzeigt bei Lampe an und Lampe aus. Und dann deine Zeile dazu aus der index.html. Da ist irgendwo der falsche Werte für data-get-on (bzw. data-on) angegeben.

Viele Grüße
Mario

Hallo Mario,

das Thermostat funktioniert nach dem Update. Auch der Zustand des Schalters wird nun richtig angezeigt:

Code Auswählen Erweitern

<div type="switch" device="Licht_Flur" data-get-on="an" data-get-off="aus" data-set-on="an" data-set-off="aus" class="cell" >
Vielen Dank.

Nun habe ich versucht, einen Dummyschalter mit dem UI zu verbinden. Der Dummy ist in FHEM so definiert:

Code Auswählen Erweitern

define Testschalter dummy
attr Testschalter devStateIcon on:general_an@green off:general_aus@red
attr Testschalter group Beleuchtung
attr Testschalter room Flur
attr Testschalter webCmd on:off
In der index.html steht analog zum o. g. Lichtschalter:

Code Auswählen Erweitern

<div type="switch" device="Testschalter" data-get-on="on" data-get-off="off" data-set-on="on" data-set-off="off" class="cell" >

Wenn ich den Dummy von FHEM WEB schalte, wird das Icon im Tablet UI auch umgeschaltet, allerdings nur, bis das Tablet UI neu geladen wird. Dann wird das Icon immer im Status "aus" dargestellt.

Ich bitte im Hilfe.

Gruß,
onkeltom

[Brockmann]

wie nesges schon erklärt hat, gibt es manchmal mehr als die beiden Status. Bei mir werden auch die Transitions Status beim longpoll erfasst, z.B. set_on, set_off. Das führte zu nervösen Hin- und Herflackern des Switches. Mit data-get-on/data-get-off kann man jetzt nur die wichtigen herausfiltern und reagieren.

Hmm, das bedeutet aber auch beispielsweise bei der Keymatic:
data-get-on="locked" data-get-off="unlocked"

Ist die Keymatic locked, geht das Icon auf "on".
Öffnet man nun die Keymatic per Hand, geht deren Status auf "unlocked (uncertain)". Das Icon in der UI bleibt aber auf "on", laut UI wäre die Keymatic also weiterhin gelockt.

Also ich will gar nicht sagen, dass das ein Fehler wäre. Im Fall der Keymatic würde es reichen, das data-get-off="unlocked" einfach wegzulassen und die Anzeige passt.
Man sollte vielleicht nur in der Doku darauf hinweisen, dass es solche Seiteneffekte haben kann, wenn man data-get-on und data-get-off in einer Definition gleichzeitig verwendet?

[nesges]

Ist die Keymatic locked, geht das Icon auf "on".
Öffnet man nun die Keymatic per Hand, geht deren Status auf "unlocked (uncertain)". Das Icon in der UI bleibt aber auf "on", laut UI wäre die Keymatic also weiterhin gelockt.det?

Dabei hilft die Änderung mit den regulären Ausdrücken. Du kannst data-get-off="unlocked.*" setzen, dann wird jeder Status, der mit "unlocked" beginnt als "off" interpretiert.

[setstate]

Macht wirklich Spass damit zu spielen Du hattest schonmal ein Plugin-System erwähnt, ich hoffe ich greife mit dem folgenden nicht zu weit vor bzw. daneben.

Ich habe das volume-Widget kopiert und um "Hooks" erweitert:
....
Damit habe ich einen Drehschalter von 0-360, mit dem ich einen Farbton für's Milight wählen kann und der mir direktes Feedback gibt, indem er die gewählte Farbe bereits beim drehen als Hintergrundfarbe für sein Blatt setzt.

Hallo nesges,
das ist ja Wahnsinn, was du alles für dolle Sachen beisteuerst. Aber viel zu schnell für mich
Ich bin noch nicht soweit, kommt aber noch das. Habe schon Beispiele rausgesucht, wo es so funktionieren soll, wie ich es mir vorstelle. Bin aber noch mit dem neuen Dimmer-Widget am Fummeln, bin aber schon weit und es ist bald fertig. Es basiert auf dem Switch, aber man kann es wie ein Slider bewegen. Die Skale kommt erst raus, wenn man den Button bewegt. Der Button geht danach wieder in die Ausgangslage zurück, der Stellwert wird klein angezeigt. Damit kann man normal ein/ausschalten per Klick, aber auch den An-Wert von 0-100 anpassen (was man ja nicht sooft macht)

normal (https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/gh-pages/dimmer_normal.png) ändern (https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/gh-pages/dimmer_out.png)

[onkeltom]

Hallo,

habt Ihr vielleicht auch einen Tipp für den Dummi mit dem Dummy? 
Ich krieg's einfach nicht hin 
http://forum.fhem.de/index.php/topic,34233.msg273168.html#msg273168

Dann habe ich noch festgestellt, dass ich das Thermostat nur steuern kann, wenn ich vorher einen Schalter, der in FHEM existiert, über das UI schalte.
Also: Wenn ich das UI neu lade, kann ich zwar mit der Schaltfläche des Thermostats die Temperatur ändern, in FHEM kommen aber keine Befehle an.
Wenn ich dann über das UI das Flurlicht ein- oder ausschalte und danach das Thermostaticon anklicke, erschein unter links der Befehl "Set heiz_Term_Bad desired-temp 17" und in FHEM und am Thermostat kommt der Befehl an?
Wie kann ich das Verhalten beeinflussen?

Gruß,
onkeltom

[setstate]

Hallo Onkeltom,

das wird ja immer verwirrender bei dir  .
Den Fall mit dem Dummy habe ich gestern versucht bei mir nachzustellen, genau mit deiner cfg -> klappt alles.
Auch das Problem mit dem Thermostat kann ich mir nicht erklären.
Ich vermute, es passieren Javascriptfehler. Was sagt die Konsole während du klickst, hast du da schon mal nachgesehen?
-> Öffne die Seite zum Beispiel im Firefox und öffne Menü > Entwickler-Werkzeuge > Web-Konsole (alt+cmd+k)

[nesges]

Ich bin noch nicht soweit, kommt aber noch das. Habe schon Beispiele rausgesucht, wo es so funktionieren soll, wie ich es mir vorstelle.

Kein Problem, ich hab's bei mir so implementiert, dass ich im Original JS nur eine Zeile ändern muss. Also kein Thema das erstmal parallel zu pflegen. Bin gespannt auf deine Lösung Ebenso bin ich auf den Slider gespannt, aktuell übernimmt die Dim-Aufgabe bei mir auch ein modifiziertes Volume-Widget.

Bei mir ist im moment auch nur die Frage aus http://forum.fhem.de/index.php/topic,34233.msg272321.html#msg272321 offen geblieben: Ist das wirklich fhem-longpoll und wäre es sinnvoll umsetzbar die automatische Aktualisierung pro Device abschaltbar zu machen? An dem Punkt blick ich den JS-Code nicht

[Brockmann]

Bei mir läuft longpoll immer noch nicht rund. Zum Testen habe ich mal ein einfaches Beispiel erstellt:

Code Auswählen Erweitern


<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
<header>TEST</header>
<div class="container left">
<div type="label" device='Wetterstation' data-get="state" data-unit="Hell." data-part="18" data-fix="0" class="cell big"></div>
</div>
<div class="container right">
<div type="label" device='Wetterstation' data-get="brightness" data-unit="Hell." data-fix="0" class="cell big"></div>
</div>
</li>


Es geht beide Male um denselben Wert. Einmal zusammen mit allen anderen Werten in state, einmal im separaten Reading brightness. Einzige Unterschiede der Definitionen sind also data-get und bei der oberen Definition das zusätzliche data-part.

Die Events dazu im Event-Viewer:

Code Auswählen Erweitern


2015-03-15 11:25:01 CUL_HM Wetterstation brightness: 17
2015-03-15 11:25:01 CUL_HM Wetterstation T: 5.8 H: 88 W: 0.6 R: 5.9 IR: 0 WD: 240 WDR: 67.5 S: 12 B: 17


Ergebnis: Die eine Anzeige (die auf das Reading brightness geht) wird immer direkt aktualisiert. Die andere Anzeige via state und data-part hingegen nicht bzw. nur bei Refresh oder alle x Minuten.

In der Webkonsole (Ausschnitt ab dem letzen manuellen Refresh der Seite) kann ich nichts auffälliges erkennen, aber andere ja vielleicht?

Code Auswählen Erweitern


GET http://fhem:8083/fhem/tablet/test.html [HTTP/1.1 200 OK 50ms]
GET http://fhem:8083/fhem/tablet/lib/jquery.gridster.min.css [HTTP/1.1 200 OK 19ms]
GET http://fhem:8083/fhem/tablet/css/fhem-tablet-ui.css [HTTP/1.1 200 OK 86ms]
GET http://fhem:8083/fhem/tablet/css/my-fhem-tablet-ui.css [HTTP/1.1 200 OK 91ms]
GET http://fhem:8083/fhem/tablet/lib/font-awesome.min.css [HTTP/1.1 200 OK 117ms]
GET http://fhem:8083/fhem/tablet/lib/jquery.toast.min.css [HTTP/1.1 200 OK 179ms]
GET http://fhem:8083/fhem/pgm2/jquery.min.js [HTTP/1.1 304 Not Modified 175ms]
GET http://fhem:8083/fhem/tablet/lib/jquery.gridster.min.js [HTTP/1.1 200 OK 273ms]
GET http://fhem:8083/fhem/pgm2/jquery.knob.min.js [HTTP/1.1 304 Not Modified 86ms]
GET http://fhem:8083/fhem/tablet/lib/jquery.toast.min.js [HTTP/1.1 200 OK 173ms]
GET http://fhem:8083/fhem/tablet/lib/fa-multi-button.min.js [HTTP/1.1 200 OK 174ms]
GET http://fhem:8083/fhem/tablet/js/fhem-tablet-ui.js [HTTP/1.1 200 OK 261ms]
Unbekannte Eigenschaft '-moz-osx-font-smoothing'.  Deklaration ignoriert. font-awesome.min.css:4:528
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. font-awesome.min.css:4:1549
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. font-awesome.min.css:4:1712
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. font-awesome.min.css:4:1878
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. font-awesome.min.css:4:2049
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. font-awesome.min.css:4:2222
GET http://fhem:8083/fhem/fhem/ [HTTP/1.1 200 OK 16ms]
GET http://fhem:8083/fhem/fhem/ [HTTP/1.1 200 OK 30ms]
GET http://fhem:8083/fhem/fhem/ [HTTP/1.1 200 OK 28ms]
"update done (filter:*)" fhem-tablet-ui.js:380:1
GET http://fhem:8083/fhem/fhem/ [HTTP/1.1 200 OK 59999ms]
"start longpoll" fhem-tablet-ui.js:415:1
GET http://fhem:8083/fhem/fhem/ [HTTP/1.1 200 OK 60005ms]
"start longpoll" fhem-tablet-ui.js:415:1
"update done (filter:Wetterstation)" fhem-tablet-ui.js:380:1
GET http://fhem:8083/fhem/fhem/ [HTTP/1.1 200 OK 60000ms]
"start longpoll" fhem-tablet-ui.js:415:1
GET http://fhem:8083/fhem/fhem/ [HTTP/1.1 200 OK 59998ms]
"start longpoll" fhem-tablet-ui.js:415:1
"update done (filter:Wetterstation)" fhem-tablet-ui.js:380:1
GET http://fhem:8083/fhem/fhem/ [HTTP/1.1 200 OK 59999ms]
"start longpoll" fhem-tablet-ui.js:415:1
GET http://fhem:8083/fhem/fhem/ [HTTP/1.1 200 OK]
"start longpoll" fhem-tablet-ui.js:415:1



[setstate]

Kein Problem, ich hab's bei mir so implementiert, dass ich im Original JS nur eine Zeile ändern muss. Also kein Thema das erstmal parallel zu pflegen. Bin gespannt auf deine Lösung Ebenso bin ich auf den Slider gespannt, aktuell übernimmt die Dim-Aufgabe bei mir auch ein modifiziertes Volume-Widget.

Bei mir ist im moment auch nur die Frage aus http://forum.fhem.de/index.php/topic,34233.msg272321.html#msg272321 offen geblieben: Ist das wirklich fhem-longpoll und wäre es sinnvoll umsetzbar die automatische Aktualisierung pro Device abschaltbar zu machen? An dem Punkt blick ich den JS-Code nicht

Hallo longpoll Verzweifelte,
da müssen wir tiefer im Debug-Modus überprüfen, was da genau passiert.
In der fhem-tablet-ui.js sind in der function longPoll einige console.log(...), die müsst ihr mal rein-kommentieren (die '//' wegnehmen) und in der Web-Console schauen, was da genau gesendet wird. Zeile 458 oder 489.
@Brockmann: Ich vermute, da das der letzte Wert in der Reihe ist, gibt es noch Probleme (kl. Bug). Bei einer Wert, der weiter vorne im State steht, funktioniert es bestimmt.

[nesges]

Code Auswählen Erweitern

<div type="volume"
        device="MILIGHT_Zone1_Wohnzimmer"
        data-get="brightness"
        data-set="dim"
        data-min="2"
        data-max="100"
        ></div>

Code Auswählen Erweitern

update done (filter:*)
fhem-tablet-ui.js:421 start longpoll
fhem-tablet-ui.js:391 set MILIGHT_Zone1_Wohnzimmer dim 51
fhem-tablet-ui.js:460 #2015-03-15 12:06:03 MilightDevice MILIGHT_Zone1_Wohnzimmer transitionInProgress: 1#
fhem-tablet-ui.js:491 2015-03-15 12:06:03 / MILIGHT_Zone1_Wohnzimmer / transitionInProgress / 1
*
fhem-tablet-ui.js:460 #2015-03-15 12:06:03 MilightDevice MILIGHT_Zone1_Wohnzimmer on 51#
fhem-tablet-ui.js:386 update done (filter:MILIGHT_Zone1_Wohnzimmer)
fhem-tablet-ui.js:489 2015-03-15 12:06:03 / MILIGHT_Zone1_Wohnzimmer / STATE / on 51
fhem-tablet-ui.js:491 2015-03-15 12:06:03 / MILIGHT_Zone1_Wohnzimmer / STATE / on 51
fhem-tablet-ui.js:460 #2015-03-15 12:06:03 MilightDevice MILIGHT_Zone1_Wohnzimmer transitionInProgress: 0#
fhem-tablet-ui.js:491 2015-03-15 12:06:03 / MILIGHT_Zone1_Wohnzimmer / transitionInProgress / 0

Die Zeile "*" ist von Hand eingefügt und markiert den Zeitpunkt zu dem das Display in der Anzeige zurück springt (siehe PS) . Daraus ergibt sich folgender Ablauf:

1.) Start mit Dim-Level 100 (brightness: "100", STATE: "on 100")
2.) Im Widget auf 51 runter regeln ("set MILIGHT_Zone1_Wohnzimmer dim 51" -> brightness: "51", STATE: "on 51")
3.) Debug Ausgaben bis *
4.) Display im Widget springt zurück auf 100
5.) Debug Ausgaben nach *
6.) Display bleibt auf 100

Punkt 6 ist klar, weil es im MilightDevice kein Event auf das Reading brightness gibt. Punkt 4 ist mMn ein Bug. Mit den zusätzlichen Ausgaben auf der Console sieht das auch nicht mehr nach longPoll-Bug, sondern Widget-Bug aus (wobei der Fehler nicht auftritt, wenn longpoll abgeschaltet ist).

PS: festgestellt mit xhr: function()

Code Auswählen Erweitern

for (var i=currLine; i < lines.length; i++) {
    [...]
}
alert(line + " end of longpoll");

Edit: Evtl. auch noch interessant: Egal wie oft ich den Wert ändere, er springt immer(!) wieder zurück auf den beim reload der Seite eingestellten Wert.

[onkeltom]

Hallo Mario,

[GELÖST]
wenn ich die Seite aufrufe, steht in der Web Konsole:

Code Auswählen Erweitern

GET http://192.168.188.1:8083/fhem/tablet [HTTP/1.1 200 OK 47ms]
GET http://192.168.188.1:8083/fhem/tablet/lib/jquery.gridster.min.css [HTTP/1.1 200 OK 172ms]
GET http://192.168.188.1:8083/fhem/tablet/css/fhem-tablet-ui.css [HTTP/1.1 200 OK 156ms]
GET http://192.168.188.1:8083/fhem/tablet/lib/font-awesome.min.css [HTTP/1.1 200 OK 156ms]
GET http://192.168.188.1:8083/fhem/tablet/lib/jquery.toast.min.css [HTTP/1.1 200 OK 172ms]
GET http://192.168.188.1:8083/fhem/pgm2/jquery.min.js [HTTP/1.1 304 Not Modified 94ms]
GET http://192.168.188.1:8083/fhem/tablet/lib/jquery.gridster.min.js [HTTP/1.1 200 OK 406ms]
GET http://192.168.188.1:8083/fhem/pgm2/jquery.knob.min.js [HTTP/1.1 304 Not Modified 172ms]
GET http://192.168.188.1:8083/fhem/tablet/lib/jquery.toast.min.js [HTTP/1.1 200 OK 406ms]
GET http://192.168.188.1:8083/fhem/tablet/lib/fa-multi-button.min.js [HTTP/1.1 200 OK 406ms]
GET http://192.168.188.1:8083/fhem/tablet/js/fhem-tablet-ui.js [HTTP/1.1 200 OK 406ms]
Unbekannte Eigenschaft '-moz-osx-font-smoothing'.  Deklaration ignoriert. font-awesome.min.css:4:528
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. font-awesome.min.css:4:1549
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. font-awesome.min.css:4:1712
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. font-awesome.min.css:4:1878
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. font-awesome.min.css:4:2049
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. font-awesome.min.css:4:2222
GET http://192.168.188.1:8083/fhem/ [HTTP/1.1 200 OK 1185ms]
GET http://192.168.188.1:8083/fhem/ [HTTP/1.1 200 OK 1154ms]
GET http://192.168.188.1:8083/fhem/ [HTTP/1.1 200 OK 1185ms]
GET http://192.168.188.1:8083/fhem/ [HTTP/1.1 200 OK 1185ms]
GET http://192.168.188.1:8083/fhem/ [HTTP/1.1 200 OK 1154ms]
GET http://192.168.188.1:8083/fhem/ [HTTP/1.1 200 OK]
"start longpoll" fhem-tablet-ui.js:415:1
TypeError: s is null fhem-tablet-ui.js:547:5


Beim Klicken auf den Thermostat-Regler tut sich in der Konsole erstmal nichts.
Wenn dann das Icon für das Flurlicht betätigt wird, erscheint

Code Auswählen Erweitern

GET http://192.168.188.1:8083/fhem/ [HTTP/1.1 200 OK 63ms]
"set Licht_Flur an" fhem-tablet-ui.js:385:4
"update done (filter:Licht_Flur)" fhem-tablet-ui.js:380:1

Erst danach sendet der Thermostat-Regler, wenn er bedient wird:

Code Auswählen Erweitern

GET http://192.168.188.1:8083/fhem/ [HTTP/1.1 200 OK 47ms]
"set heiz_Term_Bad desired-temp 14" fhem-tablet-ui.js:385:4
"update done (filter:heiz_Term_Bad)"

Lässt sich anhand dieser Meldungen mein Problem eingrenzen?

Gruß,
onkeltom

[onkeltom]

Hallo,

in der fhem-tablet-ui.js stand in Zeile 547

Code Auswählen Erweitern

!==
Das habe ich in

Code Auswählen Erweitern

!=
geändert und jetzt funktioniert alles.

Danke für die Unterstützung.

Gruß,
onkeltom

[Brockmann]

@Brockmann: Ich vermute, da das der letzte Wert in der Reihe ist, gibt es noch Probleme (kl. Bug). Bei einer Wert, der weiter vorne im State steht, funktioniert es bestimmt.

Nee, das kann ich nicht bestätigen. Das ist bei jedem anderen Wert der Reihe ebenso. Ich hatte nur Brightness genommen, weil die sich quasi jedes Mal ändert. Beim ersten Wert (temperature) ist es aber genau dasselbe.
Ich probiere mal, die von Dir genannten Zeilen einzukommentieren.

[setstate]

@nesges: nur in kürze:

du hast brightness abonniert, aber das Event kommt mit STATE (kein 'brightness: 51') :

Code Auswählen Erweitern

2015-03-15 12:06:03 / MILIGHT_Zone1_Wohnzimmer / STATE / on 51

darauf erfolgt das Update des Widgets, es wird in die Liste der aktuelles States geschaut und da steht brightness noch mit 100, weil es bei dem Parameter keine Änderung gab. 

[nesges]

Ah, verstanden! Kann das Update auf ein nicht abonniertes Event unterbunden werden? Interessant ist STATE ja nur, wenn data-get nicht bzw. gleich "STATE" gesetzt ist.