New FHEM Tablet UI

[setstate]

Tipp des Tages  

Style und Layout kann man gut per CSS class anpassen.

Zum Beispiel ein Label-Widget ist wunderbar mit  sinnvollen Kombinationen von: small, large, big, bigger, thin, red, green, blue, darker, narrow oder wider anpassbar.

Damit bleibt das HTML lesbarer, allgemeingültiger und schön abstrakt.
Ich finde class="big thin" viel besser als style="font-size:250%;font-weight:lighter;"

Auch das Thermostat-Widget versteht: big und readonly

Ich werde nach und nach die Dokumentation der Optionen ergänzen.

An der Stelle: Vielen Dank an die Wikischreiber!!! Coole Sache!

[setstate]

Test mit residents: State home, absent und gone werden korrekt angezeigt. State gotosleep aber als home.

Test mit roommate:  State home wird als home angezeigt, aber auch state abwesend wird als home angezeigt.

Kann es daran liegen? Ich habe die Bezeichnungen in Deutsch geändert.

Code Auswählen Erweitern

attr eventmap home:zuhause absent:abwesend gone:verreist gotosleep:bettfein asleep:schläft awoken:aufgestanden
attr devstateicon .*zuhause:user_available:absent .*abwesend:user_away:home .*verreist:user_ext_away:home .*bettfein:scene_toilet:asleep .*schläft:scene_sleeping:awoken .*aufgestanden:scene_sleeping_alternat:home .*:user_unknown

Das wusste ich nicht, dass man die einzelnen Status auch ändern kann. Daher muss ich jetzt noch mehr mögliche Varianten fest hinterlegen. Update folgt ... ist geändert

[hotwebnet]

Beschäftige mich grade auch mit dem Livestream mit einen Radio Sende........hier meine HTML code

<div data-type="button"
         data-url="http://rbb-mp3-fritz-m.akacast.akamaistream.net/7/799/292093/v1/gnl.akacast.akamaistream.net/rbb_mp3_fritz_m"></div>

beim drücken vom Button geht es zur http Seite und der Livestream geht los......

ich möchte aber das es im Hintergrund läuft das müsste so gehen....

<div data-type="button"
         data-url-xhr="http://rbb-mp3-fritz-m.akacast.akamaistream.net/7/799/292093/v1/gnl.akacast.akamaistream.net/rbb_mp3_fritz_m/?action=play"></div>


habe auch /?action=start oder do versucht aber leider startet der Stream nicht.... was kann ich nun noch versuchen.........

[Haecksler]

Super Arbeit hier, wirklich Klasse.
Habe mal die ersten Schritte gewagt und klappt soweit auch schon.
Allerdings funktioniert das Dimmer Widget nur im Firefox Browser (Android 5.1).
Weiß jemand Abhilfe ?

Also auf meinem Handy läuft der Dimmer auch mit Chrome usw. Ist Android 4.4.
Nur mit dem Tablet funktioniert der Togglebutton mit WebView, Chrome und Dolphine nicht nur mit Firefox klappt es. Die Prozentzahl kann ich mit allen Browser andern.
Weiß jemand Rat ?
Danke!

Gruß,
Stefan

[setstate]

Beschäftige mich grade auch mit dem Livestream mit einen Radio Sende........hier meine HTML code

<div data-type="button"
         data-url="http://rbb-mp3-fritz-m.akacast.akamaistream.net/7/799/292093/v1/gnl.akacast.akamaistream.net/rbb_mp3_fritz_m"></div>

beim drücken vom Button geht es zur http Seite und der Livestream geht los......

ich möchte aber das es im Hintergrund läuft das müsste so gehen....

<div data-type="button"
         data-url-xhr="http://rbb-mp3-fritz-m.akacast.akamaistream.net/7/799/292093/v1/gnl.akacast.akamaistream.net/rbb_mp3_fritz_m/?action=play"></div>


habe auch /?action=start oder do versucht aber leider startet der Stream nicht.... was kann ich nun noch versuchen.........

Hallo hotwebnet, ich glaube nicht, dass das so funktioniert, wie du denkst. Der Stream soll auf dem Tablet (Rechner) im Hintergrund laufen? Dann müsste ein HTML5 audio Tag benutzt werden. Ich versuche mal ein Demo zu bauen ...

Update Demo liegt auf Github bereit: 'playstream" widget

Code Auswählen Erweitern

<div data-type="playstream" data-url="http://radioeins.de/stream"></div>
<div data-type="label" class="darker">Radio eins</div>


[setstate]

neuer Tipp: eine andere Art und Weise wie man  Up/Down Buttons gestalten kann:

Horizontal:

Code Auswählen Erweitern

