Pour les températures, j’utilise ce principe:
Des icônes et images perso (en vrac): HACF - pCloud
Et ce code:
type: picture-elements
[...]
- type: image
entity: sensor.confort_thermique_salle_de_bain_simmerzone
state_image:
comfortable: local/images/voyant_temperature_green.png
slightly_warm: local/images/voyant_temperature_yellow.png
increasing_discomfort: local/images/voyant_temperature_orangedark.png
extremely_warm: local/images/voyant_temperature_red.png
danger_of_heatstroke: local/images/voyant_temperature_black.png
extreme_danger_of_heatstroke: local/images/voyant_temperature_black.png
circulatory_collapse_imminent: local/images/voyant_temperature_black.png
slightly_cool: local/images/voyant_temperature_verylightblue.png
cool: local/images/voyant_temperature_lightblue.png
unavailable: local/images/null.png
style:
top: 61.01%
left: 31%
width: 20px
opacity: 1
Pour les lumières, j’utilise ce principe:
Une image de fond qui est on ou off pour donner l’effet d’éclairage:
on:
off (une image transparente d’un 1x1 pixel):
Ben oui, on ne la voit pas !
Et le code est le suivant:
type: picture-elements
[...]
- type: image
entity: switch.tulipe
state_image:
'on': local/images/light-png-27734.png
'off': local/images/null.png
state_filter:
'on': brightness(100%) saturate(0.8)
'off': brightness(100%) saturate(0.8)
style:
top: 46%
left: 68%
transform: translate(-50%, -50%) scale(0.6, 0.6)
opacity: 0.8
width: 33%
[...]
- type: state-icon
entity: switch.tulipe
tap_action:
action: toggle
icon: mdi:flower-tulip-outline
style:
top: 46%
left: 68%
background: rgba(255,255,255,0.3)
transform: translate(-50%, -50%) scale(1, 1)
border: 1px solid white
border-radius: 100%
...
A noter qu’on peut jouer sur le hue-rotate pour changer la couleur de l’éclairage en fonction de l’état, exemple:
elements:
- type: image
entity: climate.climatisation_cuisine
state_image:
'on': local/images/light-png-27734.png
cool: local/images/light-png-27734.png
heat: local/images/light-png-27734.png
heat_cool: local/images/light-png-27734.png
dry: local/images/light-png-27734.png
fan_only: local/images/light-png-27734.png
'off': local/images/null.png
state_filter:
'on': brightness(100%) saturate(0.8)
'off': brightness(100%) saturate(0.8)
cool: brightness(150%) saturate(1) hue-rotate(120deg)
heat: brightness(10%) saturate(190) hue-rotate(0deg)
heat_cool: brightness(70%) saturate(40) hue-rotate(300deg)
dry: brightness(100%) saturate(0.8) hue-rotate(90deg)
fan_only: brightness(100%) saturate(0) hue-rotate(160deg)
style:
top: 53.5%
left: 59%
transform: translate(-50%, -50%) scale(1, 1)
opacity: 0.8
width: 33%