FHEM Tablet UI #1: optimierte Tablet Benutzeroberfläche einrichten

FHEM Tablet UI ist eine optimierte Benutzeroberfläche für FHEM. Es werden keine weiteren Programme benötigt außer eine laufende FHEM Version.

[DEMO]

Voraussetzung:

Update (13.01.16)

Punkt 1-3 kannst du überspringen, wenn du folgende Befehle oben in das Befehls-Eingabefeld von FHEM kopierst und mit Enter bestätigst.

update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt

Punkt 5 kannst du mit diesem Befehl überspringen.

define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI

Jetzt noch rechts auf Save config klicken.


  1. Lade dir die .zip mit den benötigten Dateien von Github herunter.
    
    wget https://github.com/knowthelist/fhem-tablet-ui/archive/master.zip
    
  2. Entpacke die .zip Datei und lösche sie danach.
    unzip master.zip && rm master.zip
  3. Kopiere den Ordner tablet in den fhem/www Ordner.
    
    cp -r ./fhem-tablet-ui-master/www/tablet /opt/fhem/www/
    
  4. Erstelle eine Kopie der index-example.html Datei und benne sie in index.html um.
    
    sudo cp /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html
    
  5. Füge deiner fhem.cfg Datei folgende Zeile hinzu. Du kannst dies über die Weboberfläche von FHEM tun (Edit files -> fhem.cfg)
    define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI

    oder per Konsole mit dem Nano Text Editor.

    nano /opt/fhem/fhem.cfg

    Beenden kannst du Nano mit ctrl+x und dann y enter

  6. Rufe jetzt http://ip-des-raspberry:8083/fhem/ftui/ auf deinem Tablet auf. Das Tablet muss sich im selben Netzwerk wie der Raspberry befinden.
    FHEM Tablet UI

Weitere Informationen zu FHEM Tablet UI findet ihr hier:

FHEM Wiki

FAQ

FHEM Forum

In den nächsten Tagen werden weitere Beiträge folgen, wie du die Tablet UI Oberfläche nach deinen Wünschen anpasst.
Bitte Anregungen und Tipps in die Kommentare schreiben.
 

Gib deine Stimme ab!

34 Likes
Upvote Downvote

Total votes: 31

Upvotes: 29

Upvotes percentage: 93.548387%

Downvotes: 2

Downvotes percentage: 6.451613%

Geschrieben von Ben

#Blogger #Designer #RaspeberryFan #Self-Employed #Developer #Javascript
TwitterGithubThingiverse

17 Kommentare

