Wondering if anyone can help.
On a different card, i’m using these lines of code to turn on my various media (all connected through harmony)
- entity: switch.chromecast
- entity: switch.xboxone
- entity: switch.playstation_2
- entity: switch.xbox360
Is there a way of getting the switches to work whilst using buttons? I’ve been playing around but struggling.
Yes, here’s an example with two shortcut buttons.
...
buttons:
- type: service
name: switch 1
id: switch.toggle
data:
entity_id: switch.name1
- type: service
name: switch 2
id: switch.toggle
data:
entity_id: switch.name2
**Solved! Please see post below - Lovelace: Mini Media Player"
Thank you for that, seems i’m heading in the right direction now! Although, are you able to see what i’ve got wrong here, as it’s throwing up errror “duplicated mapping key at line 12, column 5: type: service ^”
entity: media_player.pioneer
type: 'custom:mini-media-player'
hide_when_off: false
shortcuts:
columns: 4
buttons:
- icon: mdi:cast
type: service
name: Chromecast
id: switch.toggle
entity: switch.chromecast
type: service
name: Xbox One
id: switch.toggle
data:
entity_id: switch.xboxone
If I remove the below, then the chromecast toggle shows up and works fine.
type: service
name: Xbox One
id: switch.toggle
data:
entity_id: switch.xboxone
I’ve tried playing around and going over the code, but i’m guessing it’s something really obvious i’m missing!
Managed to get it working after much playing around! Seems like missing out the ‘-’ before type was my issue! Here is my revised code incase anyone else stumbles across this with the same problem.
entity: media_player.pioneer
type: 'custom:mini-media-player'
hide_when_off: false
shortcuts:
columns: 2
buttons:
- type: service
icon: 'mdi:cast'
name: Chromecast
id: switch.toggle
data:
entity_id: switch.chromecast
- type: service
icon: 'mdi:xbox'
name: Xbox One
id: switch.toggle
data:
entity_id: switch.xboxone
- type: service
name: Playstation 3
icon: 'mdi:playstation'
id: switch.toggle
data:
entity_id: switch.playstation_2
- type: service
icon: 'mdi:xbox'
name: Xbox 360
id: switch.toggle
data:
entity_id: switch.xbox360
One more question - I’m hoping it’s possible! How would I go about having the button highlighted, or change colour when that activity is in use?
So if Chromecast is being use, it would look different to the other three buttons?
Hi @kalkih! I’ve made a custom component out of the Heos integration which I’m using with your great media player card. I managed to add services for grouping of HEOS-speakers that seems to be working fine (still testing though…). Also added turn_off feature that simply does the same as stop and this allows me to use your power button.
I’m successfully joining and unjoining players to/from groups using your card, but I can see something is missing in my humble “hack” since the group status is not read and updated. As a result the card only shows correct status when the commands are successful, and they’re also not updated next time I open the card. I was trying to poke around in your code to see how it’s updated, but couldn’t really find how this the group status et.c. is read. Would you be so kind to give me some hints on my way there?
Thanks in advance, and thanks a lot for a great card!
Not possible in shortcuts with service/script calls, if the source changed would be within the same entity as the card entity this would have been possible. See the attribute option in the shortcuts object.
The reason behind this is because we don’t watch or keep track of state changes happening outside of the card entity.
If you need more advanced buttons I recommend checking out the custom button-card. Combining a mini-media-player card (with the group option set to true) with a couple of button-cards inside a vertical-stack-in-card would be an option.
That’s awesome, it’s great seeing more and more media player platforms getting support for multiroom management within HA.
Please check this issue and the discussion there, as I think this might be related.
Basically what I think your implementation is missing is an attribute that expose the group composition.
I’ll quote myself from another post:
The main thing that keeps the speaker group management card feature from not working with the official soundtouch component is the lack of an exposed
groupattribute, we need this to keep track of groups and group members/master etc.In order to function without any modifications to this card the
groupattribute should look something like this (this is also how the Sonos component does it):
- The group is a list/array.
- The group contains the entity id’s of all of its members.
- The group looks the same on master and client/slave.
- The initial entry is the master.
- The attribute is exposed as
[platform]_group(soundtouch_groupin this case).
Here’s a PR that adds just this to the bluesound component, and here’s one for the soundtouch component.
Feel free to open an issue on github if you want to discuss this further 
Great, thanks! I think I get the point, I’ll try to implement it. My luck is that the pyheos library already contains the grouping functionality, also including a class for groups. So I believe it should be a minor thing to get it working. I tried to read up on the Sonos code, but didn’t quite figure it out. I’ll study the thread you suggested and do some testing.
Basically it would be something like
heos_group = [‘media_player.themaster’, ‘media_player.themember’,…]
right?
Exactly! Yes, the Sonos implementation and the two PR’s I linked are great examples. Check the “Files changed” tab on the PRs, there you can easily see the code added to implement the group attribute
Hello.
Do the custom shortcut buttons support images instead of icons? I was hoping to use icons from flaticon.com as they offer a bit more clarity but this does not work:
- type: custom:mini-media-player
entity: media_player.skyq
name: SkyQ
icon: mdi:blank
artwork: cover
background: "https://wi-images.condecdn.net/image/m9qkOnPpZnz/crop/1620/f/screen-shot-2015-11-18-at-100440.jpg"
hide:
volume: true
source: true
power_state: false
shortcuts:
columns: 6 # Max buttons per row
buttons:
# Channel Up
- image: "/local/images/remote/remote_icons/001-sort-up.png"
# name: 'Ch+'
type: source
id: 'CHup'
Hey,
There’s an open feature request for just this over on github #146, it’s currently not possible but could definitely be implemented in the future.
Hi Karl! Just to let you know I got it working with HEOS grouping. Probably rough and dirty, but hey, it’s working 
Thanks for your inputs, it really helped. Hopefully this feature will be part of the official integration soon, I know Andrew is working on it and will for sure make it more “fluent” than I have.
Nice, great job!
If/when it comes to the official component, please ping me and I’ll add information about it in the mini-media-player docs (or if you wanna create a PR) 
Thanks!
No success with that entity_picture extracting. Any chance for a piece of code for taking that picture and putting in the background of verical-stack-in-card?
It seems like card-mod styles doesn’t stick to verical-stack-in-card, here’s an example with an entities-card instead:
- type: entities
style: |
ha-card {
position: relative;
background: url('{{ state_attr('media_player.example', 'entity_picture') }}') center / cover; # this is really the only line you need to set the background
}
# everything below is optional styling
ha-card::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: rgba(0,0,0,.5);
}
.card-content {
padding: 8px;
}
.card-content > div {
margin: 0 !important;
}
entities:
...cards
You’re most welcome!
You could move the background image from ha-card to ha-card::before, and specify the opacity.
ha-card::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: url('{{ state_attr('media_player.example', 'entity_picture') }}') center / cover;
opacity: .25; # 25% visible
}
I thought that entity_picture disappeared after that change. But deleting comment between style and ha-card::before { helped. Unfortunately now opacity: does not work.
And another magic: it works only with # this is... comment at the end of line background: url.... Without that comment it disappeare.
another EDIT: this magic works only if there is other (in any vew) duplicated this card.
With one even opacity does work.
There’s no magic going on here, just CSS 
Make sure to not have ANY comments anywhere in the card-mod styles as it will get parsed as part of the CSS and break the rules. Also make sure every rule ends with a ;.
This should work fine unless you have other custom styles defined that’s interfering with these ones.
Here’s the complete code again, with the image opacity at 25%, should just be to copy/paste.
style: |
ha-card {
position: relative;
}
ha-card::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
opacity: .25;
background: url('{{ state_attr('media_player.example', 'entity_picture') }}') center / cover;
}
.card-content {
padding: 8px;
}
.card-content > div {
margin: 0 !important;
}
Newbies in any branch experience a lot of magic;) Without all comments in card-mod styles works much better. Had no idea. Thanks a lot @kalkih
BTW, it does work in verical-stack-in-card as well.