FHEM Tablet UI FAQ

Das UI zeigt Statusänderungen erst nach 30s

Sehr wahrscheinlich hast du die Aktualisierungsmethode longPoll deaktiviert. Es gibt zwei Aktualisierungsmethoden: shortPoll und longPoll.

shortPoll aktualisiert den Status aller Widgets auf einmal. Bei aktivem longPoll ist das shortPoll-Interval mit 15 Minuten festgelegt, ansonsten mit 30 Sekunden. shortPoll kann nicht deaktiviert werden.

longPoll benutzt den eventgesteuerten Benachrichtigungsdienst von fhem um Statusänderungen direkt zu aktualisieren. Das heisst, fhem sendet eine Nachricht per longPoll sobald sich ein Status ändert und das UI aktualisiert daraufhin automatisch nur die betroffenen Widgets. longPoll ist in fhem standardmäßig aktiv, kann aber deaktiviert werden. Im Zweifel bitte prüfen ob an der verwendeten FHEMWEB-Instanz das Attribut "longpoll 1" gesetzt ist (`list WEB`). Falls nicht, bitte `attr WEB longpoll 1` in fhem ausführen ("WEB" ist ggf. durch den Namen der verwendeten FHEMWEB-Instanz zu ersetzen). Im UI ist longPoll ebenfalls standardmäßig aktiv, kann aber ebenfalls deaktiviert werden. Bitte prüfen, ob der HTML-Code den Meta-Tag `<meta name="longpoll" content="1">` enthält. Falls nicht, bitte so übernehmen.

Das UI zeigt Statusänderungen gar nicht an

Prüfe zunächst, ob die Statusänderungen nicht vielleicht nur verspätet kommen (siehe FAQ Das UI zeigt Statusänderungen erst nach 30s). Wenn tatsächlich keine Statusänderungen im UI ankommen, sind die Werte der data-get-on/off Attribute vermutlich falsch gesetzt. Prüfe im Event_monitor welche Werte die Events, die bei Statusänderungen erzeugt werden, genau haben und passe deine Attribute entsprechend an. Manchmal weichen die erzeugten Events von den Namen der zugehörigen Readings ab. Sollten allerdings gar keine Events erzeugt werden (manche Module erzeugen nicht für jede Readingsänderung ein Event), dann kann die longPoll-Aktualisierung für diese Statusänderung nicht funktionieren.

Wie öffne ich die Javascript-Konsole?

"FHEM Tablet UI" benutzt Javascript und um Fehlermeldungen nachvollziehen zu können ist es oft erforderlich Informationen aus der "Javascript Konsole" des Browsers zu posten. Je nach Browser wird die Konsole mit einer anderen Tastenkombination geöffnet:

Browser	Tastenkombination
Chrome:	Ctrl + Shift + J
Firefox:	Ctrl + Shift + K
Internet Explorer:	F12
Opera:	Ctrl + Shift + I
Safari:	Cmd + Opt + C

Wie kann ich eigene Icons verwenden?

Die Button-ähnlichen Widgets (switch, push, symbol etc.) verwenden Fonts um Icons anzuzeigen. Standardmässig wird der Font Font-Awesome mitgeliefert, der mehr als 500 Icons mitbringt. Wenn diese Auswahl nicht ausreichend ist, kann ein eigener Iconfont eingebunden werden. Am einfachsten kann ein solcher Font mit Hilfe der IcoMoon App erstellt werden.

IcoMoon App

IcoMoon bietet verschiedene Icon-Libraries aus denen gewählt werden kann. Viele davon sind unter kostenlosen Lizenzen verfügbar, die App weist transparent darauf hin, wenn man eine (bzw. aus einer) nicht kostenfreien Library auswählt. Standardmässig wird die Library "IcoMoon Free" angeboten, weitere können über den Button "Add Icons From Library" ausgewählt werden. Zielführender ist das "search" Feld oben zu verwenden. Die Icons aller Libraries sind verschlagwortet und über das Suchfeld findbar. Darüber hinaus können eigene Grafiken hochgeladen werden ("Import Icons"), diese müssen im SVG-Format vorliegen.

