FTUI 2.6

Hier nun die Demo meiner FTUI in der Version 2.6.

Wie immer gibt es das ganze als Download am Ende des Beitrags. Als kleiner Tipp: Übernehmt meine Files nicht 1 zu 1 sondern lasst euch nur davon inspirieren was mit FTUI, CSS und JavaScript möglich sein kann. Es macht wenig Sinn die UI so zu übernehmen wie sie ist wenn euch all meine Devices fehlen und es zu keiner Darstellung kommt.

Wie auch schon zuvor in der Version 2.2/2.4 (schaut euch das Video an) sind hier einige Spielereien wie ausklappbare Felder mit weiteren Bedienelementen, JavaScript-Abfragen und diverse Darstellungstricksereien drin. Lass euch davon nicht irritieren!

warning 32 Alle Funktionen sind nur in Fully (Android) und Mozilla Firefox getestet.

information 32 Bei den folgenden Bildern sind (fast) alle Felder ausgeklappt ("Pfeil" zeigt nach oben).

 

 

Eventuell lasse ich mich noch dazu hinreißen wieder ein Video zu machen, um die Funktionen live zu erleben...

 

Weitere Info's und Verwendungshinweise zu FTUI findet ihr HIER

 

Datei Größe Datum
roman1528_FTUI2.6.zip 4,22 MB 11.06.2017

 

Auch hierzu wieder meine fhem.cfg: -> fhem.cfg

 

Kommentare  

0 # Das "X" => fully.exitEike 2017-11-01 14:03
Hallo Roman,

mir macht die Anpassung Deiner FTUI Dateien viel Spaß. Mir ist allerdings nicht klar wo die in der Index.html hinterlegte Funktion zum Beenden von Fully definiert werden muss.
Antworten | Antworten mit Zitat | Zitieren
0 # XRoman 2017-11-03 19:42
Moin.

index.html Zeile 224

... div onclick="fully.exit()" ...

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # X - mir fehlt GrundwissenEike 2017-11-06 21:30
Moin Roman,

danke für den Hinweis. Die Stelle onclick="fully.exit()"... habe ich. Aber ist das nicht eine Variable, die irgendwo definiert werden muss? Fully sagt beim Klick "Index.html: 238 / ReferenceError: fully is not defined".

Grüße,
Eike

p.s. Hatte ich eigentlich erwähnt, dass ich keine wirkliche Ahnung von HTML oder Javascript habe?!?! Ich kann doch nur anpassen *grins*
Antworten | Antworten mit Zitat | Zitieren
0 # XRoman 2017-11-11 18:09
Moin.

fully.exit() ist eine Funktion welche von Fully selbst bereitgestellt wird.

Damit diese "integriert" wird musst du in den Fully Einstellungen die WebSite-Integration aktivieren.

Settings -> Other-Settings -> Enable Website Integration (PLUS)

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # XEike 2017-11-14 15:06
Ah, ok. Das wusste ich nicht. Nun bin ich wieder ein Stück schlauer. Danke :).
Antworten | Antworten mit Zitat | Zitieren
0 # AntwTorsten 2017-10-31 18:33
Hi Roman,
vielen Dank für Deine schnelle Antwort.
Leider hat es bei mir nicht funktioniert.
Habe es, wie beschrieben, in die fhem-tablet-ui-user.css eingetragen.
Die Position innerhalb des Files ist doch egal, oder?

Viele Grüße!
Antworten | Antworten mit Zitat | Zitieren
0 # Seite zu "lang"Roman 2017-10-31 20:42
In der tat...
ich hatte erst den Fehler gemacht und es in der fhem-tablet-ui.css geändert. Gestern bei meiner Antwort korrigiert und es funktioniert jetzt auch nicht mehr.
Wenn du allerdings folgendes ind deine fhem-tablet-ui-user.css einfügst läuft es:

html,
body,
main,
.page {
height: calc(100% - 55px) !important;
width: 99.99% !important;
}

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # Seite zu großTorsten 2017-10-30 09:18
Hallo Roman,
zunächst Danke für das Teilen Deines tollen FTUI.
Mir ist aufgefallen, dass die Seite zu groß ist, sprich es ist immer ein Scrollbalken vorhanden.
Dies trifft auch auf bei Seiten auf, die die volle Seitengröße nicht verwenden, beispielsweise bei "Einstellungen.
Es scheint, als würde die Header Leiste dem Body hinzugerechnet.

Hast Du vielleicht eine Idee, wie man das Lösen könnte?

Viele Grüße
Torsten
Antworten | Antworten mit Zitat | Zitieren
0 # Seite zu "lang"Roman 2017-10-30 21:01
Moin.

Genau das habe ich gestern Mittag tatsächlich in den Griff bekommen...

fhem-tablet-ui-user.css -> folgendes hinzufügen:

.page {
height: calc(100% - 55px) !important;
width: 99.99% !important;
}

- 55px ist die Höhe der Navigations- bzw. Titelleiste oben. Wenn du dort eine andere Größe hast musst das natürlich dementsprechend ändern.

width auf 99.99% weil ich auch in der Breite hier und da eine Unstimmigkeit hatte.

Grüße^^
Antworten | Antworten mit Zitat | Zitieren