Guten Morgen, ich würde gerne die Hintergrundbilder wie in der Standardansicht jetzt auch auf mein eigenes Dashboard bringen. Bedeutet, wenn ich ein Media Player einschalte, wird ja der ganze Hintergrund angezeigt, welche Musik gerade spielt als Cover. Jetzt will ich mir aber ein neues Dashboard anlegen und bekomme genau das nicht hin gibt es dafür eine Anleitung? Beziehungsweise kann man aus dem Standard Dashnoard eine Karte/Kachel komplett auf ein neues Dashboard kopieren.
Hi, ich habe mir auch eine eigene Card gebaut und habe ebenfalls erstmal gesucht um den Hintergrund zu setzen. So habe ich es gelöst und läuft zuverlässig.
Das ist der entscheidende Teil (für den Hintergrund) aus dem Code darunter:
card_mod:
style: |
ha-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url({{ state_attr('media_player.echo_dot_wohnzimmer', 'entity_picture') }}) no-repeat center center;
background-size: cover;
filter: blur(30px);
z-index: 0;
opacity: {% if is_state('media_player.echo_dot_wohnzimmer', 'playing') or is_state('media_player.echo_dot_wohnzimmer', 'paused') %} 1 {% else %} 0 {% endif %};
transition: opacity 0.3s ease;
}
Der Filter filter: blur(30px); bestimmt wie verblasst der Hintergrund dargestelllt werden soll.
Hier mal meine komplette Card:
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
position: relative;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px
13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
border: none;
}
ha-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url({{ state_attr('media_player.echo_dot_wohnzimmer', 'entity_picture') }}) no-repeat center center;
background-size: cover;
filter: blur(30px);
z-index: 0;
opacity: {% if is_state('media_player.echo_dot_wohnzimmer', 'playing') or is_state('media_player.echo_dot_wohnzimmer', 'paused') %} 1 {% else %} 0 {% endif %};
transition: opacity 0.3s ease;
}
cards:
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
background: transparent !important;
border: 0px !important;
border-radius: none !important;
box-shadow: none !important;
}
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: media_player.echo_dot_wohnzimmer
state: playing
card:
type: custom:button-card
entity: media_player.echo_dot_wohnzimmer
show_state: false
show_name: false
show_icon: false
show_entity_picture: true
size: 120px
card_mod:
style: |
ha-card {
background: transparent !important;
border: 0px !important;
border-radius: 0px !important;
padding: 15px !important;
}
#img-cell {
display: flex !important;
align-items: flex-start !important;
justify-content: flex-start !important;
margin: 0 !important;
}
- type: conditional
conditions:
- entity: media_player.echo_dot_wohnzimmer
state: paused
card:
type: markdown
content: |
## Echo Dot Wohnzimmer
card_mod:
style: |
ha-card {
background: transparent !important;
border: 0px !important;
border-radius: none !important;
box-shadow: none;
padding: 15px;
font-size: 12px !important;
}
- type: conditional
conditions:
- entity: media_player.echo_dot_wohnzimmer
state: idle
card:
type: markdown
content: |
## Echo Dot Wohnzimmer
card_mod:
style: |
ha-card {
background: transparent !important;
border: 0px !important;
border-radius: none !important;
box-shadow: none;
font-size: 12px !important;
}
- type: conditional
conditions:
- entity: media_player.echo_dot_wohnzimmer
state: standby
card:
type: markdown
content: |
## Echo Dot Wohnzimmer
card_mod:
style: |
ha-card {
background: none;
border: none;
border-radius: none;
box-shadow: none;
padding: 20px;
font-size: 12px !important;
}
- type: picture
image: /local/bilder/echodot.png
aspect_ratio: 1/1
card_mod:
style: |
ha-card {
background: none;
border: none;
border-radius: none;
box-shadow: none;
width: 150px;
height: 150px;
margin-left: auto;
}
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
z-index: 1 !important; /* Über dem Hintergrund */
}
cards:
- type: custom:mushroom-media-player-card
entity: media_player.echo_dot_wohnzimmer
media_controls:
- play_pause_stop
- next
- previous
volume_controls:
- volume_mute
- volume_buttons
- volume_set
show_volume_level: true
collapsible_controls: false
icon: mdi:cast-audio
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
3 „Gefällt mir“
Das ist Mega, sogar besser als das Original
1 „Gefällt mir“
Na bitte schön. 
Finde die so auch top und Lautstärke kann auch eingestellt werden…
1 „Gefällt mir“