FTUI version 3

mr_petz · 30 März 2022, 21:35:34

@setstate, @yersinia

ich habe mal auf Grundlage des ftui-dropdown und des ContentSonosFav ein benutzerdefiniertes Dropdown erstellt.
Unter Android und Windows sieht alles gut aus. IOS kann ich nicht testen.
Background und Text-color kann man anpassen und wird dargestellt.
Die Liste ist auch wie im ftui-dropdown nutzbar. Ich habe es nur mit meinen SonosFavourites getestet.
Ihr könnt es ja testen und wenn setstate will kann er es übernehmen (und wahrscheinlich noch bissl anpassen

)
Einfach ins components Verzeichnis kopieren.
Settings sind wie im dropdown + Styleangaben wie im Beispiel.
Im animierten GIF ist das obere das ungestylte und das untere das gestylte.

Code Auswählen


    <ftui-droplist 
      [list]="Sonos_Kueche:FavouritesListAlias"	
      [value]="Sonos_Kueche:FavouriteDropdown"
      (value)="encode() | Sonos_Kueche:StartFavourite $value"
      delimiter="|">
    </ftui-droplist>
    <ftui-droplist class="size-2" left="10%" height="80px" style="--text-color:var(--black);--droplist-background-color:var(--medium-color)" 
      [list]="Sonos_Kueche:FavouritesListAlias"	
      [value]="Sonos_Kueche:FavouriteDropdown"
      (value)="encode() | Sonos_Kueche:StartFavourite $value"
      delimiter="|">
      </ftui-droplist>

LG mr_petz

yersinia · 31 März 2022, 07:42:14

Ich hab mir schon diese Links

Zitat von: mr_petz am 29 März 2022, 18:42:31https://codepen.io/raubaca/pen/VejpQP
https://codepen.io/raubaca/pen/bGWmZje
https://jsfiddle.net/palak6041/Lg84fayz/6

im Firefox unter Linux (Manjaro; FF98.0.2 64Bit), Win10 (FF98.0.2 32Bit) und Android 10 (FF98.3.0) angesehen - sieht überall gleich aus.

Ich persönlich präferiere so wenig JS wie nötig - wenn es mit purem CSS geht, perfekt.

mr_petz · 31 März 2022, 08:25:10

Ja unter FF geht es meistens und sieht gut aus. Diese Erfahrung musste ich schon öfters machen. Unter Chrome, Fully und Wallpanel sieht die Sache schon anders aus. Unter iOS denke ich mal auch...
LG

Edit: Bilder unter Android12 mit Chrome und Samsungbrowser.
Das letzte ist unter Chrome.

Sailor · 04 April 2022, 13:45:14

Siehe auch https://forum.fhem.de/index.php/topic,117779.msg1216690.html#msg1216690
Ein herzerfrischendes "Moin" vom achtern Diek vorweg.

Mein ftui3 - Frontend ist im laufe der Zeit immer mächtiger geworden.
Leider hat dies die Reaktionszeit erheblich in Mitleidenschaft gezogen.

Meine Fragen daher:
a) Ist es möglich alle Videos im Hintergrund ruhen (einfrieren) zu lassen, bis das entsprechende Video sich aktiv im Vordergrund (Sichtbereich) befindet und erst dann den Datenstream beginnen zu lassen?
b) Ist es möglich, gewissen Labels eine Priorität einzuräumen. Die Anzeige der Fenstersensoren (icon & label) auf dem ftui3-Frontend verzögern sich teilweise um 4-5s gegenüber dem fhem-Frontend?

Danke für Eure Hilfe

Gruß
Sailor

Eisix · 04 April 2022, 22:55:16

Hallo Sailor,

das mit dem video gab es schon mal hier im Thread glaube ich. Zumindest hab ich es mir auch hier irgendwo kopiert.

Code Auswählen


<ftui-row>
        <ftui-cell>
                 <span onclick="ftuiApp.fhemService.sendCommand('set System_Meisen_TV_URL http://192.168.178.1:8765/picture/1/frame/')">
                        <ftui-image src="http://192.168.178.1:8765/picture/1/current/"
                                width="450px" height="450px"
                                interval="30"
                                nocache
                                popup-target="popup-Meisen_TV"
                        ></ftui-image>
                </span>
        </ftui-cell>
</ftui-row>

<ftui-popup id="popup-Meisen_TV" timeout="60" [open]="System_FTUI_Meisen_TV_PopUp_Anzeigen:state | map('on:true, off:false')" width="65%" height="90%" @close="sendFhem('set System_Meisen_TV_URL http://192.168.178.1:8083/fhem/www/ftui/leer.html; set System_FTUI_Meisen_TV_PopUp_Anzeigen off')">
        <ftui-label slot="close" class="_header-close-style" popup-close>&times;</ftui-label>
        <iframe ftui-binding [src]="System_Meisen_TV_URL:state" style="overflow:hidden; border:0; width:800px; height:640px;"></iframe>
</ftui-popup>

Gruß
Eisix

Sailor · 05 April 2022, 11:58:56

Hallo Eisix

Zitat von: Eisix am 04 April 2022, 22:55:16
das mit dem video gab es schon mal hier im Thread glaube ich. Zumindest hab ich es mir auch hier irgendwo kopiert.

Habe ich so umgesetzt. Danke!

Gruß
Sailor

megadodopublications · 08 April 2022, 16:50:34

Hallo zusammen,

meine FTUI3 Installation startet sehr langsam; bei der Analyse habe ich verschiedene Auffälligkeiten gefunden, bei deren Bewertung/Analyse ich eure Unterstützung erbitte.

