Sonos: Neue Version

[Reinerlein]

Hallo zusammen,

ich habe gerade eine neue Version eingecheckt, die nun die aktuelle Abspielliste ermitteln kann, und ein Attribut beherrscht, womit die UserReadings bzgl. der Favoriten/Playlists/Radios überflüssig werden, da diese direkt in die entsprechenden Readings geschrieben werden.

Außerdem habe ich im Wiki mein FTUI-Beispiel aktualisiert. Dort wird zum Einen auch die aktuelle Abspielliste als Titelsprungmöglichkeit angeboten, als auch Gruppierungen auf- und wieder abzubauen.
Natürlich wird eine Gruppenwiedergabe auch dargestellt (im Header).

Änderungen im Detail

• Es gibt ein neues Attribut "getListsDirectlyToReadings", mit welchem die UserReadings bzgl. Favourites, Playlists und Radios (sowie currentTrackPosition) obsolet werden, da sie dann direkt in die passenden Readings geschrieben werden. Wenn man selber beeinflussen möchte, auf welche Weise und mit welchem Namen diese Readings gefüllt werden, dann darf dieses Attribut nicht gesetzt werden (es bleibt dann das bisherige Verhalten)
• Es gibt zwei neue Getter "Queue" und "QueueWithCovers", welche die aktuelle Abspielliste liefern. Diese können wieder mit UserReadings oder dem neuen Attribut "getListsDirectlyToReadings" in entsprechende Readings übertragen werden. Hierbei werden auch zwei neue Readings "QueueDuration" und "QueueDurationSec" gefüllt, die die gesamte Abspieldauer der Abspielliste enthalten.

Wie immer ab sofort im SVN oder ab Morgen per update...

Grüße
Reinerlein

[Masterfunk]

Hallo Reinerlein,

hab die Aktuelle Version geladen, die Attribute fehlen aber.
Muss dazu noch etwas anders aktiviert werden?

Danke und Gruß
Detlef

[Reinerlein]

Hi Detltef,

es ist nur ein Attribut "getListsDirectlyToReadings", und zwar am Sonos-Device (nicht am Player und Neustart des SubProzesses nicht vergessen).
Das gilt dann für alle Player. Es ist zu empfehlen, in den Userreadings zunächst die Listenfüller zu entfernen (also alles, was die Readings "Favourites", "Playlists", "Radios" und "currentTrackPosition" befüllt, und wenn du mein FTUI-Beispiel verwendest, dann auch die entsprechenden Readings "-List" und "-ListAlias").

Dann einmal jeden Getter für jede Liste aufrufen...

Grüße
Reiner

[Masterfunk]

Läuft!
Hab natürlich beim Playerdevice gesucht...

Gruß Detlef

[Masterfunk]

So, soweit alles angepasst.
Irgendwie gibts noch Probleme mit dem Un-Gruppieren.
Es sieht so aus, als wenn es an den Stereo-Pärchen liegt.
Schlafzimmer wird mir 2 x angezeigt.
Und irgendwie kommt er damit durcheinander.
Unschön ist auch, das er im Header des Steropärchens dann immer 2 gruppierte anzeigt.  (Was ja letztendlich auch so ist)

Gruß Detlef

[Masterfunk]

Hab noch was "gebastelt...

Bei den TrackProvidern habe ich noch Audio.In dazu genommen.
Ich blende alle nicht benötigten Steuerelemente aus, die nicht benötigt werden, das ganze inclusive Höhenanpassung (puhhh).

Hier meine Devinition der "template_musik_sonos.html":

Code Auswählen Erweitern

<header>
<div data-type="joinedlabel" data-device="Device" data-mask="[$1][ ($2)]" data-get='["roomName","ZoneGroupNameDetails"]' class="truncate"></div>

</header>
<div class="top-space container cell row">
<div Class="col-60">

<div data-type="popup" data-width="45%" data-height="80%" class="inline">
<div data-type="image"
data-device="Device"
data-get="currentAlbumArtURL"
data-width="210px"
data-height="210px"
class="nocache">
</div>

<div class="dialog">
<header><div data-type="joinedlabel" data-device="Device" data-mask="Cover[ für $1]" data-get='["roomName"]' class="inline"></div></header>

