Voilà un exemple :
le code :
type: custom:button-card
custom_fields:
halo:
card:
type: custom:button-card
styles:
card:
- width: 110px
- height: 270px
- background: red
- opacity: |
[[[
const fridge = states['input_boolean.fridge']?.state === 'on';
const freezer = states['input_boolean.freezer']?.state === 'on';
return (fridge || freezer) ? '0.9' : '0';
]]]
- border: none
- border-radius: 12px
- box-shadow: 0 0 12px 5px rgba(255,0,0,1.0)
- animation: |
[[[
const fridge = states['input_boolean.fridge']?.state === 'on';
const freezer = states['input_boolean.freezer']?.state === 'on';
return (fridge || freezer) ? 'halo 1.5s infinite' : 'none';
]]]
extra_styles: |
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.2; }
100% { opacity: 1; }
}
@keyframes halo {
0% {
transform: scale(1);
box-shadow: 0 0 8px 4px rgba(255,0,0,1);
}
50% {
transform: scale(1);
box-shadow: 0 0 25px 12px rgba(255,0,0,1);
}
100% {
transform: scale(1);
box-shadow: 0 0 8px 4px rgba(255,0,0,1);
}
}
picture:
card:
type: custom:button-card
icon: |
[[[
const fridge = states['input_boolean.fridge']?.state === 'on';
const freezer = states['input_boolean.freezer']?.state === 'on';
return (fridge || freezer) ? 'mdi:alert' : 'mdi:checkbox-marked';
]]]
show_icon: true
styles:
card:
- width: 131px
- height: 315px
- border: none
- border-radius: 0px
- background: |
[[[
const fridge = states['input_boolean.fridge']?.state === 'on';
const freezer = states['input_boolean.freezer']?.state === 'on';
if (fridge)
return 'center / contain no-repeat url("/local/images/fridge_open.png")';
if (freezer)
return 'center / contain no-repeat url("/local/images/freezer_open.png")';
return 'center / contain no-repeat url("/local/images/fridge_closed.png")';
]]]
icon:
- color: |
[[[
const fridge = states['input_boolean.fridge']?.state === 'on';
const freezer = states['input_boolean.freezer']?.state === 'on';
return (fridge || freezer) ? 'yellow' : 'rgba(0,192,0,1.0)';
]]]
- background: |
[[[
const fridge = states['input_boolean.fridge']?.state === 'on';
const freezer = states['input_boolean.freezer']?.state === 'on';
return (fridge || freezer) ? 'rgba(255,0,0,1.0)' : 'rgba(255,255,255,1.0)';
]]]
- border-radius: 10px
- animation: |
[[[
const fridge = states['input_boolean.fridge']?.state === 'on';
const freezer = states['input_boolean.freezer']?.state === 'on';
return (fridge || freezer) ? 'blink 1.5s infinite' : 'none';
]]]
- border: |
[[[
const fridge = states['input_boolean.fridge']?.state === 'on';
const freezer = states['input_boolean.freezer']?.state === 'on';
return (fridge || freezer) ? '1px solid black' : 'none';
]]]
- width: 70px
- height: 70px
styles:
card:
- width: 180px
- height: 350px
- border: none
- box-shadow: none
- position: relative
custom_fields:
halo:
- position: absolute
- top: 50%
- left: 50%
- transform: translate(-50%, -50%)
picture:
- position: absolute
- top: 50%
- left: 50%
- transform: translate(-50%, -50%)
Si tu as besoin d’explications, n’hésite pas 