FTUI 2.6/2.7

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
roman1528_FTUI2.7.13.zip 5,90 MB 09.04.2019

 

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

 

Kommentare  

0 # Hintergrundfarbe Volume-SliderA. Herbold 2020-07-25 15:00
Hallo Roman,

ich würde gern noch das "blau" im Volumen-Slider vom Sonos bei gestoppt ebenfalls ausgrauen oder von der Farbe den anderen Buttons anpassen. Erst wenn der Player gestartet ist dann wieder das "blau" über "data-background-color" einschalten. Hast du da eine Idee für?
Antworten | Antworten mit Zitat | Zitieren
0 # Hintergrundfarbe Volume-SliderRoman 2020-07-26 12:34
Da müsstest du zwei mal das gleiche Widget bauen und mit data-type="classchanger" umschalten. Sehe ich persönlich als zu aufwändig an... Vorallem wird dann mehr Last erzeugt, weil immer beide Widgets aktualisiert werden würden. Leg' dich auf eine Farbe fest...

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # Hintergrundfarbe SilderA. Herbold 2020-07-26 12:58
Hallo Roman,
ja mit der Last wird stimmen.
Cooler wäre es schon mit "ausgrauen" bei Stop und einfärben bei Play. Viecht wenn ich mal 98% umgesetzt habe mache ich mich dann da mal dran.
... das wird dauern ... :)
Gruß
Antworten | Antworten mit Zitat | Zitieren
0 # Sonos Mute, circlemenuA. Herbold 2020-07-22 23:49
Hallo Roman,
ich fange gerade mit Tablet UI an und finde deine Arbeit / Style sehr ansprechend. Daher die Version 2.7 gewählt.
Nun häge ich an folgenden Problemen:
Bei den Sonos Geräten würde ich noch min. gern den Mute-Modus einbauen. Kommen aber nicht mit der Syntax zurecht. Kannst du mir hier helfen?

Zweiter Wunsch die Senderliste als "circlemenu" mit den Sendericons. Wo müssen die Icons liegen oder eingebunden werden?

Dankeschön

Gruß Alex
Antworten | Antworten mit Zitat | Zitieren
0 # SONOS MuteRoman 2020-07-26 12:30
EDIT: Wie ich befürchtet habe, lässt die Kommentarfunktion keinen HTML-Code zu. Schreib mir mal 'ne Mail über das Kontaktformular!

Hi.

Ich habe bei mir auf einen Mute-Button verzichtet, weil man auch einfach auf Stop oder Pause drücken könnte...

Möglich wäre aber:

//gestrichen, weil geht nicht.

Ich habe nur leider feststellen müssen, dass das Reading Mute kein Event erzeugt... somit bekommt ftui keine Änderung des Mute-Status mit...

Mit einem Push-Widget würde das so gehen:

// Push-Widget - Mail mir...

Man bekommt nur leider nicht den aktuellen Status angezeigt.

