FTUI version 3

[setstate]

Auch auf die Gefahr hin, dass ihr mich steinigt, weil ich mit so "kosmetischem Zeugs" daherkomme, welches wohl zudem höchstens die Perfomance von FTUI3 bremst:
Mit geht mein geliebtes 'rotor-widget' ganz schmerzlich ab. *schnief*

Ich habe zwar schon probiert das "rotate1"-Beispiel aus https://codyhouse.co/gem/css-animated-headlines zu adaptieren, aber ich steige - ehrlich gesagt - überhaupt nicht durch den Aufbau von FTUI3 (mei, DAU halt). Bestehen Chancen, dass sich jemand...ähh *räusper* setstate... diesem Wunsch annehmen will?

Was hatte das rotor-widget, was ftui-swiper nicht hat?

Code Auswählen Erweitern


    <ftui-swiper auto-play>
        <ftui-image src="https://i.pravatar.cc/100?img=6" width="90px" shape="circle"></ftui-image>
        <ftui-image src="https://i.pravatar.cc/100?img=7" width="90px" shape="circle"></ftui-image>
        <ftui-image src="https://i.pravatar.cc/100?img=8" width="90px" shape="circle"></ftui-image>
        <ftui-image src="https://i.pravatar.cc/100?img=9" width="90px" shape="circle"></ftui-image>
        <ftui-image src="https://i.pravatar.cc/100?img=10" width="90px" shape="circle"></ftui-image>
    </ftui-swiper>


Edit: habe mir gerade das Beispiel angesehen. Die Animation sieht doch etwas anders aus

Hier was zum Probieren:
https://knowthelist.github.io/ftui/www/ftui/examples/rotor.html

[OdfFhem]

@setstate

In der Funktion dateFormat dient "z" als Platzhalter, daher erfordert "März" bzw. "Dezember" die Anpassung mit z

[mr_petz]

Hi setstate.
Nach deinem Hinweis von hier:
https://forum.fhem.de/index.php/topic,115259.msg1179254.html#msg1179254
habe ich ja alles umgestellt und wollte nur nachfragen ob es hier Probleme geben kann:
Hinter dem device sind zwei Leerstellen drin.
Egal ob ftui-button oder was auch immer...

Auszug vom XHRGET

Code Auswählen Erweitern


cmd=set+dummy++on&asyncCmd=0&fwcsrf=null&XHR=1


Ich hoffe du verstehst was ich meine.

LG mr_petz

[Sailor]

Ein herzerfrischendes Moin vom achtern Diek vorwech!

Ich habe seit Kurzem das Phänomen, das die Popup nicht mehr mittig auf dem Bildschirm angezeigt werden, sonder in das aufrufende ftui-grid-tile gequetscht werden.
Ist das ein Bug oder ein Feature?

Ich kann hierzu keinen entsprechenden Beitrag finden, dass dies schon mal vorgekommen ist, geschweige wie man das Popup wieder global über alles darstellt.

Danke für die Hilfe vorweg!

Gruß
    Sailor

[grossmaggul]

Ich habe das Problem nicht mit den Popups, werden nachwievor mittig ausgegeben.

Zum Beispiel das Mondpopup bei mir:

Code Auswählen Erweitern

<!-- Moon -->
        <ftui-grid-tile row="1" col="7" height="2" width="2" shape="round" shape="round" class="semitransparent">
            <!-- <header>Mond</header> -->
            <ftui-column height="80%">
                <ftui-row>
                    <ftui-image popup-target="moon" [src]="astro:ftui" width="95px"></ftui-image>
                </ftui-row>
                <ftui-row>
                    <ftui-label [text]="proplanta:fc0_moonRise">A:</ftui-label>
                    <ftui-label [text]="proplanta:fc0_moonSet">&nbsp;U:</ftui-label>
                </ftui-row>
            </ftui-column>
        </ftui-grid-tile>       
            <!-- Moon Popup -->
            <ftui-popup id="moon" width="480px" height="480px" timeout="10" shape="round" position="top">
                <ftui-image [src]="astro:ftui" width="380px"></ftui-image>
            </ftui-popup>

Vielleicht liegt der Popup Aufruf bei Dir im grid-tile, der sollte aber außerhalb liegen.

[StephanFHEM]

Vielleicht liegt der Popup Aufruf bei Dir im grid-tile, der sollte aber außerhalb liegen.

