Another problem. One button isn’t showing his icon.
ui-lovelace.yaml
- type: custom:button-card
entity: calendar.abfallkalender
template:
- abfall
button_card_templates.yaml
base:
variables:
state: >
[[[ return entity === undefined || entity.state; ]]]
timeout: >
[[[ return entity === undefined || Date.now() - Date.parse(entity.last_changed); ]]]
light_color: >
[[[ return entity === undefined ? 'var(--state-icon-color)' : 'var(--button-card-light-color-no-temperature)'; ]]]
aspect_ratio: 1/1
show_state: true
show_icon: false
state_display: >
[[[ if (variables.state === true) return 'Unbekannt'; ]]]
tap_action:
ui_sound_tablet: |
[[[
const tablet = states['switch.dashboard_screensaver'];
const screensaver = states[tablet] === undefined || states[tablet].state;
if (variables.state === 'off' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: 'media_player.dashboard_fullykiosk',
media_content_id: '/local/sound/on.m4a',
media_content_type: 'music'
});
}
if (variables.state === 'on' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: 'media_player.dashboard_fullykiosk',
media_content_id: '/local/sound/off.m4a',
media_content_type: 'music'
});
}
]]]
animation_card: |
[[[
const animation_speed_ms = 900;
const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
this.shadowRoot.getElementById("card").style.animation = animation;
window.setTimeout(() => {
this.shadowRoot.getElementById("card").style.animation = "none";
}, animation_speed_ms)
]]]
action: toggle
haptic: medium
styles:
grid:
- grid-template-areas: |
"icon circle"
"n n"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(2, min-content)
- gap: 2%
- align-items: start
name:
- justify-self: start
- line-height: 115%
state:
- justify-self: start
- line-height: 115%
card:
- font-family: Sf Display
- border-radius: var(--custom-button-card-border-radius)
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- padding: 10%
- --mdc-ripple-color: >
[[[
return (variables.state === 'on' || variables.state === 'home' || variables.state === 'open') ?
'rgb(0, 0, 0)' :
'rgba(255, 255, 255, 0.3)';
]]]
- color: >
[[[
return (variables.state === 'on' || variables.state === 'home' || variables.state === 'open') ?
'rgba(0, 0, 0, 0.6)' :
'rgba(255, 255, 255, 0.3)';
]]]
- background-color: >
[[[
return (variables.state === 'on' || variables.state === 'home' || variables.state === 'open') ?
'rgba(255, 255, 255, 0.8)' :
'rgba(115, 115, 115, 0.2)';
]]]
extra_styles: |
#name, #state {
font-size: 1.34vw;
letter-spacing: 0.05vw;
}
/* portrait */
@media screen and (max-width: 1200px) {
#name, #state {
font-size: 2vw;
letter-spacing: 0.05vw;
}
}
/* phone */
@media screen and (max-width: 800px) {
#name, #state {
font-size: 3.1vw;
letter-spacing: 0.12vw;
}
}
@keyframes card_bounce {
0% {
transform: scale(1);
}
15% {
transform: scale(0.9);
}
25% {
transform: scale(1);
}
30% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
abfall:
template:
- base
show_icon: true
icon: mdi:delete
name: >
[[[
if (states[entity.entity_id].attributes.message === 'Biotonne in Memmingen' )
return 'Biotonne';
if (states[entity.entity_id].attributes.message === 'Restmülltonne in Memmingen')
return 'Restmüll';
else
return 'Altpapier';
]]]
state_display: >
[[[
{ return states['sensor.abfall_morgen'].state; }
]]]
state:
- operator: template
value: >
[[[ return (states[entity.entity_id].attributes.message == 'Biotonne in Memmingen') && ((states['sensor.abfall_morgen'].state == 'Morgen') || (states['sensor.abfall_morgen'].state == 'Heute')) ]]]
styles:
card: [background-color: "rgba(186, 146, 0, 0.8)"]
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
- operator: template
value: >
[[[ return (states[entity.entity_id].attributes.message == 'Restmülltonne in Memmingen') && ((states['sensor.abfall_morgen'].state == 'Morgen') || (states['sensor.abfall_morgen'].state == 'Heute')) ]]]
styles:
card: [background-color: "rgba(160, 160, 160, 0.8)"]
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
- operator: template
value: >
[[[ return (states[entity.entity_id].attributes.message == 'Altpapier') && ((states['sensor.abfall_morgen'].state == 'Morgen') || (states['sensor.abfall_morgen'].state == 'Heute')) ]]]
styles:
card: [background-color: "rgba(0, 100, 200, 0.8)"]
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
