New FHEM Tablet UI

[Mitch]

Termine kannst Du doch ganz einfach mit dev type="label" machen

[wex_storm]

Hallo zurück,

mehr als eine Spielerei wollte ich eignetlich auch nicht einbauen. Mich hat an der "Ur"-Version nur leider die fehlende Responsivität (Anzeige angepasst auf verschiedenen Endgeräten) gefehlt. Ich bin recht neu im Bereich fhem, bin aber technisch versiert und möchte mein Haus automatisieren.
Vielleicht sollte ich doch meinen alten persönlichen Ansatz noch einmal vorstellen (basierend auf Bootstrap).
Da habe ich die Konfiguration auch über eine JSON-Datei gelöst (für nicht HTML-affine Personen) und das Layout über Bootstrap erstellt.
GANZ WICHTIG!!! Ich möchte hiermit nicht die Arbeit des Thread- und Layout-Erstellers schmälern. Ich denke nur, dass eine Kombination aus mehreren Techniken vielleicht ganz passend wäre. Z.B.:
- Angabe von Konfigurationswerten in der fhem.cfg oder einer JSON-Datei
- festes Layout konfigurierbar machen (fhem.cfg oder eigene json)
- Responsives Layout, welches auf den Geräten immer gleich aussieht (masonry käme dann weg)
- ein JavaScript-Plugin-System für Komponenten wie Switches usw. (Erweiterbarkeit)
- Layout anpassen, wie das vorherige (Icons, alles etwas schmaler, vielleicht sogar Stile für Nacht/Tag usw.)

Ich finde dieses Projekt extrem toll, da ich so ein schönes UI für mein Zu Hause gesucht habe. Die Konfiguration über HTML (für mich jetzt kein Problem, vielleicht aber doch für andere) und die fehlende Responsivität haben mich jedoch ein wenig gestört. Ich baue mal meinen Verschlag auf Bootstrap um, vielleicht sagt das einigen mehr zu.

Grüße und einen schönen Sonntag

   Björn

[setstate]

@Mitch: Labels für deine Fenster könnte man ab sofort so hinzufügen

Code Auswählen Erweitern

<li data-row="3" data-col="5" data-sizex="2" data-sizey="2">
<header>FENSTER</header>
<div class="container">
<div class="cell left">
<div type="contact" device="Fenster1" class="narrow"></div>
<div type="label" class="narrow darker small">Fenster1</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster2" class="narrow"></div>
<div type="label" class="narrow darker small">Fenster2</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster3" class="narrow"></div>
<div type="label" class="narrow darker small">Fenster3</div>
</div>
</div>
<div class="container">
<div class="cell left">
<div type="contact" device="Fenster1" class="narrow"></div>
<div type="label" class="narrow darker small">Fenster1</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster2" class="narrow"></div>
<div type="label" class="narrow darker small">Fenster2</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster3" class="narrow"></div>
<div type="label" class="narrow darker small">Fenster3</div>
</div>
</div>
<div class="container">
<div class="cell left">
<div type="contact" device="Fenster1" class="narrow"></div>
<div type="label" class="narrow darker small">Fenster1</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster2" class="narrow"></div>
<div type="label" class="narrow darker small">Fenster2</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster3" class="narrow"></div>
<div type="label" class="narrow darker small">Fenster3</div>
</div>
</div>
<div class="container">
<div class="cell left">
<div type="contact" device="Fenster1" class="narrow"></div>
<div type="label" class="narrow darker small">Fenster1</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster2" class="narrow"></div>
<div type="label" class="narrow darker small">Fenster2</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster3" class="narrow"></div>
<div type="label" class="narrow darker small">Fenster3</div>
</div>
</div>
</li>

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

Oder etwas heller:

Code Auswählen Erweitern

<li data-row="3" data-col="5" data-sizex="2" data-sizey="2">
<header>FENSTER</header>
<div class="container">
<div class="cell left">
<div type="contact" device="Fenster1" class="narrow"></div>
<div type="label" class="narrow small">Fenster1</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster2" class="narrow"></div>
<div type="label" class="narrow small">Fenster2</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster3" class="narrow"></div>
<div type="label" class="narrow small">Fenster3</div>
</div>
</div>
<div class="container">
<div class="cell left">
<div type="contact" device="Fenster1" class="narrow"></div>
<div type="label" class="narrow small">Fenster1</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster2" class="narrow"></div>
<div type="label" class="narrow small">Fenster2</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster3" class="narrow"></div>
<div type="label" class="narrow small">Fenster3</div>
</div>
</div>
<div class="container">
<div class="cell left">
<div type="contact" device="Fenster1" class="narrow"></div>
<div type="label" class="narrow small">Fenster1</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster2" class="narrow"></div>
<div type="label" class="narrow small">Fenster2</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster3" class="narrow"></div>
<div type="label" class="narrow small">Fenster3</div>
</div>
</div>
<div class="container">
<div class="cell left">
<div type="contact" device="Fenster1" class="narrow"></div>
<div type="label" class="narrow  small">Fenster1</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster2" class="narrow"></div>
<div type="label" class="narrow small">Fenster2</div>
</div>
<div class="cell left">
<div type="contact" device="Fenster3" class="narrow"></div>
<div type="label" class="narrow small">Fenster3</div>
</div>
</div>
</li>


sieht dann so aus

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

Dafür gibt es in der css/fhem-tablet-ui.css ein paar neue Zeilen.

Viele Grüße
Mario

[nesges]

Anstatt die Schaltzustände der unterschiedlichen Device-Typen jedes mal per data-on/off abzubilden, habe ich in meiner Installation ein zweites JS-File angelegt, dass die Defaults abhängig von einem HTML-Attribut "data-devicetype" überschreibt. Vielleicht ist die Idee für jemanden nützlich.

Code Auswählen Erweitern

$( document ).ready(function() {
    $('div[type="switch"]').each(function(index) {
        switch($(this).attr('data-devicetype')) {
            case "PRESENCE":
                $(this).data('on', $(this).attr('data-on') || 'present');
                $(this).data('off', $(this).attr('data-off') || 'absent');
                break;
            case "dummy10":
                $(this).data('on', $(this).attr('data-on') || '1');
                $(this).data('off', $(this).attr('data-off') || '0');
                break;
        }
     });
     
    $('div[type="contact"]').each(function(index) {
        switch($(this).attr('data-devicetype')) {
            case "MAX":
                $(this).data('on', $(this).attr('data-on') || 'opened');
                break;
        }
    });
});

Im HTML:

Code Auswählen Erweitern

<div type="switch" device="HANDY" class="cell" data-icon="fa-user" data-devicetype="PRESENCE"></div>
<div type="switch" device="OPT_ALARM" class="cell" data-icon="fa-bullhorn" data-devicetype="dummy10"></div>
<div type="contact" device="S_FENSTER_LINKS" class="cell" data-devicetype="MAX"></div>

Derzeit fehlt mir übrigens noch eine gute Idee um Milight-Devices einzubinden. Das Milight-Device hat die Besonderheit, dass es im eingeschalteten Zustand in STATE nicht einfach nur "on", sondern auch die eingestellte Dimmung stehen hat: "on 100", "on 42" etc.

[setstate]

Hallo nesges,

super Idee, das macht die Konfiguration einfacher.
Wie auch schon wex_storm vorgeschlagen hat, werde ich mal ein Plugin System angehen. Dann braucht man sich nur die Devices einbinden, die man braucht. Das spart Ladezeit, man bekommt die richtigen Defaults und das Ganze macht den js Part übersichtlicher.

Vielen Dank
Mario

[Brockmann]

Moin,

das ist ja der Hammer, wie die Entwicklung hier an einem sonnigen Wochenende weitergeht! 

Schön, dass das Drag&Drop jetzt funktioniert. An sich brauche ich es zwar nicht, aber man kann jetzt dadurch sehr schön ausprobieren, wohin man Widgets platzieren kann und wohin nicht. Anscheinend muss ein Widget immer einen oberen Nachbarn haben (oder eben am oberen Rand platziert sein). Linke und rechte Nachbarn hingegen sind nicht erforderlich.

Was die Diskussion statisches vs. dynamisches UI angeht:
Ich bin auch Fan einer statischen Oberfläche. Ich würde mir ohnehin eher verschiedene Versionen für PC/Smartphone/verschieden große Tablets machen, wo ggf. auch unterschiedliche Inhalte rein sollen. Deshalb wäre eine dynamische UI für mich uninteressant bzw. die statische Variante sollte zumindest als Option bleiben (IMHO).

[Mitch]

Danke Mario!
Fensterlabel gehen jetzt, Perfekt!!

Eine Kleinigkeit ist mir gerade aufgefallen:
für mein Keymatic nutze ich data-on/off für lock/unlock.

Code Auswählen Erweitern

<div type="switch" device="CUL_HM_HM_SEC_KEY_23DB96" data-on="lock" data-off="unlock" data-icon="fa-lock" class="cell"></div>
<div type="label" device="CUL_HM_HM_SEC_KEY_23DB96" class="cell" ></div>

Leider ist der state aber "locked" und "unlocked", somit stimmt das Icon nicht, wenn ich z.B. über die Fernbedienung schalte.
Kann ich das irgendwie einstellen?

