New FHEM Tablet UI

[dancatt]

Hallo zusammen,

ich schaue mir auch gerade mal diese neue UI an. Schick und schlicht. Bis jetzt super. Vielen Dank.

Ich hätte nun natürlich auch Fragen:
1.
Es gibt ein dummy1 mit

Code Auswählen Erweitern

attr setList state:Wert1,Wert2,Wert3,Wert4
In dem neuen UI habe ich das nun folgendermaßen gemacht:

Code Auswählen Erweitern


<div class="cell left">
<div type="switch" device="dummy1" data-get-on="Wert1" data-set-on="Wert1" class="cell" ></div>
<div type="label" class="cell">Wert1</div>
<div type="switch" device="dummy1" data-get-on="Wert2" data-set-on="Wert2" class="cell" ></div>
<div type="label" class="cell">Wert2</div>
<div type="switch" device="dummy1" data-get-on="Wert3" data-set-on="Wert3" class="cell" ></div>
<div type="label" class="cell">Wert3</div>
<div type="switch" device="dummy1" data-get-on="Wert4" data-set-on="Wert4" class="cell" ></div>
<div type="label" class="cell">Wert4</div>
</div>

Wenn in Fhem Wert2 ausgewählt ist, dann ist im Tablet UI auch Wert2 ausgewählt. Soweit ok.
Wenn man im Tablet UI nun Wert3 auswählt dann wird in Fhem korrekterweise der Wert3 gesetzt. Aber im Tablet UI sind dann Wert2 UND Wert3 ausgewählt. Erst nach einem Refresh der Seite ist korrekterweise nur noch Wert3 ausgewählt.
- Ist ein Refresh der Seite immer notwendig? Longpoll ist auf 1 gesetzt.
- Was mir zusätzlich noch nicht gefällt, ist, dass man einen ausgewählten Wert anklicken kann so dass dieser nicht mehr ausgewählt ist. Dadurch ist kein Wert ausgewählt und es kommt zu einem undefinierten Zustand. Lösung wäre vielleicht sowas wie eine Radio-Button-Gruppe.

2.
Ist es möglich ein Icon anzuzeigen welches nicht anklickbar ist? Z.B. das PRESENCE Modul. Wenn absent dann Icon im Normalzustand, wenn present dann Icon farbig. Oder z.B. um anzuzeigen ob ein Rauchmelder aktiv ist.

3.
Ist was geplant für eine Batterieanzeige, Plots, Werte/Icon farbig darstellen abhängig eines Grenzwertes, Anrufliste (Modul TM-CallMonitor)?


Vielen Dank.

MfG
Daniel

[setstate]

ich habe es aus  Nestes Code übernommen ....

@bjoernbo,@nesges: Man könnte, wenn data-set="on-for-timer xxx", dann leuchtet der Push-Button für xxx Sekunden.
Blöd wird es nur, wenn jemand die Zeit korrigieren will, also einen Button daneben drückt, dann leuchten zwei ...
Dann müsste man alle Push-Button, die das gleiche Device haben und auch data-set="on-for-timer.*" haben vorher ausschalten.

[Luigi]

Genau das war mein Problem.

Vielen Dank
Luigi

Hallo Luigi,

hast Du die aktuellste Version von fhem-tablet-ui.js installiert ?

Hast Du vielleicht die index.html übernommen und nur einige Devices geändert und den Rest unverändert gelassen.
So hatte ich Anfangs begonnen, weil es augenscheinlich so einfach ist. Das macht aber Probleme.

Grüße Jens

[bjoernbo]

So, ich bin jetzt zu 90% fertig.

Es bleiben jetzt nur noch Kleinigkeiten übrig wie z.B. die Kameras noch richtig einbinden und eine Lampe mit "Dimmerfunktion". Dann wäre ich fertig und frage mich, war es das nun schon 

Es fehlen zwar noch ein paar Sachen, wie z.B. der Abfallkalender oder die Anruferliste der FritzBox. Vielleicht wird es später mal eine Möglichkeit geben, sowas auch noch einzubinden.

Anbei mein Ergebnis. An dieser Stelle vielen Dank an nesges der mich mit seinem UI und dem Code inspiriert hat!