Nach abgeschlossener Icon-Auswahl wird über den großen Button "Generate Font" (unten) ein Font erstellt. Dazu sollte zunächst oben unter "Preferences" ein Font Name (z.B. "Font 1") und ein eindeutiger Class-Prefix (zB "font1-") gewählt werden. Insbesondere der Class-Prefix ist wichtig und sollte nicht zu lang ausfallen. Er wird bei der Benutzung der Icons dem Icon-Namen vorangestellt. Das Class-Prefix des mitgelieferten Font-Awesome lautet "fa-". Danach kann der Font über den Button "Download" herunter geladen werden.

Nachbearbeitung

Im heruntergeladenen Zip-file aus der IcoMoon App muss die Zeile

line-height: 1;

auskommentiert oder gelöscht werden, da die Anzeige in den Buttons ansonsten "verschoben" wirkt.

In FTUI einbinden

Der gesamte Inhalt des Ziparchivs kann jetzt in ein eigenes Verzeichnis innerhalb der Fhem Tablet UI Installation kopiert werden, zB nach "customfonts/font1". Es sollte nicht in eines der Standardverzeichnisse kopiert werden, da dort die Gefahr besteht, dass die Dateien vom Updatemechanismus überschrieben werden. In der/den HTML-File(s) ist jetzt im <head>-Bereich noch der Pfad zur style.css aus dem Archiv anzugeben:

 <link rel="stylesheet" href="customfonts/font1/style.css">

Verwenden

Jetzt können die eigenen Icons in den Widgets verwendet werden, indem sie im Attribut data-icon (bzw. data-icons, data-background-icon..) eingetragen werden; zB:

 <div data-type="push" data-device="WECKER" data-icon="font1-alarmclock"></div>

Wichtig: Daran denken, vor dem Namen des Icons das selbst gewählte Class-Prefix (hier "font1-") zu notieren.

Warum führen mich Links auf andere Seiten zurück zu FHEMWEB?

Zur Auslieferung des FTUI an den Browser wird das Modul HTTPSRV verwendet. Leider zeigt es ein seltsames Verhalten, wenn man ausgehend von einer Adresse ohne abschliessenden Slash oder Dateinamen auf einen Link mit relativem URL (also zB nur ein Dateiname) klickt. Der relative Pfad wird in so einem Fall ab dem letzten Slash der Adresse der Ausgangsseite ermittelt.

Ein Beispiel: Wir starten bei http://host:8083/fhem/tablet und klicken auf einen Link zur Datei wohnzimmer.html. Dieser Klick wird nicht auf http://host:8083/fhem/tablet/wohnzimmer.html geleitet, sondern zu http://host:8083/fhem/wohnzimmer.html. Da es http://host:8083/fhem/wohnzimmer.html nicht gibt, wird man darauf postwendend zu http://host:8083/fhem gebracht. Startet man den gleichen Vorgang ausgehend von http://host:8083/fhem/tablet/ (mit Slash am Ende), wird man wie erwartet nach http://host:8083/fhem/tablet/wohnzimmer.html gebracht.

Darüber hinaus kann die Startseite - typischerweise index.html - nicht gefunden werden, wenn ein abschliessender Slash, aber kein Dateiname notiert wird.

Es sollte also insbesondere in der Definition des Links für FHEMWEB darauf geachtet werden, den vollen Pfad zur Startseite zu notieren (define tablet_ui HTTPSRV tablet/index.html ./www/tablet Tablet Frontend). Das gleiche beim Anlegen von Lesezeichen.

Wie kann ich ein eigenes Hintergrundbild einbinden, anstatt des einfachen schwarz?

• Bild besorgen : "Einfach mal Tante Google's Fotoalbum befragen.  ;)"
• In /opt/fhem/www/tablet den Ordner /images angelegen und Bild dort ablegen und in die **-custom.css eintragen.

 body {
	background:#000000 url(../images/orange_blue_bg.jpg) 0 0 no-repeat
 }

So wird der Hintergrund aus der originalen CSS überschrieben.

• Wenn nicht schon geschehen, die CSS in den HTMLs verlinken/deklarieren:

  <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-custom.css" />

Kleiner Tipp: Das Bild in genau der Auflösung suchen/herunterladen, in der die Seite später im FTUI dargestellt werden soll.

Das UI mit Hintergrundbild sieht besser aus, wenn der Vordergrund transparent erscheint. Dazu muss noch folgendes in die fhem-tablet-ui-custom.css eingefügt werden:

