Meine aktuelle FTUI Oberfläche für die FHEM Haussteuerung

Es ist schon eine Weile her, dass ich meine aktuelle Benutzeroberfläche präsentiert und euch als Beispieldateien verfügbar gemacht habe. Mittlerweile gab es einen deutlichen Umbau, auch wenn ich immer noch ein paar kleinere Baustellen habe. Da immer wieder mal nach dem Code für die FTUI Oberfläche gefragt wird, möchte ich euch diesen nun wieder einmal zukommen lassen.

Ich benutze als Tablet ein älteres Amazon Fire Tablet innerhalb einer Fully Kiosk Browser App. Auf diese Umgebung ist die Oberfläche aktuell auch ausgerichtet, wobei ich grundsätzlich die Idee hatte, dass die Nutzung sich responsive gestalten soll. Im normalen Browser auf dem PC funktioniert dies auch. Im Browser auf anderen Tablets ist es nicht immer optimal.

Überblick über die verschiedenen Bildschirmseiten

Grundgedanken

Bei der Neugestaltung der FHEM Tablet-Oberfläche war es mir die Übersichtlichkeit sehr wichtig. Bisher habe ich immer versucht, möglichst viel auf einer Seite unterzubringen. Nun geht die Gestaltung mehr in die Richtung „weniger ist mehr“. Schließlich dient die Tabletoberfläche auch eher dazu, mal einen schnellen Blick auf diverse Geräte bzw. Informationen zu erhalten. Als Steuerzentrale wird das Tablet tatsächlich weniger genutzt.

Meine Vorstellung einer Hausautomatisierung geht davon aus, dass idealerweise tatsächlich alles automatisch oder wenigstens per Sprachsteuerung funktioniert. Bisher konnte ich dies auch sehr gut umsetzen.

Übersicht / Startbildschirm

FHEM Tabletsteuerung mit FTUI – Übersichtsseite

Der Startbildschirm zeigt bei mir die wichtigsten Informationen, die man immer wieder mal sehen möchte. Weiterhin sind einige wichtige Schaltfunktionen integriert, falls man das Tablet doch mal als Schaltzentrale benutzt.

Die wichtigste Funktion ist tatsächlich der Kalender sowie die Termine für die Müllabfuhr. Das Wetter ist natürlich auch immer von Interesse. Weiterhin bekomme ich auf dem Homescreen den aktuellen Ladestatus unserer E-Autos, die Verkehrsinfo zu den Arbeitsorten sowie zum Status der Bewohner. Geschaltet werden kann die Garage, die wichtigsten Lampen bzw. Steckdosen oder Rolladen. Schließlich habe ich die Schalter für die zentralen Funktionen für „Haus verlassen“ (Alles aus), den Schlafmodus, die Info für den Urlaubsmodus oder die Sonderfunktionen, wenn Gäste im Haus sind.

Für mehr Platz auf den Seiten habe ich das Menü nun ausklappbar gestaltet. Weiterhin habe ich für die PV-Anlage und die beiden E-Autos noch die wichtigsten Infos in die Kopfzeile eingebaut. So sind diese Infos jederzeit auf einen Blick sichtbar.

Wohnzimmer

FHEM Tabletsteuerung mit FTUI – Wohnzimmer / Garten

Auf der Seite für das Wohnzimmer habe ich auch noch ein paar Schalter in Bezug auf unseren Glashaus-Anbau sowie den Garten integriert. Hier findet man dann auch einige Detail-Schaltungen, wie beispielsweise die Steuerung jeder einzelnen Rollade.

Sowohl die Wohnzimmer-Seite als auch die folgende Seiten für die sonstigen Räume im Erdgeschoss sowie im Obergeschoss werden eigentlich äußerst selten benötigt. Hier funktioniert in der Regel alles automatisch oder über Alexa.

EG / Keller

FHEM Tabletsteuerung mit FTUI – Erdgeschoß

