FHEM Tutorial Serie Teil 5 – Tablet UI installieren und konfigurieren

In meinem letzten Beitrag habe ich euch gefragt was ihr gerne im fünften Teil sehen wollt. Die Kommentare waren recht eindeutig: Das Tablet UI.

Das einzige was ihr neben einem funktionierenden FHEM-System braucht, ist ein einfaches Tablet mit einem Browser wie dieses hier zum Beispiel.

Ich habe mich mit dem UI ein wenig beschäftigt und zeige euch nun in Teil 5 der FHEM Tutorial Reihe die grundlegende Installation und Konfiguration. Wir gehen dabei genauso vor wie es im Wiki Eintrag zum Tablet UI beschrieben und erklärt ist.

Üblicherweise zeige ich das Tutorial ja auf einem separaten FHEM Testsystem. Für dieses Tutorial habe ich mich dazu entschlossen euch das ganze auf meinem im Einsatz befindlichen System zu zeigen, da dort etliche Komponenten bereits laufen und ich dann das Tablet UI besser zeigen kann.

Dieses Tutorial ist in zwei Teile unterteilt. Im ersten Video zeige ich euch die Installation, im zweiten Video zeige ich euch dann die Konfiguration.

Teil 1

Teil 2

Codes zum Copy & Pasten:

Code 1


Code 2


Code 3


Code 4


Code 5


Code 6


Code 7


Code 8


Code 9
<li data-row="1" data-col="4" data-sizex="5" data-sizey="3">
<header>EXAMPLE3</header>
<div class="row top-space">
<div class="col-1-2">
<div class="row top-space">
<div class="col-1-3">
<div data-type="switch" data-device="Switch1" data-icon="fa-music"></div>
<div data-type="label" class="">Station1</div>
</div>
<div class="col-1-3">
<div data-type="switch" data-device="Switch2" data-icon="fa-music"></div>
<div data-type="label" class="">Station2</div>
</div>
<div class="col-1-3">
<div data-type="switch" data-device="Switch3" data-icon="fa-music"></div>
<div data-type="label" class="">Station3</div>
</div>
</div>
<div class="row top-space">
<div class="col-1-2">
<div data-type="symbol" data-device="Switch1" data-icon="fa-battery-4"></div>
<div data-type="label" class="">Value1</div>
</div>
<div class="col-1-2">
<div data-type="symbol" data-device="Switch1" data-icon="fa-battery-4"></div>
<div data-type="label" class="">Value2</div>
</div>
</div>
</div>
<div class="col-1-2">
<div data-type="volume" data-device='Volume1' class="" ></div>
</div>
</div>
</li>

Aktualiserter Code 9 direkt zum Download

Code 9 Download (index.html in ZIP Datei)

 

LINKS

FileZilla Download

FHEM-Wiki Tablet UI

Tablet UI Github

Icon-Datenbank

User-Demos

 

 

VN:F [1.9.22_1171]
Rating: 4.7/5 (9 votes cast)
FHEM Tutorial Serie Teil 5 - Tablet UI installieren und konfigurieren, 4.7 out of 5 based on 9 ratings

