New FHEM Tablet UI

[bjoernbo]

Hi nesges,

du schreibst

define STATISTICS statistics W_HUMID

Was ist W_HUMID ? Ist W_HUMID z.b. dein Thermostat, aus welchem du deine Werte dann ziehst.
Beduetet wenn ich für 4 Räume die Temperatur und die Luftfeuchte als "Tendenz" anzeigen lassen will
ich "statistics" 4x erzeugen muss;  mit den unterschiedlichen "Thermostat-Namen" ?

Ne kann ja nicht 
Woher weiß statistic welcher Wert zu welchem Raum gehört ?

[nesges]

W_HUMID ist ein Thermostat mit Luftfeuchtigkeitsmesser. In der statistics Definitionwird dem Modul mitgeteilt für welche Devices es Statistiken erzeugen soll:

Code Auswählen Erweitern

define STATISTICS statistics .*(HUMID|THERMO)

Erzeugt zB Statistikwerte in allen Devices die auf "HUMID" oder "THERMO" enden. Siehe http://fhem.de/commandref.html#statistics

[wex_storm]

Hallo,

ich melde mich auch mal wieder kurz zu Wort. Echt saustark, was ihr da gerade macht! Sieht wirklich ganz hervorragend aus. Ich hätte jedoch zwei Bitten/Anfragen:
1. Der HTML-Quelltext ist nicht valide. Es fehlt der Doctype und der Title gehört in den Head-Tag. Das mal am Rande
2. Für die Bedieung am PC fänd ich einen Hand-Cursor auf den Knöpfen ganz nett. Sieht man auf Touch-Geräten nicht, aber auf PCs. ein

Code Auswählen Erweitern


.cell {
cursor: pointer;
}

würde schon helfen. Mein Angebot steht übrigends. Ich bin - falls es interessiert - Web-Entwickler und kann denke ich in HTML/CSS/JavaScript auch einiges an Arbeit beitragen. Ist ja auch in meinem Interesse

Gruß

    Björn

[setstate]

Eigentlich war's simpel: Ich setze jetzt in der init-Function readings[$(this).data('get')] = true;

https://github.com/nesges/Widgets-for-fhem-tablet-ui/commit/ccb098670a4a7ae69f4aeb84c208120763b416f8

so einfach, aber genial !!!
Danke

[setstate]

Hallo,

ich melde mich auch mal wieder kurz zu Wort. Echt saustark, was ihr da gerade macht! Sieht wirklich ganz hervorragend aus. Ich hätte jedoch zwei Bitten/Anfragen:
1. Der HTML-Quelltext ist nicht valide. Es fehlt der Doctype und der Title gehört in den Head-Tag. Das mal am Rande
2. Für die Bedieung am PC fänd ich einen Hand-Cursor auf den Knöpfen ganz nett. Sieht man auf Touch-Geräten nicht, aber auf PCs. ein

Code Auswählen Erweitern


.cell {
cursor: pointer;
}

würde schon helfen. Mein Angebot steht übrigends. Ich bin - falls es interessiert - Web-Entwickler und kann denke ich in HTML/CSS/JavaScript auch einiges an Arbeit beitragen. Ist ja auch in meinem Interesse

Gruß

    Björn

Hallo Björn,
danke für dein Lob und die Tipps. Punkt 1 und 2 werde ich gleich beachten. Die HTML Attribute habe ich ja nun auch schon umgestellt, wie du vlt. schon gesehen hast.

Interesse an Mitarbeit auf jeden Fall. Aber in kleinen Schritten, nicht gleich alles umbauen wollen 
Ich werde mal bei Github den Issue Tracker anwerfen, für die offenen Punkte und Einfälle. Da kann man sich jeder dann was rauspicken.

[nesges]

Ich hab grade noch ein neues Widget nach https://github.com/nesges/Widgets-for-fhem-tablet-ui geladen. "kodinowplaying" zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an. Der Screenshot im Anhang zeigt das Standardformat für TV Serien. Alle einzelnen Felder sind abschaltbar und durch Zuweisung von CSS-Klassen stylebar. Eingebunden wird es mit folgendem HTML-Code:

Code Auswählen Erweitern

<div data-type="kodinowplaying" data-device="W_XBMC"></div>

"W_XBMC" ist ein XBMC-Modul (http://fhem.de/commandref.html#XBMC). Um Felder abzuschalten, CSS-Klassen zuzuweisen, Zeitformate einzustellen etc. gibt es jede Menge optionale Attribute. Hier ein Beispiel mit allen:

Code Auswählen Erweitern

<div data-type="kodinowplaying"
    data-device="W_XBMC"
    data-show="yes"
    data-season="yes"
    data-episode="yes"
    data-title="yes"
    data-artist="yes"
    data-album="yes"
    data-time="yes"
    data-totaltime="yes"
    data-playstatus="yes"
    data-class-show=""
    data-class-season=""
    data-class-episode=""
    data-class-title=""
    data-class-artist=""
    data-class-album=""
    data-class-time=""
    data-class-totaltime=""
    data-class-playstatus=""
    data-timeformat="HH:MM:SS"
    data-playstatus-pauseonly="yes"
    class="titleonly|short|notime"
    ></div>


Doku zu den einzelnen Attributen unter https://github.com/nesges/Widgets-for-fhem-tablet-ui. Ich habe nicht alle Attribute und Attributskombination ausprobiert (ich brauche selber eigentlich nur den Standardfall). Wenn euch Fehler auffallen bitte melden, danke!

[bjoernbo]

  du hast es echt drauf !!! Habe zwar auch ein KODI, aber ich finde für meinen Teil keinen Mehrwert darin dies im UI zu integrieren. Noch nicht :-D ! Aber, es gefällt mir trotzdem.

[Atze]

Nabend,
kann mann das Widget "Homestatus" irgendwie auf RESIDENTS und oder ROOMMATE portieren ?

[setstate]

Nabend,
kann mann das Widget "Homestatus" irgendwie auf RESIDENTS und oder ROOMMATE portieren ?

Dieses Widget wird auch bald flexibler werden: Icons, Werte (z.Zt. 1-4). Aber man kann jetzt schon das Get-Reading und Set-Reading angeben. Was würde noch nicht klappen?

[setstate]

Das Volume-Widget habe ich jetzt dahingehend erweitert, so dass man dies auch ideal als Hue-Dial (Farbton) benutzen kann.
Man braucht dafür nur zusätzliche Klassen angeben, um das Aussehen anzupassen.

Beispiele:
MilightDevice [0-360], kleiner Durchmesser, der eingestellte Farbton wird kpl. als Background angezeigt

Code Auswählen Erweitern

<div data-type="volume" data-device='dummy1'
   data-min='0'
   data-max='360'
   data-get='hue'
   data-set='hue'
   class="cell small hue-back" ></div>

(http://knowthelist.github.io/fhem-tablet-ui/volume_small.png)

HUEDevice [0-65535], kleiner Durchmesser, der eingestellte Farbton wird nur auf dem Handle angezeigt

Code Auswählen Erweitern

<div data-type="volume" data-device='dummy1'
   data-min='0'
   data-max='65535'
   data-get='hue'
   data-set='hue'
   class="cell small hue-front" ></div>

XYZDevice [0-360], großer Durchmesser, der kpl. Farbtonbereich wird als Tick-Ring angezeigt und der eingestellte Farbton wird  auf dem Handle angezeigt

Code Auswählen Erweitern

<div data-type="volume" data-device='dummy1'
    data-min='0'
    data-max='360'
    data-get='hue'
    data-set='hue'
    class="cell hue-tick hue-front" ></div>

(http://knowthelist.github.io/fhem-tablet-ui/volume_big.png)

Außerdem haben alle Widgets eine neues optionales Attribute bekommen

Code Auswählen Erweitern

data-cmd=""   default: 'set'

Damit kann man das primäre Command in Richtung FHEM ändern. Also nicht mehr nur "set <device> <reading> <value>", sondern auch "setreading <device> <reading> <value>" oder "setstate <device> <reading> <value>"

Viele Grüße
Mario

[setstate]

Hallo Mario,

Tolle Arbeit. Die Wettericon sehen toll in der Oberfläche aus und das Label-Widget funktioniert tadellos.
So langsam wächst mein UI.Ich bin total begeistert.

Wäre es evtl. noch möglich Möglichkeit zum kürzen von Textfeldern vorzusehen ?
Dann könnte ich das Datum und die Uhrzeit in meinem Kalender auf TT.MM oder HH:MM kürzen.
Dabei würde es ja reichen wenn man die Felder einfach auf x-Zeichen abschneidet. In meinem Fall auf 5 Zeichen.
Meinst Du das wäre möglich ?

Schöne Grüße
Jens

Hallo Jens,

das Label-Widget kann man jetzt per RegEx kürzen. Dazu einfach im Attribute data-part den RegEx Ausdruck angeben. Es wird versucht die angegeben Gruppen herauszuholen. Gruppen markiert man per runder Klammer, es kann mehr als eine Gruppe angegeben werden.
Beispiel Datum kurz: 25.03.

Code Auswählen Erweitern

<div data-type="label" data-device="dummy1" data-part="(\d\d\.\d\d\.).*" class="cell"></div> 

Wenn man data-part="8" angibt, wird wie weiterhin ohne RegEx der 8. Teil leerzeichengetrennt geholt.

[setstate]

Du willst ein Einsteiger ToDo?, ok....

Ich frage alle 5 Minuten diverse IP-Adressen ab und lasse mir anzeigen ob die Geräte erreichbar sind und lasse dies über ein Icon anzeigen.

Anbei der Code aus FHEM:

Ich würde das so bauen:

Code Auswählen Erweitern

  <div data-type="contact" data-device="dummy1" data-icon="fa-wifi" data-on-color="#32a054" data-get-on="ONLINE" data-get-off="OFFLINE" class="narrow"></div>
<div data-type="label" class="narrow darker small">NETWORK</div>

Ich merke gerade, ich muss die Doku erweitern. Ist noch vieles im Verborgenen

[dancatt]

Ich würde das so bauen:

Code Auswählen Erweitern

  <div data-type="contact" data-device="dummy1" data-icon="fa-wifi" data-on-color="#33dd22" data-get-on="ONLINE" data-get-on="OFFLINE" class="narrow"></div>
<div data-type="label" class="narrow darker small">NETWORK</div>

Wo ich das gerade lese...

Ich habe mal letzte Woche mal folgendes gefragt:

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.

Wenn ich das richtig verstehe kann man das ja mit dem "contact"-Widget realisieren, oder? Ein Icon, 2 Zustände?


Schön wärs nun wenn man pro Zustand ein Icon und eine Farbe angeben könnte (der Name "contact" ist nicht passend):

Code Auswählen Erweitern


<div
data-type='contact'
data-device='carType'
data-get='state'
data-get-on='[Car,Bus,Ambulance]'
data-icons='[fa-car,fa-bus,fa-ambulance]'
data-colors='["#FF0000","#00FF00","#0000FF"]'
class="cell big">
</div>


Fhem:

Code Auswählen Erweitern


define carType dummy
attr setList state:Car,Bus,Ambulance


Gruß Daniel

[selfarian]

Kurz gefasst: Geil!

Vielen Dank für die Mühe, mir gefällt das Interface - obwohl wir (noch) kein Tablet haben - sehr gut.
Was ich nicht ganz verstehe, hat die Möglichkeit, die einzelnen Elemente hin und her zuschieben auch eine Wirkung? oder ist das einfach nur zum temporären ändern gedacht?

[bjoernbo]

@setstate: Werde ich heute Abend sofort umsetzten. DANKE
Anbei: Das Volume-Widget für HUE ist schon im JS auf GitHub vorhanden? Ich würde dann probieren, ob es mit lightify funktioniert.