New FHEM Tablet UI

[bjoernbo]

Es handelt sich um ein HM-TC-IT-WM-W-EU (HomeMatic Wandthermostat). Wenn ich direkt m Gerät die Temperatur einstelle wird diese im UI richtig angezeigt. Ebenso die aktuelle Raumtemperatur wird richtig angezeigt.

Es hat ja mit o.g. Device schon funktioniert.

[Brockmann]

Das wären die Defaults des Widgets, wenn data-get/temp nicht gesetzt sind. Beim set hat sich ein Bug eingeschlichen. Passe fhem-tablet-ui.js ab Zeile 133 wie folgt an:

Mit dem Fix scheint es nun wieder zu klappen.

[bjoernbo]

nach der Anpassung funktioniert es nun einwandfrei! DANKE

[jehu]

Klasse, mein Problem ist damit auch behoben.

Ich habe noch Probleme mit dem HomeStatus-Widget. Ich nutze das RESIDENTS Device. Wie kann ich das einbinden? Welche Statis 'state' erwartet das Widget ?

Schöne Grüße
Jens

[jehu]

RTFM -Sorry, habe die Lösung gerade im Readme gelesen.

Grüße
Jens

[onkeltom]

Hallo,

ich habe alle Ordner und Dateien für dieses UI mit fireFTP auf die FritzBox, auf der FHEM läuft, kopiert und kann das UI auch aufrufen.
Dann habe ich die index.html geändert, indem ich als Switch einen meiner Devices eingetragen habe. Beim Klick auf das Icon lässt sich eine Lampe nun auch an- und ausschalten. Also scheint es ja im Prinzip zu funktionieren. Allerdings ändert sich das Icon im UI nicht, wenn ich die Lampe direkt am Schaltaktor oder über FHEM WEB schalte.
Ebenfalls wird das Icon nicht als "an" dargestellt, wenn die Lampe angeschaltet ist und ich das UI neu lade.
Ein Homematic Heizungsthermostat habe ich mit dem UI "gekoppelt" bekommen, die Temperatur wird auch bei manueller Betätigung des Thermostats im UI angezeigt. Wenn ich die Temperatur im UI ändern möchte, erscheint die Meldung: Set heiz_Term_Bad undefined 15. Wenn ich das Device als heiz_Term_Bad_Clima angebe, werden auch keine Werte mehr angezeigt.
Das Icon eines in der index.html eingebundenen Fensterkontaktes wird beim Öffnen des Fensters im UI automatisch als "offen" dargestellt, beim Schließen des Fensters als "geschlossen". Ist das Fenster aber geöffnet und ich lade das UI neu, zeigt das Icon "geschlossen" an.
Erfülle ich mit der Fritzbox nicht die Requirements?
    jQuery v1.7+
    font-awesome
    jquery.gridster
    jquery.toast
Ich habe das UI vom Notebook mit Firefox, IE und Chrome aufgerufen und getestet.
Woran kann's liegen, dass es nicht funktioniert?

Danke im Voraus.
Gruß,
onkeltom

[setstate]

Hallo an alle,

Sorry, der Bug mit dem Thermostat tut mir echt leid. Das neue Update ist jetzt oben bei GitHub.

Ausserdem kann man jetzt bei den Switches die Values bei Get und Set getrennt angeben:

Code Auswählen Erweitern

<div type="switch" device="dummyRollo" data-get-on="opened" data-get-off="closed" data-set-on="open" data-set-off="close" data-icon="fa-bars" class="cell" ></div>

[setstate]

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

[Brockmann]

Ausserdem kann man jetzt bei den Switches die Values bei Get und Set getrennt angeben:

Super, das ging ja doch wieder schnell! 
Wobei mir der Sinn von data-get-off nicht ganz klar ist.
Ist nicht data-get-off != data-get-on?
Oder in welchem Szenario ist es von Bedeutung, auf welchen Wert ich data-get-off setze?

[nesges]

Ausserdem kann man jetzt bei den Switches die Values bei Get und Set getrennt angeben:

Sehr sinnvolle Erweiterung! Wenn du das jetzt noch um Patternmatching erweiterst, bekomm ich auch die Milights in den Griff Folgende Ergänzung in fhem-tablet-ui.js, Zeile 373ff:

Code Auswählen Erweitern

if ( state == $(this).data('get-on') )
$(this).data('famultibutton').setOn();
else if ( state == $(this).data('get-off') )
$(this).data('famultibutton').setOff();
else if ( state.match(RegExp('^' + $(this).data('get-on') + '$')) )
    $(this).data('famultibutton').setOn();
else if ( state.match(RegExp('^' + $(this).data('get-off') + '$')) )
    $(this).data('famultibutton').setOff();

Zuerst werden die normalen Matches geprüft. Danach wird versucht  get-on/off als regulären Ausdruck zu interpretieren. Mit der Einschränkung, dass der Regexp den Status vollständig beschreiben muss (durch ergänzen von ^ und $) dürften false positives weitest gehend ausgeschlossen sein. Man kann damit zB folgendes notieren:

Code Auswählen Erweitern

<div type="switch" class="cell"
            device="MILIGHT_Zone1_Wohnzimmer"
            data-get-on="on.*"
            data-get-off="off"></div>

Ich hab wieder einen Pullrequest erstellt (https://github.com/knowthelist/fhem-tablet-ui/pull/3)

[nesges]

Wobei mir der Sinn von data-get-off nicht ganz klar ist.
Ist nicht data-get-off != data-get-on?
Oder in welchem Szenario ist es von Bedeutung, auf welchen Wert ich data-get-off setze?

Manche Devices haben mehrere mögliche on-Zustände. Durch definieren eines expliziten off-Zustandes kann man dafür sorgen, dass nicht definierte on-Zustände nicht fälschlich als off interpretiert werden.

[setstate]

Den Regex Patch für get-on / get-off habe ich gemerged. Super Sache das ... Danke

[nesges]

Den Regex Patch für get-on / get-off habe ich gemerged. Super Sache das ... Danke

Ich danke!

[setstate]

Super, das ging ja doch wieder schnell! 
Wobei mir der Sinn von data-get-off nicht ganz klar ist.
Ist nicht data-get-off != data-get-on?
Oder in welchem Szenario ist es von Bedeutung, auf welchen Wert ich data-get-off setze?

Hi 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.

[nesges]

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:

Code Auswählen Erweitern

$('div[type="knob"]').each(function( index ) {
[...]
knob_elem.knob({
'hookRelease': $(this).data('hook-release'),
'hookChange': $(this).data('hook-change'),
        [...]
'change' : function (v) {
  eval(this.o.hookChange);
  startInterval();
},
'release' : function (v) {
  eval(this.o.hookRelease);
  [...]

Ich lege folgendes Device an:

Code Auswählen Erweitern

<div type="knob"
    device="MILIGHT_Zone1_Wohnzimmer"
    data-get="hue"
    data-set="hue"
    data-min="0"
    data-max="360"
    data-hook-release="this.o.bgColor = 'hsl('+v+', 100%, 50%)';"
    data-hook-change="this.o.bgColor = 'hsl('+v+', 100%, 50%)';"
    ></div>

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.