16 Kommentare

  1. Super Tutorial. Leider komme ich nicht zum Teil 2, da mir keine Widgets angezeigt werden. Ich habe die index-html wie beschrieben geändert, aber auch da kommt nur;

    EXAMPLE3
    Station1
    Station2
    Station3
    Value1
    Value2

    im Klartext. Kein einziges grafisches Element. Hast du evt. eine Idee???

    Danke und schöne Weihnachten – RUDI

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    1. Hallo, ich habe leider das selbe Problem, dass mit dem Beispiel keine Widgets angezeigt werden.
      Seltsamerweise hab ich auch durch suchen nichts zu dem Problem gefunden.

      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
    2. Hi Rudi!

      Bitte lade die aktuelle Index.html herunter. Du findest sie geziped oben im Beitrag. (Direkt unter Code 9)
      Diese index.html stammt direkt von meinem Live-System und ist entsprechend auf meine Gerätenamen angepasst, also bei Bedarf bitte entsprechend ändern.

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  2. Ich kann meinem Vorredner nur zustimmen, die Tutorial-Reihe ist ein Meisterwerk, noch einfacher lässt sich der Einstieg nicht erklären.
    Ein MUSS für jeden Anfänger.

    Ich finde es sehr gut, dass du die Tutorials weitergeführt hast und hoffe dass noch weitere Folgen erstellt werden.
    Danke für deine Arbeit.

    VA:F [1.9.22_1171]
    Rating: +3 (from 3 votes)
  3. Nach meiner Meinung eines der besten FHEM-Tutorials überhaupt. Tolle ArbeIt!

    Es wäre wünschenswert, Teil 5.2 noch mit einem weiteren Kapitel zu ergänzen, in dem dann noch detailliertaud die unterschiedlichen Widget-Attribute eingegangen wird.
    Auch die Gestaltung mehrseitiger UIs mit pagetabs fände ich prima.

    VA:F [1.9.22_1171]
    Rating: +3 (from 3 votes)
  4. Danke für deine überhaupt tolle Arbeit über FHEM.
    Das Hochladen der Änderung kann man sich schenken, wenn man die Gui (Xprotokoll) Umleitet.
    Damit kann man dann z.B. leafpad direkt nutzen. Die Gui wird auf dem jeweiligen ssh Client angezeigt
    Unter Linux startet man ssh mit -X. Unter Windows kann man sich den xming installieren und Putty unter Connection > SSH > X11 > Enable X11 forw. konfigurieren. Für den Mac weiß ich das leider nicht.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  5. Hallo,

    vielen Dank für diese tolle Tutorial Serie!!
    Da ist bei mir so der ein oder andere Kronleuchter aufgegangen.;-)
    Und noch als Tip für fortgeschrittenere User, um die index.html nach Änderungen nicht immer wieder per SFTP hochladen zu müssen, kann man auch auf dem Raspi einen NFS oder Samba Server einrichten und kann dann auf die Dateien des Raspi zugreifen als wären es lokale Dateien.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  6. bekomm da leider immer nur beim ersten Code :
    Events (Filter: global) FHEM log Reset

    2016.02.03 18:04:35 1 : Connection refused from 192.168.2.104:33329

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  7. Hallo
    super Anleitung – Danke
    Bei FS20 Aktoren musste ich unter Switch jedoch diese 2 Codezeilen löschen
    data-get-on=“on.*“
    data-get-off=“off“>
    Mit diesen 2 Zeilen war nur ein Ausschalten vom TUI möglich, nicht jedoch ein Einschalten. Befehle von FHEM wurden immer angezeigt.
    Tx Helmut

    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  8. Hallo,

    kann mir jemand erklären, warum im Codebespiel 9 die Anzeigen der Batterien untereinander sind und nicht nebeneinander?

    Vorab vielen Dank
    Marc

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  9. danke für das tutorial, hat mir sehr geholfen.

    kleiner tip:
    ich weis nicht wie es bei filezilla ist, aber bei winscp kann man ein standard editor-programm unter einstellungen bestimmen, mit dem man eine html datei öffnet. ich nutze dafür html editor (phase5) allerdings für´n PC. das progamm noch in den einstellungen nach oben schieben und winscp öffnet die html datei direkt im editor und bei jedem speichern wird die datei gleich mit hochgeladen.
    das erspart einem die zeit das selbst hoch zu laden 😉

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  10. Hallo,

    vielen Dank super Tutorial. Habe aber noch 3 Fragen.
    1.) Ich komme irgendwie immer noch mit der Anordnung der Icons in’s Straucheln. z.B. hätte ich gerne in einer Box 2 Zeilen mit „Switch“ Icons un Labels. 2 „Switches“ je Zeile.

    2.) Wie bekomme ich eine Übersicht über alle Icons in den TTF Fonts mit Namen.

    3.) Kannst Du noch mal erklären, was die class=“cell“ macht. Vielleicht auch noch mal inline, usw.

    Vielen Dank

    Ralph

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  11. Hallo,

    vielen Dank für dieses nützliche Tutorial.
    Kannte vorher TabletUI nicht. Ist genau was ich gesucht habe.

    Die Bearbeitung der index.html geht noch einen Schritt leichter.
    Ich habe bei mir schon Samba laufen. Einfach eine neue Freigabe erstellt und dann steht dem direkten Bearbeiten nichts mehr im Weg.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Kommentar hinterlassen

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