<div data-type="switch"
data-device="Device"
data-get="transportState"
data-states='["PLAYING","PAUSED_PLAYBACK","STOPPED"]'
data-set-states='["Pause","Play","Play"]'
data-background-icon="-"
data-background-colors='["orange","white","white"]'
data-colors='["orange","white","white"]'
data-icons='["fa-play","fa-pause","fa-pause"]'
class="inline"
style="position: absolute; top: 25px; left: 5px;"
onclick="$('.dialog-close').trigger('click');">
</div>

<div data-type="image"
data-device="Device"
data-get="currentAlbumArtURL"
data-width="750px"
data-height="750px"
class="nocache"
onclick="$('.dialog-close').trigger('click');">
</div>

<div data-type="classchanger" data-device="Device" data-get="currentNormalAudio" data-get-on="1" data-get-off="0" data-off-class="hide">
<div data-type="slider"
data-device="Device"
data-get="currentTrackPositionSec"
data-max="currentTrackDurationSec" data-min="0"
data-step="1"
data-handle-diameter="5"
data-width="750px"
class="horizontal top-narrow readonly centered"></div>
</div>

<div data-type="classchanger" data-device="Device" data-get="currentNormalAudio" data-get-on="1" data-get-off="0" data-off-class="hide">
<div data-type="joinedlabel" data-device="Device" data-mask="[$1][ ~ $2][ ~ $3]" data-get='["currentTitle","currentArtist","currentAlbum"]' class="truncate top-space"></div>
</div>
<div data-type="classchanger" data-device="Device" data-get="currentStreamAudio" data-get-on="1" data-get-off="0" data-off-class="hide">
<div data-type="joinedlabel" data-device="Device" data-mask="[$1 ~ ][$2][: $3]" data-get='["currentSenderInfo","currentSender","currentSenderCurrent"]' class="truncate top-space"></div>
</div>
</div>
</div>
</div>

<div Class="col-40 top-align">
    <div class="sheet">
        <div class="row">
<div data-type="symbol" data-device="Device" data-get="currentTrackProvider"
data-states='["Audio-in-Wiedergabe: Wohnzimmer","Spotify","Bibliothek","Radio","Gruppenwiedergabe:.*","Amazon Music","SoundCloud","Napster",".*"]'
data-icons='["fa-sign-in","fa-spotify","oa-it_nas","oa-it_radio","fa-group","fa-amazon","fa-soundcloud","fa-headphones","fa-question"]'
data-colors='["white","green","lightblue","lightblue","lightblue","lightblue","lightblue","lightblue","red"]'
class="inline small top-align left-narrow"></div>
<div data-type="switch" data-device="Switch"
     data-states='["on","off","set_on"]'
     data-set-states='["off","on","on"]'
data-icons='["fa-power-off","fa-power-off","fa-power-off fa-blink"]'
data-background-icons='["-","-","-"]'
     data-colors='["#aa6900","#505050","#aa6900"]'
     class="inline small top-align left-narrow">
</div>
<div data-type="switch" data-device="Device"
     data-states='["appeared","initialized","disappeared"]'
data-icons='["fa-thumbs-o-up","fa-thumbs-o-down fa-blink","fa-thumbs-o-down"]'
data-background-icons='["-","-","-"]'
     data-colors='["#aa6900","#505050","#505050"]'
     class="readonly inline small top-align left-narrow">
</div>

<div data-type="classchanger" data-device="Device" data-get="MasterPlayer" data-get-on="Device" data-get-off="!on" data-off-class="hide" class="inline">
<div data-type="popup" class="" data-width="400px" data-height="110px">
<div data-type="symbol" data-icon="fa-object-group" data-color="yellow" class="inline small top-align left-narrow" style="height: 10px;">
</div>

<div class="dialog">
<header><div data-type="joinedlabel" data-device="Device" data-mask="Wiedergabegruppe[ für $1] anpassen" data-get='["roomName"]' class="inline"></div></header>

<div class="top-space-10 left-align left-space">
<div>
<div class="large middle inline">Player +: </div>
<div data-type="select"
data-device="Device"
data-list="AvailablePlayerList"
data-alias="AvailablePlayerListAlias"
data-delimiter="|"
data-get="-"
data-set="AddMember"
class="inline w3x"
onchange="$('.dialog-close').trigger('click');"></div>
</div>

<div>
<div class="large middle inline">Player -: </div>
<div data-type="select"
data-device="Device"
data-list="SlavePlayerList"
data-alias="SlavePlayerListAlias"
data-delimiter="|"
data-get="-"
data-set="RemoveMember"
class="inline w3x"
onchange="$('.dialog-close').trigger('click');"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<br>
   <div data-type="label" class="inline" >Titel</div>
