Neues Widget: imagecover

[Reinerlein]

Hallo,

für die Coverdarstellung meiner Sonos-Player brauchte ich eine Imagemöglichkeit, bei der man eine maximale Rahmengröße vorgibt, und das Bild (in diesem Fall das Cover) in diesem Rahmen maximal und ohne Verzerrung dargestellt wird (also bei Bedarf kleiner oder auch größer unter Beibehaltung des Seitenverhältnisses skaliert wird).

Das geht mit einem IMG-Tag nicht. Aus diesem Grunde habe ich mir aus dem bestehenden Image-Widget ein neues Widget gebaut, welches das Bild als Hintergrundbild eines Div-Containers darstellt.
Dabei hat man dann die gewünschten Möglichkeiten.

So wird es verwendet:

Code Auswählen Erweitern


<div data-type="imagecover"
data-device="Device"
data-get="currentAlbumArtURL"
data-opacity="1.0"
data-width="350px"
data-height="350px"
class="nocache"
style="margin-left: 12px; margin-top: 12px;">
</div>
.
.
oder
.
.
<div data-type="imagecover"
data-device="Device"
data-get="currentAlbumArtURL"
data-opacity="1.0"
data-width="100%"
data-height="calc(100vh - 60px)"
class="nocache">
</div>


Folgende neue Parameter sind hinzugekommen (bzw. haben sich geändert):

• repeat: "repeat|repeat-x|repeat-y|no-repeat" (Default: "no-repeat")
• size: "auto|length|cover|contain" (Default: "contain")
• position: "XPos YPos" (Default: "center center")

Wer genaueres dazu wissen will, braucht nur bei der entsprechenden CSS Property nachzusehen (z.B. "background-position").

Da das alles im Hintergrund des definierten Div-Containers passiert kann man natürlich innerhalb des DIVs immer noch Inhalte und andere Komponenten darstellen...

Vielleicht kann setstate dass nach einer Prüfung sogar in den offiziellen Teil übernehmen...

Grüße
Reinerlein

[Steeeve]

Servus!
Ich versuche gerade deine Sonos FTUI Version bei mir einzubauen, kommt da aber nicht zusammen - abgesehen davon, dass das widget_imagecover bei mir nicht vorhanden ist, wird der Player nur irgendwie leer dargestellt. Hat du eine Idee wo da das Problem sein kann?
Vielen Dank im Voraus

lg
Steeeve

[Reinerlein]

Hi Steeeve,

es scheint so, als ob da etwas mit dem Widget Joinedlabel nicht ganz stimmt. Im Wiki hatte ich ja eine Änderung dieses Widgets gepostet, damit nach einer inhaltlichen Änderung im Widget ein Javascript-Aufruf erfolgen kann, der dann diese Flow-Animation korrekt einstellt...
Hast du diese drin?

Des Weiteren brauchst du natürlich das Widget Imagecover (herunterzuladen am Anfang des Threads).

Beide Änderungen wurden vom FTUI Maintainer bislang nicht übernommen. Ich habe auch keine Reaktion erhalten, ob das jemals geplant ist, oder ob etwas dagegen spricht...
Natürlich kannst du die Sonos-Anzeige auch ohne die Anpassung im JoinedLabel-Widget verwenden... Da wird dann halt der übergroße Text einfach abgeschnitten...
Das ImageCover solltest du aber verwendet, da du sonst keine saubere Darstellung erhalten wirst. Die Cover müssen nicht unbedingt rechteckig sein, und können dann das Design zerhauen...

Ansonsten musst du mal Stückweise aufbauen, und schauen, ab wann es nicht mehr geht... oder den verwendeten Code hier posten. Da das etwas umfangreicher sein dürfte, wird das aber für Außenstehende schwierig beim Nachvollziehen werden...

Grüße
Reinerlein

[Steeeve]

Servus Reinerlein!

Die Anpassungen hatte ich gemacht und genau da auch gleich noch die Fehler gefunden (val statt eval und einmal war ein ,'' zuviel) - um so eigenartiger, dass das falsch war - ich hatte das kopiert
Anzeige klappt soweit - jetzt gehen mir nur noch die Favoriten usw. weiter ab - notifies hab ich erstellt.
Auch die aktuelle Position wird nicht aktualisiert.
Danke für deine Ideen

lg
Steeeve

[Sukaos]

Hallo,

bei mir funktionierten damit die Cover-Anzeigen meistens nicht. Ich habe es mir daraufhin angesehen und nach der Änderung an 3 Zeilen geht es jetzt in verschiedenen Browsern zuverlässig. Und zwar war die URL nicht in Anführungszeichen gesetzt.
Dies betrifft die Zeilen 83, 95 und 116, letztere muss dann etwa so aussehen:

Code Auswählen Erweitern

elem.css('background-image', 'url("' + src + '")');
Vielen Dank für die tolle Vorlage Reiner! Ich habe die geänderte Variante mal beigefügt.

Viele Grüße

Wulf

[setstate]

Code Auswählen Erweitern

128: 'update_classes' is not defined (W117).  update_classes(val, elem);

[baroq1988]

Hallo zusammen,

bin neu hier im forum

