Meine neue Tablet Oberfläche mit FHEM FTUI Version 2.5

FTUI Startseite (Kalender, Abfall, Fahrzeiten , Spritpreise, Lampen, Homestatus,Wetter,…)

Wie bereits schon mehrfach angekündigt, war ich in letzter Zeit dabei, meine Tablet Oberfläche für die Haussteuerung grundlegend zu überarbeiten. Während ich die Anpassungen vorgenommen habe, kam dann auch noch die neue Version 2.5 der FTUI Oberfläche raus. Also habe ich die Gelegenheit genutzt, die neuen Features dieser Version direkt in den Umbau zu integrieren.

Ich muß gestehen, dass ich nicht wirklich ein Profi darin bin, wenn es darum geht mit CSS eine Webseite zu gestalten, so dass ich viele Darstellungen durch Ausprobieren von diversen Möglichkeiten teste. Daher kann es durchaus sein, dass es an der einen oder anderen Stelle noch bessere Lösungen für die Darstellung der diversen Widgets gibt.

Ich werde meinen aktuellen Source Code für das FTUI wieder auf dem Google Drive zur Verfügung stellen, damit ihr für euch passende Ansätze als Basis nutzen könnt. Zusätzlich bin ich auch dabei, meine FHEM Steuerung zu überarbeiten und werde dann noch meine Config-Datei bzw. die Definitionen der einzelnen Module bereit stellen.

Die interessantesten Neuerung der Version 2.5

Für mich waren die interessantesten Anpassungen der Version 2.5 u.a. die Möglichkeit, dass die Darstellung der Oberfläche an diverse Bildschirmgrößen automatisch ausgerichtet wird. Man muß im Prinzip nicht mehr angeben, wie viele Spalten und Zeilen das Design umfasst. So sollte es möglich sein, dass eine einmal gestaltete Oberfläche auf diversen Geräten optimal ausgerichtet wird. Bei meinem Umbau habe ich versucht, dies zu berücksichtigen, was auch einigermaßen gut funktioniert hat.

Eine weitere interessante Änderung betrifft die Möglichkeit, Tabellen Layouts mittels div-Konstrukten zu gestalten. So gibt es jetzt Konstrukte wie „sheet“, „row“ und „cell“ die quasi die Definitionen von „table“, „tr“ und „td“ ersetzen können. Diese Möglichkeit habe ich direkt genutzt, um alle meine bisherigen Tabellen-Darstellungen entsprechend umzubauen.

Sehr schön ist auch, dass die neue Index-Datei wesentlich einfacher aufgebaut ist. Die ganzen Includes entfallen quasi, da sie nun automatisch eingebunden werden. Darüber hinaus gibt es weitere interessante Anpassungen, die eine Gestaltung der FHEM Oberfläche weiter verbessern können. Die jeweiligen Änderungen sind im Forum kurz dargestellt.

FTUI Wohnzimmer (Lampen, MultiMedia, Rolladen, Fensterstatus, …)

Kurzüberblick über meine FTUI Bildschirmseiten

Die grundsätzliche Gestaltung meiner FTUI Oberfläche hat sich nicht wirklich geändert. Es sind aber noch ein paar Seiten dazu gekommen, da meine Haussteuerung ja auch gewachsen ist und an einigen Stellen habe ich ein paar kleinere Anpassungen im Layout einzelner Elemente vorgenommen.

In der Anpassung für die Version 2.5 habe ich zusätzlich versucht, die automatische Größenanpassung zu nutzen. Ich habe also keine Angabe mehr zu der Anzahl Zeilen und Spalten oder zu den Größen gemacht. Dies hat aktuell auf drei unterschiedlichen Tablet ganz gut geklappt, auch wenn man das Layout an der einen oder anderen Stelle noch optimieren könnte.

Auf der Startseite habe ich alle wesentlichen Schalter untergebracht, auf die man schnell zugreifen möchte. In den Seiten für die einzelnen Zimmer oder Etagen kommen dann noch zusätzliche Infoanzeigen, wie die Temperaturen oder die Steuerung der MultiMedia-Geräte dazu.

FTUI Küche & EG & Keller

Darüber hinaus habe ich mir eine Seite für den direkten Zugriff auf alle Sonos-Player erstellt sowie eine Seite für die Wettervorhersage. Die „Setup-Seite“ ist aktuell noch in Bearbeitung, ich habe sie aber trotzdem schon bereit gestellt. Im Moment ist hier der Wecker untergebracht sowie die Möglichkeit, diverse Konfigurationseinstellungen vorzunehmen. Hier plane ich unterschiedliche Parameter, die an verschiedenen Stellen in meiner Haussteuerung noch fest verdrahtet sind, variabler steuern zu können. Schließlich ist auf der Seite noch eine Anzeige für verschiedene Lichtstärkeinformationen. Dies nutze ich gerade nur zum Testen, um die optimale Einstellung für meine verschiedenen Lichtstärkewerte und den damit verbundenen Szenen zu finden.