<div data-type="label" class="inline" data-device="Device" data-get="currentTrack"></div>
<div data-type="label" class="inline" >von</div>
   <div data-type="label" class="inline" data-device="Device" data-get="numberOfTracks"></div>
<br>
<br>
<div data-type="classchanger" data-device="Device" data-get="nextAlbumArtURL" data-get-on="/fhem/sonos/cover/empty.jpg" data-get-off="!on" data-on-class="hide">
<div data-type="image"
data-device="Device"
data-get="nextAlbumArtURL"
data-width="80px"
data-height="80px"
class="inline nocache">
</div>
<br>
   <div data-type="label" class="inline" >Next</div>
</div>
</div>

<div data-type="classchanger" data-device="Device" data-get="currentTrackDuration" data-get-on="" data-get-off="!on" data-on-class="hide" class="inline top-space">
<div data-type="classchanger" data-device="Device" data-get="currentNormalAudio" data-get-on="1" data-get-off="0" data-off-class="hide">
<div data-type="label" data-device="Device" data-get="currentTrackPosition" class="inline"></div>
<div data-type="slider"
data-device="Device"
data-set="CurrentTrackPosition"
data-get="currentTrackPositionSec"
data-max="currentTrackDurationSec" data-min="0"
data-step="1"
data-handle-diameter="5"
data-width="350"
class="horizontal tap inline">
</div>
<div data-type="label" data-device="Device" data-get="currentTrackDuration" class="inline"></div>


</div>
</div>

<div data-type="classchanger" data-device="Device" data-get="currentStreamAudio" data-get-on="1" data-get-off="0" data-off-class="hide">
<div style="height: 27px;"> </div> <!-- Leerer Ersatz für die bei Streams fehlende Positionsanzeige -->
</div>
<div data-type="classchanger" data-device="Device" data-get="currentTrackDuration" data-get-on="" data-get-off="!on" data-off-class="hide" class="inline top-space">
<div style="height: 44px;"> </div> <!-- Leerer Ersatz für die bei Streams fehlende Positionsanzeige -->
</div>
<div class="large top-space">
<div data-type="classchanger" data-device="Device" data-get="currentNormalAudio" data-get-on="1" data-get-off="0" data-off-class="hide">
<div data-type="label" data-device="Device" data-get="currentTitle" class="bold truncate" style="height: 21px;"></div>
<div data-type="joinedlabel" data-device="Device" data-mask="[$1][ ~ $2]" data-get='["currentArtist","currentAlbum"]' class="truncate" style="height: 21px;"></div>
</div>
<div data-type="classchanger" data-device="Device" data-get="currentStreamAudio" data-get-on="1" data-get-off="0" data-off-class="hide">
<div data-type="label" data-device="Device" data-get="currentSenderInfo" class="bold truncate" style="height: 21px;"></div>
<div data-type="joinedlabel" data-device="Device" data-mask="[$1][: $2]" data-get='["currentSender","currentSenderCurrent"]' class="truncate" style="height: 21px;"></div>
</div>
</div>

<div class="">
<div data-type="classchanger" data-device="Device" data-get="currentTrackDuration" data-get-on="" data-get-off="!on" data-on-class="hide" class="inline top-space">
<div data-type="classchanger" data-device="Device" data-get="currentNormalAudio" data-get-on="1" data-get-off="0" data-off-class="hide" class="inline top-space">
<div data-type="switch" data-device="Device" data-get="Repeat" data-set="Repeat"
data-icon="fa-repeat" data-background-icon="-"
data-on-color="#aa6900" data-off-color="gray"
data-get-on="1" data-get-off="0"
data-set-on="1" data-set-off="0" class="inline ">
</div>

<div data-type="push" data-device="Device"
data-icon="fa-step-backward" data-background-icon="-"
data-off-color="#fff" data-on-color="#aa6900"
data-set-on="Previous" class="inline ">
</div>