Was auch noch sehr genial wäre, wenn ich anhand eines bestimmten state ein bestimmtes Icon einblenden könne.
So ala devStateIcon

Explizit geht es mir um meine Müll-Visualisierung:

Code Auswählen Erweitern

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
        <header>MUELL</header>
            <div class="center">
                <div type="label" device="Abfallkalender" data-icon="" class="cell" ></div>
            </div>
</li>

Dort kann Restmuell oder Papiertonne stehen, ein passendes Icon gibt es mit gleichen Namen (z.B. Restmuell.png)

[Brockmann]

Leider ist der state aber "locked" und "unlocked", somit stimmt das Icon nicht, wenn ich z.B. über die Fernbedienung schalte.
Kann ich das irgendwie einstellen?

Bislang geht das nicht denke ich. Ich habe ein ähnliches Problem:
Ich möchte den Status meines Badlüfters als Switch anzeigen (was ja noch kein Problem ist).
Aber wenn er aus ist und man auf das Icon tippt, soll der Lüfter nur kurz laufen (on-for-timer 300). Nur wenn ich jetzt data-on="on-for-timer 300" setze, dann zeigt das Icon den Status nicht mehr korrekt an, denn der geht ja dann auf "on" und nicht auf "on-for-timer".

Man müsste also quasi data-set-on und data-get-on bzw. data-set-off und data-get-off unterscheiden können. Damit würde sich die Keymatic auch in den Griff bekommen lassen, oder?

[nesges]

Für regelmässiges "on-for-timer" setze ich ein notify auf "on" und schiebe on-for-timer hinterher. zB so:

Code Auswählen Erweitern

define S_SWITCH_AutoOff notify S_SWITCH_.*:on set $NAME on-for-timer 3600

[Brockmann]

Für regelmässiges "on-for-timer" setze ich ein notify auf "on" und schiebe on-for-timer hinterher. zB so:

Code Auswählen Erweitern

define S_SWITCH_AutoOff notify S_SWITCH_.*:on set $NAME on-for-timer 3600

Das ist mir schon klar, ist aber für mich keine Lösung.

Im Prinzip wird der Lüfter durch einen Luftfeuchtigkeitssensor geführt automatisch ein und aus geschaltet.
Da wäre es kontraproduktiv, jedem set on ein set on-for-timer hinterzuschieben.

Nur wenn im Bad mal schlechte Luft ist (dafür habe ich noch keinen Sensor außer der eigenen Nase) soll man den Lüfter per Antippen für kurze Zeit einschalten können.

[Mitch]

Du kannst ja auch statt einem "on" ein "ein" oder sonst was in data=on eintragen und dann darauf den notify schalten.
Somit beißt sich das nicht mit deiner "normalen" Steuerung.

[bjoernbo]

ich muss mich meinen Vorrednern anschließen. Selten wurde ein Thema mit soviel Elan vorangetrieben. Ich möchte allerdings eine Sache nochmal aufgreifen. HTML ist kein Fremdwort für mich, allerdings in Verbindung mit CSS tue ich mich da noch ein wenig schwer, da CSS sehr mächtig ist. Kann hem. ggf. die UI so anpassen, dass man mit einer Art "Reiterstruktur" seine Räume abbilden kann? Es sind ja eigentlich dann nur verlinkungen zu anderen HMTL-Seiten. Z.B. Kueche.html, Kinderzimmer_1.html etc.

[wex_storm]

Hallo bjoernbo,

Ich stelle Dir (und allen anderen Interessierten) mal - zum Spaß - meine private Version eines Frontend zur Verfügung. Momentan kann man damit jedoch lediglich Switches steuern.
Konfiguriert wird alles über JSON. Meinst Du sowas? (Die Bereiche für meinen Verstärker und Wecker bitte nicht beachten.)
Das Ganze habe ich unter /opt/fhem/www in den Ordner frontend abgelegt und über http://ip:8083/fhem/frontend/index.html aufgerufen.
Wie gesagt, eine Kombination aus der wirklich schön aussehenden Lösung von Mario und einer responsiven Lösung wie meiner fänd ich ganz toll. Wäre natürlich auch möglich, dass ich an meinem Zweig weiterpröckele... dafür fehlt mir aber die Erfahrung was man alles mit fhem so steuern kann.

Gruß

    Björn

[Brockmann]

Du kannst ja auch statt einem "on" ein "ein" oder sonst was in data=on eintragen und dann darauf den notify schalten.

Mit einem set ... ein kann ein Homematic-Switch aber wenig anfangen...?

[Mitch]

Das ist schon klar.
Mach doch einen dummy.