Ah, I had a dig and it seems gyroscope requires a https connection to function.
And as it turns out, gyro tilt looks a bit janky on my devices anyway.
Thanks for the info tho!
still not working 
yes I have this.
Thanks, that helped!
How does the animated fan icon work? I’ve gone through your config and found the code for icon_fan2, where you define the svg. I would like to implement this in my own dashboard. Do I put that code at the beginning of the raw lovelace config? And if so, how do I reference that with icon: icon_fan2? Am I completely off track?
Hi there,
I took a look at part of your code, especially the part with the Plex Media content.
I took parts of your code, e.g. the one for creating the dynamic background images in custom:button-card, I then created a popup on this card, there I select the player that should be used for playback, and then the play button is underneath it.
I tried to do the whole thing with variables in order to get it dynamic and so that it updates the content of the variable for me.
The problem is, however, that if I select eg kitchen for entity_id in my input_select, I first have to close the popup and open it again so that the media_player_play_media accepts the new state of the input_select.
Maybe you have an idea?
my code for the media_player_play_media, here without the variable.
- type: custom:button-card
show_name: true
show_icon: false
show_state: false
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: >-
[[[ return 'media_player.' +
states['input_select.select_rooms'].state ]]]
media_content_type: movie
media_content_id: >-
[[[ return '{ "library_name":' + ' "Filme",' + '
"title": ' + ' "' +
entity.attributes.data[variables.i].title + '" ' +
'}'; ]]]
style: |
ha-card {
height: 50px!important;
text-align: left;
font-weight: light !important;
}
icon: mdi:home-search
name: Abspielen
here with the variable
- type: custom:button-card
show_name: true
show_icon: false
show_state: false
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: >-
[[[ return [variables.test] ]]]
media_content_type: movie
media_content_id: >-
[[[ return '{ "library_name":' + ' "Filme",' + '
"title": ' + ' "' +
entity.attributes.data[variables.i].title + '" ' +
'}'; ]]]
style: |
ha-card {
height: 50px!important;
text-align: left;
font-weight: light !important;
}
icon: mdi:home-search
name: >-
[[[ return [variables.test] ]]]
and the variable
variables:
i: |
[[[
if (entity) {
let data = entity.attributes.data;
return data === undefined || Math.floor(Math.random() * (data.length - 1)) + 1;
}
]]]
test: >-
[[[ return 'media_player.' + states['input_select.select_rooms'].state
]]]
i made a gif, where you can see that i choose another input_select, the buttons name underneath is the variable. but nothing changes.
perhaps you have a idea what i can do?
Look at edit here A different take on designing a Lovelace UI - #2862 by Snafuflux
The problem lies with either button-card or browser-mod
Thanks for your reply
you speak in the answer of the edit from a fix, I can’t see where a fix should be, or is it just for the special case with the fan?
Only for styles yeah
that’s a real pity then I can delete my concept as it currently is.
how did you solve it by specifying which player you want to use?
does @thomasloven know about it? he is the maintainer of both addons.
After four months of tweaking and adjusting, I thought I share a few screenshots of my variation of @Mattias_Persson awesome UI. It is all still work in progress and heavily based on different code snippets found in this very thread. 
have you found the problem? i have the same 
Could you share your code for the „Medien“ card, I had problems to get the blur correct and how you so sharp at the top?
And you get the name over the blur this don’t works by me.
Thanks
I dont know what happend.
All ! my custom:button-card popup’s arent working anymore, even on my old dashboard, where I didn’t change anything.
Including Lights popup. the sidebar button popups are still working.
I tried to figure out if any update had a breaking change but couldn’t find.
Could anybody help? Thanks in advance!
EDIT:
idk what it was, i already tried to clear cache and it didnt help. So i restored a backup and now its working again…
The Medien card is the idential conditional_media card from @Mattias_Persson . The only thing I added is the volume slider and the Popup controls for Play/Pause/Next/Previous. So no special code for displaying the card, you should find everything in button_card_templates.yaml.
yeah i copied it, but my blur looks really wired.
what do you enter by “- border-radius: calc(var(–custom-button-card-border-radius) / 2)”?
how looks your variable?
i think that is the problem
and how do you get the name OVER the blur? by me its always under the BLUR
Now that I’m thinking about it, I think I had some issues in the past and played around with z-index to correctly display the text over the blur.
This is my style section of the conditional_media template. Maybe you find something useful in it.
styles:
grid:
- gap: 0.65%
name:
- padding: 0.2vw
- margin: -0.2vw
- width: 100%
- z-index: 3
state:
- padding-bottom: 5.25%
- max-width: unset
- overflow: visible
- z-index: 3
card:
- padding: 5.75% 5.25% 0 5.75%
- border-radius: calc(var(--custom-button-card-border-radius) / 2)
- background: rgba(115, 115, 115, 0.2) center center/cover no-repeat
- background-image: &media_background_image >
[[[
if (entity) {
return entity.attributes.data !== undefined
? `url("${entity.attributes.data[variables.i].fanart}"), url("${entity.attributes.data[variables.i].poster}")`
: `url("${variables.entity_picture}")`;
}
]]]
- color: >
[[[
return entity === undefined
? 'rgba(255, 255, 255, 0.3)'
: '#efefef';
]]]
- text-shadow: >
[[[
return entity === undefined
? 'none'
: '1px 1px 5px rgba(18, 22, 23, 0.9)';
]]]
custom_fields:
icon:
- width: 30%
- fill: >
[[[
return entity && variables.media_on
? 'rgba(255, 255, 255, 0.8)'
: '#9da0a2';
]]]
blur_overlay:
- z-index: 1
- display: block
- position: absolute
- width: 103.1%
- height: 103.1%
- filter: var(--blur-intensity)
- clip-path: >
inset(74.5% 1.45% 1.45% 1.45% round 0 0 calc(var(--custom-button-card-border-radius) / 2) calc(var(--custom-button-card-border-radius) / 2))
- background: center center/cover no-repeat
- background-image: *media_background_image
- left: -1.5%
- bottom: -1.6%
volume_control:
- position: absolute
- bottom: 21%
- right: -1.6%
- width: 200px
- opacity: 0.8
EDIT
Yeah Z-index did the trick, but it must by the title and the other custom:fields
THANK YOU