<div data-type="push" data-device="Device"
data-set="CurrentTrackPosition"
data-icon="fa-backward" data-background-icon="-"
data-off-color="#fff" data-on-color="#aa6900"
data-set-on="-15" class="inline ">
</div>
</div>
</div>
<div data-type="classchanger" data-device="Device" data-get="currentTrackDuration" data-get-on="" data-get-off="!on" data-on-class="hide" class="inline top-space">
<div data-type="switch"
data-device="Device"
data-get="transportState"
data-states='["PLAYING","PAUSED_PLAYBACK","STOPPED"]'
data-set-states='["Pause","Play","Play"]'
data-background-icon="fa-circle-thin"
data-background-colors='["orange","white","white"]'
data-colors='["white","white","white"]'
data-icons='["fa-pause","fa-play","fa-play"]'
class="inline ">
</div>
</div>
<div data-type="classchanger" data-device="Device" data-get="currentTrackDuration" data-get-on="" data-get-off="!on" data-on-class="hide" class="inline top-space">
<div data-type="classchanger" data-device="Device" data-get="currentNormalAudio" data-get-on="1" data-get-off="0" data-off-class="hide" class="inline">
<div data-type="push" data-device="Device"
data-set="CurrentTrackPosition"
data-icon="fa-forward" data-background-icon="-"
data-off-color="#fff" data-on-color="#aa6900"
data-set-on="+15" class="inline ">
</div>

<div data-type="push" data-device="Device"
data-icon="fa-step-forward" data-background-icon="-"
data-off-color="#fff" data-on-color="#aa6900"
data-set-on="Next" class="inline ">
</div>

<div data-type="switch" data-device="Device" data-get="Shuffle" data-set="Shuffle"
data-icon="fa-random" data-background-icon="-"
data-on-color="#aa6900" data-off-color="gray"
data-get-on="1" data-get-off="0"
data-set-on="1" data-set-off="0" class="inline ">
</div>
</div>
</div>
<div data-type="popup" class="inline" data-top="100px" data-width="600px" data-height="430px">
<div data-type="push"
data-icon="fa-list-ul" data-background-icon="-"
data-off-color="#fff" data-on-color="#aa6900"
class="">
</div>

<div class="dialog">
<header><div data-type="joinedlabel" data-device="Device" data-mask="Musikauswahl[ für $1]" data-get='["roomName"]' class="inline"></div></header>

<div class="top-space-10 left-align left-space">
<br>
<div>
<div data-type="label" class="" >Favoriten:</div>
<div class="large middle "></div>
<div data-type="select"
data-device="Device"
data-list="FavouritesList"
data-alias="FavouritesListAlias"
data-delimiter="|"
data-quote="/"
data-get="currentFavouriteNameMasked"
data-set="StartFavourite"
class="large w3x"
onchange="$('.dialog-close').trigger('click');"></div>
</div>
<br>
<div>
<div data-type="label" class="" >Playlists:</div>
<div class="large middle "></div>
<div data-type="select"
data-device="Device"
data-list="PlaylistsList"
data-alias="PlaylistsListAlias"
data-delimiter="|"
data-quote="/"
data-get="currentPlaylistNameMasked"
data-set="StartPlaylist"
class="large w3x"
onchange="$('.dialog-close').trigger('click');"></div>
</div>
<br>
<div>
<div data-type="label" class="" >Radios:</div>
<div class="large middle "></div>
<div data-type="select"
data-device="Device"
data-list="RadiosList"
data-alias="RadiosListAlias"
data-delimiter="|"
data-quote="/"
data-get="currentRadioNameMasked"
data-set="StartRadio"
class="large w3x"
onchange="$('.dialog-close').trigger('click');"></div>
</div>
<br>
<div>
<div data-type="label" class="" >Abspielliste:</div>
<div class="large middle "></div>
<div data-type="select"
data-device="Device"
data-list="QueueList"
data-alias="QueueListAlias"
data-delimiter="|"
data-get="currentTrack"
data-set="Track"
class="large w3x"
onchange="$('.dialog-close').trigger('click');"></div>
</div>
<br>
<div>
<div data-type="label" class="" >Audio-In:</div>
<div class="large middle "></div>
<div data-type="push" data-device="Device" data-icon="fa-sign-in" data-off-color="white"
data-set-on="PlayURI Sonos_Wohnzimmer" onchange="$('.dialog-close').trigger('click');"></div>
</div>
</div>
</div>
</div>
</div>

</div>

<div data-type="slider" class="inline horizontal value tap" data-device="Device"
data-get="Volume" data-set="Volume" data-min="0" data-max="100" data-width="400px"></div>

