Re bonjour,
Pour commencer, il va falloir créer une “Entrée” de type Liste déroulante” et y ajouter tes 6 options :
Une fois cette entrée créée, tu vas l’utiliser dans une custom:button-card.
Voici le code de la carte :
type: custom:button-card
name: Speed Clim
show_icon: false
show_label: true
label: |
[[[
const now = new Date();
const date = now.getFullYear() + '-' +
String(now.getMonth() + 1).padStart(2, '0') + '-' +
String(now.getDate()).padStart(2, '0');
const time = String(now.getHours()).padStart(2, '0') + ':' +
String(now.getMinutes()).padStart(2, '0')
return `${date} ${time}`;
]]]triggers_update: - sensor.date_time_iso
tap_action: none
custom_fields:
icone:
card:
type: custom:button-card
styles:
card:
- background-image: url('/local/images/clim.png')
- background-size: cover
- background-position: center
- aspect-ratio: 1/1
- width: 44px
- border: none
- background-color: transparent
selection:
card:
type: custom:button-card
entity: input_select.vitesseclim
show_name: false
show_icon: false
show_state: true
state_display: |
[[[
const s = states['input_select.vitesseclim'].state;
return s.charAt(0).toUpperCase() + s.slice(1);
]]]
styles:
card:
- width: 100px
- border: none
- background-color: transparent
state:
- font-size: 1.2em
- color: orange
tap_action: none
btn_auto:
card:
type: custom:button-card
entity: input_select.vitesseclim
show_icon: false
name: Auto
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vitesseclim
option: auto
styles:
card:
- width: 44px
- height: 29px
- border: 1px solid rgba(147,147,147,1.0)
- border-top-left-radius: 5px
- border-bottom-left-radius: 5px
- border-top-right-radius: 0px
- border-bottom-right-radius: 0px
- background-color: rgba(233,233,233, 1.0)
name:
- color: rgba(112,112,112,1.0)
- font-size: 0.9em
state:
- value: auto
styles:
card:
- background-color: rgb(61,61,61)
- border: 1px solid rgba(47,47,47,1.0)
name:
- color: orange
- font-weight: bold
btn_min:
card:
type: custom:button-card
entity: input_select.vitesseclim
show_icon: false
name: Min
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vitesseclim
option: min
styles:
card:
- width: 44px
- height: 29px
- border: 1px solid rgba(147,147,147,1.0)
- border-radius: 0
- background-color: rgba(233,233,233, 1.0)
name:
- color: rgba(112,112,112,1.0)
- font-size: 0.9em
state:
- value: min
styles:
card:
- background-color: rgb(61,61,61)
- border: 1px solid rgba(47,47,47,1.0)
name:
- color: orange
- font-weight: bold
btn_low:
card:
type: custom:button-card
entity: input_select.vitesseclim
show_icon: false
name: low
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vitesseclim
option: low
styles:
card:
- width: 44px
- height: 29px
- border: 1px solid rgba(147,147,147,1.0)
- border-radius: 0
- background-color: rgba(233,233,233, 1.0)
name:
- color: rgba(112,112,112,1.0)
- font-size: 0.9em
state:
- value: low
styles:
card:
- background-color: rgb(61,61,61)
- border: 1px solid rgba(47,47,47,1.0)
name:
- color: orange
- font-weight: bold
btn_med:
card:
type: custom:button-card
entity: input_select.vitesseclim
show_icon: false
name: Med
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vitesseclim
option: med
styles:
card:
- width: 44px
- height: 29px
- border: 1px solid rgba(147,147,147,1.0)
- border-radius: 0
- background-color: rgba(233,233,233, 1.0)
name:
- color: rgba(112,112,112,1.0)
- font-size: 0.9em
state:
- value: med
styles:
card:
- background-color: rgb(61,61,61)
- border: 1px solid rgba(47,47,47,1.0)
name:
- color: orange
- font-weight: bold
btn_high:
card:
type: custom:button-card
entity: input_select.vitesseclim
show_icon: false
name: High
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vitesseclim
option: high
styles:
card:
- width: 44px
- height: 29px
- border: 1px solid rgba(147,147,147,1.0)
- border-radius: 0
- background-color: rgba(233,233,233, 1.0)
name:
- color: rgba(112,112,112,1.0)
- font-size: 0.9em
state:
- value: high
styles:
card:
- background-color: rgb(61,61,61)
- border: 1px solid rgba(47,47,47,1.0)
name:
- color: orange
- font-weight: bold
btn_max:
card:
type: custom:button-card
entity: input_select.vitesseclim
show_icon: false
name: Max
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vitesseclim
option: max
styles:
card:
- width: 44px
- height: 29px
- border: 1px solid rgba(147,147,147,1.0)
- border-top-left-radius: 0px
- border-bottom-left-radius: 0px
- border-top-right-radius: 5px
- border-bottom-right-radius: 5px
- background-color: rgba(233,233,233, 1.0)
name:
- color: rgba(112,112,112,1.0)
- font-size: 0.9em
state:
- value: max
styles:
card:
- background-color: rgb(61,61,61)
- border: 1px solid rgba(47,47,47,1.0)
name:
- color: orange
- font-weight: bold
styles:
card:
- background-color: rgba(66,66,66,1.0)
- aspect-ratio: 5/1
- cursor: default
name:
- font-weight: bold
- justify-self: start
- align-self: start
- padding-left: 10px
- margin-top: "-18px"
- color: rgba(250,250,250, 0.8)
label:
- font-size: 0.8em
- justify-self: start
- align-self: start
- padding-left: 68px
- margin-top: "-20px"
- color: rgba(250,250,250, 0.8)
custom_fields:
icone:
- position: absolute
- left: 10px
- top: 30px
selection:
- position: absolute
- right: 00px
- top: 0px
btn_auto:
- position: absolute
- left: 70px
- top: 50px
btn_min:
- position: absolute
- left: 114px
- top: 50px
btn_low:
- position: absolute
- left: 158px
- top: 50px
btn_med:
- position: absolute
- left: 202px
- top: 50px
btn_high:
- position: absolute
- left: 246px
- top: 50px
btn_max:
- position: absolute
- left: 290px
- top: 50px
Le code peut être simplifié en utilisant un template pour chacun des boutons.
Il est possible d’ajouter une animation pour faire tourner l’image du ventilateur plus ou moins vite en fonction de la vitesse sélectionnée.
Pour agir sur ton climatiseur depuis la carte, il suffit d’ajouter une automatisation :
La carte :
je ne peux malheureusement pas te mettre une capture d’écran sous forme de .gif maintenant…
Si tu as besoin d’explications sur le code ou autre, n‘hésite pas à demander. Si tu veux que l’image du ventilateur/hélice tourne plus ou moins vite en fonction de la vitesse sélectionnée, demande le moi aussi 
Tu trouveras plus d’informations sur custom:button-card ici : Aller plus loin avec la carte custom:button-card