<div class="cell">
    <div class="doublebox-h">
        <div data-type="push" data-device="Rollo"
             data-icon="fa-angle-up" data-background-icon="fa-square-o"
             data-set="up">
        </div>
        <div data-type="push" data-device="Rollo"
             data-icon="fa-angle-down" data-background-icon="fa-square-o"
             data-set="down">
        </div>
    </div>
</div>

(http://knowthelist.github.io/fhem-tablet-ui/square-push-h.png)

Vertikal:

Code Auswählen Erweitern

<div class="cell">
    <div class="doublebox-v">
        <div data-type="push" data-device="Rollo"
             data-icon="fa-chevron-up" data-background-icon="fa-square-o"
             data-set="up">
        </div>
        <div data-type="push" data-device="Rollo"
            data-icon="fa-chevron-down" data-background-icon="fa-square-o"
            data-set="down">
        </div>
    </div>
</div>

(http://knowthelist.github.io/fhem-tablet-ui/square-push-v.png)

[nesges]

wind_direction versteht jetzt auch textuelle Windrichtungen ("N", "NNW"...) und hat eine zusätzliche Größeneinstellung per CSS Klasse "tiny" bekommen.

Doku unter https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/README.md#wind_direction
Neuste Version unter https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/js/widget_wind_direction.js

[nesges]

Hier noch eine Idee, die ich quick&dirty umgesetzt hier abkippen muss Im HTML vor <div class="gridster">:

Code Auswählen Erweitern

<div id="shade" style="position:absolute; z-index:1001; background-color:#000000; opacity:0.5; height:100%; width:100%; top:0px; left:0px; display:none;"></div>

In fhem-tablet-ui.js, Zeile 83ff (die mit -> markierten Zeilen):

Code Auswählen Erweitern

if ($.fn.circleMenu){
        $('.menu').each(function() {
                $(this).circleMenu({item_diameter:50,
                    trigger:'click',
                    circle_radius:70,
                    direction:'full',
                    close_event:$(this).hasClass("keepopen")?'':'click',
->                  close:function() {
->                      $("#shade").css("display", "none");
->                  },
                    open:function(){
                        var elem=this;
                        if (elem.options.close_event!=''){
                            timeoutMenu=setTimeout(function(){
->                              $("#shade").css("display", "none");
                                elem.close();
                            },4000);
                        }
->                      $("#shade").css("display", "block");
                    },
                })
                .closest('.gridster>ul>li').css({overflow: 'visible'});
               
        });
    $('.menu li:not(:first-child)').on('click', function(){
->          $("#shade").css("display", "none");
            clearTimeout(timeoutMenu);
    });
}

Effekt in den Screenshots:

[bjoernbo]

ist es möglich, dass circlemenü innerhalb eines labels o.ä. zu setzen?
Idee: ich will gerne, dass innerhalb der Ausgabe des live-Bildes der Kamera, unten rechts das circlemenü einblenden.

(//)

[aliate]

Guten Morgen Zusammen,

erst einmal ein großes Lob an die Gemeinschaft hier für die rasante und tolle Entwicklung dieses Frontends. Auch ich als Anfänger habe es schon in Grundzügen zum Laufen gebracht und es sieht wirklich toll aus

In meinem Haus habe ich eine vollständige KNX-Installation die ich mittlerweile komplett über fhem steuern kann. Das Ganze wird jetzt Schritt für Schritt in das neue Tablet-UI integriert.

Was die Heizungssteuerung betrifft hänge ich aktuelle etwas. Ich kann über das thermostat-widget die Temperatur schon einstellen aber wenn ich z.B. die Temperatur in fhem oder am Wandtaster ändere wird das nicht übernommen bzw. ausgelesen.

Hier mal ein List meines EIB-Geräts zum einstellen der Temperatur:

Code Auswählen Erweitern

Internals:
   DEF        3/3/105
   EIB_MSGCNT 14
   EIB_RAWMSG B0001w336906f4
   EIB_TIME   2015-04-02 23:22:34
   GROUP      3369
   IODev      EIB
   LASTGROUP  3369
   LASTInputDev EIB
   MSGCNT     14
   NAME       Studio_Hermann_SollTemp
   NR         181
   RAWSTATE   06f4
   STATE      17.8 °C
   TYPE       EIB
   Code:
     1          3369
   Readings:
     2015-04-02 23:22:34   desired-temp    17.8 °C
     2015-04-02 23:22:34   measured-temp   18.64 °C
     2015-04-02 23:22:34   state           17.8 °C
Attributes:
   IODev      EIB
   group      2_Temp_Soll
   icon       temp_control
   model      tempsensor
   room       Heizung,Studio
   userReadings desired-temp { ReadingsVal("Studio_Hermann_SollTemp","state",0) ;;}, measured-temp { ReadingsVal("Studio_Hermann_Temp","state",0) ;;}
   webCmd     value
   widgetOverride value:16,16.2,16.4,16.6,16.8,17,17.2,17.4,17.6,17.8,18,18.2,18.4,18.6,18.8,19,19.2,19.4,19.6,19.8,20,20.2,20.4,20.6,20.8,21,21.2,21.4,21.6,21.8,22

Ich habe zum Testen zwei userreadings Namens "desired-temp" und "measured-temp" angelegt. Damit funktioniert es aber auch nicht.

Jetzt das widget aus meiner index-datei:

Code Auswählen Erweitern

<header>Studio Test</header>
<div data-type="thermostat"
data-device="Studio_Hermann_SollTemp"
data-temp="measured-temp"
data-get="desired-temp"
data-set="value"
data-min="16"
data-max="22"
data-step="0.2"
class="cell left"></div>

Ich kann über "data-set=value" die Temperatur einstellen und das wird auch auf "allen Seiten" aktualisiert.
Das Auslesen von "data-temp=measures temp" und "data-get=desired-temp" funktioniert aber nicht bzw. wird nicht in das tablet UI geschrieben.

Habe ja, wie oben geschrieben, diese userreadings zum Testen angelegt -> geht nicht.
Normal werden die Werte in "state" geschrieben -> geht auch nicht.

Habe mir schon gedacht ob es evtl. an der Formatierung der Readings liegt "17.8 &deg;C" sprich an dem Zusatz hinter den Zahlen???!!

Evtl habt ihr ja eine Idee

[DJ_SAMMY190]

Einfach Hammer Style genau so ähnlich wollte ich das bei mir aufbauen nun ist Basteln angesagt macht weiter.

[setstate]

...
Ich kann über "data-set=value" die Temperatur einstellen und das wird auch auf "allen Seiten" aktualisiert.
Das Auslesen von "data-temp=measures temp" und "data-get=desired-temp" funktioniert aber nicht bzw. wird nicht in das tablet UI geschrieben.

Habe ja, wie oben geschrieben, diese userreadings zum Testen angelegt -> geht nicht.
Normal werden die Werte in "state" geschrieben -> geht auch nicht.

Habe mir schon gedacht ob es evtl. an der Formatierung der Readings liegt "17.8 &deg;C" sprich an dem Zusatz hinter den Zahlen???!!

Evtl habt ihr ja eine Idee

Hallo aliate,

ja, es liegt an der Formatierung. Das &deg;C muss beachtet werden. Mit einem RegEx kann man das im Code wegfiltern. Die Lösung habe ich schon fast eingebaut. Muss nur noch getestet werden. Im Laufe des Tages wird es ein Update des Thermostaten geben.

Update ist oben. Alle Interessierte können mal die widget_thermostat.js aktualisieren. Ich hoffe es hat keine negativen Seiteneffekte.

[bjoernbo]

Bin mal am experimentieren mit dem "simplechart" 

<li data-row="2" data-col="2" data-sizex="4" data-sizey="3"> <!-- 928*655 -->
    <header>Chart</header>
    <div class="cell">
        <div data-type="simplechart" data-device="ESA2000"
        data-logfile="SVG_FileLog_ESAx000WZ_5242_1"
        data-logdevice="FileLog_ESAx000WZ_5242">
    </div>

Wie hinterlege ich denn die Werte die ausgelesen werden sollen? Wenn ich das richtige lese, werden die Daten aus dem LogFile gezogen, oder ?

Auszug aus dem Log-File:

2015-04-03_10:19:04 ESAx000WZ_5242 battery: ok
2015-04-03_10:19:04 ESAx000WZ_5242 type: ESAx000WZ
2015-04-03_10:19:04 ESAx000WZ_5242 CNT: 21- CUM: 851.948 CUR: 9.861 TICKS: 96 HR
2015-04-03_10:23:42 ESAx000WZ_5242 repeat: -
2015-04-03_10:23:42 ESAx000WZ_5242 sequence: 23
2015-04-03_10:23:42 ESAx000WZ_5242 total_ticks: 81933
2015-04-03_10:23:42 ESAx000WZ_5242 actual_ticks: 40
2015-04-03_10:23:42 ESAx000WZ_5242 ticks: 96
2015-04-03_10:23:42 ESAx000WZ_5242 raw: CNT: 23- CUM: 81933 CUR: 40  TICKS: 96 HR
2015-04-03_10:23:42 ESAx000WZ_5242 total: 852.791666666586
2015-04-03_10:23:42 ESAx000WZ_5242 actual: 10.9529719078829
2015-04-03_10:23:42 ESAx000WZ_5242 diff: 0.4167
2015-04-03_10:23:42 ESAx000WZ_5242 diff_sec: 277.321993112564
2015-04-03_10:23:42 ESAx000WZ_5242 diff_ticks: 81
2015-04-03_10:23:42 ESAx000WZ_5242 last_sec: 1428049422.03901
2015-04-03_10:23:42 ESAx000WZ_5242 raw_total: 853.46875
2015-04-03_10:23:42 ESAx000WZ_5242 day: 5.84375
2015-04-03_10:23:42 ESAx000WZ_5242 month: 23.8229166666667
2015-04-03_10:23:42 ESAx000WZ_5242 year: 852.791666666586
2015-04-03_10:23:42 ESAx000WZ_5242 rate: HR
2015-04-03_10:23:42 ESAx000WZ_5242 day_hr: 4.78125
2015-04-03_10:23:42 ESAx000WZ_5242 month_hr: 14.8854166666667
2015-04-03_10:23:42 ESAx000WZ_5242 year_hr: 410.979166666689
2015-04-03_10:23:42 ESAx000WZ_5242 hour: 3.25
2015-04-03_10:23:42 ESAx000WZ_5242 battery: ok
2015-04-03_10:23:42 ESAx000WZ_5242 type: ESAx000WZ
2015-04-03_10:23:42 ESAx000WZ_5242 CNT: 23- CUM: 852.792 CUR: 10.953 TICKS: 96 HR
2015-04-03_10:26:43 ESAx000WZ_5242 repeat: -
2015-04-03_10:26:43 ESAx000WZ_5242 sequence: 24
2015-04-03_10:26:43 ESAx000WZ_5242 total_ticks: 81981
2015-04-03_10:26:43 ESAx000WZ_5242 actual_ticks: 48
2015-04-03_10:26:43 ESAx000WZ_5242 ticks: 96
2015-04-03_10:26:43 ESAx000WZ_5242 raw: CNT: 24- CUM: 81981 CUR: 48  TICKS: 96 HR
2015-04-03_10:26:43 ESAx000WZ_5242 total: 853.291666666586
2015-04-03_10:26:43 ESAx000WZ_5242 actual: 9.94043438290398
2015-04-03_10:26:43 ESAx000WZ_5242 diff: 0.5000
2015-04-03_10:26:43 ESAx000WZ_5242 diff_sec: 181.078605890274
2015-04-03_10:26:43 ESAx000WZ_5242 diff_ticks: 48
2015-04-03_10:26:43 ESAx000WZ_5242 last_sec: 1428049603.11761
2015-04-03_10:26:43 ESAx000WZ_5242 raw_total: 853.96875
2015-04-03_10:26:43 ESAx000WZ_5242 day: 6.34375
2015-04-03_10:26:43 ESAx000WZ_5242 month: 24.3229166666667
2015-04-03_10:26:43 ESAx000WZ_5242 year: 853.291666666586
2015-04-03_10:26:43 ESAx000WZ_5242 rate: HR
2015-04-03_10:26:43 ESAx000WZ_5242 day_hr: 5.28125
2015-04-03_10:26:43 ESAx000WZ_5242 month_hr: 15.3854166666667
2015-04-03_10:26:43 ESAx000WZ_5242 year_hr: 411.479166666689
2015-04-03_10:26:43 ESAx000WZ_5242 hour: 3.75
2015-04-03_10:26:43 ESAx000WZ_5242 battery: ok
2015-04-03_10:26:43 ESAx000WZ_5242 type: ESAx000WZ
2015-04-03_10:26:43 ESAx000WZ_5242 CNT: 24- CUM: 853.292 CUR: 9.940 TICKS: 96 HR

[michiatlnx]

Und schon das Update eingespielt, echt Klasse.

wind_direction versteht jetzt auch textuelle Windrichtungen ("N", "NNW"...) und hat eine zusätzliche Größeneinstellung per CSS Klasse "tiny" bekommen.

Doku unter https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/README.md#wind_direction
Neuste Version unter https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/js/widget_wind_direction.js

[setstate]

das simplechart ist noch nicht fertig  Deshalb gab's noch keine Info

So habe ich das bei mir am Testen, es fehlt aber noch ganz viel und wird bestimmt nicht überall laufen. Also bitte nicht soviel Zeit investieren.

Code Auswählen Erweitern

<div class="container">
    <div data-type="simplechart"
            data-logdevice="FileLog_WohnzimmerHeizung2"
            data-logfile="WohnzimmerHeizung2-2015.log"
            data-columnspec="4:meas.*:1:int"
            data-minvalue="10"
            data-maxvalue="30"
            data-daysago="0"
            style="height:100px;" class="cell">
    </div>
</div>

Die ColumnSpec ist hier erklärt: http://fhem.de/commandref.html#FileLog Abschnitt 'Get'