Fast alle Rolladenschalter habe ich als „circlemenu“ umgesetzt, in denen ich die Werte „hoch“, „runter“, „schatten“ und „lueften“ schalten kann. Auf der Startseite habe ich nun auch ein Popup-Fenster für den QR-Code eingebaut. Der Code konnte auf Grund der Größe nicht gut gescannt werden. In dem Popup-Fenster wird nun ein größeres Bild angezeigt. Auf der Seite für das Wohnzimmer habe ich auch noch eine kleine Baustelle. Hier gibt es einen Link „Fernseh-Sender“, der zu einem Popup führt, in dem die verfügbaren TV-Sender angezeigt werden. Dieses Popup soll dann als Fernbedienung genutzt werden.

FTUI Sonos Player

Ansonsten habe ich keine speziellen Widgets im Einsatz. Es gibt mittlerweile aber so viele interessante Widgets, die ich auf jeden Fall mal testen werde. Darüber hinaus wurden die Widgets auch regelmäßig weiter entwickelt und bieten viele nützliche Features. Mein nächstes Projekt wird wohl die Gestaltung einer Smartphone-Oberfläche sein. Bisher habe ich keinen direkten Zugriff auf meiner Haussteuerung außerhalb unseres Hauses. Daher werde ich mich zusätzlich mit dem Thema Sicherheit für solche Zugriffe beschäftigen müssen.

Diese mobile Oberfläche wird dann aber wohl sehr abgespeckt sein und in erster Linie als Anzeige für den Status des SmartHome dienen. Ehrlicherweise muss ich gestehen, dass ich auch auf meiner aktuellen Oberfläche in 90% der Fälle nur die Startseite nutze. Wie schon häufiger erwähnt, ist es mein Ziel, möglichst ohne Schalter auszukommen und alles zu automatisieren. Seit dem ich Amazon Echo im Einsatz habe, muß ich auch den Wecker nicht mehr über die Tablet Oberfläche einstellen. Das kann ich jetzt direkt mit einem Sprachbefehl erledigen, wie natürlich auch das Schalten diverser Lampen oder dem Umschalten zu bestimmten TV-Sendern.

Es bleibt weiterhin spannend und ich freue mich, meine Ideen und Umsetzungen mit euch zu teilen.

FTUI Wetterinfos

[UPDATE 12.02.17]

Nachdem meine Config-Datei und meine myutils.pm immer wieder nachgefragt wurden, habe ich beide Dateien nun auch im GoogleDrive Verzeichnis abgelegt. Ich hoffe, dass ich alle relevanten Stellen ausgeixt habe und wäre ansonsten über Hinweise dankbar ;-). Ich hoffe, dass ihr damit klar kommt. Die Config-Datei finde ich persönlich ziemlich wild und es sind bestimmt auch noch Definitionen drin, die nicht wirklich optimal sind. Irgendwie kommt man ja nie dazu, wirklich mal aufzuräumen ;-).