kurz vorne weg: ich bin in sachen fhem relativ neu unterwegs und habe mir einen pi3 als kleines projekt neben der arbeit gekauft.

so, jetzt zum thema...

habe sonos soweit implementiert bekommen. ich kann auch bereits musik über ftui starten, stoppe, lauter, leiser machen, die anzahl der playlist sehen und den fortschritt eines liedes sehen. bei mir sieht es allerdings ein wenig "in die breite gezogen" aus. (nicht so schön wie in dem Wiki-Artikel - bild im anhang).

Außerdem bekomme ich es einfach nicht hin, dass das cover geladen wird. ich bin am verzweifeln

hat jemand ggf. einen lösungsansatz?


ps. danke schonmal für die hilfe als auch für den ganzen code zum einbinden - GENIAL

[Eddy]

Hallo Miteinander,

ich habe das Widget auch eingebunden. Leider funktioniert die Albumanzeige, sowie die Dropdown- Menüs nicht. Scheinbar ein bekanntes Problem? Was kann ich tun? Gibt es eine Lösung?

Grüße,
Eddy

[Reinerlein]

Hi Eddy,

ein bißchen sieht es so aus, als hättest du einfach keinen Titel laufen, da auch nichts anderes angezeigt wird.
Außerdem wird doch ein Cover angezeigt: das Default-Cover, wenn keines geladen werden konnte...

Grüße
Reinerlein

[Eddy]

Hallo Reinerlein,

als ich den Screenshot genommen habe, hatte ich generell das Problem, dass sich meine Sonos Boxen von FHEM aus nicht mehr ansprechbar waren. Das ist leider generell so, wenn ich z.B. auf Pause drücke. Danach bekomme ich die Wiedergabe nicht mehr gestartet. Das muss ich aber nochmals genauer testen, sobald ich nach hause komme.

Das mit dem Albumcover ist wohl ein Problem von ITunes. Ich habe festgestellt, dass direkt in der Sonos App auch keine Albumcovers mehr angezeigt werden. Nur die kleinen Albumcovers bei einzelnen Titeln. Könnte also durchaus daran liegen. Wie ich das allerdings in den Griff bekomme ist mir aktuell noch ein Rätsel. Ich schaue mich gerade auf den Sonos FAQ's und Seiten um.

Ein weiteres Problem ist, dass ich die Titelauswahl und die Konfiguration nicht geht. Die Dropdowns sind alle leer bei mir. Und wenn ich eine Gruppe von mehr als 2 Playern habe, wird garkein Albumcover angezeigt und der Balken mit der Wiedergabeleiste wandert komplett nach oben.

Evtl. kann ich heute Abend genaueres samt Screenshots liefern.

[GuraxUbrax]

Aarg, man muss registrierter Nutzer sein, um den Widget-Download zu sehen, ansonsten kann man lange suchen...
Na ja, auf diese Weise kann ich mich auch gleich mal für die tolle Arbeit bedanken!
Da die D..... von Sonos ja jetzt den alten Controller CR 100 abschalten wollen, versuche ich mich auch gerade an einer Alternative mittels FHEM und FTUI.

[dadoc]

Hallo Reinerlein,
kann es sein, dass das imagecover-widget alles aus einem übergeordneten div rausschmeisst?
Sobald ich es statt meines bisherigen image-widget einbinde, fehlen mir die anderen Elemente (Titel, Artist, Album) in der Anzeige.

Code Auswählen Erweitern


<div class="top-space-3x"> 
  <div data-type="imagecover"
data-device="SB_Denon"
data-get="coverarturl"
data-opacity="1.0"
data-width="50%"
data-height="calc(100vh - 60px)"
class="nocache">
</div>
   
<!--             <div data-type="image"
                data-device="SB_Denon"
                data-get="coverarturl"
data-height="300px"
data-width="300px"
>
            </div> -->

      <div class="cell top-space-3x">       
            <!-- Title -->
            <div data-type="scrolllabel"
data-device="SB_Denon"
                data-get="currentTitle"
data-scrollspeed="slow"
                class="linear big top-space">
            </div>

            <!-- Artist -->
            <div data-type="label"
                data-device="SB_Denon"
                data-get="currentArtist"
                data-substitution="toString().substr(0,35)"
                class="large">
            </div>

            <!-- Album -->
            <div data-type="label"
                data-device="SB_Denon"
                data-get="currentAlbum"
                data-substitution="toString().substr(0,35)"
                class="medium bottom-space-3x">
            </div>
        </div>
</div>
Grüße
Martin

[Reinerlein]

Hi Martin,

also, das was ich eingebaut habe, ist, dass im eigenen Div-Container der Hintergrund (per Style) gesetzt wird. Dadurch kann man noch Elemente in das Div einbauen, und auch die Umliegenden Container bleiben (zumindest bei mir ) erhalten.

In deinem geposteten Schnipsel kann ich dazu keinen Fehler entdecken, aber vielleicht in den umherliegenden Bereichen?

Grüße
Reiner

[dadoc]

Hi Reinerlein,
es war

Code Auswählen Erweitern

data-height="calc(100vh - 60px)"
aus Deinem Beispiel in Post #1, das mir alles im Swiper-Widget zerlegt hat.
Jetzt tut's!
Vielen Dank & viele Grüße
Martin