OH2 Squeezeplayer with Radio/Playlist Select Button and dynamic visibility

[Oli (Oliver Stenzel)]

Hello,
here is my take on a Dynamic Player in your Sitemap. If Playback is paused, a picture is shown and all other Player items are hidden. Press play and Radio Station / Playlist select buttons, Artist/Title/Stream info is shown.
There are other examples using Dropdown selects, but i like directly visible options better.
Also works for playlists.
It looks like so:
Player on Play:

Player on Pause:

The example will give you a generic setup for one player, which can easily be expanded to any amount of players you might have. There is one prerequisite for the Radio select to work: at least the items in Group “gPlayerPlayList” need to be persisted.
So without further much ado,here it is:

//Items:
Group gPlayerPlayList
Group	gAllPlayersStream
//add as many as you need.
Number		squeezeSelect1Station "📻" <none> (gPlayerPlayList)
Number		squeezeSelect2Station "📻" <none> (gPlayerPlayList)
Number		squeezeSelect3Station "📻" <none> (gPlayerPlayList)
Number		squeezeSelect4Station "📻" <none> (gPlayerPlayList)

//Player 1
//for more players, cut and paste and replace "1" with "2" for instant added player,just add your UIDs
//of course you can use more meaningful names like "Kitchen" or "Bath"
Group gPlayer1
Player	squeeze1Control "Player"		<play>			(gPlayer1)		{ channel="squeezebox:squeezeboxplayer:xx:yy:control" }
Dimmer  squeeze1InfoVol "InfoVol [%d %%]" 													{ channel="squeezebox:squeezeboxplayer:xx:yy:notificationSoundVolume"}
Dimmer	squeeze1Volume "Vol [%d %%]"	<lautsprecher> 	(gPlayer1)		{ channel="squeezebox:squeezeboxplayer:xx:yy:volume" }
String	squeeze1Stream "Stream: [%s]"	<info>			(gPlayer1,gAllPlayersStream)		{ channel="squeezebox:squeezeboxplayer:xx:yy:stream" }
String	squeeze1Title "Titel: [%s]"	<info>			(gPlayer1)			{ channel="squeezebox:squeezeboxplayer:xx:yy:title" }
String	squeeze1Artist "von: [%s]"		<info>	(gPlayer1)	{ channel="squeezebox:squeezeboxplayer:xx:yy:artist" }
String	squeeze1RadioTitle	"Stream: [MAP(streams.map):%s]"	<info> (gPlayer1) { channel="squeezebox:squeezeboxplayer:xx:yy:remotetitle" }

//Rule:
var String RadioHR3="http://opml.radiotime.com/Tune.ashx?id=s57109&formats=aac,ogg,mp3&partnerId=16&serial=8ef15207e62082921048854d898a9367"
var String RadioSwissClassic="http://opml.radiotime.com/Tune.ashx?id=s25582&formats=aac,ogg,mp3&partnerId=16&serial=e16775754549cd827c15202ce6b569d6"
var String RadioSilenceNoGood="http://opml.radiotime.com/Tune.ashx?id=s230457&formats=aac,ogg,mp3&partnerId=16&serial=e16775754549cd827c15202ce6b569d6"
var String RadioYOUFM="http://opml.radiotime.com/Tune.ashx?id=s24878&formats=aac,ogg,mp3&partnerId=16&serial=8ef15207e62082921048854d898a9367"
var String RadioPlanet="http://opml.radiotime.com/Tune.ashx?id=s2726&formats=aac,ogg,mp3&partnerId=16&serial=8ef15207e62082921048854d898a9367"
var String RadioFFH="http://opml.radiotime.com/Tune.ashx?id=s223993&formats=aac,ogg,mp3&partnerId=16&serial=8ef15207e62082921048854d898a9367"
//For playlist, just this and fill in playlist name, spaces replaced with "%20"
//if need be, change path to your playlist location(can be found/set via LMS web frontend)
var String PlayListYourName="file:///volume1/music/playlists/Playlist%20Name%20here.m3u"

rule "playlist wechsle dich"
when
	Item squeezeSelect1Station received command or	
	Item squeezeSelect2Station received command or	
	Item squeezeSelect3Station received command or		
	Item squeezeSelect4Station received command
then
       Thread::sleep(100) // give persistence time to save the update
	//get which players playlist should be changed
        //if you have several persistence services, you might need to specify the one to use like so: lastUpdate("mysql")
	val ThePlayList = gPlayerPlayList.members.filter[s|s.lastUpdate() != null].sortBy[lastUpdate()].last as NumberItem
	var PlayerStreamToChange=" "
	//logInfo("squeeze.rules","Player selected: "+ThePlayList.name.toString)
	switch (ThePlayList.name.toString){
		case "squeezeSelect1Station":PlayerStreamToChange="squeeze1Stream"
		case "squeezeSelect2Station":PlayerStreamToChange="squeeze2Stream"
		case "squeezeSelect3Station":PlayerStreamToChange="squeeze3Stream"
		case "squeezeSelect4Station":PlayerStreamToChange="squeeze4Stream"
	}
	switch (ThePlayList.state){
				case 1:{
					gAllPlayersStream.members.filter(s|s.name == PlayerStreamToChange).forEach[s | s.sendCommand(RadioHR3)]	
				}
				case 2:{
					gAllPlayersStream.members.filter(s|s.name == PlayerStreamToChange).forEach[s | s.sendCommand(RadioYOUFM)]
				}
				case 3:{
					gAllPlayersStream.members.filter(s|s.name == PlayerStreamToChange).forEach[s | s.sendCommand(RadioPlanet)]
				}
				case 4:{
					gAllPlayersStream.members.filter(s|s.name == PlayerStreamToChange).forEach[s | s.sendCommand(RadioFFH)]
				}
				case 5:{//this one selects a Playlist
					gAllPlayersStream.members.filter(s|s.name == PlayerStreamToChange).forEach[s | s.sendCommand(PlayListYourName)]
				}				
			}
