Custom Widget: Spotify Playlists for Spotify Binding

Apps & Services HABPanel
, ,
1

Wanted to have some minimal control via Openhab without reverting to Spotify client, so created a custom Spotify Widget from which you can play your playlists on selected player (also supports simple spotify search).

playlister
playlister800Ɨ629 448 KB

This is client-side only widget (habpanel only). Minimal testing done on modern Chrome.

You must have Spotify Binding configured as described here:

Code and instructions: GitHub - gytisgreitai/habpanel-spotify-playlister: Spotify Playlists Widget for OpenHAB Habpanel

7 Likes
2

The Spotify binding is available in the Eclipse Market Place and can be installed directly from PaperUI if you have enabled eclipse market place. The binding is not yet part of the standard openHAB installation.

Do not install any other jar youā€™ll find anywhere on this forum.These are all outdated and very likely have bugs

Here is the readme for the binding:

3

cant do it man can you please to explain it a better, in this moment install the widget but it show set acces token

4

have you configured the spotify bindings? ā€˜Set access tokenā€™ means that you either did not configure the binding or when you added the widget, you did not specify which items contains that access token

5

I configured my spotify binding but unclear about instructions about what item I add to the spotify binding track play:ā€¦ field. Does that make sense? I added the widget but nothing shows up when I did even after selecting the access token to the widget.

6

Are you able to use the Spotify binding in PaperUI?

7

I believe I have everything linked. I can play through the paper ui control. I also used a different widget someone else created for spotify and that works. Not sure why this wonā€™t.

9

Is there anyway to use this with patricks spotify web api script?

Looks great, good work!

10

Iā€™m not sure why it doesnā€™t work. The widget requires the binding channels accessToken and trackPlay to be linked to an item. The other binding doesnā€™t require the accessToken. One thing I saw was the accesstoken was not set in my thing. I reinstalled the binding and then it was back. Iā€™m not sure if this is a bug or if it was related to the fact I have been reinstalling different development versions in the past. But itā€™s something Iā€™ll be looked at and see it that does reappear or if it was unrelated.

11

Okay I removed the old binding and used your 2.4 binding jar file. I have the access token in there and itā€™s pulling up my playlist. I canā€™t figure out how I setup the trackPlay to the songs. If I go into the paperUI control it wonā€™t play the songs either. I assume itā€™s because I need to setup some type of player to play the files? Any suggestions on where to look to set this part of it up?

12

Can you provide a link ? This plugin needs just two OpenHAB items - one String item which would have spotify access token and another - to which you could send spotify url to play. So as long as you can get that from api script it should be good

Yes, you need a player set up. E.g. I have a Squeezebox player which is configured as Spotify Connect Device thing which has a channel ā€œTrack To Playā€ (note that you have to click ā€˜show moreā€™ because it is hidden initiallyā€™:

02
022474Ɨ692 74.2 KB
40
402604Ɨ384 45.8 KB

This is how my paper ui config looks:

40
402604Ɨ384 45.8 KB

And my .item file:

String Spotify_Squeezebox_Play "Spotify Play on Squeezebox"  { channel="spotify:device:squeezebox:trackPlay" }
String Spotify_Access_Token  "Spotify Access Token"          { channel="spotify:player:spotify:accessToken" }

And my widget config then:

31
311896Ɨ892 55.2 KB

13

Yep!

here it is:

Here are the spotify items ive got:

Group gSpotify

/* Switch to Force Update */
Switch spotify_forceupadte (gSpotify)

/* Strings for Primary Auth */
String spotify_auth_code (gSpotify)
String spotify_client_id (gSpotify)
String spotify_client_secret (gSpotify)

/* Strings for Token Auth */
String spotify_access_token "AccessToken [%s]" (gSpotify)
String spotify_refresh_token "RefreshToken [%s]" (gSpotify)
String spotify_token_expiry "TokenExpiry [%s]" (gSpotify)
DateTime spotify_token_issued "TokenIssued [%s]" (gSpotify)

/* Strings to store Player Data */
String spotify_current_track (gSpotify)
String spotify_current_artist (gSpotify)
String spotify_current_cover (gSpotify)
String spotify_current_duration (gSpotify)
String spotify_current_progress (gSpotify)
Number spotify_current_progress_percent (gSpotify)
Switch spotify_current_playing (gSpotify)
String spotify_current_context_uri (gSpotify)
String spotify_current_device (gSpotify)
String spotify_current_device_id (gSpotify)
Number spotify_current_volume (gSpotify)

/* Switches for Player actions */
String spotify_action (gSpotify)

DateTime spotify_lastConnectionDateTime

/* Strings to store JSONs */

String spotify_device_list (gSpotify)
String spotify_playlist_list (gSpotify)
14

This is great thank you for the guidance Iā€™ve got it working now on my Mac. When I bring it up on my iPad only the search bar shows up and I donā€™t get any of my playlists. Iā€™m sure Iā€™m missing something here just dont know what?

15

AFAIK you need spotify_access_token - this should render the playlist and allow you to search.
Now playing wonā€™t work out of the box afaik. The item we are interested in is spotify_action BUT with spotify binding you just send the spotify playlist url while with this spotify_action you must also add play keyword. So I see two options:

  1. Create some sort of intermediate item which you can use in the widget and then a simple rule which would transform the command by adding play to the received command and forwarding it to spotify_action
  2. I would have to tune my widget to add a flag that the item is actually not a binding but this api wrapper so it would send full command instantly

Option 1 would look something like this (untested)

/* .item file*/
  String spotify_action_for_widget (gSpotify)

 /* .rule file */
rule "Spotify Wiget Play Action"
when
  Item spotify_action_for_widget received update
then
  val playlist = spotify_action_for_widget.state.toString
  spotify_action.sendCommand("play " + playlist) 
end

That is probably a bug on my side, used some unsupported js function on Safari. What IOS version is that iPad running?

1 Like
16

Thanks, when I get some time I might give Option 1 a try :slight_smile:

17

I have the latest which I believe is 12.2. I also tried it on an Android device I have (not sure what version itā€™s running) and same thing happened, Iā€™m just not able to get the playlist items to show up and nothing shows up after searching too. Iā€™m planning to build this into a wall mounted iPad mini likely so would be awesome to get this working.

18

Well I have tested it on iOS 11 and 12 Simulators, all work fine. On ipad mini also - no problems. And I have this on Amazon Fire tablet on my wallā€¦ so no problems there. Is this the same habpanel that you tested on mac? Do the settings look ok on the ipad ? Do you see the loading bar bellow the search bar when you open the habpanel?

19

I donā€™t see the loading bar when opening it either. All setting when accessing from other devices are the same I have persistence setup and the config changes are saved and loaded on each device. I must be doing something wrong however this works perfect on the computer in chrome and safari.

20

I would love to learn more about the code behind widgets like these so I can learn how to add additional functionality. Iā€™m a good front end developer and understand html and css but I definitely need to learn the js code and how the widget was created with json. Any suggestions for where I might get started down this path? I hope to be able to contribute much more in the future to the openHAB community.

1 Like
21

There is a tutorial on developing widgets for HABPanel: