SONOS app

[Erwin van der Zwart]

Hi Josep,

Yes you can update only on changed value like this:

Code:

-- Update objects
currentvalue = grp.getvalue('1/1/6')
if currentvalue ~= albumart then
    grp.update('1/1/6', albumart)
end

For albumart, create a image container and add a default image that must be showed on startup (noalbumart or something) and give it a additional class 'albumart' 

Add this to custom JavaScript to update the image on new URL (now linked to address 1/1/6):

Code:

$(function(){
 if (typeof grp != 'undefined') {
   grp.listen('1/1/6', function(object, state) {
     var value = object.value;
     if (state == 'value') {
       $(".albumart").find("img").attr('src', value);
     }
   }, true);
 }
});

That should do the trick.

Here is also a custom JavaScript that will perform feedback polling direct between API and client, so you don't need the LUA script and objects in the controller (:

Code:

$(function(){
 setInterval(function(){
   // Only poll if current page = 1
   //console.log(currentPlanId)
   if (currentPlanId == 1 ){
     // Request data from sonos API
     $.post("/apps/data/sonos/sonos.lp",
     { action: "getextendedstate", ip: "192.168.10.26" },
     function(data) {
     var res_parsed = JSON.parse(data);
     //console.log(res_parsed)

     // Update text label with additional class 'volume'
     $(".volume").html(res_parsed[0].volume);

     // Update text label with additional class 'mute'
       $(".mute").html(res_parsed[1].mute);

     // Update text label with additional class 'crossfade'
       $(".crossfade").html(res_parsed[2].crossfade);

     // Update text label with additional class 'playmode'    
     $(".playmode").html(res_parsed[3].playmode);

     // Update text label with additional class 'transport'
     $(".transport").html(res_parsed[4].transport);

     // Update text label with additional class 'trackuri'
     $(".trackuri").html(res_parsed[5].trackuri);

     // Update text label with additional class 'duration'
     $(".duration").html(res_parsed[6].duration);

     // Update text label with additional class 'playingtime'
     $(".playingtime").html(res_parsed[7].playingtime);

     // Update text label with additional class 'tracktitle'
     $(".tracktitle").html(res_parsed[8].tracktitle);

     // Update text label with additional class 'creator'
     $(".creator").html(res_parsed[9].creator);

     // Hide Album when mediatype = radio
     if (res_parsed[12].mediatype == 'radio'){
       $(".album").css( "display", "none" );
     } else {
       $(".album").css( "display", "block" );
       // Update text label with additional class 'album'
       $(".album").html(res_parsed[10].album);
     }

     // Update image container with additional class 'albumart'
     $(".albumart").find("img").attr('src', res_parsed[11].albumart);

      // Update text label with additional class 'mediatype'
     $(".mediatype").html(res_parsed[12].mediatype);
     //$(".trackuri").html(res_parsed[13].trackuri);
     //$(".trackurimetadata").html(res_parsed[14].trackurimetadata);
     //$(".albumartbase64").html(res_parsed[15].albumartbase64);
     //$(".sonosplayerip").html(res_parsed[16].sonosplayerip);
     }
   );
 }; }, 1000);
});

Note the pagenumber condition (on line 4) to poll only when the page with you sonos control is visible, make sure to use it like this to avoid polling when you don't need to.

I attached a sample page with elements you can use with above custom javascript

  Vis-Custom_Sonos-homeLYnk-2017.02.25-15.44.tar (Size: 9 KB / Downloads: 36)

BR,

Erwin