<div data-type="switch" data-device="Device" data-get="Mute" data-set="Mute"
data-icon="oa-audio_volume_mute" data-background-icon="-"
data-on-color="#aa6900" data-off-color="gray"
data-get-on="1" data-get-off="0"
data-set-on="1" data-set-off="0" class="inline ">
</div>

</div>

Und noch ein Bild

Gruß Detlef

[Reinerlein]

Hi Detlef,

schön
Ich mache mir mal Gedanken zu der Stereo- (und damit wohl auch der Satelliten-) problematik.
Mal schauen, was ich da machen kann...

Grüße
Reiner

[wijnands]

Moin,

Seit einige Tage habe ich eine kleine Sonos Anlage in meine Hausautomation integriert. Fhem-Wiki und eure Beiträge sind wirklich sehr gut, auch ein nicht Informatiker, wie ich, wird so in der Lage versetzt eine tolle Oberfläche zu basteln. Leider habe ich folgendes "Problem". Ich nutze das  Attribut "getListsDirectlyToReadings". Funktioniert soweit Prima. Im Tablet IU werden jetzt meine "Favourites" und "Radios" usw. in den entsprechende Select Widgets angezeigt. Der erste Eintrag ist aber immer die gesamte Liste (siehe Anhang). Die weitere Einträge werden korrekt angezeigt. Wird der erste Eintrag gewählt, also die Gesamtliste, wird der erster Eintrag in der Liste korrekt gesetzt. Hat jemanden einen Tip für mich?

Gruß,

Raymond

[Reinerlein]

Hi Raymond,

hast du im Widget auch "|" als Delimiter angegeben?
Ansonsten gibt es bei den Select-Listen noch ein Aktualisierungsproblem, sodass ich meine Sonos-Player auf eine Seite gepackt habe, die stets frisch geladen wird (also die Klasse "nocache" gesetzt habe).

Grüße
Reiner

[wijnands]

Hallo Reiner,

Danke für die schnelle Antwort. Im Widget habe ich "|" als delimiter angegeben. Das mit dem "nocache" werde ich gleich mal versuchen. Anbei noch mal meine HTML-Datei.

Gruß,

Raymond

[l2r]

hi,

ist es richtig, dass das Reading im Sonos-Device RadioList und nicht RadiosList heißt? In deinem HTML-Template beziehst du dich nämlich auf RadiosList.

Ich habe das im WIkI mal geändert, damit das korrekt übernommen wird. Falls das falsch war, dann bitte wieder zurück ändern.

Gruß Michael

[wijnands]

Hallo,

Das Reading im FHEM zeigt Radiolist und nicht Radioslist, ebenso Radiolistalias und nicht Radiolistsalias. Ich habe das in meine HTML-Datei angepasst. Siehe Anhang.

Gruß,

Raymond

[Reinerlein]

Hi,

das ist einfach ein Fehler im Sonos-Modul, der mir nicht aufgefallen ist
Der Gleichheit halber würde ich das Reading gerne auch in der Mehrzahl benennen, also "RadiosList" und "RadiosListAlias".
Die dazugehörige Grundlage heißt ja auch "Radios".

Ich bringe heute oder spätestens Morgen sowieso noch eine neue Version raus, dort passe ich das mit an...
Das Wiki korrigiere ich dann auch wieder zurück...

Grüße
Reiner

[wijnands]

Moin Reiner,

Alles Klar. Werde nach dem Update meine HTML-Datei anpassen. Ich habe eine Vermutung was mein Problem verursachen könnte. Im wiki steht, unter "aktuelle Userreading", ...."Es sind nur noch die Maskierungen und die Listen der verfügbaren (bzw. verwendeten) Player notwendig:"

In welcher Datei oder Device Attribute soll ich den Code der nachfolgend beschrieben ist einfügen? Warscheinlich eine überflüssige Frage aber leider reichen meine Programmierkenntnisse hier nicht aus  .

Gruß,

Raymond

[Reinerlein]

Hi Raymond,

habe gerade eine neue Version eingecheckt. In dieser Version benötigst du keinerlei Userreadings mehr (wenn du das Attribut "getListsDirectlyToReadings" gesetzt hast).

Grüße
Reiner

P.S.: Der Vollständigkeit halber: Userreadings sind ein Attribut, mit welchem man neue Readings durch Ableiten von bestehenden Readings automatisch erzeugen lassen kann, und die besagten müssten an jedem Sonosplayer-Device gesetzt werden