[FTUI3] stylebares Dropdown

[mr_petz]

Hi @all,
Ich habe dieses Thema nochmal aufgegriffen:
https://forum.fhem.de/index.php/topic,115259.msg1215870.html#msg1215870
Hier ging es um das Stylen des dropdown.
Ich habe jetzt die Erweiterung droplist nochmal überarbeitet.
Mit droplist ist das Stylen jetzt möglich und es funktioniert wie das dropdown.
Unter Android und IOS sieht es nicht mehr wie ein Dropdown aus und wird auch so nicht erkannt!
Getestet unter FF,Chrome und Safari.
Settings wie im wie im dropdown.
Bsp.:

Code Auswählen Erweitern


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

Hinzugekommen ist name="". Der kann ein get sein oder Frei vergeben werden. Dieser setzt dann den ausgewählten Eintrag.
Der Platz passt sich an. Je nachdem wie weit es rechts oder unten ist, klappt es weiter nach links oder oben auf. Es ist begrenzt im tile, aber nicht im row oder ähnlichen. Jetzt nicht mehr mit Attribute overflow.
Wenn es zu lang von der Höhe ist und es nicht mehr ins tile passt, sollte man ein height mitgeben.
width standard ist max-content
height standard ist 80px
left ist nicht vorgegeben.
name standard ist Droplist
styles:
--droplist-text-color
--droplist-background-color
--droplist-line-color
Schließen kann man es durch seitlichen click im view oder direkt durch Auswahl.
Edit: timeout hinzugefügt für das automatische Schließen. Standard 60sec. Mit timeout="0" wird es deaktiviert.
Zu finden ist es hier:
https://github.com/mr-petz/ftui/tree/droplist/www/ftui/components/droplist

Für Verbesserungen bzw. Erweiterungen bin ich offen...
Viel Spaß

LG mr_petz

Edit: border und overflow als Attribute hinzugefügt.

[tomster]

Prinzipiell schönes Ding, aaaaber...
Sollte es nicht so sein, dass man bei [ list ] das "human readable" Reading (z.B. ftuiFavoritesAlias) angibt (dessen Formatierung dann auch in der Droplist angezeigt wird) im Hintergrund aber dann die tatsächliche Formatierung der Favoriten aus [value] im set-Befehl landet?

Wenn ich das so mache, dann schickt der Code dummerweise die Alias-Formatierung als set-Befehl raus. Wird natürlich damit nicht umgeschaltet...
Vertausche ich die beiden Readings, dann wird zwar der richtige String übergeben, es stehen nur diese unschönen Underscores in der Droplist.

Ausserdem hab ich noch ein anderes Phänomen:
Wenn ich die FTUI-Seite aktualisiere, dann steht kurz der name der Liste (in obigem Beispiel "Sonoslist") im Display.
Sind dann alle Werte inititalisiert, steht dort plötztlich der komplette String aus dem [value]-Reading; also die Alias-Liste inlusive Delimitern. Optisch nicht grad schön...
Was mache ich falsch?

Wäre es zudem nicht von Vorteil, wenn in der Liste auch gleich bei der Initialisierung der aktuelle abgespielte/gewählte Favorit/Playlistname im an Stelle des name tags stünde?

[mr_petz]

Hi tomster, gibst du mir deinen Code und ein reading?

[tomster]

Logo! Danke!

Code Auswählen Erweitern

<ftui-droplist class="size-3 bold" left="30%" height="250px" style="--droplist-text-color:var(--light);--droplist-background-color:var(--medium-color);" name="Favoriten" [list]="SB_WZ:ftuiFavoritesItems" [value]="SB_WZ:ftuiFavoritesAlias" (value)="SB_WZ:favorites $value"  delimiter=":"></ftui-droplist>
Die readings sind von einem Squeezelite-Player:

Code Auswählen Erweitern

ftuiFavoritesAlias
80s80s:80s80s Bowie:80s80s Freestyle:80s80s Funk Soul:80s80s HipHop:80s80s Italo:Arabella Muenchen:Bayern 1:Radio 2day:Radio Gong 963:Top FM 1064
   
ftuiFavoritesItems
80s80s:80s80s_Bowie:80s80s_Freestyle:80s80s_Funk_Soul:80s80s_HipHop:80s80s_Italo:Arabella_Muenchen:Bayern_1:Radio_2day:Radio_Gong_963:Top_FM_1064

favorites
80s80s_Funk_Soul

[mr_petz]

hast du es auch schon so probiert?

Code Auswählen Erweitern

(value)="encode() | SB_WZ:favorites $value"

Das mit dem Namen ist mir auch ein Rätsel. Nirgens im Code ist Sonoslist hinterlegt.
Standard ist Droplist und wird nach setzen eines favoriten neu gesetzt.

[tomster]