Kommentar verfassen
  1. Hallo,
    habe ein funktionierendes Fhem Tablet UI und möchte dies in eine Homepage einbauen.
    Ist das möglich bzw. auf welche Art machbar, bin >70 und habe keine große Ahnung von programmieren, würde mich aber über Hinweise oder Tipps freuen.
    LG Peter

    • Hallo Peter,
      ich denke das wäre keine gute Idee, da dies eine große Sicherheitslücke wäre. Jeder hätte dann Zugriff auf dein FHEM.
      Um es sicher umzusetzen müßtest du einen Apache Server einrichten und ein Script schreiben welches die FHEM Daten per php lädt. Das Script ist dann per Apache und Portweiterleitung aus dem Internet erreichbar und kann in eine Seite eingebunden werden.
      Leider nicht einfach umzusetzen. Falls wer eine einfachere Idee hat…

  2. Danke dir für diesen tollen Beitrag! Werde das mal ausprobieren und schauen! Bin schon seit langem auf einer Suche nach einem Dashboard Tutorial

    Gruß
    Stephan

  3. Hallo Ben,
    vielen Dank für die wirklich tollen und verständlichen Anleitungen.
    Ich konnte soweit alles nachvollziehen und auch schon im eigenen UI Aktoren steuern.
    Es gibt allerdings ein Problem. Die grafische Oberfläche erscheint zwar am Raspberry Monitor oder auf einem mit WLAN verbundenen PC. Beim Tablet bzw. Smartphone (im gleichen WLAN-Netz) erscheint aber nur eine zeilenweise Auflistung der Widget Namen.
    Hast Du eine Ahnung, an was das liegen könnte?

    Rolf

    • Leider ist das schwer zu erahnen woran es liegen könnte. Hast du noch ein Smartphone oder Tablet wo du es ausprobieren kannst?
      So kannst du ausschließen das es an deinem Tablet liegt.

      • In meiner Antwort von eben ist beim Senden die Raspberry-ID verschluckt worden (also das, was zwischen http:// und :8083 zu stehen hat).
        Die ID war natürlich Bestandteil der Adressierung.

    • Ich muss meine Fehlerbeschreibung etwas revidieren.
      Tatsächlich verhält es sich so, dass beim direkten Zugriff auf die Tablet-UI
      (http://:8083/fhem/ftui) von allen Geräten (PC, Laptop, Tablet, Smartphone) nur die zeilenweise Auflistung kommt.
      Wird jedoch nur die FHEM-Oberfläche aufgerufen
      (http://:8083/fhem/) und dort die Tablet-UI, dann funktioniert das mit allen Geräten. Aber das ist ja nicht das Ziel.

      • Ich habe das gleiche Problem. Leider habe ich noch keine Zeit gehabt zu Recherchieren woran es liegt und wie man es beheben kann.

  4. Hallo Ben,
    mir gefällt die Oberfläche und ich habe sie meinen Bedürfnissen angepasst. Hauptziel für mich ist Heizungssteuerung mit Homematic Geräten.
    Leider bekomme ich die Homestatus-Buttons nicht eingebunden. Ich möchte damit verschiedene Heizpläne aktivieren.

    Lg Bernd.

  5. Hallo Ben,
    ichb zitiere: „In den nächsten Tagen werden weitere Beiträge folgen, wie du die Tablet UI Oberfläche nach deinen Wünschen anpasst.“
    Das ist jetzt ein halbes Jahr her. Kommst Du nicht weiter?

    • Hallo Uwe,
      es freut mich das du an meinem Beitrag über die Tablet UI für FHEM interessiert bist. Ich bin Selbständig und hatte in der letzten Zeit viel zu tun. Ich habe den Beitrag noch in Planung, aber leider noch nicht geschafft ihn fertig zu stellen.

  6. Hallo Ben,
    ich finde dieses UI auch sehr spannend, leider habe ich noch nirgens einen Beitrag gefunden, der deutlich weiter geht als DeinBlog. Ich habe etwas Probleme mit der Syntax für den Seitenaufbau, denn immer wenn ich versuche, eine Demodatei an meine Bedürfnisse anzupassen, habe ich sie nach kürzester Zeit „kaputt gespielt“.
    Insofern wäre es super, wenn Du Deinen angekündigten zweiten Beitrag möglichst bald online stellen würdest.

    Kai

      • Hallo Ben,
        danke für den Link. Die „Basics“ beherrsche ich, eine einfach strukturierte,“normale“ HTML-Seite kann ich erstellen. Womit ich erhebliche Schwierigkeiten habe ist die geschachtelte Formatierung (links ein senkrechtes Feld für’s Menü, rechts daneben ein Feld, das zwei Widgeds nebeneinander und ein weiteres Feld mit zwei Widgets untereinander enthält etc.).
        Ich habe eine gewachsene FHEM-Installation (Tür- und Fenstersensoren, Thermometer und Thermostate, Schalter, Kalender, Webcam …), die ich über ein Tablet an derWand „familientauglich“ machen möchte. Bisher habe ich es geschafft, in der Beispieldatei einen meiner Heizkörperthermostaten einzubauen, aber als ich dann die übrigen Elemente rausgeworfen und einzusätzliches Feld für Türsensoren eingebaut habe, klebte alles übereinander oben links in der Ecke.
        Wenn Du an einem kurzen Beispiel erklären würdest, wie man die Felder für das Layout zusammen fügt, wäre mir schon sehr geholfen.

One Ping

  1. Pingback:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.