Custom Widget: Music Control

Apps & Services HABPanel
,
12

Nice work on the control @loovanloon. I had started one myself, based on the same controller. Mine is currently not configurable, and nowhere near as nice as yours.

I did a template that has the mapping stuff done. It’s not in a custom widget yet, but here is the code, in case it is useful:

<style>
.inputSelect {
  background-color: #FFFFFF;
  color: #111111;
  border: 1px solid;
  border-color: #999999;
  width: 150px;
  font-size: 12px;
}

</style>
<div ng-init="sourceNames={
              '1': 'DIRECTV', 
              '2': 'Game', 
              '3': 'Auxiliary', 
              '5': 'Apple TV', 
              '16': 'Bluray / DVD', 
              '34': 'Phono', 
              '35': 'TV',
              '36': 'Tuner', 
              '43': 'Network', 
              '41': 'USB', 
              '46': 'Bluetooth'}" />

<h2>Zone 1</h2>
<div class="btn-group" uib-dropdown>
    <button id="single-button" type="button" class="inputSelect" uib-dropdown-toggle>
      <table width="100%"><tr>
        <td width="100%" style="text-align: left">{{sourceNames[itemValue('Receiver_Zone1_InputSource')]}}</td>
        <td style="text-align: right"><span class="caret"></span></td>
      </tr></table>
    </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '1')">DIRECTV</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '2')">Game</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '3')">Auxiliary</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '5')">Apple TV</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '16')">Bluray / DVD</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '35')">TV</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '36')">Tuner</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '34')">Phono</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '43')">Network</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '41')">USB</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '46')">Bluetooth</a></li>
  </ul>
</div>
13

Thx Tim @Signal11

I’d found some way for the mapping in the widget after posting my examples (and after a break :sleeping:) , but not as nicely looking as yours. I’ll look into it tomorrow on how to integrate your contributions.

14

I created a quick and easy control for the Onkyo Net/USB menu stuff. I could control this using PaperUI, but I didn’t have anything in HABpanel. It is really tiny, not sure it’s even worth sharing, but with all the other music controller stuff in this thread, I figured I’d just add it here.

Onkyo NetUSB Controller.widget.json (5.0 KB)

Screenshot:

Like I said, it’s really basic, and you may want to change the colors or whatever, but it does control the menus, let you select Pandora, choose a channel, etc.

Hope it’s useful to someone.

15

Amazing! This would be great if someone could develop controller dedicated to use with SqueezeBox.

16

Hello! Did you try to use the sendURI channel to send a steam directly to Chromecast without the need to start your App on Phone first? I wanna have the possibility to start e.g. web radio directly out of my panel.

Other question: What are the PREV and NEXT commands for Spotify??

Cheers!

17

For sure it is worth sharing @Signal11, it has value for me. Where did you find the API documentation for your Onkyo? Because as far as I know my OnkyoTX-NR616 doesn’t support the NetUSB Menu Title item, (or this item isn’t supported by the Onkyo binding). The channel is not detected (automatically). It has a NetUSB Menu Selected " item, which I used instead. And I can still navigate through the menu and the vTuner Internet radio channels.

This is what the your Onkyo NetUSB Controller looks like on the Onkyo TX-NR616.

18

I am using the OH2 binding for the Onkyo receivers. The documentation is available here.

The title is listed under netmenu#title on that page, and i configured an item that is linked to that channel using PaperUI.

19

your widget seems very cool, been testing it
so bad the spotify iframe doesn’t scroll on iOS
does it on android?
also the music keeps running on the browser instead on going though the spotify app

20

I tried https://open.spotify.com/ in a Frame and it never loads, how did you get it to work?

21

I can only get the “Browse” window and not the Spotify player in a Frame. Is it anyone who has tested this lately, if so. Can you post the link you are using or how to do it? :slight_smile:

22

If you try https://play.spotify.com/ ?

23

Hi! Is there a way that you can put a stop button in there?

24

Murpher, I am trying to get spotify web player to show on Habpanel, but no luck.

I am adding a Frame, and try https://play.spotify.com/ and https://open.spotify.com/ with no luck. I am using static URL. Do you change anything else to get the player to show in Habpanel? Thanks

25

Hi, how do i get my chromecast connected?

26

Can someone add a powerbutton and a input source selector? This would be very handy for receivers with multiple zones. I’m no programmer . Thanks in advance and appreciate your work .

27

Any Progress?
I would like to use the spotify player in habpanel as well.

28

Sorry, whole project has been put on the back burner.

29

Had to change the original widget a bit by adding extra configuration settings. Makes it easier for people to add the correct texts for their players. In my case, when a song is playing, the Sonos says State == PLAYING, not State == PLAY like it was initially.

In attachment the updated file. Could be a good idea to add this stuff to GitHub. Allows everyone to work on it and consolidate all ideas for music player widgets in one easy to track repository.
MusicControl.widget (1).json (3.9 KB)

30

Hi,

thanks for the great template, I like your approach a lot but I still have some issues to get it working. Volume and Play/Pause is working great, but the next and prev button I have no clue what to do?!

47 AM
Screen Shot 2017-12-13 at 10.58.47 AM.png1908×1368 178 KB

Would be great if somebody sees directly my problem, I tried several settings but till now negative

Thanks

31

I was scratching my head for ages over this.

What is your media player? Sonos, Squeezebox, something else? Type NEXT into the penultimate box and PREVIOUS into the final textbox on the config screen. If PREVIOUS doesn’t work, try PREV.

Hope this helps!

1 Like