Nice UI for Squeezebox in classic UI

Tutorials & Examples
,
1

Hi,

the last one for today … a player control example for a squeezebox player - again only for web UI (but looks also well on mobiles; will not work via my.openhab):

Sitemap

Webview url="http://192.168.0.73:9000/status_header.html?player=00:04:20:23:52:3c" height=5

with kind regards,
Patrik

P.S.: As Mark has found you need to use different CNAMES if you use more than one of those UI elements to avoid problems with cookies:

4 Likes
2

@patrik_gfeller This is great, but I’m having a problem when there are multiple players.

If I define these two webviews:

Frame label="Source 1" {
    Webview url="http://192.168.1.70:9000/status_header.html?player=b8:27:eb:c7:d4:cc" height=5
}
Frame label="Source 2" {
    Webview url="http://192.168.1.70:9000/status_header.html?player=b8:27:eb:16:3f:1e" height=5
}

The UI shows the same contents even though I’ve specified two different players in the URLs. Any thoughts on why that is, and how to fix it?

Capture.JPG967×436 32.1 KB

Thanks!

3

Hi Mark,

are those players synched (multiroom setup)?

Kind regards,
Patrik

4

No, they’re not synced. In fact, If I bring each URL up in a separate browser window, initially, the content reflects the player specified in the URL. But, then after a bit of time (less than a minute), one of them changes to be the same as the other. Odd.

Capture2.JPG706×560 44.9 KB

5

Oddly, I see the behavior with this URL.

http://192.168.1.70:9000/status_header.html?player=b8:27:eb:c7:d4:cc

But not with this URL.

http://192.168.1.70:9000/status.html?player=b8:27:eb:c7:d4:cc

Must be something about the way status_header.html works.

6

Yeah, must be an error of some sort in the LMS Javascript.

If I open the one URL in Chrome, and the other URL in Firefox, the behavior doesn’t occur.

However, if I open both URLs in Chrome (separate windows or tabs) or both in Firefox (separate windows or tabs), the behavior occurs.

Darn, I was hoping to use this webview in my whole house audio sitemap design… :unamused:

7

@patrik_gfeller So I think I found out what’s going on. I’ll summarize in case anyone has this problem…

It appears that status_header.html sets a cookie containing the player id (i.e. MAC address of the player). Since the domain name is the same in both of my Webviews, the cookie contains a single player id, which is shared by both Webviews (as well as browser tabs and windows). By changing the domain name in one Webview to the IP address of my LMS, the Webviews now work correctly.

I suppose I could create several CNAMEs in my DNS, such that there would be a different CNAME for each Webview.

Edit: The multiple CNAMEs did the trick!

8

@mhilbush

Hi Mark,
thank you for the update - I’m happy that you can use the example this way :slight_smile: … I’ve all my player synched; therefore I only show the 1st player UI of all switched on units.

I’m sure your post will be valuable to others as well.
with kind regards,
Patrik

9

Hi Mark,

… it’s a long time - but today I’ve found some time to experiment if I could address the issue you’ve found differently; as my updated setup suffers from the same issue you described. I do not have the option to change the DNS configuration & I use the web interface via OH exclusively. Thus I’ve decided to updated the .html page of SqueezeBox-Server :-).

If of interest I can post more details; here a general overview:

1.) I’ve created an item and a rule to provide the MAC of the current primary player.
2.) … some JS to get the item from OH & to update the cookie (I know - not gold standard, as I misuse async API synchronously … but I was happy when it finally did what I needed :slight_smile: ) :

var baseURL = "../";

function GetOpenHABItem(item) {
    var itemUrl = baseURL.concat("rest/items/").concat(item).concat("/state/");
    var itemValue = null;
    $.ajax({
    url     : itemUrl,
    data    : {},
    async   : false,
    success : function( data ) {
        if (data != "NULL") {
        itemValue = data;
        }
    }
    }); 

    return itemValue;
}

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

3.) Some additional js to replace the cookie:

var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", "http://HAUS:9000/index.html?player=" + GetOpenHABItem("ItemAudioCurrentPlayerId"), false ); // false for synchronous request
xmlHttp.send( null );

4.) Inserted the stuff into the SqueezeBox code:

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://haus:8080/static/openHAB.js"></script>
    <script type="text/javascript"> 
		  baseURL = "http://haus:8080/"
	</script>
	<script type="text/javascript" src="http://haus:8080/static/setPlayerIdCookie.js"></script>

4.) enable CORS by setting the following line in runtime.cfg

org.eclipse.smarthome.cors:enable = true

needs some testing now - but as I took me quite some time to figure some of the stuff our I share it in the hope it saves someone else some time.

If more details are required or any comments, let me know :slight_smile:. Btw.: Is the a wiki for OH2, or a preferred place for examples?

with kind regards,
Patrik