Auf dieser Seite sind alle Infos und Schalter der übrigen Räume im Erdgeschoss zu finden (Küche, kleines Zimmer (Golfsport-Abstellraum), Küche und Gäste-WC sowie der Flur). Im Prinzip sind dies in erster Linie die Temperaturanzeigen sowie diverse Schalter und schaltbare Steckdosen.

Zimmer OG

FHEM Tabletsteuerung mit FTUI – Obergeschoß

Ähnlich, wie auf der vorhergehenden Seite sind auf diesem Bildschirm alle Schalter und Infos zum Obergeschoss zu finden.

Heizung

FHEM Tabletsteuerung mit FTUI – Heizung

Der Heizungssteuerung ist eine komplette Seite gewidmet. Hier findet man in einem Slider nochmals sämtliche Thermostate im Haus. So muß man nicht in jeden einzelnen Raum schauen, wenn man einen Überblick über die aktuelle Heiz-Situation benötigt.

Im unteren Bereich des Bildschirms sind die Informationen zu finden, die ich von unserer Buderus-Anlage ermittele.

PV-Anlage

Eine etwas neuere Seite in meiner Haussteuerung dient der Darstellung aller wesentlichen Infos rund um die PV-Anlage. Diese Seite wird sicherlich demnächst auch noch ein wenig optimiert. Die Grafik zeigt aktuell noch diverse Prognoseinformationen, die ich gerade teste.

Neben den ganzen Infos zur aktuellen Situation bezüglich Solarstrom-Erzeugung, Einspeisung und Verbrauch gibt es auch noch zwei Schalter für die Spülmaschine und die Waschmaschine. Das sind die Schalter, die die Automatik des SMA Home Manager übersteuern und die Maschinen quasi sofort anschalten. Ansonsten erfolgt dies über die PV-Anlage, wenn diese denkt, dass ausreichend Sonnenenergie vorhanden ist.

FHEM Tabletsteuerung mit FTUI – PV-Anlage Statistik

Auf dem Kasten „Kosten / Energie“ habe ich dann noch ein Popup-Fenster eingebaut. Dieses zeigt mir diverse statistische Informationen meiner PV-Anlage an.

Elektro-Autos

FHEM Tabletsteuerung mit FTUI – Elektroautos

Auf dem letzten Bildschirm sind alle Infos zu unseren beiden Elektro-Autos zusammen gefasst. Neben der Infos zu den Ladezuständen sind hier die Schaltoptionen für diverse Schaltoptionen untergebracht. Hierzu gehört u.a. eine Automatik, die den Ladezustand berechnet und auf Basis der nächsten Abfahrzeit prüft, ob das jeweilige E-Auto geladen werden muß.

Ihr findet den Source-Code des FTUI hier auf meinem Google Drive Laufwerk.