Mangels wirklicher Kenntnis, habe ich mich ein wenig in der Chrome Console langgehangelt:

1.)
ich sehe wiederkehrend und in unregelmäßigen Abständen ein

Code Auswählen

Violation, Forced reflow while executing JavaScript took x ms
(x schwankt, ich habe Werte mit 90 aber auch 142ms beobachtet)

Details siehe Screenshot

Frage: wo kommt das her und wie kann ich das abstellen?

2.)
das button.component.js produziert >800 (!!) Fehlermeldungen der Art Violation, Added non-passive event Listener

Details siehe Screenshot.

Frage: habe ich bei der Config einen Fehler oder ist das ein Bug?

3.)
ich sehe wiederkehrend in der Console Meldungen

Code Auswählen


fhemservice - created filter with xx devices
websocket restart connection
websocket no connection found
refresh nest start in ms
ftuiapp init components - done

Details siehe Screenshot (mehrere)

FTUI3 läuft in einer eigenen FHEM Instanz; sowohl die FTUI3 als auch die Master Instanz laufen auf einem gemeinsamen Proxmox Host, Ressourcenauslastung dort ist unauffällig.

Frage: ist das normal im Zuge des Startups oder deutet das auf ein instabile Verbindungen hin?

4.)
Ich sehe wiederkehrend ftuiapp error, initcomponents - timedout in 5000ms
FTUI läuft mit Debuglevel 4, leider gibt mir die Console trotzdem keinerlei Hinweise, was da nun 5 Sekunden(!) gedauert hat.

Da ich diese Meldung mehrfach sehe, könnte dies auf die Ursache des langsamen Starts hinweisen.

Screenshots anbei.

Weiter Hinweis:
direkt nach dem Start sind es in Summe 95(!) derartige Fehlermeldungen

Frage: wie kann ich mich dem Thema nähern und herausfinden, welche Komponenten hier nicht geladen werden?

Vielen Dank vorab für eure Unterstützung.

Ralph.

presskopf · 17 April 2022, 13:06:01

Wie paar Posts zuvor beschrieben, nutze ich z.B. auch das reinholen eines Videos. In diesem Fall von meinen 3D-Drucker.

Code Auswählen

<iframe ftui-binding [src]="url.kossel:state" style="overflow:hidden; border:0; height:100%; width:100%; "></iframe>

im url.kossel:state ist nur

Code Auswählen

http://192.168.0.209:8081/

Gibt es eine Möglichkeit das reinkommende Video in der Größe zu skalieren?
Mit den obigen Angaben height und width modifiziere ich nur den iframe. Das was reingeladen wird bleibt immer gleich.

LG
Matthias

mr_petz · 17 April 2022, 13:30:53

Hi Matthias.
Du könntest es responsive einbinden.
Demo:
https://codepen.io/drweb/pen/vYBaYdv/

Hier noch eine Erklärung dazu:
https://martinahonecker.com/youtube-videos-responsive-einbinden/

Ich hoffe das es bei dir so funzt.
LG mr_petz

presskopf · 17 April 2022, 15:54:03

Danke, ich hab's sogar hinbekommen, ohne dass ich von dem css&div-Gedöns wirklich Ahnung habe.

Stonemuc · 19 April 2022, 15:28:03

Mal eine kurze Fachfrage...wenn ich möchte, dass ein Icon immer springt, außer bei einem bestimmten Wert...wie löse ich das?
state vom Device wäre im Prinzip bei "Nichtnbutzung" --> Idle, ansonsten steht das jeweilige Programm im state

Ich hab es so versucht:

Code Auswählen

<ftui-icon path="../images/openautomation" name="scene_cooking" [class-name]="MCC9555DWC:state | map('!Idle:hop,Idle:')"></ftui-icon>

Klappt leider nicht.

Gibt es da eine Möglichkeit?

mr_petz · 19 April 2022, 16:16:52

Probiere mal so:

Code Auswählen


<ftui-icon path="../images/openautomation" name="scene_cooking" [class-list]="MCC9555DWC:state | map('.*:hop,Idle:')"></ftui-icon>

.*=>hop ansonsten bei Idle passiert nix...

LG

Stonemuc · 19 April 2022, 17:05:52

Danke....da hätte ich auch selbst drauf kommen können - den Wald vor leuter Bäumen nicht gesehen

grossmaggul · 19 April 2022, 17:14:06

Mal gerade zwischengefragt, kann man die Iconstati auch kombinieren, also z.B. blinken und hoppen gleichzeitig?

mr_petz · 19 April 2022, 18:46:14

Zitat von: grossmaggul am 19 April 2022, 17:14:06
Mal gerade zwischengefragt, kann man die Iconstati auch kombinieren, also z.B. blinken und hoppen gleichzeitig?

Meines Wissens geht immer nur eine Animation ftui3. Du kannst noch andere nicht animierte Klassen durch Leerstelle mit angeben. Bsp:

Code Auswählen


| map('.*:hop size-3 faded,Idle:')

Um mehrere Animationen zu vereinen, müsste man die Klassen sich abwechseln lassen oder eine neue css Animation erstellen.

LG mr_petz

Edit:
Du kannst dir so eine Klasse in einer user.css anlegen. Hier ist hop und blink vereint:
Wird dann mit multi aufgerufen...
Bsp:

Code Auswählen


.multi {
  animation: mix 1.2s infinite;
}

@keyframes mix {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(1.1, .9) translateY(0);
  }
  30% {
    transform: scale(.9, 1.1) translateY(-1em);
  }
  50% {
    transform: scale(1.05, .95) translateY(0);
    opacity: 0.2;
  }
  57% {
    transform: scale(1, 1) translateY(-0.1em);
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}