Circle-Menu benutze ich persönlich auch gar nicht bzw. ungern wegen dem Platzbedarf des Widgets. Solltest du das aber unbedingt haben wollen, schreib einfach nochmal, dann kann ich sicherlich was zusammen bauen.

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # Sonos MuteA. Herbold 2020-07-26 12:55
Hallo Roman,
habe dir eine E-Mail geschickt
Antworten | Antworten mit Zitat | Zitieren
0 # FTUI Version 1.xNoxx 2020-04-20 08:55
Hallo Roman,
zunächst einmal vielen Dank für die exzellente Arbeit und Veröffentlichungen der Beispiele. Ich habe zunächst beide Versionen ausprobiert, die 1.x und die 2.6. Letztendlich habe ich mich aus rein optischen Gründen für die 1.x entschieden. Ich konnte fast alles übernehmen und war sehr glücklich, dass alles funktioniert. Gestern habe ich dann über FHEM das Update durchgeführt, dabei wurde auch FTUI aktualisiert. Leider wurde im FTUI einiges zerschossen. Einige meiner Einträge wurden gelöscht/ersetzt, das war nich schlimm da ich es relativ schell rekonstruieren konnte. Es funktioniert wieder alles, leider ist jedoch das Gesamtbild "verkleinert". Die Page Buttons sind nicht mehr untereinander sondern verkleinert nebeneinander.Kannst du mir die Stelle nennen, wo ich Einfluss nehmen kann um auf die ursprüngliche Darstellung zu kommen? Besten Dank.
Antworten | Antworten mit Zitat | Zitieren
0 # Ihr sollt nicht kopierenRoman 2020-04-21 18:20
Moin.
Das ist genau das was ich immer sage...
Ihr sollt keine 1:1 Kopien machen sondern euch nur inspirieren lassen.
Zudem sollte jedem klar sein, dass man immer erst ein Update machen sollte... wie bei einer FHEM-Neuinstallation.
Da ich aktuell kein Pagetab mehr verwende und auch meine alte Vorlage ja komplett über den Haufen geworfen habe, kann ich dir leider nicht sagen was du ändern müsstest. Zudem besitze auch ich leider keine Glaskugel... Ich weiß also nicht wie es gerade bei aussieht. Schick mir doch mal eine Mail (Kontakt) mit Screenshots oder so.

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # HeizungssteuerungInes 2020-02-15 16:02
Hallo Roman
In der Content_home ist die Rede von einer „doif_heatingcontrol_auto“
Und ein dazugehörigen dummy „heatingcontrol_dummy“
In deiner config kann man leider nichts finden dazu
Wäre nett wenn du mir das gibst möchte gern deine Heizungssteuerung
Nachbauen habe hier ähnliche Hardware
Ines
Antworten | Antworten mit Zitat | Zitieren
0 # HeizungssteuerungInes 2020-02-15 12:15
Hallo Roman

Wollte den Teil mit der Heizungsteuerung
nachbauen nur leider paßt deine fhem.cfg
nicht mehr dazu.
Kannst du vielleicht den relevanten Teil dazu hier
posten oder per email
Danke Ines :-)
Antworten | Antworten mit Zitat | Zitieren
0 # HeizungssteuerungRoman 2020-02-15 12:18
Hi.
Was genau meinst du? In den Räumen der Teil unter "Soll-Temperatur"?
Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # Ein-/AusklappenMarc 2019-12-20 09:00
Hallo Roman,
bin auch über deine Oberfläche gestolpert und möchte gerne die Logik für das Ein-/Ausklappen in meine Oberfläche übernehmen.
Ich habe dazu den Code aus Deinem Ambilight Beispiel kopiert. Grundsätzlich funktioniert das auch, allerdings sind beim mir die Elemente standardmäßig eingeblendet. Bei Dir sind diese jedoch standardmäßig ausgeblendet. Hast Du ne Idee, was ich noch anpassen muss?
Viele Grüße
Marc
Antworten | Antworten mit Zitat | Zitieren
0 # Ein-/ AusklappenRoman 2019-12-21 17:51
Moin Marc.
Damit du etwas sichtbar machen kannst (ausklappen) muss es natürlich ersteinmal unsichtbar (eingeklappt) sein. Dazu in deine ...-user.css folgendes:

#dropambi {
display: none;
}

Damit sollte es klappen. "#dropambi" musst du natürlich anpassen, solltest du die id="" von deinem "dropdown" geändert haben

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # Ein-/ AusklappenMarc 2019-12-23 08:30
Hallo Roman,
ja, das war es.
Ich danke Dir, für Deine Hilfe.
LG
Marc
Antworten | Antworten mit Zitat | Zitieren
0 # Menüpunkt listenAndreas 2019-07-25 20:04
Ich nochmal,
auf der Seite Listen verwendest du ein device PostMe. Ist dass das Postme Modul? Ich konnte es in deiner fhem.cfg nirgends finden.
Vielen Dank vorab
Antworten | Antworten mit Zitat | Zitieren
0 # PostmeRoman 2019-07-25 20:23
Ja, ist das Postme Modul.

Grüße
Antworten | Antworten mit Zitat | Zitieren
-1 # PostmeMarcel 2019-08-16 21:23
Hallo Roman,

besteht die Möglichkeit den Teil Deiner cfg mit der Postme definiton zu bekommen?

Gruß Marcel
Antworten | Antworten mit Zitat | Zitieren
0 # PostMe cfgRoman 2019-08-17 11:04
Moin... natürlich. Aber bringt das was?

