Passend zum Artikel (Blinkendes Badge-Icon) hier ein Beispiel für eine custom:bagde-card, die „normalerweise“ aus ist und nur bei einem gewissen Zustand „blinken“ soll.
Dieser Code unterscheidet sich im Prinzip nur ganz knapp von der „Ursprungsversion“.
Besondere Aufmerksamkeit schenken wir hier den Zeilen ab „display:…..“
{% if is_state('binary_sensor.all_outdoor_lights', 'on') %}
Im Vergleich zu dem Teil in Blinkendes Badge-Icon, fragen wir hier nur den Zustand „on“ ab…
configuration.yaml
1type: custom:badge-card
2badges:
3 - entity: binary_sensor.all_outdoor_lights
4 style: |
5 @keyframes blinker { 50% { opacity: 0; } }
6 :host {
7 --label-badge-text-color: black;
8 --label-badge-red: {% if states(config.entity)|int < 30 %}
9 red
10 {% elif states(config.entity)|int < 70 %}
11 yellow
12 {% elif states(config.entity)|int <= 100 %}
13 green
14 {% endif %};
15 --label-badge-background-color: {% if states(config.entity)|int < 30 %}
16 red
17 {% elif states(config.entity)|int < 70 %}
18 yellow
19 {% elif states(config.entity)|int <= 100 %}
20 green
21 {% endif %};
22 animation: blinker 1s linear infinite;
23 display:
24 {% if is_state('binary_sensor.all_outdoor_lights', 'on') %}
25 none;
26 {% endif %}
27 --ha-label-badge-label-color: black;
28 }