Hab das gleiche Problem bei mir auch schon festgestellt. Denke aus, dass es sich mit einem Update geändert hat und er jetzt darauf achtet, ob das Popup im Grid-Tile lag. Vorher war er da nicht so konsequent.
Leider ist das außerhalb legen nicht immer möglich: ich habe eine Content-Seite und in dieser wird ein Popup aufgerufen welches mit Namen abhängig von dem geklickten Button ist (Popup-Name ist {{Device_Popup}}... daher kann ich das auch nicht in die Hauptseite auslagern...

Man kann dem entgegenwirken indem man die Größe festlegt und mit top und left arbeitet...

[Sailor]

Hallo Stephan

Leider ist das außerhalb legen nicht immer möglich: ich habe eine Content-Seite und in dieser wird ein Popup aufgerufen welches mit Namen abhängig von dem geklickten Button ist (Popup-Name ist {{Device_Popup}}... daher kann ich das auch nicht in die Hauptseite auslagern...

Genau so ist es auch bei mir.
In der Index Seite sind nur die ftui-grid-tiles mit Verweisen auf weitere Content-Files

Man kann dem entgegenwirken indem man die Größe festlegt und mit top und left arbeitet...

Hast du hier ein Code-Beispiel für uns?

Danke
    Sailor

[StephanFHEM]

hier zum Beispiel ein Kamera-Popup welches fast den kompletten Schirm abdeckt. Es hat übrigens nur mit den Prozentangaben richtig geklappt.

Code Auswählen Erweitern

<ftui-popup id="Eingangcam" shape="round" width="92%" height="88%" left="4%" timeout="120">

[tomster]

Hier was zum Probieren:
https://knowthelist.github.io/ftui/www/ftui/examples/rotor.html

Funktioniert prima. Danke für die rasche Umsetzung!

Was hatte das rotor-widget, was ftui-swiper nicht hat?

Nun, im rotor-widget konnte man auch direkt im Widget mehrzeilige Contents bauen. Im Swiper wird hingegen jede Zeile als Swipe-Element gesehen und geswiped. Von daher geht dann nur der Umweg über eine content-Seite. Zudem kann der Swiper kein "Endlos-Swipe". Beim letzten Swipe-Element wird erst wieder durch alle Elemente zurückgeswiped und dann von vorne angefangen: 1->2->3. Dann schnell 3->2->1. und wieder 1->2->3. Im rotor-widget war das 1->2->3->-1->2->3, etc.

Ach ja, und das rotor-widget hatte einen fade-Effekt.

Hast Du auch was an der blink-Klasse geschraubt?
Zumindest bei mir blinkt es nun äußerst "unrhythmisch"...

[yersinia]

Von [FTUI3] Updateproblem

Meldung :

Code Auswählen Erweitern


2021.10.24 11:32:49 1 : Got 2341 bytes for www/ftui/examples/chart.html, expected 2342

und das Update bricht ab.

[StephanFHEM]

@setstate: würde gerne den Dropdown farblich verändern. Kannst du dort bitte attribute für color (Textfarbe) und background-color (Hintergrundfarbe im Auswahlfeld) einbauen? Das wäre echt prima!

[Sailor]

Hallo Stephan

hier zum Beispiel ein Kamera-Popup welches fast den kompletten Schirm abdeckt. Es hat übrigens nur mit den Prozentangaben richtig geklappt.

Code Auswählen Erweitern

<ftui-popup id="Eingangcam" shape="round" width="92%" height="88%" left="4%" timeout="120">

Das war es leider nicht!
Der Code

index.html

Code Auswählen Erweitern


<!-- Window and Door Status -->
<ftui-grid-tile row="2" col="8" height="2" width="2" shape="round" class="semitransparent">
<header>Windows & Doors</header>
<ftui-content file="content/content_home_windowstatus.html"></ftui-content>
</ftui-grid-tile>


content/content_home_windowstatus.html

Code Auswählen Erweitern


<ftui-popup shape="round" id="windowstatus" height="80%" width="80%" left="10%" top="10%" position="top">

führt nicht dazu, dass das Popup außerhalb des Grids angezeigt wird.

Siehe Anlage

@setstate: Wie bekomme ich meine alte Anzeige des Popup wie vor den Updates hin, wo diese ueber alles gelegt wurden.
                   Ich möchte der Übersicht halber nicht meine ganzen Popups and Ende der index.html übertragen wollen.
                   Wäre es nicht sinnvoll hierbei eine Option einzuführen eg. Layer="Grid/Desktop"?

Gruss
    Sailor

[tomster]

Wäre es nicht sinnvoll hierbei eine Option einzuführen eg. Layer="Grid/Desktop"?

Wäre diese zusätzliche Option nicht überflüssig, wenn man das PopUp eben genau dort platziert, wo man es haben möchte? Wenn Du ein PopUp über den ganzen Bildschirm haben willst, gehört das PopUp in die index.html/Hauptseite, wenn Du es aber nur in einem grid-Element haben willst, dann muss es eben in das grid-Element. Dafür braucht man doch eigentlich kein(e) zusätzliche(s) Flag/Variable/"Option", oder?

[Sailor]

Hallo Tomster

Wäre diese zusätzliche Option nicht überflüssig, wenn man das PopUp eben genau dort platziert, wo man es haben möchte? Wenn Du ein PopUp über den ganzen Bildschirm haben willst, gehört das PopUp in die index.html/Hauptseite, wenn Du es aber nur in einem grid-Element haben willst, dann muss es eben in das grid-Element. Dafür braucht man doch eigentlich kein(e) zusätzliche(s) Flag/Variable/"Option", oder?

Prinzipiell hast du Recht, aber ich habe mittlerweile 41 content-files in denen ich den entsprechenden Aufruf untergebracht habe.
Jede dieser files beinhaltet für sich komplett was diese Aufgabe beinhalten soll.

Würde ich die Popups alle ans Ende der index.html rein-pferchen, würde das die Datei vollkommen unübersichtlich machen...

Gruß
    Sailor

[setstate]

Beim Popup kann man jetzt position="page" setzen.