Custom widget: Controller for spotify connect binding

spotify
widget
widgetgallery
Tags: #<Tag:0x00007f51e4e78550> #<Tag:0x00007f51e4e782f8> #<Tag:0x00007f51e4e781b8>

(Linda Knudsen) #1


Hi!
I made a small widget for astenlunds spotify connect binding

The widget works best with “Don’t wrap in container” checked.

Wether you want the numbers or the progress bar is configurable

The widget might also be configureable to fit other media system, since all the tags are avalible in the edit panel.

The widget can be found here
Spotifycontrol_1_2.widget.json (8.1 KB)

The widget is super loosely based opon Claudius Ellsel’s Custom Widget: Amazon Echo Music Control (if there even is anything left from the original at this point :sweat_smile:)

Documentation on the binding can be found over here:

Temporary home for the newest version

Changelog

V1_2

  • Changed tag descriptions to fit with the milisecond tags in the binding

V1_1

  • Added a placeholder image when there is no album art
  • Fixed some html tags for the tables in the document

openHAB integration to Spotify Web Connect API (player)
(Hilbrand Bouwkamp) #2

Looks beautiful! There are actual channels to get time in milliseconds (will that work? it’s the timeformat Spotify reports so it’s a one-on-one copy of that data): trackDurationMs and trackProgressMs but these don’t seem to be documented (yet)… I’ll add it. The latest binary jar version (and any continued development work of this binding until the pr is merged can be found here: https://github.com/Hilbrand/openhab2-addons/releases/tag/spotify P.s the readme_url in your widget still points to the amazon topic :wink:


(Linda Knudsen) #3

Oh thanks!
Have updated the widget to have the right url!

Those would be perfect yeah! Are they implemented yet?

Should I add a pointer to your github too?


(Hilbrand Bouwkamp) #4

They are implemented and progress updates every second. Not specifically needed to add a pointer I think, if people find this thread they’ll find the binding. It’s temporary till the binding is merged.


(Linda Knudsen) #5

I added it anyway :grin:
If you tell me when they are merged again, I’l update it :grinning:
Ahh, correct, the MM:SS are the one I’m currently using.
Do you know if there is a possibility to get it formatted as a SSS too/instead?


(Hilbrand Bouwkamp) #6

I don’t know if there is a simple way to get it as SSS. Maybe something can be done with label formatting or something. The current formatting MM:SS is hard-coded in the binding and another representation directly from the binding would require changing code in the binding. But I’m not sure if these milliseconds give much more information. The minimal update frequency is 1 second anyway. What is the reason you want to show milliseconds?


(Linda Knudsen) #7

oh, not milliseconds, only seconds. Thats what my rule script does atm: translate the minutes:seconds into just seconds.


(Hilbrand Bouwkamp) #8

You don’t need the rules, you can use the milliseconds channels directly. Also because the progress value is not shown it’s only used to display a relative width to a max value that are both in the same unit it will work even if the values are in milliseconds.

2 other things:

  • You template isn’t completely correct. Some ending tags are missing or incorrect. You can easily see this in habpanel when you edit the panel: In habpanel open a panel -> click edit right next to the panel name(will show on hover) -> Rights side click add Widgets listobox -> click small config button right next to custom widgets -> This should shown installed widget and show your widget with by Linda Knudsen -> Click on it and it will open edit of widget in Code it will show invalid tags in red (Just added this description because didn’t know if you knew and I did find it hard to find). (I think these invalid html tags caused the widget to not show the progress bar. I did some dirty fixing and that made it work).
  • In Habpanel If you add a widget and open custom widgets it will list the widgets from the community forum (with links to this forum). You widget is also on it. However it’s not possible to import it. Other widgets show an import button, but yours shows a repository button. This may be caused because in your first post there are also links to repositories. I don’t know what the right way to fix this is, maybe remove urls to repositories in your first post? But if you can fix this people can install it directly from within habpanel.

(Linda Knudsen) #9

Uploaded a updated version!

V1_1
-Added a placeholder image when there is no album art
-Fixed some html tags for the tables in the document

For @hilbrand:

  • I cant seem to find the milisecond channels in the spotify binding, only minutes:seconds, where do I find it?
    Those would be perfect for the bar!

  • Did you enable the progress bar in the settings and provided it with its own tags?
    I found a fault in the table for the buttons and the progress bar, so it should be fixed now, but the divs still seem to show fault even though they as far as I can tell should be html valid (I’ll gladly stand corrected though :smile:)

  • I also fixed the import feature. Thanks for the headsup!


(Daniel Walters) #10

These are advanced channels so are hidden by default. If you click the ‘show more’ button when looking at the channels you should see them.

PS. great work on the widget!


(Linda Knudsen) #11

Found them! :smile: I have updated the description and the widget to point to these instead, perfect!

Thanks a lot! :smiley:


(Mark Richardson) #12

Thanks for your work on this. i think i may be missing something. The artwork is not pulling through on my setup and there is no option in the spotify bridge to link artwork. Can you point me in the right direction? Had a quick look at the HTML, “unsafe:spotify:album” shows up in the album cover area.
Any help would be appreciated.
Thanks, Mark


(Hilbrand Bouwkamp) #13
  • I see the progress bar is now working ok! The divs complain due to the <img> tag. While it’s perfectly ok to have only the <img> tag it doesn’t understand it and expects the closing tag. I think this is a bug of the parser in habpanel (You can check by adding a closing tag </img> after the images, then the errors will disappear, but that would be incorrect html, so it should not be left in).
  • You could inline the missing artwork image and making it independent of the external url: src="data:image/png;base64,..." There are online tools to convert images to this format.

(Linda Knudsen) #14

Are you using this binding?


If you have added and configured a spotify player bridge, the binding should have a channel for it


(Mark Richardson) #15

Thanks for your reply. I was using that binding but for some reason it wasn’t showing. I deleted and reinstalled and managed to get it working. Thanks again for your help.


(George) #16

Great work with this! I got it all up and running. I have 2 questions or requests… is there a way to make this work full screen within habpanel?

Also it would be great if you had control to switch devices within habpanel as well . Is there a way to do that?


(RW) #17

Great widget! Is there any way to browse through playlists or any other kind of navigation in this widget? Or is it restricted by the binding?


(Linda Knudsen) #18

This widget is for the time being only for the most basic controls.
There should be some more advanced options in the binding though :slight_smile:


(RW) #19

Thx for the reply. Just saw that someone came up with a Playlist widget in another thread. Maybe this will add the missing functionality.


(Oneofayykind) #20

Anyone build off this widget? It’s great but would love to build a more advanced one that has the ability to select devices as well as search for music and select playlists, etc.