Na razie mam to tak zrobione. Jak jest do 25 to jest zielone i głowa się lekko kołysze “zadowolona”. Jak czerwone albo fioletowe (czyli 125+) to mruga.
- type: custom:button-card
name: Powietrze
entity: sensor.dom_caqi2
tap_action: none
size: 100%
state:
- value: 25
operator: <
styles:
icon:
- animation:
- twister 5s linear infinite
- value: 125
operator: ''
styles:
icon:
- animation:
- blink 5s linear infinite
extra_styles: |
@keyframes twister {
0% {transform: rotatez(0deg);}
25% {transform: rotatez(15deg);}
75% {transform: rotatez(-15deg);}
100% {transform: rotatez(0deg);}
styles:
card:
- padding-top: 15%
- padding-bottom: 5%
- padding-left: 10%
- padding-right: 10%
- height: 100%
grid:
- grid-template-areas: '"n" "i" "stan"'
- grid-template-rows: 20px 1fr 30px
name:
- font-family: Julius Sans One
- font-size: 13px
- color: var(--secondary-text-color)
- align-self: start
- justify-self: start
img_cell:
- justify-content: middle
- align-items: middle
- margin: none
icon:
- color: |
[[[
if (entity.state < 25) return '#20c400';
if (entity.state >= 25 && entity.state < 50) return '#c4bd00';
if (entity.state >= 50 && entity.state < 75) return '#c48600';
if (entity.state >= 75 && entity.state < 87.5) return '#c48600';
if (entity.state >= 87.5 && entity.state < 100) return '#c40000';
if (entity.state >= 100 && entity.state < 125) return '#c40065';
else return '#a000c4';
]]]
custom_fields:
stan:
- align-self: end
- justify-self: center
custom_fields:
stan: |
[[[
return `
<span style="color: var(--text-color-sensor);font-size: 26px;font-weight: bold; font-family: Roboto Flex;">${states['sensor.dom_caqi2'].state}</span><span style="font-family: Comfortaa; color: var(--secondary-text-color);font-size: 12px;"> CAQI</span>
`
]]]