define PostMe PostMe
setuuid PostMe XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXX
attr PostMe event-on-change-reading .*
attr PostMe group Informationen
attr PostMe room Status

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # FehlerMarcel 2019-08-24 20:02
Hi,

Ich versuchen gerade postme und deine tabletui.
Leider hab ich den Fehler
File not found: ./www/tablet//Initialized
Beim hinzufügen von Notizen
Jemand ne Idee?

Gruß Marcel
Antworten | Antworten mit Zitat | Zitieren
0 # LinkRoman 2019-08-24 20:04
Mit dem Link-Widet stimmt seit einiger zeit etwas nicht. es ist scheinbar nicht mehr zum senden mit values gedacht...

geht es denn wenn du etwas in das textfeld eingibst und enter (tastatur) drückst?
Antworten | Antworten mit Zitat | Zitieren
0 # LinkMarcel 2019-08-25 17:37
Hallo Roman,

stimmt. Ohne einen klick auf das Link-Widget funktioniert es.

Gruß Marcel
Antworten | Antworten mit Zitat | Zitieren
0 # deine FTUI OberflächeAndreas 2019-07-25 18:21
vielen Dank das du deine Variante zum Download angeboten hast. Konnte ich sehr leicht auf meine Config anpassen, und hab jetzt ne stylische Oberfläche. Konte nirgends nen Paypal donate oder so finden? Würde dir gerne was zukommen lassen als dank
Antworten | Antworten mit Zitat | Zitieren
0 # PayPal DonateRoman 2019-07-25 21:40
Hey.

Da du nicht der Erste bist der danach gefragt hat, habe ich jetzt mal so einen Button eingefügt.

Vielen Dank im Voraus

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # Packstation FTUI2.7Marcel 2019-06-02 13:28
Hallo Roman,

heute hab ich seit langem mal wieder Zeit gehabt und hab auf Deiner Seite geschaut. Da ist mir auch gleich den FTUI2.7 ins Auge gefallen. :D
Mich würde der Hintergrund von der Packstation interessieren?!

Gruß Marcel
Antworten | Antworten mit Zitat | Zitieren
+2 # PackstationRoman 2019-06-12 17:37
Moin.
Auf meinem Smartphone habe ich Tasker laufen. Es wird der SMS-Eingang überwacht. Wenn eine SMS von DHL kommt wird diese per HTTP(S)-Request an FHEM in ein Dummy geschickt. Hier dann per userreading die mTAN ausgelesen und in ein eigenes Reading geschreiben. Ist dieses Reading nicht 0 (Null) wird das Symbol in FTUI blau und als "data-warn" die mTAN angezeigt.

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # onclick (in der Wettervorhersage) automatisch zurücksetzenPeter 2019-05-04 08:31
Hallo Roman,

in der Datei content_wetter verwendest Du im auskommentierten Teil (Vorhersage) onclick auf den Vorhersagetag, um weitere Informationen zu dem entsprechenden Tag einzublenden. Zum Schließen dieser Einblendung muß man wieder draufklicken. Wenn man diese weiteren Informationen offen läßt (also nicht mehr "zu-klickt") und die Seite stehen läßt, kommt irgendwann der Screensaver, der aber nicht die ganze Ansicht überdeckt, die aufgeklappten Informationen bleiben stehen.

Gibt es eine Möglichkeit, den "zu-Klick" automatisch nach einer bestimmten Zeit auszulösen, um die Seite wieder auf die Standardgröße zu reduzieren?
Ich suche so etwas ähnliches wie den "data-return-time" bei popup.

Gruß und dickes Lob und Danke für die freundliche Bereitstellung der Oberfläche

Gruß
Peter
Antworten | Antworten mit Zitat | Zitieren
0 # ^^Roman 2019-06-12 17:40
Moin.
Ich habe mir das mal ein wenig angeschaut. Es ist definitiv möglich, bin aber noch zu keiner schönen Lösung gekommen.

Rein theoretisch wird bei mir aber immer komplett zum Seitenanfang (scroll.top) gescrollt bevor der Screensaver aktiviert wird. Irgendwo hatte ich das auch schon mal gepostet. Ich suche das nochmal raus.

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # Beitrag scrollTopRoman 2019-06-12 17:43
Da ist es^^

https://forum.fhem.de/index.php/topic,44177.msg927891.html#msg927891

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # 'FTUI-Smartphine-AnsichtAndi 2019-04-09 14:07
Servus Roman erstmal vielen Dank für diese tolle Vorlage!!

Ich bin noch realtiv neu im HTML/CSS Spektrum und habe
deinen Ordner komplett in meinen www/tablet kopiert aber wenn ich die Seite mit dem Smartphone aufrufe wird mir alles nur in Textform angezeigt.

Was läuft da falsch bei mir??

Falls du Zeit und Lust hast mir zu helfen kann ich dir auch gerne einen Screeenshot davon schicken, hier habe ichnichts anhängen können.

MfG und nochmals Danke für die Mühen!!!
Antworten | Antworten mit Zitat | Zitieren
0 # ^^Roman 2019-04-09 14:30
Moin Andi.
Ein Problem könnte sein, welches ich auch versucht habe ganz oben zu erleutern, dass du 1 zu 1 kopiert hast.
Du hast in deinem FHEM doch gar nicht meine Devices. So kann es beim start/laden von FTUI dazu kommen, dass er abbricht und die Seite nicht fertig lädt.

Alternativ ist es immer eine gute Idee die Seite "absolut" aufzurufen, also:
http(s)://[IP]:[PORT]/fhem/tablet/index.html
So können die relativen Pfadangaben zu den Ressouren besser verarbeitet werden.

Ansonsten schick mir mal eine Mail über das Kontaktformular. Ich antworte dir, anschließend kannst du mir Info's über Browser, URL-Aufruf und Screenshots schicken.

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # vertikaler Zeilenabstand, ElementeabstandPeter 2019-04-08 19:37
Hallo Roman,

erstmal ein dickes Lob für die gute Arbeit und vor allem für die Bereitstellung der Dateien.

Ich habe inzwischen dank Deiner Vorlage die Dateien (eigentlich nur die content_...) an meine Komponenten angepasst. Aber seit einem FHEM update all (dabei wird auch www-tablet aktualisiert) hat sich der Zeilenabstand bei den Zeilenumbrüchen sowie der Abstand zwischen den Linienelementen (inline-block) deutlich vergrößert, das sieht leider gar nicht mehr gut aus. Was wurde mit dem Update geändert, daß so etwas passiert? Was kann ich ändern, damit dies nicht bei jedem Update wieder passiert?
Ich habe leider viel zu wenig Ahnung, um die Ursache zu lokalisieren un zu ändern.

Gruß, Peter
Antworten | Antworten mit Zitat | Zitieren
0 # line-highRoman 2019-04-09 14:25
Moin Peter.
In der Tat hat setstate vor 2-3 updates die line-high angepasst bzw. wohl wieder auf Normalwerte gesetzt.
Ich habe gerade mal meine -user.css durchgestöbert, aber nichts gefunden was das fixen könnte. Und ehrlich gesagt ist das auch schon eine Weile her und ich erinnere mich nicht mehr daran, was ich getan habe, damit es wieder passt.

Ich lade im laufe des Tages mal meine aktuellen Files als 2. Download hoch. vielleicht kannst du dann unterschiede herausfiltern.

Grüße^^
Antworten | Antworten mit Zitat | Zitieren
0 # lline-highPeter 2019-04-15 15:11
Hallo Roman,

nachdem ich 2 Tage Unterschiede gesucht habe und mit versuchter Fehlerbereinigung meine Oberfläche endgültig zerschossen habe (gottseidank gibt es eine Sicherung), habe ich einen anderen Weg versucht: ich habe einfach alle Verzeichnisse im Ordner tablet aus Deiner neuen Version übernommen und die content_xxxx unverändert von meiner Version gelassen - und es funktioniert wieder! Spaßeshalber habe ich nochmal ein update des ftui versucht, auch dieses hat jetzt nichts mehr zerstört.
Dieser Lösungsweg hat zwar jetzt nicht den Lernfaktor für mich gehabt, aber wenigstens läuft es so wieder.

Danke für die freundliche Unterstützung!
Gruß, Peter
Antworten | Antworten mit Zitat | Zitieren
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