Le but est effectivement que tu comprennes le fonctionnement (d’où le fait que je mettes le code au différentes modifications : ainsi par comparaison, tu peux voir ce que donne les modifications)
Le code final (?) :
type: custom:button-card
name: Poêle à granulés
custom_fields:
etat_poele:
card:
type: custom:button-card
name: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return 'Off';
else
return 'On';
]]]
show_icon: false
show_name: true
show_state: false
styles:
card:
- width: 150px
- height: 65px
- background: none
- border: none
- cursor: default
name:
- font-size: 24px
- font-weight: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'bold';
else
return 'regular';
]]]
- color: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'rgba(128,0,0,1.0)';
else
return 'rgba(0,128,0,1.0)';
]]]
bouton_moins:
card:
type: custom:button-card
icon: mdi:minus
show_icon: true
styles:
card:
- width: 90px
- height: 65px
- background-color: |
[[[
if (states['input_number.essai_temp_consigne'].state <= '14.0')
return 'rgba(54,54,54,0.4)';
else
return 'rgba(54,54,54,1.0)';
]]]
- border: |
[[[
if (states['input_number.essai_temp_consigne'].state <= '14.0')
return '2px solid rgba(60,60,60,0.2)';
else
return '2px solid rgba(60,60,60,1.0)';
]]]
- cursor: |
[[[
if (states['input_number.essai_temp_consigne'].state <= '14.0')
return 'default';
else
return 'hand';
]]]
- "--mdc-ripple-press-opacity": 0.12
icon:
- color: |
[[[
if (states['input_number.essai_temp_consigne'].state <= '14.0')
return 'dimgray';
else
return 'white';
]]]
- width: 45%
tap_action:
action: |
[[[
if (states['input_number.essai_temp_consigne'].state > '14.0')
return 'call-service';
else
return 'none';
]]]
service: script.decrement_essai_temp_consigne
temp_consigne:
card:
type: custom:button-card
entity: input_number.essai_temp_consigne
show_icon: false
show_name: false
show_state: true
styles:
card:
- width: 150px
- height: 65px
- background-color: rgba(54,54,54,1.0)
- border: 2px solid rgba(60,60,60,1.0)
- cursor: default
state:
- color: white
- font-size: 48px
bouton_plus:
card:
type: custom:button-card
icon: mdi:plus
show_icon: true
styles:
card:
- width: 90px
- height: 65px
- background-color: |
[[[
if (states['input_number.essai_temp_consigne'].state >= '32.0')
return 'rgba(54,54,54,0.4)';
else
return 'rgba(54,54,54,1.0)';
]]]
- border: |
[[[
if (states['input_number.essai_temp_consigne'].state >= '32.0')
return '2px solid rgba(60,60,60,0.4)';
else
return '2px solid rgba(60,60,60,1.0)';
]]]
- cursor: |
[[[
if (states['input_number.essai_temp_consigne'].state >= '32.0')
return 'default';
else
return 'hand';
]]]
- "--mdc-ripple-press-opacity": 0.12
icon:
- color: |
[[[
if (states['input_number.essai_temp_consigne'].state >= '32.0')
return 'dimgray';
else
return 'white';
]]]
- width: 45%
tap_action:
action: |
[[[
if (states['input_number.essai_temp_consigne'].state < '32.0')
return 'call-service';
else
return 'none';
]]]
service: script.increment_temp_consigne
temperature:
card:
type: custom:button-card
entity: sensor.echo_salon_temperature
show_icon: true
show_name: false
show_state: true
layout: icon_state
styles:
card:
- width: 150px
- height: 65px
- background: none
- border: none
- cursor: default
state:
- color: white
- font-size: 24px
- padding-right: 10px
icon:
- color: white
- width: 50%
- margin-left: "-10px"
bouton_allumer:
card:
type: custom:button-card
entity: input_boolean.essai_poele
icon: mdi:fire
name: Allumer
show_icon: true
layout: icon_name
styles:
card:
- width: 162px
- height: 60px
- background-color: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'rgba(54,54,54,0.4)';
else
return 'rgba(158,158,158,1.0)';
]]]
- border: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return '2px solid rgba(60,60,60,0.2)';
else
return '2px solid rgba(164,164,164,1.0)';
]]]
- cursor: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'default';
else
return 'hand';
]]]
- "--mdc-ripple-press-opacity": 0.12
name:
- font-size: 24px
- color: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'dimgray';
else
return 'white';
]]]
- padding-right: 30px
icon:
- color: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'dimgray';
else
return 'white';
]]]
- width: 60%
tap_action:
action: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return 'call-service';
else
return 'none';
]]]
service: input_boolean.turn_on
service_data:
entity_id: input_boolean.essai_poele
bouton_eteindre:
card:
type: custom:button-card
icon: mdi:power
name: Eteindre
show_icon: true
layout: icon_name
styles:
card:
- width: 162px
- height: 60px
- background-color: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return 'rgba(54,54,54,0.4)';
else
return 'rgba(158,158,158,1.0)';
]]]
- border: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return '2px solid rgba(60,60,60,0.2)';
else
return '2px solid rgba(160,160,160,1.0)';
]]]
- cursor: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return 'default';
else
return 'hand';
]]]
- "--mdc-ripple-press-opacity": 0.12
name:
- font-size: 24px
- color: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return 'dimgray';
else
return 'white';
]]]
- padding-right: 20px
icon:
- color: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return 'dimgray';
else
return 'white';
]]]
- padding-left: 10px
- width: 60%
tap_action:
action: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'call-service';
else
return 'none';
]]]
service: input_boolean.turn_off
service_data:
entity_id: input_boolean.essai_poele
niveau_cuve:
card:
type: custom:button-card
show_name: true
show_icon: false
show_state: false
name: "Cuve :"
custom_fields:
fond_barre:
card:
type: custom:button-card
styles:
card:
- width: 200px
- height: 30px
- border-radius: 15px
- background-color: |
[[[
const niveau = parseFloat(states['input_number.essai_niveau_cuve']?.state || 0);
if (niveau <= 30) {
return 'rgba(255,0,0,0.2)';
} else if (niveau >= 31 && niveau <= 49) {
return 'rgba(255,165,0,0.2)';
} else {
return 'rgba(0,128,0,0.2)';
}
]]]
niveau_remplissage:
card:
type: custom:button-card
styles:
card:
- width: |
[[[
const niveau = parseFloat(states['input_number.essai_niveau_cuve']?.state || 0);
return `${niveau * 2}px`
]]]
- height: 30px
- border-radius: 15px
- background-color: |
[[[
const niveau = parseFloat(states['input_number.essai_niveau_cuve']?.state || 0);
if (niveau <= 30) {
return 'rgba(255,0,0,1.0)';
} else if (niveau >= 31 && niveau <= 49) {
return 'rgba(255,165,0,1.0)';
} else {
return 'rgba(0,128,0,1.0)';
}
]]]
styles:
card:
- width: 260px
- height: 30px
- background: none
- border: none
- border-radius: 0
- padding: 0
- display: flex
- align-items: center
- cursor: default
- "--mdc-ripple-press-opacity": 0
name:
- font-size: 16px
- color: white
- position: absolute
- top: 5px
- left: 0px
tap_action:
action: none
bouton_puissance:
card:
type: custom:button-card
entity: input_number.essai_puissance_poele
icon: mdi:fire
show_icon: true
show_name: false
show_state: true
layout: icon_state
styles:
card:
- width: 90px
- height: 50px
- background-color: rgba(22,22,22,1.0)
- border: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return '1px solid rgba(40,40,40,1.0)';
else
return 'none';
]]]
- border-radius: 25px
- "--mdc-ripple-press-opacity": 0.12
state:
- font-size: 20px
- font-weight: bold
- color: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'white';
else
return 'dimgray';
]]]
icon:
- color: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'white';
else
return 'dimgray';
]]]
- width: 80%
- padding-left: 20px
tap_action:
action: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'call-service';
else
return 'none';
]]]
service: script.increment_puissance_poele
styles:
card:
- width: 480px
- height: 430px
- background-color: rgba(30,30,30,1.0)
- cursor: default
- "--mdc-ripple-press-opacity": 0
name:
- font-size: 20px
- color: white
- position: absolute
- top: 20px
custom_fields:
etat_poele:
- position: absolute
- top: 70px
- left: 164px
bouton_moins:
- position: absolute
- top: 135px
- left: 65px
temp_consigne:
- position: absolute
- top: 135px
- left: 164px
bouton_plus:
- position: absolute
- top: 135px
- right: 65px
temperature:
- position: absolute
- top: 200px
- left: 164px
bouton_allumer:
- position: absolute
- top: 270px
- left: 85px
- z-index: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return '0';
else
return '2';
]]]
bouton_eteindre:
- position: absolute
- top: 270px
- right: 85px
- z-index: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return '0';
else
return '2';
]]]
niveau_cuve:
- position: absolute
- top: 370px
- left: 30px
bouton_puissance:
- position: absolute
- top: 360px
- right: 30px
Là tu as les modifications concernant le bouton « puissance » (il change d’aspect et devient cliquable ou pas en fonction de l’état du poêle) et le changement de couleur de la barre de niveau de remplissage (et la couleur du support de la barre) en fonction de la valeur du niveau de remplissage.
Poêle allumé avec 27% de remplissage :
Poêle éteint avec 46% de remplissage :
