Non…
J’essaierai de le faire ce soir 
Edit:
Pour obtenir cette carte :
C’est une concaténation (à l’aide de la carte personnelle custom-card Stack-in-Card) de cette carte :
#carte
type: custom:button-card
template: card_1_line_4_actions_select_vacuum_fan_speed
triggers_update:
- sensor.aspiro_fan
variables:
item1_background_entity: sensor.aspiro_fan
item1_background_state: GENTLE
item1_icon: mdi:water
item2_background_entity: sensor.aspiro_fan
item2_background_state: SILENT
item2_icon: mdi:fan
item2_icon_scale: 0.75
item3_background_entity: sensor.aspiro_fan
item3_background_state: STANDARD
item3_icon: mdi:fan
item3_icon_scale: 1.3
item4_background_entity: sensor.aspiro_fan
item4_background_state: TURBO
item4_icon: mdi:fan
item4_icon_scale: 2
#templates:
button_card_templates:
card_1_line_4_actions_select_vacuum_fan_speed:
variables:
items_background_color: white
item1_icon: mdi:numeric-1-circle
item1_icon_scale: 1
item1_background_entity: default
item1_background_state: default
item2_icon: mdi:numeric-2-circle
item2_icon_scale: 1
item2_background_entity: default
item2_background_state: default
item3_icon: mdi:numeric-3-circle
item3_icon_scale: 1
item3_background_entity: default
item3_background_state: default
item4_icon: mdi:numeric-4-circle
item4_icon_scale: 1
item4_background_entity: default
item4_background_state: default
styles:
card:
- border-radius: 20px
- box-shadow: none
- padding: 12px
- background: transparent
grid:
- grid-template-areas: '"4items"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
4items:
card:
template: list_items_1_line_4_actions
type: custom:button-card
custom_fields:
item1:
card:
icon: '[[[ return variables.item1_icon ]]]'
styles:
card:
- background-color: |
[[[
if (states[variables.item1_background_entity].state.toUpperCase() == variables.item1_background_state){
return variables.items_background_color;
}else{
return 'transparent';
}
]]]
icon:
- transform: >-
[[[ return 'scale(' + variables.item1_icon_scale + ')'
]]]
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vacuum_aspiro_speed_set
option: Gentle
type: custom:button-card
template:
- widget_icon_action
item2:
card:
icon: '[[[ return variables.item2_icon ]]]'
styles:
card:
- background-color: |
[[[
if (states[variables.item2_background_entity].state.toUpperCase() == variables.item2_background_state){
return variables.items_background_color;
}else{
return 'transparent';
}
]]]
icon:
- transform: >-
[[[ return 'scale(' + variables.item2_icon_scale + ')'
]]]
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vacuum_aspiro_speed_set
option: Silent
type: custom:button-card
template:
- widget_icon_action
item3:
card:
icon: '[[[ return variables.item3_icon ]]]'
styles:
card:
- background-color: |
[[[
if (states[variables.item3_background_entity].state.toUpperCase() == variables.item3_background_state){
return variables.items_background_color;
}else{
return 'transparent';
}
]]]
icon:
- transform: >-
[[[ return 'scale(' + variables.item3_icon_scale + ')'
]]]
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vacuum_aspiro_speed_set
option: Standard
type: custom:button-card
template:
- widget_icon_action
item4:
card:
icon: '[[[ return variables.item4_icon ]]]'
styles:
card:
- background-color: |
[[[
if (states[variables.item4_background_entity].state.toUpperCase() == variables.item4_background_state){
return variables.items_background_color;
}else{
return 'transparent';
}
]]]
icon:
- transform: >-
[[[ return 'scale(' + variables.item4_icon_scale + ')'
]]]
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vacuum_aspiro_speed_set
option: Turbo
type: custom:button-card
template:
- widget_icon_action
list_items_1_line_4_actions:
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 21px
- pointer-events: none
- background-color: rgba(var(--couleur-gris),0.2
- justify-items: center
grid:
- grid-template-areas: '"item1 item2 item3 item4"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
- justify-items: center
img_cell:
- justify-items: center
widget_icon_action:
show_icon: true
show_name: false
size: 20px
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 50%
- place-self: center
- height: 42px
- width: 42px
- pointer-events: auto
grid:
- grid-template-areas: '"i"'
icon:
- color: rgba(var(--couleur-theme),0.9)
Le modèle (template) card_1_line_4_actions_select_vacuum_fan_speed contient en dur les actions des 4 icones. Le reste est ‹ variabilisé ›.
items_background_color (requis): correspond à la couleur de fond lorsque de l’état deitem[1,2,3,4]_background_entity (requis)correspond à la valeur deitem[1,2,3,4]_background_state (requis, en MAJUSCULE)item[1,2,3,4]_iconcorrespond à l’icone à afficher (optionnel)item1_icon_scalecorrespond à la taille de l’icone (optionnel)
#carte
type: custom:button-card
template: vacuum
variables:
entity: vacuum.xiaomi_vacuum_cleaner
name: Aspiro
et le modèle :
vacuum:
variables:
entity: vacuum.default
name: Default name
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
template: list_items_only_one
type: custom:button-card
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: more-info
template:
- icon_info
- vacuum_info
type: custom:button-card
item2:
card:
template: list_items
type: custom:button-card
custom_fields:
item1:
card:
icon: mdi:pause
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.aspiro_stop
type: custom:button-card
template: widget_icon
item2:
card:
icon: mdi:battery-charging
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.aspiro_charge
type: custom:button-card
template: widget_icon
item3:
card:
icon: mdi:map-marker-path
tap_action:
action: call-service
service: persistent_notification.create
service_data:
message: 2eme ligne - 3eme Bouton
title: Debug Carte Aspirateur
notification_id: '{{ (range(1, 9999)|random) }}'
type: custom:button-card
template: widget_icon
list_items_only_one:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
- column-gap: 7px
vacuum_info:
tap_action:
action: none
icon: mdi:robot-vacuum
label: |-
[[[
if (entity.state.toUpperCase() == 'DOCKED' && entity.attributes.battery_level == '100'){
return 'Sur sa base';
}
else if (entity.attributes.status.toUpperCase() == 'CHARGING'){
return 'En charge';
}
else if (entity.state.toUpperCase() == 'CLEANING'){
return 'Nettoyage en cours';
}
else if (entity.attributes.status.toUpperCase() == 'RETURNING HOME'){
return 'Retour vers sa base';
}
else if (entity.attributes.status.toUpperCase() == 'PAUSED'){
return 'En pause';
}
else{
return '❓ Inconnu ❓' ;
}
]]]
styles:
icon:
- color: |-
[[[
if (entity.state.toUpperCase() == 'DOCKED' && entity.attributes.battery_level == '100'){
return 'rgba(var(--couleur-gris),1)';
}
else if (entity.attributes.status.toUpperCase() == 'CHARGING'){
return 'rgba(var(--couleur-vert),1)';
}
else if (entity.state.toUpperCase() == 'CLEANING'){
return 'rgba(var(--couleur-jaune),1)';
}
else if (entity.attributes.status.toUpperCase() == 'RETURNING HOME'){
return 'rgba(var(--couleur-violet),1)';
}
else if (entity.attributes.status.toUpperCase() == 'PAUSED'){
return 'rgba(var(--couleur-bleu),1)';
}
else{
return 'rgba(var(--couleur-gris),1)';
}
]]]
img_cell:
- background-color: |-
[[[
if (entity.state.toUpperCase() == 'DOCKED' && entity.attributes.battery_level == '100'){
return 'rgba(var(--couleur-gris),0.2)';
}
else if (entity.attributes.status.toUpperCase() == 'CHARGING'){
return 'rgba(var(--couleur-vert),0.2)';
}
else if (entity.state.toUpperCase() == 'CLEANING'){
return 'rgba(var(--couleur-jaune),0.2)';
}
else if (entity.attributes.status.toUpperCase() == 'RETURNING HOME'){
return 'rgba(var(--couleur-violet),0.2)';
}
else if (entity.attributes.status.toUpperCase() == 'PAUSED'){
return 'rgba(var(--couleur-bleu),0.2)';
}
else{
return 'rgba(var(--couleur-gris),0.2)';
}
]]]
Ce qui donne donc en concaténant les deux :
#carte
type: custom:stack-in-card
mode: vertical
style: |
ha-card{
border-radius: 21px;
}
cards:
- type: custom:button-card
template: vacuum
variables:
entity: vacuum.xiaomi_vacuum_cleaner
name: Aspiro
- type: custom:button-card
template: card_1_line_4_actions_select_vacuum_fan_speed
triggers_update:
- sensor.aspiro_fan
variables:
item1_background_entity: sensor.aspiro_fan
item1_background_state: GENTLE
item1_icon: mdi:water
item2_background_entity: sensor.aspiro_fan
item2_background_state: SILENT
item2_icon: mdi:fan
item2_icon_scale: 0.75
item3_background_entity: sensor.aspiro_fan
item3_background_state: STANDARD
item3_icon: mdi:fan
item3_icon_scale: 1.3
item4_background_entity: sensor.aspiro_fan
item4_background_state: TURBO
item4_icon: mdi:fan
item4_icon_scale: 2
Pour l’utilisation de l’aspirateur, j’ai un input_select contenant les vitesses d’aspiration et une automatisation qui sur changement, envoie la consigne.
J’ai des scripts pour chaque action de l’aspirateur (start, pause, retour , nettoyage de zone1, 2, etc.)