15 comments

  1. Deine Beiträge sind immer eine große Inspiration für mich. FTUI-Oberflächen brauchen Zeit, das merke ich gerade am eigenen Leibe. Auf meiner Seite https://demaya.de/tag/fhem/ finden sich noch nicht so viele Einträge zu FHEM, was sich in Zukunft aber ändern wird.

    An der Stelle danke fürs Teilen deiner Heimautomation mit uns. Weiter so!

  2. Wow. Vielen Dank!
    Cool wären noch die fhem.cfg und die MyUtils.

    Speziell aber die Frage: Welches Wettermodul verwendest Du im Device „Wetter“?
    Weder bei Yahoo, noch bei Proplanta finde ich einige der von Dir verwendeten Werte.
    (z.Bsp: oa-weather_barometric_pressure) Oder betreibst Du eine eigene Wetterstation
    mir entsprechenden Readings?

  3. Ich nutze sowohl Proplanta als auch das Modul „Weather“ bzw. „Twilight“ für die Werte. Den Druck bekommt man über das Modul „Weather“. Und zu der Frage mit der cgf. und myutils. Ja, die kommen auch demnächst. Im Moment bin ich noch bei der Bereinigung, damit nicht zuviel von meinem „Testmüll“ drin steht. Ich hoffe, dass dauert nicht mehr zu lange und dann sind die Dateien auch auf dem Google Drive zu finden.

  4. Hallo Jürgen. Super Arbeit und vielen Dank dafür! Ich möchte gerne deine html Dateien als Vorlage nehmen. Ich hänge aber leider bei der Darstellung auf meinem iPad 9.7. Hier versuche ich die beiden Widgets Homestatus kleiner zu bekommen, denn sie ragen über die Zelle (grauer Hintergrund) hinaus. Sind also zu groß. Habe auch schon versucht über die Grundeinstellung (116/131) etwas zu verändern, aber das ändert die Größe der Widgets nicht. Wäre nett wenn du mir einen Tipp geben könntest. Vielen Dank im Voraus! Grüße Tobias

  5. Das Homestatus Widget ist in der Tat sehr groß. Aus diesem Grund geht es bei mir über 2 Zeilen und 2 Spalten. Man könnte es evtl. mit der vordefinierten Klasse „small“ etwas kleiner bekommen. Ich fürchte nur, dass es dann zu klein ist und nicht mehr ordentlich angezeigt wird. Eine weitere Variante wäre es, eine eigene Klasse zu definieren (im user-css) und dann mit der Prozentzahl ein wenig zu experimentieren.

    .hs_small { font-size: 95% !important;}
  6. Hallo Jürgen. Danke für deine Rückmeldung. Ich bin anscheinend zu blöd dafür. Bin auch leider absoluter Neuling. Wie du vermutet hast ist small zu klein. Habe dann in der user css wie von dir geschrieben die Klasse genauso angelegt. Habe dann in der Home html den Wert mit hs_small und einmal mit .hs_small eingetragen und denn Wert auf bis zu 20% reduziert. Aber es hatte keinerlei Auswirkung auf die Größe….;0(

  7. Damit wir weitere Fehler vorab ausschließen, solltest du zunächst einmal prüfen, ob deine user css in deiner index.html auch wirklich inkludiert wird. Bei der Defintion der Klasse muss der Punkt angegeben werden und bei der Verwendung dann keinen Punkt. Also class=“hs_small“ bei dem Widget angeben.

    Eine weitere Variante zum Test wäre die direkte Definition des Stils – als nicht über eine vordefinierte Klasse. Damit hätten wir ausgeschlossen, dass beim Include oder der Definition etwas schief gelaufen ist. Bei dem Widget solltest du dann mal folgendes mit angeben:

    style="font-size:95% !important"

    Falls das alles nicht hilft wäre es hilfreich, deine Widget-Definition zu sehen. Am besten alles inkl. dem umschließenden.

  8. Sieht wirklich super aus 🙂 Das habe ich auch alles noch vor mir…
    Nutze Tablet Ui noch viel zu wenig

  9. Hallo Jürgen,
    vielen Dank für den Hinweis. Muss jetzt erstmal rumprobieren wie das Ganze funktioniert, wie gesagt, bin absoluter Anfänger und die Widget Definition mit Style hat so noch nicht funktioniert. Aber das liegt sicher daran das ich was falsch gemacht habe. Es hat nämlich gar keine Änderung gezeigt. Viele Grüße und weiter so!

    Ach so, noch eine kurze Frage. Immer wenn ich das Tablet UI Aufrufe oder aktualisiere bekomme ich links unten ein rotes Fenster mit Error angezeigt. Short Poll request failed. Syntax error JSON Parse Error. „/u02:“ is not a valid unicode escape. Wo muss ich da nachschauen was falsch ist? Danke vorab!

  10. Bei dem JSON-Fehler kann ich leider auch nicht weiter helfen. So tief bin ich in dieser Thematik auch nicht drin. Die Frage ist wahrscheinlich, ob alles richtig aufgesetzt ist. Im FHEM das FTUI richtig definiert, in der index.html die korrekten Dateien included, bei den Definitionen evtl ein Fehler drin – viele mögliche Fehlerquellen 🙁

  11. Ok…trotzdem Danke!

  12. Schade, kann den Beitrag nicht lesen.
    Es werden mir nur die Kommentare angezeigt, diese liegen über dem Beitrag.

  13. Problem ist nun hoffentlich wieder behoben. Anscheinend hat ein Codeschnipsel in den Kommentaren die Seite zerschossen.

  14. Hallo Jürgen, erstmal vielen Dank für die tollen Anregungen und die super Vorarbeit, die es absoluten Anfängern wie mir extrem leicht macht, „einzusteigen“. Ich würde gerne Deine Vorlagen verwenden und dann auf meine Bedürfnisse anpassen. Habe jetzt mit deiner Index.html und der page_content_home.html angefangen, aber habe schon die erste Schwierigkeit: ich bekomme die Meldung „Disconnected from FHEM Reason: missing longpoll events“. Was muss ich denn beachten? Viele Grüße

  15. Hatte zunächst einen Teil des Codes deiner Index-Datei in meine Index kopiert. Habe nun deine komplette index verwendet, um „ganz von vorne“ zu beginnen und den o. g. Fehler zu eliminieren. Nun bekomme ich aber nur eine weiße Seite mit 2 Aufzählungspunkten angezeigt, wenn ich die FTUI-Oberfläche öffne. Scheinbar ist das doch komplizierter, als ich dachte :O(

Leave a Reply

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

*

Why ask?

Allnet Flat 728x090
x

Check Also

Die erste Woche mit Alexa – Haussteuerung per Spracheingabe

Seit etwas über einer Woche habe ich nun auch endlich ein Amazon Echo Dot. Aktuell ...

Durch die weitere Nutzung der Seite stimmen Sie der Verwendung von Cookies zu. Mehr Infos

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um Ihnen das beste Surferlebnis zu ermöglichen. Wenn Sie diese Website ohne Änderung Ihrer Cookie-Einstellungen verwenden oder auf "Akzeptieren" klicken, erklären Sie sich damit einverstanden.

Schließen