.semitransparent {
    background: rgba(0, 0, 0, 0.7) !important;
}

Diese Klasse benutzt dann man bei den Gridster Elementen:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu.html" class="semitransparent"></li>

Wie baue ich ein Menü mit dem Pagetab Widget auf?

Grundsätzliche Struktur:

index.html -> Header-Files (css/js), Nur ein Gridster-Element zum Import des Templates "menu.html"

menu.html -> eine Liste von Pagetab Widgets mit Links zu den Unterseiten

sub*.html -> Unterseiten mit den eigentlichen Widgets, keine Header-Files (css/js), ein Gridster-Element für menu.html

- Die index.html (Startseite) ist minimal und beinhaltet nur das Menu mit den 1-n Pagetabs und alle Links zu CSS und Scripts

<!DOCTYPE html>
<html>
<head>
	<title>FHEM-Tablet-UI</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="widget_base_width" content="74">
        <meta name="widget_base_height" content="71">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
        <meta name="debug" content="1"> <!-- 1=output to console;0=not output -->
        <meta http-equiv="Cache-Control" content="no-store" />
	
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />

        <!-- define your personal style here, it wont be overwritten  -->
        <!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
</head>
<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="menu.html"></li>
        </ul>
    </div>
</body>
    <script src="/fhem/pgm2/jquery.min.js"></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js"></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js"></script>

    <!-- Remove this line to enable for usage with WebViewControl -->
    <script src="/fhem/pgm2/cordova-2.3.0.js"></script>
    <script src="/fhem/pgm2/webviewcontrol.js"></script>
    <script>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <!-- End for WebViewControl -->
</html>

- die per Template eingebundene menu.html enthält die Pagetabs mit den Links zu den Unterseiten

<html>
<body>
    <header>MENU</header>
    <div class="cell">
        <div data-type="pagetab" data-url="sub1.html"  data-icon="fa-home" class="top-space"></div>
        <div data-type="pagetab" data-url="sub2.html"  data-icon="fa-music" class="top-space"></div>
        <div data-type="pagetab" data-url="sub3.html"  data-icon="fa-sliders" class="top-space"></div>
        <div data-type="pagetab" data-url="sub4.html"  data-icon="fa-lightbulb-o" class="top-space"></div>
        <div data-type="pagetab" data-url="sub5.html"  data-icon="fa-line-chart" class="top-space"></div>
        <div class="bottom bottom-space-2x">
           <div data-type="clock" data-format="H:i" class="large"></div>
           <div data-type="clock" data-format="d.n.Y" class="small"></div>
        </div>
</div>
</body>
</html>

- Ganz oben im Menu ist die sub1.html, die zuerst angezeigt wird und die eigentlichen Haupt-Widgets hat

- Jede Unterseite sub*.html hat auch wieder die gleiche Menü-Leiste dabei, die wieder per Template eingebunden wird. Die Unterseiten haben keine Scripts oder CSS Links, da nur der Gridster Teil in die index.html importiert wird

<html>
<title>FHEM Sub1</title>
<head>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menu.html"></li>
<li data-row="1" data-col="2" data-sizex="3" data-sizey="4">
  <header>EXAMPLE1</header>
  <!-- place your widget here -->
</li>
<li data-row="1" data-col="4" data-sizex="6" data-sizey="4">
   <header>EXAMPLE2</header>
   <!-- place your widget here -->
</li>
<li data-row="1" data-col="10" data-sizex="2" data-sizey="4">
    <header>EXAMPLE3</header>
    <!-- place your widget here -->
</li>
<li data-row="5" data-col="2" data-sizex="6" data-sizey="3">
  <header>EXAMPLE4</header>
  <!-- place your widget here -->
</li>
<li data-row="5" data-col="8" data-sizex="5" data-sizey="3">
  <header>EXAMPLE5</header>
  <!-- place your widget here -->
</li>
</ul>
</div>
</body>
</html>

Wie bekommt man Elemente nebeneinander und übereinander?

nebeneinder klappt mit der CSS Klasse inline

übereinander ist das Standardverhalten von div Elementen. Man steckt einfach alle Elemente, die untereinander angeordnet werden sollen, in einen gemeinsamen übergeordneten div Container.

Beispiel: Zwei Blöcken nebeneinander mit jeweils einem Switch und Label übereinander

    

    
Galerie


    

    
Garten