Une nouvelle version avec du code beaucoup plus compact :
Le code :
type: custom:button-card
aspect_ratio: 1/1
custom_fields:
fond:
card:
type: custom:button-card
aspect_ratio: 1/2
styles:
card:
- background-color: |
[[[
if (states['input_number.temperature'].state > "0")
return "rgba(255,151,138,1.0)";
else if (states['input_number.temperature'].state <= "0")
return "rgba(127,199,239,1.0)";
]]]
- background-image: |
[[[
if (states['input_number.temperature'].state > "0")
return "url(/local/images/temp_pos.png)";
else if (states['input_number.temperature'].state <= "0")
return "url(/local/images/temp_neg.png)";
]]]
- background-size: cover
- background-position: center
- border-radius: 0%
- border: none
value_bar:
card:
type: custom:button-card
styles:
card:
- background-color: |
[[[
if (states['input_number.temperature'].state > "0")
return "rgba(254,204,197,1.0)";
else if (states['input_number.temperature'].state <= "0")
return "rgba(191,228,247,1.0)";
]]]
- width: 40px
- height: |
[[[
if (states['input_number.temperature'].state > "0")
return Math.round(193 - states['input_number.temperature'].state * 3.45) + "px";
else if (states['input_number.temperature'].state <= "0")
return Math.round(193 + Math.abs(states['input_number.temperature'].state) * 3.45) + "px";
]]]
- border-radius: 0%
- border: none
value_text:
card:
type: custom:button-card
entity: input_number.temperature
show_name: false
show_icon: false
show_state: false
show_label: true
label: |
[[[ return states['input_number.temperature'].state + "°" ]]]
styles:
card:
- background-color: transparent
- border-radius: 0%
- border: none
label:
- font-size: 1.8em
- font-weight: bold
- color: white
thermometre:
card:
type: custom:button-card
aspect_ratio: 1/2
styles:
card:
- background-color: transparent
- background-image: url(/local/images/thermometer.png)
- background-size: cover
- background-position: center
- border-radius: 0%
- border: none
styles:
card: null
custom_fields:
fond:
- position: absolute
- left: 5%
- top: 5%
- width: 45%
- opacity: 1
value_bar:
- position: absolute
- left: 76px
- top: 48px
- opacity: 1
value_text:
- position: absolute
- left: 9.4%
- top: 76%
- width: 100px
- height: 100px
- opacity: 1
thermometre:
- position: absolute
- left: 5%
- top: 5%
- width: 45%
- opacity: 1
Image du thermomètre :
Températures négatives :
Températures positives :
