FTUI 1.x - Mobile

warning 32  FTUI 1.x Tablet/Mobile wird nicht fortgesetzt. Bitte schaut euch meine Demo der Version 2.2 an.

-> FTUI 2.2

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.

 

index.html

 

index home1 index home2

index_home.html

 

menu

menu.html

 

dwd

dwd.html

 

 wetter

wetter.html

 

pollen

pollen.html

 

bad

bad.html

 

buro

buro.html

 

flur1 flur2

flur.html

 

kuche1 kuche2 kuche3

kuche.html

 

schlafzimmer

schlafzimmer.html

 

 wohnzimmer

wohnzimmer.html

 

wohnzimmer licht

wohnzimmer_licht.html

 

wohnzimmer multimedia

wohnzimmer_multimedia.html

 

draussen garage

draussen_garage.html

 

rpi status1 rpi status2

rpi_status.html

 

Download:

Datei Größe Datum
FTUI_roman1528.zip 28,8 MB 15.03.2016

 

 

Comments are now closed for this entry

Kommentare

0 # WindrichtungMichael 2016-12-30 22:13
Leider funktioniert bei mir das Widget Windrichtung irgendwie nicht...
habe es analog https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/wind_direction eingerichtet.
0 # Warnmeldung bei den RäumenMarcus 2016-12-17 10:35
Hi.
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.
0 # ftui mobile chartsRichard 2016-08-21 21:53
Hi,

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
0 # Icons einlesenMarco Engelhardt 2016-05-04 20:36
Darf man fragen wie du die Icons einliest? z.B das Sofa im Menü fehlt bei mir.

Danke

Gruss
0 # .Roman 2016-05-04 20:39
Das ist per Custom-Font eingebunden.

http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Wie_kann_ich_eigene_Icons_verwenden.3F
0 # .Marco Engelhardt 2016-05-04 20:57
Ja das habe ich gelesen, aber noch etwas zu heftig für mich
+1 # .Roman 2016-05-04 21:01
Dann kopier dir den ordner roman aus meiner ZIP /fonts/ ind deinen /fonts/ ordner.

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.