34 comments

  1. Ich werd verrückt, natürlich hast du ebenfalls einen e-up und natürlich hast du dafür auch schon ein Dashboard gebaut 😀

    Jetzt interessiert mich aber brennend wie du die Daten vom Auto abrufst. So wie hier?
    https://forum.fhem.de/index.php/topic,83090.0.html
    (hab’s mir noch nicht genauer angesehen, weil ich das Auto erst 3 Tage hab und neben den ganzen Testfahrten leider auch noch arbeiten muss :-D)

  2. Mega gut. Und vor allem super viele Inspirationen. Großartig. Danke!
    Eine Frage noch: um die einzelnen FHEM TUI gänzlich zu verstehen, müsste man auch die korrespondierende FHEM Konfiguration sehen. Zeigst du uns die auch?

    Ich habe bei mir im ganzen Haus Taster und eine eigene Steuerung der Rolladen realisiert. Nun versuche ich Taster in FHEM umzusetzen und bin mir nicht sicher, ob meine Konfiguration mit 6 Elementen in FHEM pro Taster wirklich die beste ist. 😀
    Wie funktionieren deine Lampen- und Rolladenschaltungen? Sind es auch Taster? Und diese schalten dann Stromstoßschalter? So ist es zumindest bei mir.

    VG!

  3. Hallo Jürgen,
    das sieht super perfekt aus und ist eine Klasse besser im Vergleich zu deinem „alten“ UI.
    Leider scheitere ich bereits bei der Verbindung meines Abfall-Kalenders mit deiner Müllabholung im FTUI……
    Ist es möglich auch (Teile) deiner .cfg Dateien zu bekommen? Gerne auch per PM.
    Ich finde deine Arbeit SUPER!
    Viele Grüße
    Bernd

  4. Danke, für das Feedback. Gerne kann ich auch meine Umsetzung des Abfallkalender nochmals bereit stellen. Wird aber wohl noch bis zum WE dauern ;-).

  5. cool! Langes Basteln kann auch locker bis zum Wochenende warten!
    Darf ich, neben dem Abfallkalender, auch nach deiner Radio-Einbindung und der PV fragen? 😉

  6. Schau mal in dem Artikel zum Abfallkalender. Da habe ich eine kleine Anpassung in einer Funktion vorgenommen. Eventuell wird das Problem damit schon behoben. Sonst habe sieht bei mir eigentlich alles genauso aus.

  7. Hallo Golfer Juergen
    Bist du beim Golfen auch so gut, wie beim Erstellen von Webseiten? Spass
    Ich habe dein Projekt bei mir heruntergeladen. Wenn ich die index.html starte bekomme ich das Menu, aber es wird die Seite selbst nicht angezeigt.(page_control_home.html). Ich kann das Menu bedienen, aber die Seiten werden nicht geladen.
    Hast du eine Tip woran das liegen kann.
    Danke.
    Jürgen

  8. Ich bin gerade in Portugal zum Golfen, daher kann ich nicht direkt nachschauen ;-). Erste Idee ist, ob die Dateien für die jeweiligen Seiten mit den richtigen Namen in der Index.html stehen. Ich meine die Seiten heißen page_content_xyz und mich control.

  9. Danke Jürgen
    Ich habe das Problem gefunden. Der Link in den Dateien musste angepasst werden.
    Viel Spass noch beim Golfen.
    Jürgen

  10. Hallo Jürgen,

    danke für die vielen Beiträge. Ich würde mir gerne den Kalender auch so Anzeigen lassen. Termine bekomme ich hin. Wenn ich als data-device=“calview“ nehme jedoch würde ich es auch lieber für jeden von uns im Haus mit Anfangsbuchstabe und bei Geburstag mit Kuchen (bithday-cake) darstellen. Meine Frage welches Device
    fragts du an hast du unterschiedliche Kalender oder ist es wei beim Abfall mit regex gelöst. Vieleicht hast du ein paar Code-Snipsel wo dies auslesen kann. Wäre super nett von dir.

    Grüße

    Robert

  11. Zur Anzeige in FTUI nutze ich das Widget widget_agenda.js. Allerdings hat das aus meiner Sicht einen kleinen Bug, den ich für mich behoben habe. Weiterhin habe ich den HTML Code für mich ein wenig angepasst. Der gesamte Code dürfte an dieser Stelle ein wenig zu viel sein. Ich schau mal, ob ich es über Google Drive freigeben kann. Dann bau ich noch einen Link ein.

    Den „Fehler“ habe ich in der Funktion get_Date angepasst. Das müsste eigentlich die einzige Veränderung sein:

    var date = new Date(d[2], d[1] - 1, d[0], t[0], t[1]); //JA: t[2] entfernt, da dies immer einen Fehler erzeugte?

    Eingebunden habe ich es dann über ein CalView Device wie folgt:

    <div id="myagenda" data-type="agenda" data-device="vKalenderAlle" data-max="5" class="big"
    data-config='{ "Kalender_Juergen" : {"color":"#aa6900", "abbreviation":"J"},
    "Kalender_Anke" : {"color":"#1C8C7A", "abbreviation":"A"},
    "Kalender_Geburtstage" : {"color":"#7D786F", "icon":"fa-birthday-cake"} }'>
    </div>

    Vielleicht hilft das erst einmal.

  12. Hi Jürgen,

    sorryy is muss nochmals nerven. In der widges_agenda.js habe ich nur folgenden Eintrag:
    function getDate(elem, datename, timename) {
    var d = elem.getReading(datename).val.split(‚.‘);
    var t = elem.getReading(timename).val.split(‚:‘);
    return new Date(d[2], d[1] – 1, d[0], t[0], t[1], t[2]);
    }
    Die Einträge werden angezeigt jedoch weder Datum noch Icon 🙁
    Hier der Eintrag aus FTUI:

    und ich sehe leider den Fehler nicht wie gesagt gehe ich auf CALVIEW werden Einträge und Datum angezeigt oder muss ich den notify anderst setzten ??????
    Meine HTML-Kenntnisse sind leider stark eingerostet.

  13. “ „

  14. Sorry, hat ein wenig gedauert. Ich habe nochmal nachgeschaut. In der agenda.js habe ich tatsächlich auch nicht mehr geändert. Ich hatte zwar noch ein wenig an dem HTML-Code für die Anzeige gebastelt aber nur, damit es bei mir besser aussieht.

    Die Anzeige im FTUI hatte ich ja im letzten Kommentar schon mit aufgeführt. Mit „abbreviation“ sollte dann „A“ oder „J“ für die jeweiligen Kalender angezeigt werden. Mit der Angabe „icon“ wird auf ein anzuzeigendes Icon verwiesen. Diese Anzeigen beziehen sich immer auf den Kalender, aus dem die einzelnen Werte ermittelt werden.

    Mit „data-device“ (vKalenderAlle) wird auf ein Calview Objekt verwiesen. Hier habe ich drei Kalender eingebunden ((Kalender_Juergen, Kalender_Anke, Kalender_Geburtstag). Bei „data-config“ werden dann diese Kalender angegeben.

    Ein Hinweis noch. Die geänderte agende.js solltest du dir auch als Kopie vorhalten. Beim nächsten Update wird diese ansonsten immer überschrieben.

  15. Hallo Jürgen,

    wer lesen kann ist klar im Vorteil. Icon und Datum werden angezeigt t[2] entfernt und schon werden diese angezeigt. Was noch nicht geht Formatierung bei mir ist das Icon über dem Termin dadurch drei Zeilen und wie in deinem Beispiel oben „Morgen Donnerstag [Datum] werden nur die Termine angezeigt. Wäre es möglich den HTML Code zu bekommen ?
    Vielen Dank für deine Unterstüzung.

  16. Sorry noch vergessen bei id=myagenda hast du glaube ich dein Grundgerüst zu Anzeige oder ?

  17. So, nachfolgend habe ich mal meinen angepassten Code aus der Funktion „update“ beigefügt. In meiner Darstellung habe ich mit „vbox, card“ usw. gearbeitet. Bei „id=myagende“ müsste ich mal schauen, ob ich evtl. eigene CSS-Codes erstellt habe, sonst dürfte die Definition der id eigentlich auch entfallen.


    // render container
    // JA neuer render Code mittels vbox
    text += '<div class="vbox">';
    if( count === 0 )
    text += '<div data-type="label">Keine Termine</div>';
    else if (count > elem.data('max'))
    count = elem.data('max');

    var currentDate = new Date(2000, 1, 1);
    for( var i = 1; i <= count; i++ ) {
    var num = ('00' + i).slice(-3);

    var summary = elem.getReading('t_' + num + '_summary').val;
    console.log(summary);
    var bdate = me.getDate(elem, 't_' + num + '_bdate', 't_' + num + '_btime');
    console.log(bdate);
    var edate = me.getDate(elem, 't_' + num + '_edate', 't_' + num + '_etime');
    var source = elem.getReading('t_' + num + '_source').val;

    // check if new day

    if( diffDays(currentDate, bdate) !== 0 ) {
    //text += '<div class="hbox">';
    text += '<div class="card grow-0 left-align lightgray" style="padding:0.2em;background:rgba(80, 80, 80); border-bottom:1px solid #393939">';
    text += me.prettyPrintDate(bdate);
    text += '</div>';
    //text += '</div>';

    currentDate = bdate; }

    var icon = me.readCalendarConfig(elem, source, "icon", "");
    var color = me.readCalendarConfig(elem, source, "color", "");
    var abbr = me.readCalendarConfig(elem, source, "abbreviation", "");

    if( icon !== "" && icon.substr(0,3) == "fa-" ) {
    icon = "fa " + icon;
    abbr = "";
    }

    text += '<div class="hbox">';
    text += '<div class="card grow-0 big items-center white ' + icon + '" style="min-height:1.4em; flex-basis: 1.8em; padding:2px; background-color:' + color + ';">';
    text += abbr;
    text += '</div>';
    //text += '<div class="" style="padding-left:5px; width:100%; min-height:30px; background:rgba(0, 0, 0, .08);">';
    //text += '</div>';
    text += '<div class="card" background:rgba(0, 0, 0, .08);>';
    text += '<div class="vbox" style="padding:0.2em; background:rgba(0, 0, 0, .08);">';
    text += '<div class="card left-align bold" style="margin:0; background:rgba(0, 0, 0, .08);">' + summary + '</div>';
    text += '<div class="card left-align lightgray" style="margin:0; background:rgba(0, 0, 0, .08);">';

  18. Hi Jürgen,

    wenn du mir noch sagst du wo ich dies einpflegen muss, ich vermute mal bei Calview update kannst du mir die Datei noch nennen. Super vielen Dank für deine tolle Unterstützung.

  19. Die Codeschnipsel für die HTML-Anpassungen kommen aus der Datei widget_agenda.js. Hier hatte ich die Codezeilen, die zur Ausgabe der Daten dienen, auf meine Bedürfnisse ein wenig angepasst.

  20. Hi Jürgen,

    super vielen Dank, jetzt läuft fast alles hast du in den CSS Klassen noch etwas definiert? Da das Icon horizontal zentriert angezeigt wird z.B.

    Termin
    Termin2
    icon
    icon

    besser lässt es sich nicht darstellen 🙂

  21. Das einrücken hat leider nicht funktioniert dann per Text icon horizontal zentriert in der hbox dann kommt der Termin1 danach darunter Termin 2 in diesem Feld wiederum das Icon horizontal zentriert usw.

  22. Hallo Jürgen,
    sorry, ich hoffe ich nerve dich nicht nach einiger Analyse schaut es auf als werden die hboxen in hboxen dargestellt. Habe schon einiges versucht aber meine JavaScript Kenntnisse sind sehr mau :-(.

    Grüße

    Robert

  23. Hallo Jürgen,
    nochmals ein update die Termine werden an sich richtig dargestellt. Jedoch nimmt der erste Termin die volle länge daher ist das Icon auch mittig auf der „card“. Der nächste Termin legt sich danach auf die restliche länge und breite usw. usw.. D.h der letzte Termin ist zusammen gequetscht. auf drei Zeilen. Ich habe bereits an hbox und vbox verschiedene Einstellungen versucht jedoch nur verschlimmbessert.

  24. Anbei ein Bild habe nach der if ( icon aus der darunterliegenden hbox mal eine vbox gemacht damit sieht man es besser
    https://drive.google.com/file/d/1yUelQmXvKHX-tfFVLMwKZz16t9XwZEa8/view?usp=sharing

  25. Hallo Robert,
    ich versuche mal ein paar Ansätze zu finden, was „auf die Entfernung“ nicht so ganz einfach ist.

    Grundsätzlich habe ich den Eindruck, dass irgendwelche „css container“ nicht passen. Also versuchen wir uns mal langsam anzunähern.

    In der FTUI Seite habe ich das agenda-Modul in ein „< card >agenda-modul“ eingeschlossen. Da sollte den äußeren Rahmen liefern.

    Dann habe ich die Änderungen, die ich in der widget-agenda.js habe ich Anpassungen vorgenommen, dass alle Termine erst einmal durch ein „vbox“ eingeschlossen werden.

    Hierin wird jeder einzelne Termin wieder durch ein „hbox“ Containter eingeschlossen, damit sie zeilenweise dargestellt werden. In dem hbox wird dann einmal das Icon mit einen „card grow-0“ umschlossen und die Terminbezeichnung mit einem „card“.

    Also von der Darstellung her ungefähr so:
    vbox
    hbox
    card grow-0 ICON /card
    card TERMINTEXT /card
    /hbox
    /vbox

    Das grow-0 sorgt dann bei mir dafür, dass das Icon nicht in die Breite wächst und somit die beiden „card“ Definitionen nebeneinander dargestellt werden.

    Ansonsten wäre es eventuell hilfreich den Code im Browser einmal darzustellen, falls du dich damit auskennst. Also f12 im Browser betätigen und dann einen Termin auszuwählen, damit man in der Code-Anzeige den entsprechenden Code sehen kann.

  26. Hallo Jürgen,

    erstmal würde ich die ein Bier spendieren für deine Geduld. Soweit habe ich das gecheckt aber ich sehe vor lauter Bäume den Wald nicht. Ich glaube bei mir wird durch die Schleife die card in eine card verschachtelt. Anbei der Link für Screenshot vom Browser und vom Code auch mein agenda habe ich hinzugefügt. Sollten keine priv. Daten enthalten sein, könntes du mir ja mal deine widges_agenda.js schicken zum vergleichen. Ich bekomme deshalb schon graue Haare (ok, hatte ich vorher schon) :-).

  27. Hallo Jürgen, sieht super aus. Eine Frage dazu: wie hast du das Tabellendesign mit den grauen Zeilen beim Popup Kasten „Kosten / Energie“ hinbekommen. Bei mir hast die Tabelle nur einen komplett schwarzen Hintergrund.

  28. Hallo Tom,
    danke dir. Bei deiner Frage musste ich selbst erst einmal suchen, wie ich das hinbekommen habe. In der eigenen CSS-Datei habe ich folgende Klassen definiert:
    .odd { background-color : #8c8c8c }
    .even { background-color : #6c6c6c }

  29. Prima, Danke Jürgen. Hat funktioniert!

  30. Hi Jürgen,

    beim Pollenflug ändert sich bei mir der Status nicht. Im FTUI wird als „data-device“ auch z.B Erleflug anstatt Pollenflug aufgerufen. Readings usw. erhalte ich sauber. Hast du einen Tipp für mich ?

    Der Rest läuft mitlerweile sauber un dich bin „Happy“.

  31. Auf Anhieb habe ich keine Idee, kann aber gerne mal bei Gelegenheit schauen. Tatsächlich habe ich die Anzeige schon länger nicht im Blick gehabt, da dies auch eher eine Funktion für meine Frau war ;-).

  32. Hi Jürgen

    planst du die FTUI auf 3.0 zu hebe?

  33. Hatte ich immer mal vor und auch schon ein wenig angefangen. Ist aber aus zeitlichen Gründen bisher immer liegen geblieben. Ich hoffe, dass ich über Weihnachten ein wenig Zeit finde, mich damit näher zu beschäftigen.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Why ask?

x

Check Also

Tibber Erfahrungen nach drei Monaten

Seit Mitte April nutzen wir die dynamischen Strompreise von Tibber*. Nach dem ersten vollen Monat ...