FTUI 1.x - Mobile
Hier meine 'FHEM Tablet UI' optimiert und zusammengefasst für Smartphones mit WebViewControl. In meinem Fall läuft die hier beschriebene und zur Verfügung gestellte UI auf mehreren Samsung Galaxy S5 und ist per DynDNS aus dem Web erreichbar.
Die UI sowie meine FHEM-Konfiguration ist noch lange nicht vollständig. Bei Neuerungen wird auch diese Seite hier aktualisiert.
Die UI ist komplett mit dem PageTab-Widget aufgebaut. Die erste Seite (index_home.html) wird durch die "index.html" geladen.
Die UI findet ihr, gepackt in eine ZIP-Datei, am Ende des Beitrag's.
Viel Spaß.
15.03.2016
Aktuell teste ich aktiv FTUI 2.0! |
bad.html, buro.html, kuche.html, wohnzimmer.html, schlafzimmer.html Umstellung der Heizung auf WeekDayProfile bzw. Heating_Control. Wegfall der Mode-Auswahl (immer manual), Push für Temperaturdirektwahl in Switch mit Statusanzeige geändert, Spinner-Widget zeigt aktuell eingestellte Temperatur. index_home.html Checkbox-Widget zum aktivieren/deaktivieren aller Heating_Control-Devices (s.o.). Türschloss/ Tür. Türkontakt bereits vorhanden und ausgewertet. KeyMatic vorgesehen. Alarm-Dummy (Alarmanlage). Tastenfeld (PIN-Code) zum deaktivieren. draussen_garage.html Eigenbau Temperatursensor aus DS18B20 und ESP8266... Temperatur aktualisiert und Batteriestatus hinzugefügt. fhem-tablet-ui-user_mobile.css Label-Widget: per ID änderbar, sodass die Nachkommastellen kleiner, über der Einheit angezeigt werden. (http://forum.fhem.de/index.php/topic,49890.0.html) Komplettes Re-Design. Und es gefällt mir immer noch nicht besonders... Datenstruktur bearbeitet: Keine data-template Einbindungen mehr! Dadurch wurde erreicht, dass die Widgets, die vormals per data-template eingebunden wurden, nun ein besseres Ladeverhalten haben und zuverlässiger angezeigt werden. |
15.02.2016 |
buro.html Symbol für Display hinzugefügt. Anzeige ob das Tablet geladen wird oder nicht. alle Seiten Widgets als Platzhalter für zukünftige Devices eingefügt. Zwei neue Icon-Fonts (IcoMoon) hinzugefügt. menu.html Speichertatus der FHEM-Konfiguration. Anezige ob Konfiguration gespeichert ist oder nicht (mit dynamischem Label-Widget (Text und Farbe) aus Readings). Push-Widget zum speichern der FHEM-Konfiguration. dwd.html GDS-Widget auf data-max="20" um alle Warnungen zu sehen. Umschließendes <gridster>-Element scrollbar gemacht (style="overflow:auto;"). ScrollBars werden in WebViewControl auf Androidgeräten nur schmal und grau dargestellt. |
29.01.2016 |
index_home.html Anrufbeantworter hinzugefügt (FritzBox). Anzahl neuer Nachrichten und Ein/Aus. Buttons der Müllvisualisierung an die von setstate aktualisierte Version des Button-Widget angepasst. wetter.html Vorhersage überarbeitet. Schriftgrößen etc. Auf dem Handy hat es immer das Layout gesprengt. bad.html / buro.html / kuche.html / schlafzimmer.html / wohnzimmer.html Heizung: Temperatureinstellung in PopUp ausgelagert um etwas Platz zu schaffen. Screenshots der PopUps nur vom Bad als Beispiel. fhem-tablet-ui-user_mobile.css Abgerundete gridster-Elemente. Idee von h3llsp4wn. Hintergrundfarbe der "warn"-Icons geändert. |
12.01.2016 |
wetter.html Schriftgrößen angepasst; <header> für Vorhersage geändert; BMP180 Luftdruck hinzugefügt. |
05.01.2016 |
Geänderte Daten-Struktur: Um Updates über FHEM weiterhin zu ermöglichen ohne manuell eingreifen zu müssen, greift die 'Mobile'-Version jetzt auch auf die Ressourcen in /fhem/tablet/ zu. Dafür war es nötig das von mir angepasste GDS-Widget zu duplizieren und umzubenennen (widget_gds_mobile.js). /images/ und /css/ bleiben mit Versionsspezifischen Dateien erhalten. Beide Versionen findet Ihr jetzt in einer ZIP-Datei. |
Download:
Datei | Größe | Datum |
FTUI_roman1528.zip | 28,8 MB | 15.03.2016 |
Kommentare
habe es analog https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/wind_direction eingerichtet.
Coole Oberfläche, gefällt mir sehr gut und ich versuche sie gerade für mich nachzubauen, allerdings komme ich mit den Pagetab im Menü nicht klar.
Du hast da einen dummy als Device hinterlegt, der ne Meldung bei leerer Batterie ausgibt. Dummy und DOIF habe ich erstellt aber im Menü ändert sich beim Icon nichts. Habe zur Zeit auch eine Warnmeldung, einer Batterie anstehen und sollte somit was sehen.
Kannst Du mal bitte kurz erklären, wie die Warnung aussehen sollte und wo mein Fehler liegen könnte.
thnx for the great mobile layout
I'm trying also charts, but it doesn't work. I also copier ftui_chart.css to the mobile dir, but not working. Any idea how to get it working?
regards Richard
Danke
Gruss
http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Wie_kann_ich_eigene_Icons_verwenden.3F
in deinen -tag muss dann folgendes:
link rel="stylesheet" href="/fonts/roman/style.css"
< am anfang
/> am ende ... der zeigt das hier sonst nich an...
dann kannst du die symbole mit ro-* benutzen... eine demo.html ist auch in dem ordner.. diese im browser öffnen.. dann siehst du wie welchse symbole drin sind und wie sie heißen.