Il custom button card prevede
uno switch per gestire un punto luce,
un sensore di temperatura,
un sensore di umidità ed
un sensore segnale wifi
Per cambiare il colore delle label ed icone in funzione del valore del relativo sensore, bisogna agire sulle condizioni es.
if (states["sensor.nome_sensore_temperatura"].state > 35) return "red";
if (states["sensor.nome_sensore_temperatura"].state > 30) return "orange";
if (states["sensor.nome_sensore_temperatura"].state > 20) return "black";
if (states["sensor.nome_sensore_temperatura"].state < 20) return "blue";
Notate che ho scritto in ordine decrescente le condizioni, per evitare di mettere per ognuna ">" e "<"
Se non scrivete le condizioni in questo ordine, non funzionano correttamente e dovrete aggiungere per ognuna entrambe le condizioni.
Ovviamente nelle stesse condioni potete variare i colori ed i valori di riferimento
Di seguito il codice da copiare, dovete sostituire i nomi della luce e dei sensori, con i vostri.
I dispositivi usati sono sia sonoff che shelly, tutti con firmware tasmota con abilitazione mqtt
"switch.luce_nome"
"nome_sensore_temperatura"
"nome_sensore_umidita"
"nome_sensore_stato" (attenzione, perchè in questo caso questo campo avrà nella parte finale del nome sempre "_stato")
Nel caso in cui non aveste il sensore di umidità, è sufficiente eliminare entrambe le parti con il tag "umid" contenuti in "custom_fields" (sono due)
Stessa cosa come sopra, nel caso non aveste la temperatura
In questo caso, rimarrebbe solo il sensore del segnale wifi; vedrete che l'icona della luce diventerà più grande rispetto ad eventuali altri bottoni, per riportarla alla stessa dimensione, impostate la proprietà "width" del tag "icon" al 60%
type: 'custom:button-card'
entity: switch.luce_nome
icon: 'mdi:lightbulb'
name: Luce Nome
styles:
card:
- margin-left: 4px
- height: 100px
- width: 117px
- background-color: '#FFFFFF'
- border-radius: 10%
- padding: 10%
- color: black
- font-size: 10px
- text-shadow: 0px 0px 5px white
- text-transform: capitalize
custom_fields:
temp:
- margin-top: 0px
- margin-left: '-10px'
- font-size: 10px
- '--text-color-sensor': >-
[[[
if (states["sensor.nome_sensore_temperatura"].state > 35) return "red";
if (states["sensor.nome_sensore_temperatura"].state > 30) return "orange";
if (states["sensor.nome_sensore_temperatura"].state > 20) return "black";
if (states["sensor.nome_sensore_temperatura"].state < 20) return "blue";
]]]
umid:
- align-self: start
- justify-self: end
- margin-top: 0px
- margin-right: 0px
- font-size: 10px
- '--text-color-sensor': >-
[[[
if (states["sensor.nome_sensore_umidita"].state > 90) return "red";
if (states["sensor.nome_sensore_umidita"].state > 80) return "orange";
if (states["sensor.nome_sensore_umidita"].state > 20) return "black";
if (states["sensor.nome_sensore_umidita"].state < 20) return "blue";
]]]
wifi:
- align-self: start
- margin-top: '-45px'
- margin-right: '-75px'
- font-size: 8px
- '--text-color-sensor': >-
[[[
if (states["sensor.luce_salone_status"].state < 25) return "red";
if (states["sensor.luce_salone_status"].state > 25) return "deepskyblue";
]]]
grid:
- grid-template-areas: '"temp umid" "i i" "n n" "wifi wifi"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content 1fr min-content min-content
icon:
- width: 100%
- margin-top: 0px
- margin-left: 0px
name:
- font-weight: bold
- font-size: 12px
- color: black
- align-self: middle
- margin-bottom: '-5px'
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: var(--text-color-sensor);">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.nome_sensore_temperatura'].state}°C</span></span>`
]]]
umid: |
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 12px; height: 12px; color: var(--text-color-sensor);">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.nome_sensore_umidita'].state}%</span></span>`
]]]
wifi: |
[[[
return `<ha-icon
icon="mdi:wifi"
style="width: 12px; height: 12px; color: var(--text-color-sensor);">
</ha-icon></br><span> <span style="color: var(--text-color-sensor);">${states['sensor.nome_sensore_status'].state}%</span></span>`
]]]
