FHEM Tablet UI FAQ: Unterschied zwischen den Versionen

Version vom 23. April 2015, 22:36 Uhr

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:

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. Es sollte also insbesondere in der Definition des Links für FHEMWEB darauf geachtet werden, den abschliessenden Slash zu notieren (define tablet_ui HTTPSRV tablet/ ./www/tablet Tablet Frontend). Das gleiche beim Anlegen von Lesezeichen. Wenn man das UI aber von Hand ansteuert, muss man schlicht daran denken den Slash mit einzugeben.

@@ Zeile 68: / Zeile 68: @@
 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 [http://fhem.de/commandref.html#HTTPSRV 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 ''<nowiki>http://host:8083/fhem/tablet</nowiki>'' und klicken auf einen Link zur Datei ''wohnzimmer.html''. Dieser Klick wird '''nicht''' auf ''<nowiki>http://host:8083/fhem/tablet/wohnzimmer.html</nowiki>'' geleitet, sondern zu ''<nowiki>http://host:8083/fhem/wohnzimmer.html</nowiki>''. Da es ''<nowiki>http://host:8083/fhem/wohnzimmer.html</nowiki>'' nicht gibt, wird man darauf postwendend zu ''<nowiki>http://host:8083/fhem</nowiki>'' gebracht. Startet man den gleichen Vorgang ausgehend von ''<nowiki>http://host:8083/fhem/tablet/</nowiki>'' (mit Slash am Ende), wird man wie erwartet nach ''<nowiki>http://host:8083/fhem/tablet/wohnzimmer.html</nowiki>'' gebracht. Es sollte also insbesondere in der Definition des Links für FHEMWEB darauf geachtet werden, den abschliessenden Slash zu notieren (<code>define tablet_ui HTTPSRV tablet/ ./www/tablet Tablet Frontend</code>). Das gleiche beim Anlegen von Lesezeichen. Wenn man das UI aber von Hand ansteuert, muss man schlicht daran denken den Slash mit einzugeben.
 [[Kategorie: FAQ]]