Custom widget: Controller for spotify connect binding

Can I ask a really stupid question?

ng-if=“itemValue(config.control) !=‘PLAY’” ng-click=“sendCmd(config.control,‘PLAY’)”

How do you know config.control,‘PLAY’ as an example is a function that will work here with the spotify binding? Does that even make sense?

Hi Linda,

Thank you for this super-cool widget! It’s definitely got a lot ofpotential :slight_smile:

Though for me the HTML seems broken. It does pull the album art though, but otherwise it’s not functional (the control buttons do nothing.)

I’ve restarted OpenHAB, deleted and re-installed the widget but no luck. I also checked the ‘don’t wrap in container’ option like you suggested.

Is there any advice you could give me?

Again thank you for your creation

Check what your browser log and/or network calls return (F12 or browser developer tools) Maybe it gives reports an error that gives you an indication of what goes wrong.

Hi Hilbrand,

Thank you for your quick response.

When I open http://172.16.30.71:8080/start/index see the following in the browser console:

Source map error: Error: request failed with status 404
Resource URL: http://172.16.30.71:8080/start/js/jquery.min.js
Source Map URL: jquery.min.map

Then When I click on Habpanel:

Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”). vendor.js:189:446
Source map error: Error: request failed with status 404
Resource URL: http://172.16.30.71:8080/habpanel/vendor/vendor.js
Source Map URL: aCKolor.min.js.map

Error: drawer is undefined
refreshMenu/<@http://172.16.30.71:8080/habpanel/app/menu/drawer.controller.js:71:17
e/<@http://172.16.30.71:8080/habpanel/vendor/vendor.js:132:434
$eval@http://172.16.30.71:8080/habpanel/vendor/vendor.js:147:69
$digest@http://172.16.30.71:8080/habpanel/vendor/vendor.js:144:131
$apply@http://172.16.30.71:8080/habpanel/vendor/vendor.js:147:363
l@http://172.16.30.71:8080/habpanel/vendor/vendor.js:99:194
K@http://172.16.30.71:8080/habpanel/vendor/vendor.js:103:377
tg/</N.onload@http://172.16.30.71:8080/habpanel/vendor/vendor.js:104:339
vendor.js:119:448
Source map error: Error: request failed with status 404
Resource URL: http://172.16.30.71:8080/habpanel/vendor/vendor.js
Source Map URL: aCKolor.min.js.map

Nothing else happens in the log after that (even when I click on the dashboard which contains the widget.)

By the way, this output is from Firefox. The same problem happens in Chrome too.

This is foreign territory for me, so I’ll have some Googling to do…

Just an afterthought… that the control buttons are not working maybe the issue is in mt item definition.

Here is the setup:

Player spotifyTrackPlayer   "Player"               {channel="spotify:fba277f5:6f52962fa9ca4129b0e592b4bd7xxxx:trackPlayer"}
String spotifyDevices       "Active device [%s]"   {channel="spotify:fba277f5:6f52962fa9ca4129b0e592b4bd7xxxx:devices"}
Switch spotifyDeviceShuffle "Shuffle mode"         {channel="spotify:fba277f5:6f52962fa9ca4129b0e592b4bd7xxxx:deviceShuffle"}
String spotifyTrackRepeat   "Repeat mode: [%s]"    {channel="spotify:fba277f5:6f52962fa9ca4129b0e592b4bd7xxxx:trackRepeat"}
String spotifyTrackProgress "Track progress: [%s]" {channel="spotify:fba277f5:6f52962fa9ca4129b0e592b4bd7xxxx:trackProgress"}
String spotifyTrackDuration "Track duration: [%s]" {channel="spotify:fba277f5:6f52962fa9ca4129b0e592b4bd7xxxx:trackDuration"}
String spotifyTrackName     "Track Name: [%s]"     {channel="spotify:fba277f5:6f52962fa9ca4129b0e592b4bd7xxxx:trackName"}
String spotifyAlbumName     "Album Name: [%s]"     {channel="spotify:fba277f5:6f52962fa9ca4129b0e592b4bd7xxxx:albumName"}
String spotifyArtistName    "Artist Name: [%s]"    {channel="spotify:fba277f5:6f52962fa9ca4129b0e592b4bd7xxxx:artistName"}
Image  spotifyAlbumImage    "Album Art"            {channel="spotify:fba277f5:6f52962fa9ca4129b0e592b4bd7xxxx:albumImage"}
String spotifyPlaylists     "Playlists [%s]"       {channel="spotify:fba277f5:6f52962fa9ca4129b0e592b4bd7xxxx:playlists"}
String spotifyPlayName      "Playlist [%s]"        {channel="spotify:fba277f5:6f52962fa9ca4129b0e592b4bd7xxxx:playlistName"}

String device1DeviceName    {channel="spotify:device:6f52962fa9ca4129b0e592b4bd7xxxx:fba277f5:50d9:deviceName"}
Player device1Player        {channel="spotify:device:6f52962fa9ca4129b0e592b4bd7xxxx:fba277f5:50d9:devicePlayer"}
Dimmer device1DeviceVolume  {channel="spotify:device:6f52962fa9ca4129b0e592b4bd7xxxx:fba277f5:50d9:deviceVolume"}
Switch device1DeviceShuffle {channel="spotify:device:6f52962fa9ca4129b0e592b4bd7xxxx:fba277f5:50d9:deviceShuffle"}

String device2DeviceName    {channel="spotify:device:6f52962fa9ca4129b0e592b4bd7xxxx:fba277f5:3d41:deviceName"}
Player device2Player        {channel="spotify:device:6f52962fa9ca4129b0e592b4bd7xxxx:fba277f5:3d41:devicePlayer"}
Dimmer device2DeviceVolume  {channel="spotify:device:6f52962fa9ca4129b0e592b4bd7xxxx:fba277f5:3d41:deviceVolume"}
Switch device2DeviceShuffle {channel="spotify:device:6f52962fa9ca4129b0e592b4bd7xxxx:fba277f5:3d41:deviceShuffle"}

String device3DeviceName    {channel="spotify:device:6f52962fa9ca4129b0e592b4bd7xxxx:fba277f5:abc8:deviceName"}
Player device3Player        {channel="spotify:device:6f52962fa9ca4129b0e592b4bd7xxxx:fba277f5:abc8:devicePlayer"}
Dimmer device3DeviceVolume  {channel="spotify:device:6f52962fa9ca4129b0e592b4bd7xxxx:fba277f5:abc8:deviceVolume"}
Switch device3DeviceShuffle {channel="spotify:device:6f52962fa9ca4129b0e592b4bd7xxxx:fba277f5:abc8:deviceShuffle"}

you can change devices with the selection widget just select Spotifyplayerbridge_activedevices
works like a charm, but indeed build in will be much better.

My setup atm


Do you pull the right information out of the bridge?

as u can see you get a list of devices that can play your spotify (atm these are my pc and my google home)

Is there any way to build a “cast” icon into this widget? I have roughly 10 google home speakers that always show in the spotify app, but not on the web browser. Not sure what the difference is to be honest.