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 (zB "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">

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