voici le code complet de la carte que tu m’a faite :
type: custom:button-card
name: Pipe 1
custom_fields:
zone1:
card:
type: custom:button-card
name: Legume1
custom_fields:
zone1bouton1:
card:
type: custom:button-card
icon: mdi:power-on
show_icon: true
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 50%
- border: 1px solid rgba(52,52,52,1.0)
- width: 50px
- height: 50px
icon:
- color: rgba(111,111,111,1.0)
- width: 60%
tap_action:
action: call-service
service: script.relai_1_on
hold_action:
action: none
zone1bouton2:
card:
type: custom:button-card
icon: mdi:power-off
show_icon: true
styles:
card:
- background-color: rgba(17,17,17,1.0)
- border-radius: 50%
- border: 1px solid rgba(52,52,52,1.0)
- width: 50px
- height: 50px
icon:
- color: rgba(244,67,54,1.0)
- width: 60%
tap_action:
action: call-service
service: script.relai_1_off
hold_action:
action: none
zone1bouton3:
card:
type: custom:button-card
icon: mdi:water-sync
show_icon: true
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 50%
- border: 1px solid rgba(52,52,52,1.0)
- width: 50px
- height: 50px
icon:
- color: rgba(111,111,111,1.0)
- width: 60%
tap_action:
action: call-service
service: script.relai_1_auto
hold_action:
action: none
zone1bouton4:
card:
type: custom:button-card
entity: input_number.arrosage_p1_v1
layout: icon_name_state2nd
name: Durée
icon: mdi:ray-vertex
show_icon: true
show_state: true
custom_fields:
fond_icone:
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- background-color: rgba(30,53,72,1.0)
- width: 54px
- height: 54px
- border-radius: 50%
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 10px
- border: 1px solid rgba(52,52,52,1.0)
- width: 160px
- height: 70px
name:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 1.0em
state:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 0.8em
- padding-top: 7px
icon:
- color: rgba(33,150,243,1.0)
- border-radius: 50%
- z-index: 1
custom_fields:
fond_icone:
- position: absolute
- left: 5px
- top: 7px
- z-index: 0
tap_action:
action: more-info
hold_action:
action: none
zone1bouton5:
card:
type: custom:button-card
entity: timer.minuteur
layout: icon_name_state2nd
name: minuteur
icon: mdi:timer-outline
show_icon: true
show_state: true
custom_fields:
fond_icone:
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- background-color: rgba(30,53,72,1.0)
- width: 54px
- height: 54px
- border-radius: 50%
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 10px
- border: 1px solid rgba(52,52,52,1.0)
- width: 160px
- height: 70px
name:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 1.0em
state:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 0.8em
- padding-top: 7px
icon:
- color: rgba(33,150,243,1.0)
- border-radius: 50%
- z-index: 1
custom_fields:
fond_icone:
- position: absolute
- left: 5px
- top: 7px
- z-index: 0
tap_action:
action: more-info
hold_action:
action: none
styles:
name:
- font-size: 0.9em
- justify-self: start
- align-self: start
- padding-left: 10px
- color: rgba(255,255,255,1.0)
card:
- background-color: rgba(17,17,17,1.0)
- box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
- border: 1px rgba(211,211,211,1.0) outset
- width: 340px
- height: 170px
custom_fields:
zone1bouton1:
- position: absolute
- top: 38px
- left: 77px
zone1bouton2:
- position: absolute
- top: 38px
- left: 142px
zone1bouton3:
- position: absolute
- top: 38px
- left: 207px
zone1bouton4:
- position: absolute
- top: 95px
- left: 5px
zone1bouton5:
- position: absolute
- top: 95px
- left: 170px
tap_action:
action: none
hold_action:
action: none
zone2:
card:
type: custom:button-card
name: Legume2
custom_fields:
zone2bouton1:
card:
type: custom:button-card
icon: mdi:power-on
show_icon: true
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 50%
- border: 1px solid rgba(52,52,52,1.0)
- width: 50px
- height: 50px
icon:
- color: rgba(111,111,111,1.0)
- width: 60%
tap_action:
action: none
hold_action:
action: none
zone2bouton2:
card:
type: custom:button-card
icon: mdi:power-off
show_icon: true
styles:
card:
- background-color: rgba(17,17,17,1.0)
- border-radius: 50%
- border: 1px solid rgba(52,52,52,1.0)
- width: 50px
- height: 50px
icon:
- color: rgba(244,67,54,1.0)
- width: 60%
tap_action:
action: none
hold_action:
action: none
zone2bouton3:
card:
type: custom:button-card
icon: mdi:water-sync
show_icon: true
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 50%
- border: 1px solid rgba(52,52,52,1.0)
- width: 50px
- height: 50px
icon:
- color: rgba(111,111,111,1.0)
- width: 60%
tap_action:
action: none
hold_action:
action: none
zone2bouton4:
card:
type: custom:button-card
layout: icon_name_state2nd
name: Durée
label: 0 minutes
icon: mdi:ray-vertex
show_icon: true
show_label: true
custom_fields:
fond_icone:
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- background-color: rgba(30,53,72,1.0)
- width: 54px
- height: 54px
- border-radius: 50%
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 10px
- border: 1px solid rgba(52,52,52,1.0)
- width: 160px
- height: 70px
name:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 1.0em
label:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 0.8em
- padding-top: 7px
icon:
- color: rgba(33,150,243,1.0)
- border-radius: 50%
- z-index: 1
custom_fields:
fond_icone:
- position: absolute
- left: 5px
- top: 7px
- z-index: 0
tap_action:
action: none
hold_action:
action: none
zone2bouton5:
card:
type: custom:button-card
layout: icon_name_state2nd
name: minuteur
label: inactif
icon: mdi:timer-outline
show_icon: true
show_label: true
custom_fields:
fond_icone:
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- background-color: rgba(30,53,72,1.0)
- width: 54px
- height: 54px
- border-radius: 50%
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 10px
- border: 1px solid rgba(52,52,52,1.0)
- width: 160px
- height: 70px
name:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 1.0em
label:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 0.8em
- padding-top: 7px
icon:
- color: rgba(33,150,243,1.0)
- border-radius: 50%
- z-index: 1
custom_fields:
fond_icone:
- position: absolute
- left: 5px
- top: 7px
- z-index: 0
tap_action:
action: none
hold_action:
action: none
styles:
name:
- font-size: 0.9em
- justify-self: start
- align-self: start
- padding-left: 10px
- color: rgba(255,255,255,1.0)
card:
- background-color: rgba(17,17,17,1.0)
- box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
- border: 1px rgba(211,211,211,1.0) outset
- width: 340px
- height: 170px
custom_fields:
zone2bouton1:
- position: absolute
- top: 38px
- left: 77px
zone2bouton2:
- position: absolute
- top: 38px
- left: 142px
zone2bouton3:
- position: absolute
- top: 38px
- left: 207px
zone2bouton4:
- position: absolute
- top: 95px
- left: 5px
zone2bouton5:
- position: absolute
- top: 95px
- left: 170px
tap_action:
action: none
hold_action:
action: none
zone3:
card:
type: custom:button-card
name: Legume3
custom_fields:
zone3bouton1:
card:
type: custom:button-card
icon: mdi:power-on
show_icon: true
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 50%
- border: 1px solid rgba(52,52,52,1.0)
- width: 50px
- height: 50px
icon:
- color: rgba(111,111,111,1.0)
- width: 60%
tap_action:
action: call-service
service: script.relai_1_on
hold_action:
action: none
zone3bouton2:
card:
type: custom:button-card
icon: mdi:power-off
show_icon: true
styles:
card:
- background-color: rgba(17,17,17,1.0)
- border-radius: 50%
- border: 1px solid rgba(52,52,52,1.0)
- width: 50px
- height: 50px
icon:
- color: rgba(244,67,54,1.0)
- width: 60%
tap_action:
action: call-service
service: script.relai_1_off
hold_action:
action: none
zone3bouton3:
card:
type: custom:button-card
icon: mdi:water-sync
show_icon: true
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 50%
- border: 1px solid rgba(52,52,52,1.0)
- width: 50px
- height: 50px
icon:
- color: rgba(111,111,111,1.0)
- width: 60%
tap_action:
action: call-service
service: script.relai_1_auto
hold_action:
action: none
zone3bouton4:
card:
type: custom:button-card
entity: input_number.arrosage_p1_v1
layout: icon_name_state2nd
name: Durée
icon: mdi:ray-vertex
show_icon: true
show_state: true
custom_fields:
fond_icone:
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- background-color: rgba(30,53,72,1.0)
- width: 54px
- height: 54px
- border-radius: 50%
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 10px
- border: 1px solid rgba(52,52,52,1.0)
- width: 160px
- height: 70px
name:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 1.0em
state:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 0.8em
- padding-top: 7px
icon:
- color: rgba(33,150,243,1.0)
- border-radius: 50%
- z-index: 1
custom_fields:
fond_icone:
- position: absolute
- left: 5px
- top: 7px
- z-index: 0
tap_action:
action: more-info
hold_action:
action: none
zone3bouton5:
card:
type: custom:button-card
entity: timer.minuteur
layout: icon_name_state2nd
name: minuteur
icon: mdi:timer-outline
show_icon: true
show_state: true
custom_fields:
fond_icone:
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- background-color: rgba(30,53,72,1.0)
- width: 54px
- height: 54px
- border-radius: 50%
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 10px
- border: 1px solid rgba(52,52,52,1.0)
- width: 160px
- height: 70px
name:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 1.0em
state:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 0.8em
- padding-top: 7px
icon:
- color: rgba(33,150,243,1.0)
- border-radius: 50%
- z-index: 1
custom_fields:
fond_icone:
- position: absolute
- left: 5px
- top: 7px
- z-index: 0
tap_action:
action: more-info
hold_action:
action: none
styles:
name:
- font-size: 0.9em
- justify-self: start
- align-self: start
- padding-left: 10px
- color: rgba(255,255,255,1.0)
card:
- background-color: rgba(17,17,17,1.0)
- box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
- border: 1px rgba(211,211,211,1.0) outset
- width: 340px
- height: 170px
custom_fields:
zone3bouton1:
- position: absolute
- top: 38px
- left: 77px
zone3bouton2:
- position: absolute
- top: 38px
- left: 142px
zone3bouton3:
- position: absolute
- top: 38px
- left: 207px
zone3bouton4:
- position: absolute
- top: 95px
- left: 5px
zone3bouton5:
- position: absolute
- top: 95px
- left: 170px
tap_action:
action: none
hold_action:
action: none
zone4:
card:
type: custom:button-card
name: Legume4
custom_fields:
zone4bouton1:
card:
type: custom:button-card
icon: mdi:power-on
show_icon: true
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 50%
- border: 1px solid rgba(52,52,52,1.0)
- width: 50px
- height: 50px
icon:
- color: rgba(111,111,111,1.0)
- width: 60%
tap_action:
action: call-service
service: script.relai_1_on
hold_action:
action: none
zone4bouton2:
card:
type: custom:button-card
icon: mdi:power-off
show_icon: true
styles:
card:
- background-color: rgba(17,17,17,1.0)
- border-radius: 50%
- border: 1px solid rgba(52,52,52,1.0)
- width: 50px
- height: 50px
icon:
- color: rgba(244,67,54,1.0)
- width: 60%
tap_action:
action: call-service
service: script.relai_1_off
hold_action:
action: none
zone4bouton3:
card:
type: custom:button-card
icon: mdi:water-sync
show_icon: true
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 50%
- border: 1px solid rgba(52,52,52,1.0)
- width: 50px
- height: 50px
icon:
- color: rgba(111,111,111,1.0)
- width: 60%
tap_action:
action: call-service
service: script.relai_1_auto
hold_action:
action: none
zone4bouton4:
card:
type: custom:button-card
entity: input_number.arrosage_p1_v1
layout: icon_name_state2nd
name: Durée
icon: mdi:ray-vertex
show_icon: true
show_state: true
custom_fields:
fond_icone:
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- background-color: rgba(30,53,72,1.0)
- width: 54px
- height: 54px
- border-radius: 50%
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 10px
- border: 1px solid rgba(52,52,52,1.0)
- width: 160px
- height: 70px
name:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 1.0em
state:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 0.8em
- padding-top: 7px
icon:
- color: rgba(33,150,243,1.0)
- border-radius: 50%
- z-index: 1
custom_fields:
fond_icone:
- position: absolute
- left: 5px
- top: 7px
- z-index: 0
tap_action:
action: more-info
hold_action:
action: none
zone4bouton5:
card:
type: custom:button-card
entity: timer.minuteur
layout: icon_name_state2nd
name: minuteur
icon: mdi:timer-outline
show_icon: true
show_state: true
custom_fields:
fond_icone:
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- background-color: rgba(30,53,72,1.0)
- width: 54px
- height: 54px
- border-radius: 50%
styles:
card:
- background-color: rgba(32,32,32,1.0)
- border-radius: 10px
- border: 1px solid rgba(52,52,52,1.0)
- width: 160px
- height: 70px
name:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 1.0em
state:
- color: rgba(255,255,255,0.8)
- justify-self: start
- font-size: 0.8em
- padding-top: 7px
icon:
- color: rgba(33,150,243,1.0)
- border-radius: 50%
- z-index: 1
custom_fields:
fond_icone:
- position: absolute
- left: 5px
- top: 7px
- z-index: 0
tap_action:
action: more-info
hold_action:
action: none
styles:
name:
- font-size: 0.9em
- justify-self: start
- align-self: start
- padding-left: 10px
- color: rgba(255,255,255,1.0)
card:
- background-color: rgba(17,17,17,1.0)
- box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
- border: 1px rgba(211,211,211,1.0) outset
- width: 340px
- height: 170px
custom_fields:
zone4bouton1:
- position: absolute
- top: 38px
- left: 77px
zone4bouton2:
- position: absolute
- top: 38px
- left: 142px
zone4bouton3:
- position: absolute
- top: 38px
- left: 207px
zone4bouton4:
- position: absolute
- top: 95px
- left: 5px
zone4bouton5:
- position: absolute
- top: 95px
- left: 170px
tap_action:
action: none
hold_action:
action: none
tap_action:
action: none
hold_action:
action: none
styles:
card:
- box-shadow: 0px 0px 5px 1px
- background-color: rgba(32,32,32,0.9)
- border: 1px rgba(211,211,211,1.0) outset
- width: 360px
- height: 770px
name:
- font-size: 1.4em
- color: rgba(255,255,255,1.0)
- align-self: start
- justify-self: start
- padding-top: 0px
- padding-left: 20px
custom_fields:
zone1:
- position: absolute
- top: 50px
- left: 10px
zone2:
- position: absolute
- top: 230px
- left: 10px
zone3:
- position: absolute
- top: 410px
- left: 10px
zone4:
- position: absolute
- top: 590px
- left: 10px
et le code de ma carte unitaire inspiré et aidé sur ce post :
tile-card-pour-input-select
type: custom:mod-card
style: |
ha-card {
box-shadow: 0px 0px 2px 1px; #bordure relief carte principale
}
card:
square: false
type: grid
cards:
- type: custom:auto-entities
show_empty: false
card:
type: custom:mushroom-chips-card
view_layout:
grid-area: chips
alignment: center
card_param: chips
filter:
template: >
{% set ns = namespace(select=[],entity="input_select.relai_1") %} {%
for opt in state_attr(ns.entity, 'options') %}
{% set icon = iif(opt== 'on', 'mdi:power-on', icon) %}
{% set icon = iif(opt== 'off', 'mdi:power-off', icon) %}
{% set icon = iif(opt== 'auto', 'mdi:water-sync', icon) %}
{% set ns.select = ns.select + [
{
"type": "template",
"icon": icon,
"entity": ns.entity,
"icon_color": '{{ iif(is_state("input_select.relai_1", "' ~ opt ~ '"), "red", "disabled") }}',
"tap_action": {
"action": "call-service",
"service": "input_select.select_option",
"service_data": {
"entity_id": ns.entity,
"option": opt
}
},
"card_mod": {
"style": 'ha-card {
{% if is_state( "' ~ ns.entity ~ '" , "' ~ opt ~ '" ) %}
--chip-background: rgba(var(--mush-rgb-state-entity), 0.3);
{% else %}
--chip-background: rgba(var(--rgb-grey), 0.1);
{% endif %}
}'
}
}
] %}
{% endfor %} {{ ns.select }}
- square: false
type: grid
cards:
- type: custom:mushroom-entity-card
entity: input_number.arrosage_p1_v1
layout: horizontal
- type: custom:mushroom-entity-card
entity: timer.minuteur
state_color: true
columns: 2
columns: 1
title: Tomates1