Custom Widget: Spotify Playlists for Spotify Binding

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.

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

Looks great, good work!

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.

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?

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’:

This is how my paper ui config looks:

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:

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)

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?

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

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

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.

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?

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.

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

There is a tutorial on developing widgets for HABPanel:

Would be awesome to setup a widget for a music panel that looks similar to this one…

http://lab.possan.se/thirtify/index.html

Do you have to authorize the binding each time the computer reboots? I just had to reauthorize the binding after I rebooted my mac.

This is awesome work! Thanks

I use Patrick’s original Spotify code and simply tied this into the same token value and ‘trigger’ strong that I was using for stating playlists and managing all the AV gear that had to start up.

Thanks again.

Hi, I wonder if you have seen this,
I have a long list of playlists - but it seems only a handful appear when the widget loads. It tends to be sporadic, so the list that loads is not always in the same sequence? Is there a limit to the number of items that should load each time the widget refreshes?

thanks

Hi Gytis,

I have the following items. Placed them into the Widget, like so, but I get an error . Ive created a new String called spotifyTrackPlay, but again, same issue. Tried many things! Would be great if you could put a bit more detailed information in the Readme about how to get this to work as it looks fantastic.

String spotifyToken                                {channel="spotify:player:a54a8a62:accessToken"}
Player spotifyTrackPlayer                                {channel="spotify:player:a54a8a62:trackPlayer"}

Hey, I set up the Spotify Playlister, exactly like you. I can use the Spotify Bridge in the control panel of PaperUI, but when I configured the widget, it only says “Sorry, something went wrong. Try again.” But trying again doesn’t solve the problem :smiley:
I cannot see any playlist. Checked everything twice. Dunno where I’m wrong…
I would appreciate any help.