Ps: Da ganze ist ausgelegt für ein 10.1" Tablet und läuft ohne Probleme mit WebViewControl
Pps: Hinter dem FHEM-Logo gelange ich zum FHEM Dashboard. Vom FHEM Dashboard gelange ich wieder zurück zu diesem UI

[nesges]

@bjoernbo,@nesges: Man könnte, wenn data-set="on-for-timer xxx", dann leuchtet der Push-Button für xxx Sekunden.
Blöd wird es nur, wenn jemand die Zeit korrigieren will, also einen Button daneben drückt, dann leuchten zwei ...
Dann müsste man alle Push-Button, die das gleiche Device haben und auch data-set="on-for-timer.*" haben vorher ausschalten.

Bin mir grade unschlüssig, ob mir das nicht zuviel Intelligenz für einen einfachen Push-Button ist. Ich gehe bisher bei ähnlichen Problemstellungen den Weg, dass ich beim setzen von on-for-timer XXX gleichzeitig einen Dummy mit time()+XXX setze, also mit der Ausschaltzeit. Das ist für meine Anwendungsfälle die interessantere Info - dass die Lampe brennt weiss ich eh, wie lange sie noch brennt ist das was ich wissen möchte. Von daher: Wäre ein nettes Feature, ich persönlich find's aber nicht so wichtig.

[setstate]

@dancatt: zu 1) probiere es mal mit Negation: data-get-off="((?!Wert1).)*" data-get-on="Wert1"

Bedeutet: alles außer Wert1 führt zum Ausschalten. Habe ich aber noch nicht selbst getestet, sollte aber klappen.

Zu Punkt 2 und 3 denke ich auch noch nach ...

[dancatt]

@dancatt: zu 1) probiere es mal mit Negation: data-get-off="((?!Wert1).)*" data-get-on="Wert1"

Vielen Dank schonmal, werde ich testen.
Und wie ist es mit dem Refresh vom Tablet-UI?

[bjoernbo]

zum Refesh.... was meinst Du genau ?
Das sich ICONS, nachdem etwas geschaltet wurde aktuallisieren, oder andere HTML Inhalte?

Ich verwende das UI mit "WebViewControll" da gibt es einen Button refresh.

Meiner Ansicht nach, ist es aber auch möglich (da es sich ja um HTML handelt) ein kleines JS einzubinden, welches das UI nach x Sekunden aktualliesiert.

z.B.
JS:     

window.setTimeout("location.reload()", 10000);

HTML:

<meta http-equiv="refresh" content="10;url=http://[WEB-UI URL]">

Beides 10 Sekunden

[jehu]

Hallo bjoernbo,

Deine UI sieht schick aus.

Eine Lösung für den Müllkalender  (ich nutze http://forum.fhem.de/index.php/topic,32382.0.html) und Familienkalender suche ich auch noch.

Wie hast du das mit dem Wettericon gelöst?

Grüße
Jens

[setstate]

Vielen Dank schonmal, werde ich testen.
Und wie ist es mit dem Refresh vom Tablet-UI?

Refresh ist zur Zeit so:
- wenn longpoll aus ist, aller 30 sek ein shortpoll (refresh aller controls)
- wenn longpoll an ist, kommen alle Events ja live rein, dann nur aller 15 Minuten sicherheitshalber ein shortpoll (Full refresh) falls ein Event mal verlustig gegangen ist.

Den zusätzlichen refresh könnte man auch weglassen, das könnte ich demnächst als Configschalter anbieten.

[nesges]

Werte/Icon farbig darstellen abhängig eines Grenzwertes

Das kannst du per Javascript lösen. Ein Ausschnitt:

Code Auswählen Erweitern

$('div[type=label]').each(function(index) {
$(this).bind("DOMSubtreeModified", function(event) {
    var elem = $(event.target);
    var get = elem.attr("data-get");
   
    // Temperature / Humidity
    if(get) {
        var val = 1*elem.text().replace(/\s+.*/, '');
        if(val) {
            // humidity; alle ausser A_HUMID
            if(elem.attr("data-get").match(/humidity/) && !elem.attr("device").match(/^A_HUMID$/)) {
                if(val >= 70) {
                    elem.css("color", "#FF0000");
                } else if(val < 40 || val > 60) {
                    elem.css("color", "#FFCC80");
                }
            }
            // temperature; alle ausser A_HUMID|KUEHL_THERMO
            if(elem.attr("data-get").match(/temperature/) && !elem.attr("device").match(/^A_HUMID|KUEHL_THERMO$/)) {
                if(val < 10) {
                    elem.css("color", "#FFFFFF");
                } else if(val < 15) {
                    elem.css("color", "#6699FF");
                } else if(val > 21) {
                    elem.css("color", "#AD3333");
                } else if(val > 23) {
                    elem.css("color", "#FF0000");
                }
            }
        }
    }
    });
});

Der Code färbt Labels mit data-get="humidity" oder "temperature" deren Wert sich ausserhalb meines Komfortbereiches (40-60% hum, 15-21°C temp) ein.

Anrufliste (Modul TM-CallMonitor)?

TM-Callmonitor kenne ich leider nicht, aber falls das Modul ähnlich wie FB_CALLMONITOR arbeitet hilft dir folgender Code evtl.:

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizex="6" data-sizey="4">
    <header>ANRUFE</header>
    <table class="calls" width="100%">
        <tr>
            <td><div type="label" device="FritzBox" data-get="B0"></div></td>
            <td>
                <div type="label" device="FritzBox" data-get="D0" style="font-size:x-large;color:#aa6900;"></div>
                <div type="label" device="FritzBox" data-get="C0"></div>
            </td>
            <td class="r"><div type="label" device="FritzBox" data-get="E0"></div></td>
            <td class="r"><div type="label" device="FritzBox" data-get="A0"></div></td>
        </tr>
       
        <tr>
            <td><div type="label" device="FritzBox" data-get="B1"></div></td>
            <td>
                <div type="label" device="FritzBox" data-get="D1" style="font-size:x-large;color:#aa6900;"></div>
                <div type="label" device="FritzBox" data-get="C1"></div>
            </td>
            <td class="r"><div type="label" device="FritzBox" data-get="E1"></div></td>
            <td class="r"><div type="label" device="FritzBox" data-get="A1"></div></td>
        </tr>
        [...]
    </table>
</li>

[bjoernbo]

@ nesges ALTA !!!! Ja genau das meinte ich. Du bist ein Teufelskerl !!! Muss ich gleich erstmal implementieren.

@ jehu: Genaus diesen Abfallkalender habe ich in meinem FHEM Dashboard. Diesen hätte ich aber jetzt auch gerne im neuem UI ! :-D
Deine Frage zum Wettericon .... Du meinst das Symbol im container Wetter??? Das ist eine Grafik die eingebunden habe. Anbei der Code und das Icon:

<li data-row="5" data-col="4" data-sizex="1" data-sizey="1">
        <header>WETTER</header>
        <div class="container">
         <div class="center">
         <a href="http://IP-Adresse:PORT/fhem/tablet/index_2.html">
         <img src="img/wetter_trans.png" height="90" wight="90" border="0" alt="Wetter"></a>
          </div>
</li>

Ich rufe hierbei die selbige Seite erneut auf, allerdings mit dem feinen Unterschied, dass der große Container "Wohnzimmer" durch das Regenradar ersetzt wird.

<li data-row="2" data-col="5" data-sizex="3" data-sizey="3">
        <header>WETTERRADAR</header>
        <div class="container">
          <div class="center">
                 <div type="label" class="cell"><a href="http://IP-Adresse:PORT/fhem/tablet/index_V2.html">
<img src="http://www.wetteronline.de/?pid=p_radar_map&ireq=true&src=radar/vermarktung/p_radar_map_forecast/forecastLoop/DL/latestForecastLoop.gif" width="300" height="375">
</img src>
</a></div>
</div>
</li>

Das war meine Idee im ersten Versuch. Tippe ich dann auf das Regenradar geht es wieder zurück auf die andere Seite.

Jetzt wird das Wetter direkt auch über das "Regenschirmsymbol" aufgerufen.

[bjoernbo]

@ nesges: Prinzip Verstanden, kein Problem. Nur wie hast du es geschafft das dir die Symbole angezeigt werden?
by the way ... B0, B1, B2 wird bei mir im FB_CALLMONITOR als eine Zeile dargestellt.

B0   16:23 06.02.2015   2015-02-06 16:23:49

ist das bei dir auch so?

Hast du die Rufnummer gerundet :-D

[bjoernbo]

nun mit Anhang

[nesges]

@ nesges: Prinzip Verstanden, kein Problem. Nur wie hast du es geschafft das dir die Symbole angezeigt werden?
B0, B1, B2 wird bei mir im FB_CALLMONITOR als eine Zeile dargestellt.  ist das bei dir auch so?

Die beiden Punkte werden durch etwas JS-Code gelöst, der in den DomSubtreeModified-Temperature/Humidity-Code mit eingebaut wird. Folgendes:

Code Auswählen Erweitern

// Calls
if(elem.attr("data-get") && elem.attr("data-get").match(/^A[0-9]$/) && elem.text().match(/^(AB|(in|out)_(not)?connected)$/)) {
    var text = elem.text();
    var color = 'rgb(111,69,0)';
    var img = '<a href="javascript:$.get(\'/fhem?cmd='+encodeURI('{call('+elem.attr("data-get").replace(/^A/, '')+')}')+'&XHR=1\');false;" class="cell fa-stack fa-2x">'
        + '<i id="bg" class="fa fa-stack-2x fa-circle-thin" style="color: '+color+';"></i>'
        + '<i id="fg" class="fa fa-stack-1x fa-phone" style="color: '+color+';"></i>'
        + '</a>';
    elem.text('');
    elem.prepend(img);
    if(text.match(/^out_/)) {
        elem.prepend(img.replace(/fa-phone/, 'fa-angle-right').replace(/rgb\(111,69,0\)/, 'rgb(80,80,80)'));
    } else if(text.match(/^in_/)) {
        elem.prepend(img.replace(/fa-phone/, 'fa-angle-left').replace(/rgb\(111,69,0\)/, 'rgb(170,105,0)'));
    }
}
if(elem.attr("data-get") && elem.attr("data-get").match(/^B[0-9]$/) && elem.text().match(/^\d+:\d\d:\d\d\ \d\d.\d\d.\d\d\d\d$/)) {
    var time = elem.text().replace(/^(\d+:\d\d:\d\d)\ (\d\d.\d\d.\d\d\d\d)$/, '$1');
    if(time.match(/^\d:/)) {
        time = '0' + time;
    }
    var date = elem.text().replace(/^(\d+:\d\d:\d\d)\ (\d\d.\d\d.\d\d\d\d)$/, '$2');
    elem.text('');
    elem.prepend(date + '<br>' + time);
}

A ersetze ich also durch die beiden Symbole; Pfeil links/rechts für eingehend/ausgehender Anruf; der Hörer ruft in fhem eine Methode call() auf.
In B ersetze ich das Leerzeichen durch ein <br>. Das ist alles noch recht frisch und sicherlich buggy. Und bevor die Frage kommt:

Code Auswählen Erweitern

sub call($;$) {
    my $number = shift;
    my $name = shift||$number;

    if($number < 5) {
        $name = ReadingsVal('FritzBox', 'C'.$number, '');
        $number = ReadingsVal('FritzBox', 'D'.$number, '');
    }

    fhem("set FRITZ ring 610 1 Alert");
    ar_tts("monitroid", "$name wird angerufen");
    fhem("set FRITZ call ".$number);
}

Hast du die Rufnummer gerundet :-D

Telefonnummern werden aktuell als Fliesskommazahlen interpretiert, daher wird die führende Null abgeschnitten und ein ".0" angehangen. Ich hab das Problem bei mir lokal gefixt, meine Lösung hat aber den Nachteil, dass der bisherige Default 1 für data-fix dadurch auf 0 geändert werden muss. Gibt bereits nen Pullrequest dazu, aber evtl. fällt setstate noch ne bessere Lösung ein. Dass die Nummern bei dir aktuell noch falsch angezeigt werden ist auf jeden Fall noch normal