end

//Sitemap:
Default item=squeeze1Control
//remove next line if you just want a "blank" screen. 
Image url="http://diddeli/daddeli.jpg"  visibility=[squeeze1Control==PAUSE]
Switch item= squeezeSelect1Station mappings=[1="HR3", 2="YOU FM",4="FFH"] visibility=[squeeze1Control==PLAY]
Switch item= squeezeSelect1Station mappings=[3="planet radio",5="Playlist"] visibility=[squeeze1Control==PLAY]
Slider item=squeeze1Volume visibility=[squeeze1Control==PLAY]
Text item=squeeze1Title visibility=[squeeze1Control==PLAY]
Text item=squeeze1Artist visibility=[squeeze1Control==PLAY]				
Text item=squeeze1RadioTitle visibility=[squeeze1Control==PLAY]

I hope some will find this useful,
Regards,
-OLI
EDIT: added playlist example

[Oli (Oliver Stenzel)]

I started playing around with HABPanel, and as it’s the Future™ here is my take on a Squeeze Player Control, based on @Murpher’s MusicControl (Kudos for creating this one) together with a simple Radio select widget.
If on Pause, it displays a configurable temperatur item(or anything else you fancy), if on Play it displays Title and artist.
On Play:

On Pause:

The widgets will work with the example items and rules listed here. The Config labels should speak for themselves. NEXT and PREVIOUS are fixed; no need to set. Here you go:
SqueezeMusicControl.widget.json (4.4 KB)
RadioSelect.widget.json (1.8 KB)

Hope some will find this usefull,
Regards,
-OLI
P.S.: uploaded newer version of Radioselect: Now chosen station name gets highlighted, also there is a 2px space between the station rows. More shiny:

[Murpher]

Glad it was of use

[ThomDietrich]

Great one! I’ve moved your thread to the new HABPanel Examples category.

[Oli (Oliver Stenzel)]

Thanks!
Maybe the original Alarm clock thingy would fit here as well?

Individual Alarm clock for each Day of week, with adjustable duration

Hello, I needed an alarm clock with these features: Set different alarm times for each day of week, with adjustable “run time” (so to turn of stuff after a while) Define presets for Hour,Minute,Runtime (e.g. for people working early/late shifts) Must be usable for several family members if need be ability to individually greet persons once they reach the kitchen or bathroom So here is what i came up with. It includes all items, rules,sitemaps and HABPanel Widgets needed for a…

[ThomDietrich]

Sure, just move it @ysc might be happy to some action in this new category

[ysc (Yannick Schaus)]

It’s true it’s not gotten much love until now. In fact, there are other threads in the “Add-ons > HABPanel” category which could easily be moved into “Examples”, like this one:

Sonos Control, Status & Favorites - Template Widget

