Custom Widget: Spotify Playlists for Spotify Binding

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.

I think this might have to do with a missing accestoken. I did fix some issues some time ago, but had not updated the market place binding (2.5.0.M2 release should be fine) for openHAB 2.4.0. I just updated the market place binding. So if you reinstall it (It should show once installed: Beta 06/09/2019) and try again.

tried to get this to work… set accestoken and TrackPlay…
the whole widget just stays empty… no errors or anything
any ideas?
im on 2.5.M4
is this widget still alive?

You can check in the browser (F12 (depending on you system)) the console for logging or network for what it returns as response from calls to Spotify api and see if it gives any errors?

I’m assuming you can control Spotify in PaperUI or have configured in any of the other UIs?

oops, i put the .js file in the wrong directory.

now at least it shows something. but now it keeps asking for the access token, even though its set in the settings and the item does work in the binding. exactly as @dastrix80 has in post 26

by the way, is there no easier way for all this, since the spotify binding already has a playlists item?

Your link isn’t working. But looking at thirtify yes, it sure looks good

Well it is working fine for me :slight_smile: I should probably make some kind of debug panel to see what is going on

NEVERMIND - a restart of openhab solved it!

it was really unclear for me too but i found the access token

go to the bridge then channels and then show more, after u pressed it u see the token and u can link it to an item :slight_smile:

I entered the deviceplayer and the accesstoken. I can search for playlists and tracks but i am not able to start one of them. i receive the following after hitting f12:
HTTP ERROR 400
Problem accessing /rest/items/spotify_device_Lena_devicePlayer. Reason:

Bad Request

When i skip the next track in 2 other widgets it is working

Hi,

i got this error message:

2020-05-21 17:08:29.707 [ome.event.ItemCommandEvent] - Item ‘Spotify_Squeezebox_Play’ received command spotify:album:1ZPWiIdTgSH86Q3QPOokas

2020-05-21 17:08:29.730 [nt.ItemStatePredictedEvent] - Spotify_Squeezebox_Play predicted to become NULL

This is in my items file

String Spotify_Squeezebox_Play “Spotify Play on Squeezebox” { channel=“spotify:device:device1:trackPlay” }

String Spotify_Access_Token “Spotify Access Token” { channel=“spotify:player:user1:accessToken” }

what i’m i doing wrong?

Exactly, there is a mismatch of the description stated in guthub and the settings, which actually needs to be set in OpenHab2.

You find the Access Token by showing more details in your bridge and by linking the access token to an item, as stated by Artropos.
Second step: The “spotifyplaylist” item, which belongs to the binding, needs to be connected in the config of the HABpanel widges as Spotify Binding track play.

Hope this helps others to fix it. Now it works for me.

Hi! Thanks for the widget, I loved it while uding Habpanel.

I know it is a long shot, but now that I am migrating to the OH3 UI pages, would love to see something similar in a YAML widget.

Unfortunately it is way over my capabilities.

Can it be that any one of you have already did something similar? Would be grateful for a starting code if this is even possible in the new ui. Thanks, Balint