[FUIP] Anwendungsbeispiele und Diskussion dazu

[Thorsten Pferdekaemper]

Hi,

in einem anderen Thread (https://forum.fhem.de/index.php/topic,89884.msg845836.html#msg845836) wurde gefragt, wie denn meine FUIP-Seiten aussehen. Ich denke, dass so etwas einen eigenen Thread wert ist. So ein bisschen Diskussion, also z.B. "Wie hast Du das und das gemacht?" dürfte der Thread auch noch vertragen.
Ich mache mal den Anfang. Die angehängten Bilder sind ein paar FUIP-Seiten, die ich bisher angelegt habe. Das Backend dazu ist mein produktives FHEM, aber FUIP läuft auf meinem Entwicklungs-Laptop.

...jetzt würde mich auch interessieren, was andere daraus machen.

Gruß,
    Thorsten

[TNT0068]

Dann mache ich dochmal weiter.
Ich hatte mal mit FTUI angefangen bin dann aber schnell an meine Grenzen gestoßen durch nichts wissen über HTML und wenig Zeit dieses nicht wissen zu beseitigen. Dann kam Thorsten daher mit FUIP und ich war von der ersten Stunde begeistert und immer noch. Auch das Thorsten zeitnah viele Wünsche versucht umzusetzen finde ich richtig genial.
DANKE nochmal Thorsten dafür

Ich benutze für meine komplette Steuerung nur das Tablet oder Alexa über FHEM. Ich habe keine Fernbedienungen etc.
Hauptseite:
- Obere Teil ist die Info Leiste Raum Temperaturen Wetter nächsten Termine
- Mittlere Teil sind dann die Lampen die ich meist benutze. Die helleren Gerätenamen sind popups wenn dahinter eine Hue/Osram Lampe oder ein HM Dimmer.
- Untere Teil ist die Mediensteuerung mit der bin ich noch nicht ganz so zufrieden.
--unten Links sind einfache Dummys auf die dann ein DOIF reagiert. In dem DOIF werden dann entsprechend für die Auswahl die Steckdosen/Harmony HUB/Onkyo Verstärker eingestellt
-- mitte unten   die Steurung vom Harmony ich übergebe die Kommandos zB. links/rechts nicht an die Actifity sondern an den Hub da ist es egal welche
    Actifity läuft. Die großen Button sind leider nicht FUIP sondern direkt FTUI
-- unten rechts Einstellungen für den Verstärker

Heizungsseite erklärt sich von selbst, die ist aber noch nicht fertig.

Edit: vergessen die Status Seite mit einzubinden. Die ist auch noch nicht fertig

[Devender]

Hallo zusammen,

dann will ich auch mal  .
Ich habe mich für meinen smarten Spiegel im Bad letztes Jahr mit FTUI beschäftigt.
Für das Wandtablet waren mir die angeboten Möglichkeiten mit pagetab etc. zu komplex.

Mit dem FUIP von Torsten konnte ich in einigen Nachtstunden dann meine Tabletsteuerung zusammen"klicken".
Sicherlich müssen einige Sachen manuell eingefügt bzw. abgeändert werden aber vom Grundprinzip passt es.

Beim ersten Kontakt war ich sehr begeistert und habe mit schon eine erste Öberfläche zusammengebaut. Dann fhem "save" und rereadcfg  . Alles war wieder weg.
Hat ein Moment gedauert, bis ich verstanden habe, dass man FUIP mit einem set extra speichern muss.

Positiver Effekt, man kann anderen nicht so versierten Nutzen von Fhem eine einfache Möglichkeit geben sich eine Oberfläche zu bauen.

Danke Torsten für deine tolle Arbeit!

Grüße,
Dirk

[curt]

Dann kam Thorsten daher mit FUIP und ich war von der ersten Stunde begeistert und immer noch.

Kurze Frage am Rande: Also FUIP kannte ich gar nicht, habe ich gerade kurz überflogen. - Frage. Koexistieren FTUI und FUIP, kann man quasi mit FUIP FTUI bauen? Oder nur das eine oder das andere?

[Thorsten Pferdekaemper]

Dann fhem "save" und rereadcfg  . Alles war wieder weg.

Tatsächich gefällt mir das auch nicht so 100%. Womöglich werde ich da noch was ändern.
Siehe auch
https://github.com/ThorstenPferdekaemper/FHEM-FUIP/issues/23

Koexistieren FTUI und FUIP, kann man quasi mit FUIP FTUI bauen? Oder nur das eine oder das andere?

Natürlich kann man beides machen. FUIP generiert im Prinzip nur FTUI-Seiten. Allerdings hat es sich tatsächlich an ein paar Stellen ein bisschen auseinander entwickelt. Z.B. verwendet FUIP ein eigenes weatherdetail Widget und auch das "flex"-Konzept ist in FUIP anders.
Man kann aber durchaus sowohl FUIP-Seiten haben als auch selbstgestrickte FTUI-Seiten. Über den HTML-View kann man in FUIP auch Sachen machen, die "eigentlich" nur in FTUI gehen.

Gruß,
   Thorsten

[curt]

FUIP generiert im Prinzip nur FTUI-Seiten.

Ahh, sehr schön: Vielleicht löst das einige meiner Probleme.

Allerdings hat es sich tatsächlich an ein paar Stellen ein bisschen auseinander entwickelt. Z.B. verwendet FUIP ein eigenes weatherdetail Widget und auch das "flex"-Konzept ist in FUIP anders.

Mal abgesehen davon, dass ich nicht weiß, was "flex-Konzept" ist: Woran liegt das? Sind andere CSS und/oder js im Spiel? Ich dachte eigentlich, dass ich mit FUIP Lego spielen kann - und die schönsten Burgen schiebe ich dann in FTUI.

[Thorsten Pferdekaemper]

Mal abgesehen davon, dass ich nicht weiß, was "flex-Konzept" ist:

Ich meine damit das hier: https://wiki.fhem.de/wiki/FTUI_Layout_Flex bzw. https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes. FUIP verwendet hier nicht die FTUI-css-Klassen.

Woran liegt das? Sind andere CSS und/oder js im Spiel?

Ja, ein bisschen. Das "normale" FTUI ist manchmal mit JQuery UI inkompatibel, aber ich brauche das komplett für die Konfigurationsoberfläche. Beim Flex-Layout habe ich einfach nicht verstanden, warum die normalen css-Angaben nicht gut genug sind, und FTUI was eigenes macht. Das müsste aber eigentlich egal sein, da es beides auf Flexbox beruht.
Speziell beim weatherdetail Widget ist es so, dass der ursprüngliche Ersteller (ich habe jetzt keine Lust den Thread herauszusuchen) das Ding anscheinend nicht wirklich weiter pflegen will. Außerdem muss man es durch Herunterladen aus dem Forum installieren. Das fand ich etwas hässlich. Außerdem haben meiner Meinung nach ein paar Sachen gefehlt. Daher liefere ich es jetzt selbst mit FUIP aus. Dadurch liegt es halt auch im FUIP-Verzeichnis und kann so erst einmal nicht außerhalb von FUIP verwendet werden. Im Prinzip müsste es aber funktionieren, wenn man es in den üblichen FTUI-Pfad kopiert.

Ich dachte eigentlich, dass ich mit FUIP Lego spielen kann - und die schönsten Burgen schiebe ich dann in FTUI.

Ich denke mal, dass das im Prinzip gehen müsste, auch wenn mir nicht so klar ist, was Du genau meinst. Du kannst FUIP-Seiten basteln, dann "locked" auf 1 setzen und die Seite anzeigen. Das, was der Browser dann als HTML-Quellcode anzeigt, müsste auch ohne FUIP funktionieren.
Die Frage ist nur: Wozu?

Gruß,
   Thorsten

[curt]

Danke für Deine umfassende Antwort - alles verstanden.

Deine Frage nach dem "wozu" kann ich gar nicht so recht beantworten. Vielleicht so: Ich habe nun einige Kraft in FTUI gesteckt, auch dieses Map-Modul. Es würde mir jetzt schwer fallen, dass alles wieder wegzuwerfen.

[Thorsten Pferdekaemper]

Vielleicht so: Ich habe nun einige Kraft in FTUI gesteckt, auch dieses Map-Modul. Es würde mir jetzt schwer fallen, dass alles wieder wegzuwerfen.

Wenn es um ein einzelnes Widget geht, welches in FUIP nicht direkt unterstützt wird, dann kannst Du Dir auch mit dem HTML-View behelfen. Dort kannst Du dann beliebige Widgets so wie in FTUI normalerweise eintragen. Im Prinzip kann man dort auch CSS und JS hinschreiben.
Verlinken zwischen FTUI- und FUIP-Seiten sollte auch gehen.
Gruß,
   Thorsten

[DasQ]

Hi,

Erstmal mein vollen Respekt und danke für dieses elenzgeile addon.
Das Ding macht's so faulen Menschen wie mir, möglich auch mal was hübsches zusammen zu Stricken.

Auf optik legte ich mein ersten Versuchen mit FHEM noch wenig wert, wohl wissend das mich das früher oder später einholt, denn der Rest der Familie soll ja auch was von FHEM und dem ganzen Smarthome gedöns haben.

Mit FTIP geht das nun echt easy. Da muss ich mal schaun in wie weit ich dir beim Manual/Doku schreiben unter die Arme greifen kann. Für mich als Spieltriebiges informatikkind war die wenige Anleitung und die zahlreichen forenpostings eine kleine Herausforderung. Das bekommen wir(ich) besser hin.

Aber mal zum eigentlichen Topic. Ich fänds gut wenn die ein oder andere Lösung aus den Bilder querverlinkt zu nem eigenen Thread mit dem ,,WIE" drin sehr gut gefallen.
Konkret wüsste ich gern wie man das mit den Webcam Bildern gemacht hat. Wie man hübsch readings darstellen kann, hier als bsp. von nem espeasy die ip,Temperatur,Luftfeuchtigkeit,luftdruck und diverse schaltzustände.
Dann würde mich auch noch für die lichtsteuerung von meiner Milights einige tips fehlen, wie man das am vernünftigsten visualisiert, mit :farbrad, helligkeits.- Farbsättigung slider usw. Ähnlich wie im screenshot

[Thorsten Pferdekaemper]

Erstmal mein vollen Respekt und danke für dieses elenzgeile addon.

Vielen Danke für die Blumen!

Mit FTIP

FUIP

Da muss ich mal schaun in wie weit ich dir beim Manual/Doku schreiben unter die Arme greifen kann. Für mich als Spieltriebiges informatikkind war die wenige Anleitung und die zahlreichen forenpostings eine kleine Herausforderung. Das bekommen wir(ich) besser hin.

Aber das hier kennst Du schon, oder: https://wiki.fhem.de/wiki/FHEM_User_Interface_Painter
Du kannst das gerne auf den neusten Stand bringen bzw. vervollständigen.

Ich fänds gut wenn die ein oder andere Lösung aus den Bilder querverlinkt zu nem eigenen Thread mit dem ,,WIE" drin sehr gut gefallen.

So mit Grammatik hast Du's nicht so, oder? Was auch immer Du genau meinst: Find ich gut, mach mal.

Konkret wüsste ich gern wie man das mit den Webcam Bildern gemacht hat.

Das ist ein HTML-View mit folgendem Inhalt:

Code Auswählen Erweitern


<a href='http://doorcam'>
<img height='300' width='400' src='http://doorcam:8081'/>
</a>

Der Stream wird von motion geliefert (https://motion-project.github.io/).

Wie man hübsch readings darstellen kann, hier als bsp. von nem espeasy die ip,Temperatur,Luftfeuchtigkeit,luftdruck und diverse schaltzustände.
Dann würde mich auch noch für die lichtsteuerung von meiner Milights einige tips fehlen, wie man das am vernünftigsten visualisiert, mit :farbrad, helligkeits.- Farbsättigung slider usw. Ähnlich wie im screenshot

Soso, das willst Du alles haben. Ja, wäre schön, wenn das jemand einfach so liefern würde, gell?
Also Temperatur und Luftfeuchtigkeit kann FUIP schon. Schau Dir mal die Werthilfe der View Types an. Für die anderen Sachen müsste jemand mal was bauen, zumindest ein HTML, welches ich dann ggf. integrieren könnte.
Ansonsten solltest Du vielleicht mal mit einem davon anfangen und dazu einen eigenen Thread aufmachen. Solche Sammelfragen werden in der Regel nicht wirklich beantwortet.
Gruß,
   Thorsten

[greewoo]

Ich hab mit FUIP angefangen um ein mobile-Theme zu bauen, ich hab vor langer Zeit schon eins mit dem "normalen" TabletUI für die großen Bildschirme erstellt.

Da es mir wahnsinnig gut gefallen hat und echt simple zu Bedienen ist, hab ich mich entschlossen dazu noch ein eigenes "styleSchema" zu bearbeiten, deswegen sehen die Screenshots farblich anders aus.

In Summe bin ich dazu übergegangen, dass das FUIP jetzt mein einziges FrontEnd ist, damit der mehrfach Pflegeaufwand für verschiedene Devices entfällt. Die meisten Seiten sind für die mobile-Devices angepasst, da größere Breiten skaliert werden und ebenfalls gut aussehen.

Screenshots gibts von beiden:

[Esjay]

Sry für den Fehlerhaften Post.

Ich habe ein neues Thema erstellt!

https://forum.fhem.de/index.php/topic,95477.0.html

Grüße

[Thorsten Pferdekaemper]

wäre es denkbar die Möglichkeit zu schaffen Readingsgroup mit aufzunehmen?

Denkbar ja, aber nicht von diesem Thread aus. Bitte einen neuen dazu erstellen. Hier passt das nicht hin.

[TNT0068]

Meine Statusseite nimmt nun auch langsam formen an
Was überhaupt nicht will ist die Sortierung in dem Batterie reading
Danke an Thorsten nochmal für das geniale Tool