I created a template widget for my Sonos system (2x Play:1, 1x Playbar) showing cover, track, controls, favorites and grouping possibilties. I use one template per player. Please feel free to use it, develop further and give feedback. I’m not a HTML crack, so my code is not really streamlined or optimized Screenshot [image] Template Code <style> .sonosbutton {width: 90%; height: 4em; border: 0; color: white; background-color: transparent;} .sonosctrl {width: 90%; height: 3e…

and eventually this big old thread (even though there’s a lack of explanations on how to achieve the results in the screenshots):

Examples of HABPanel Solutions

I think it would be awesome if people could maybe use this topic to post screenshots of their panels to give the rest of us inspiration as to what is possible.

Btw: Great work @Oli!

[Oli (Oliver Stenzel)]

Thank you sir

[Oli (Oliver Stenzel)]

LOL…didn’t even know i could do that

[ThomDietrich]

I have moved (and renamed) both. It would be amazing if you could try to write a few more (the same goes for @Oli) . Also it might be a good idea to ask everyone who has posted a solution in the “big old thread” to open independent threads with their solution today.

P.S. let me know if more moderator’y actions are needed

[ktams (Kersten Tams)]

hi,
nice widget
is it possible to bind an internet strem to it?
for example: I want to hear http://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/128/stream.mp3 on my tablet if i push the HR3 button.
Thanks, Kersten Tams

[Oli (Oliver Stenzel)]

Gude Kersten
Indeed you can Stream HR 3 without problems.
Look at the example code further up; HR3 is allready there(and YOU FM, FFH, planet radio…). It should work with cut&paste.
Regards,
-OLI

[ktams (Kersten Tams)]

moin,
ok, it doesn’t. So I asked, because I am shure, I do some thing wrong.
I copied the “items” section of your example to a file radio.items in the folder items. I copied the “rules” section of your example to rules/radio.rules.
I added the two widges and don’t know, what I had to write in the RadioSelect widged. “Name” I think doesn’t matter but what to write at “RadioName”?
I want to comprehend the example so I changed nothing.
In SqueezeMusicControl I bind the items as I understand it:

You see, I am very new to OH2 and Habpanel. May be there are stupid questions, but I hope you can be patient and show me the way

[Oli (Oliver Stenzel)]

The “Name” in the select widget is the unique player name, in the example given it is “1”.
So if you have, for example one player in kitchen and one in bath, you would name them e.g. squeezeBathVolume and squeezeKitchenVolume and the widgets would be named “Bath” and"Kitchen"
In the SqueezeMusicControl widget you did everything right
I assume you edited this part: :xx:yy: of the items to reflect your setup?

If not, this is most likely your problem. You need to go to paperUI, configuration, things and replace :xx:yy: with values from your player thing. It will look something like this in paperui:

If you did this and it still doesn’t work, please provide more info. Is it just the select widget which is not working, or is the radio control also unresponsive? What is happening in openhab and events log when you press the button?

[ktams (Kersten Tams)]

Thanks for your help!
ok, I see the problem. I installed the sqeezebox binding, but I don’t have a squeezebox player. And so I can’t see a player in habpanel things. After I read many about squeezebox player, server bridge and so on, I am totally confused.
If I understand it right, I must have a player installed (squeeze lite for example). I installed OH2 on a RPi3. I control it with a tablet in an other room.
I want to hear radio in this room through the loud speakers of the tablet (its the kitchen, so quality is good enough).
If I understand it right, that is with squeezebox not possible, right?
Its not as easy as copy a link in a browser, right?

[Oli (Oliver Stenzel)]

No, that is definitly possible. On the rpi, you Can Install squeezelite and
on the Tablet (Android?!) Squeezeplayer. Both will be detected by the
binding and then you Can Control them. I Use Old phones and the Most cheap
40€ Tablet in my rooms with squeezeplayer ( on Play Store 5€) and ist is
working great.

Am 06.06.2017 10:14 nachm. schrieb “Kersten Tams” <bot@community.openhab.org

[ktams (Kersten Tams)]

at least I got it to run. But only the SqeezeMusicControl. But that is not so sad, because I want to hear FFN and NDR2 not HR3 or FFH
Now I use four normal Button widges to choose my favorite Radio stations. As the action I send the stream url to the player.
Thanks alot for your help.

[Oli (Oliver Stenzel)]

No sweat. If everything else works exept the select widget, it’s most likely because the items aren’t persisted - that is a prerequesit for the logic to work. But since you found another solution…

[narf27 (Peter)]

Hi there!
i made some modifications to this great widget and now i wanted to remove the table borders (above title and artist).
But i don’t even get where they come from?
Could you help me out, @Oli ?

Cheers,
Peter

[Oli (Oliver Stenzel)]

Hi & sorry for late reply. in case you havn’t found it yet, its this table;

<div>
  <table class="table">
<tr>
    <td class="text-left" ng-if="itemValue(config.status_item) =='PLAY'">Title: <strong>{{itemValue(config.title_item)}}</strong></td>
    <td class="text-center" ng-if="itemValue(config.status_item) !='PLAY'"><strong>{{config.temp_name}}</strong></td>
  </tr>
  <tr>
    <td class="text-left" ng-if="itemValue(config.status_item) =='PLAY'">Artist: <strong>{{itemValue(config.artist_item)}}</strong></td>
    <td class="text-center" ng-if="itemValue(config.status_item) !='PLAY'"><strong>{{itemValue(config.temp_item)}} °C</strong></td>
  </tr>
</table>
  <div class="btn-group">
    <label class="btn-pad btn-lf" ng-click="sendCmd(config.action_item,('PREVIOUS'))"><i class="glyphicon glyphicon-step-backward"></i></label>
  	<label class="btn-radius btn-danger" ng-if="itemValue(config.status_item) !='PLAY'" ng-click="sendCmd(config.action_item,'PLAY')"><i class="glyphicon glyphicon-play glyphicon-text"></i></label>
    <label class="btn-radius btn-warning" ng-if="itemValue(config.status_item) =='PLAY'" ng-click="sendCmd(config.action_item,'PAUSE')"><i class="glyphicon glyphicon-pause glyphicon-text"></i></label>
    <label class="btn-pad btn-rt" ng-click="sendCmd(config.action_item,('NEXT'))"><i class="glyphicon glyphicon-step-forward"></i></label>
  </div>  
 <div class="div-slider" ng-init='model={"item": (config.volume), "floor": 0, "ceil": 100, "step":(config.step)}'>
  <widget-slider ng-model="model" />
</div>
</div>

i guess you could either set the border to be invisible, or remove the table alltogether. I’s personally try setting invisible first…
Regards,
-OLI