Bei mir steht natürlich nicht Sonoslist, sondern Favoriten. Ich habe das im obigen Posting etwas mißverständlich formuliert (bezog sich auf Deinen Code aus dem Eröffnungsposting)...

Aber dieser Text wird bei mir eh nur kurz beim Laden der Seite angezeigt.
Alsbald die Seite initialisiert ist, verschwindet der Text Favoriten⌄ und es steht statt dessen der komplette String aus dem list-Tag da.
Also wirklich "80s80s:80s80s Bowie:80s80s Freestyle:80s80s Funk Soul:80s80s HipHop:80s80s Italo:Arabella Muenchen:Bayern 1:Radio 2day:Radio Gong 963:Top FM 1064" oder eben mit Underscores wenn ich anstatt ftuiFavoritesAlias eben ftuiFavoritesItems definiere. Nicht gerade schön...
Erst wenn ich manuell ein Item aus der Liste auswähle, steht nur noch die gewählte Playlist da.

Wäre es nicht "schöner", wenn nach dem Initialisieren das Playlist-reading angezeigt wird, das im Player als "currentPlaylistName" (oder wie das reading "now playing" auch immer heißen mag) hinterlegt ist? Egal, ob es gerade läuft oder gestoppt ist.
Manchmal mag man ja die Playlist mit Click auf Play nur fortsetzen und nicht durch Neuauswahl aus dem Dropdown "neu starten". Damit hätte das Widget quasi eine Doppelfunktion: Anzeigen & Auswahlmöglichkeit

Vielleicht reicht es ja, wenn man als name auch ein reading angeben könnte, so a la: [name]="SB_WZ:currentPlaylistName"
Dann steht nach dem Laden dort der Wert aus dem reading.  Gerne auch mit caret vor und hinter dem Text. Erst wenn man dann auf diesen Text clickt, erscheint dann das Dropdown.
Was hältst Du davon?

Ach, und das mit dem encode() würde sicher funktionieren. Aber warum muss ich dann überhaupt ein list- und ein value-reading angeben?
Es würde ja reichen nur eines der beiden zu verwenden. Man müsste dann - je nach reading - nur entweder die Underscores für die Anzeige durch spaces ersetzen oder eben zum value-Senden encodete Leerzeichen hinzufügen, oder?

Kommando zurück!
Exakt diese Funktionalität ist ja schon eingebaut!

Code Auswählen Erweitern

<ftui-droplist class="size-3 bold" left="30%" height="250px" style="--droplist-text-color:var(--light);--droplist-background-color:var(--medium-color);" name="Favoriten" [list]="SB_KUECHE:ftuiFavoritesAlias" [value]="SB_KUECHE:currentPlaylistName" (value)="encode() | SB_KUECHE:favorites $value"  delimiter=":"></ftui-droplist>
Und es geschieht genau was ich mir vorgestellt habe!
Jetzt müsste man das Dropdown nur noch mittig positionieren können...

[mr_petz]

Eigentlich ist der delimmiter dafür zuständig die Readings zu "zerpflücken" und die _ zuersetzen.
value braucht eben den korrekten String zum set. Wenn er nicht korrekt vom reading kommt muss es seperat erfolgen.
Das mit der Inizialisierung muss ich mir nochmal ansehn.
wie hier im test hatbe ich mit Sonos da keine probleme.
https://forum.fhem.de/index.php/topic,115259.msg1215870.html#msg1215870

[tomster]

Hat sich überschnitten...

Und die delimiter zerpflücken ja nur die Sendernamen untereinander, nicht die Underscores in den Sendernamen.

[tomster]

Kannst Du mir noch verraten, was Deinen Code davon abhält sich mittig in einer row oder column platzieren zu lassen?

[mr_petz]

Theoretisch brauchst du den delimiter wegen deinem : nicht angeben weil das hier Standard ist:

Code Auswählen Erweitern

delimiter: '[;,:|]'
mittig sollte eigentlich ganz normal gehen

[tomster]

Leider nein. Ohne eine left-Angabe, klebt das Widget leider immer links in einer row...

[mr_petz]

Code Auswählen Erweitern

<center>
<ftui-droplist class="size-3 bold" height="250px" style="--droplist-text-color:var(--light);--droplist-background-color:var(--medium-color);"
name="Favoriten"
  [list]="SB_KUECHE:ftuiFavoritesAlias"
  [value]="SB_KUECHE:currentPlaylistName"
  (value)="encode() | SB_KUECHE:favorites $value">
</ftui-droplist>
</center>


[tomster]

Danke! Damit steht es jetzt definitiv in der Mitte

Allerdings konnte ich jetzt erst vor Ort testen. Bei mir haut das mit dem URL-Encoding leider nicht hin.
Encoded werden ja die Spaces zu %20. Mein Player braucht aber tatsächlich Underscores...