Tout ce que tu veux faire est facilement faisable avec une carte custom:button-card :
type: custom:button-card
aspect_ratio: 4/3
custom_fields:
fond:
card:
type: custom:button-card
styles:
card:
- background-color: rgba(255,255,255,0.0)
- border: none
tap_action:
action: none
hold_action:
action: none
ncarte:
card:
type: custom:button-card
name: Maison
styles:
name:
- font-size: 1.4em
- font-weight: bold
- justify-self: start
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.0)
- border: none
tap_action:
action: none
hold_action:
action: none
ngarage:
card:
type: custom:button-card
name: 'Garage :'
aspect_ratio: 10/0.9
styles:
name:
- font-size: 1.0em
- font-weight: bold
- justify-self: start
- padding-left: 4%
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.5)
tap_action:
action: none
hold_action:
action: none
garage:
card:
type: custom:button-card
aspect_ratio: 10/0.9
show_icon: false
name: |
[[[
if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'off' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on')
return "(fermé)";
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'off')
return "(ouvert)";
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'on')
return "(en mouvement)";
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'off')
return "(partiellement ouvert)";
]]]
styles:
name:
- font-size: |
[[[
if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'off' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on')
return '1.0em';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'off')
return '1.0em';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'on')
return '0.9em';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'off')
return '0.8em';
]]]
- font-weight: bold
- align-self: end
- color: |
[[[
if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'off' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on')
return 'rgba(0,128,0,0.7)';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'off')
return 'rgba(255,0,0,0.7)';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'on')
return 'rgba(255,140,0,0.7)';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'off')
return 'rgba(255,140,0,0.7)';
]]]
- animation: |
[[[
if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'off')
return 'blink 2s ease infinite';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'on')
return 'blink 2s ease infinite';
]]]
card:
- background-color: rgba(255,255,255,0.0)
- border: none
- padding-left: |
[[[
if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'off' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on')
return '20%';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'off')
return '20%';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'on')
return '25%';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'off')
return '30%';
]]]
- padding-top: |
[[[
if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'off' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on')
return '8.2%';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'off')
return '8%';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'on')
return '8%';
else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'off')
return '7.8%';
]]]
tap_action:
action: none
hold_action:
action: none
nportail:
card:
type: custom:button-card
name: 'Portail :'
aspect_ratio: 10/0.9
styles:
name:
- font-size: 1.0em
- font-weight: bold
- justify-self: start
- padding-left: 4%
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.7)
tap_action:
action: none
hold_action:
action: none
portail:
card:
type: custom:button-card
aspect_ratio: 10/0.9
show_icon: false
name: (fermé)
styles:
name:
- font-size: 1.0em ]]]
- font-weight: bold
- align-self: end
- color: rgba(0,128,0,0.7)
- animation: ''
card:
- background-color: rgba(255,255,255,0.0)
- border: none
- padding-left: 20%
- padding-top: 8.5%
tap_action:
action: none
hold_action:
action: none
nlampe:
card:
type: custom:button-card
name: Lampe extérieure
styles:
name:
- font-size: 0.7em
- font-weight: bold
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.0)
- border: none
tap_action:
action: none
hold_action:
action: none
lampe:
card:
type: custom:button-card
size: 75%
entity: light.entree_lampe_exterieure_lumiere
icon: phu:wall-fuzo
show_name: false
state:
- value: 'off'
styles:
icon:
- color: dimgray
card:
- box-shadow: none
- border-radius: 50%
- background-color: rgba(242,242,242,0.7)
- width: 48px
- height: 48px
- value: 'on'
styles:
icon:
- color: rgb(255,255,128)
card:
- border-radius: 50%
- box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
- background-color: rgba(0,0,0,0.5)
- width: 48px
- height: 48px
nyann:
card:
type: custom:button-card
name: Yannick
styles:
name:
- font-size: 0.7em
- font-weight: bold
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.0)
- border: none
tap_action:
action: none
hold_action:
action: none
yann:
card:
type: custom:button-card
aspect_ratio: 1/1
size: 100%
entity: device_tracker.yannick_lecorvaisier
show_icon: false
show_entity_picture: true
show_name: false
styles:
card:
- border-radius: 50%
- background-color: rgba(255,255,255,0.7)
- width: 48px
- height: 48px
state:
- value: home
entity_picture: /local/images/yannick_home.png
styles:
entity_picture:
- opacity: 0.8
- value: not_home
entity_picture: /local/images/yannick_out.png
styles:
entity_picture:
- opacity: 0.8
tap_action:
action: none
hold_action:
action: none
nvero:
card:
type: custom:button-card
name: Véronique
styles:
name:
- font-size: 0.7em
- font-weight: bold
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.0)
- border: none
tap_action:
action: none
hold_action:
action: none
vero:
card:
type: custom:button-card
aspect_ratio: 1/1
size: 90%
entity: device_tracker.veronique_lecorvaisier
show_icon: false
show_entity_picture: true
show_name: false
styles:
card:
- border-radius: 50%
- background-color: rgba(255,255,255,0.7)
- width: 48px
- height: 48px
state:
- value: home
entity_picture: /local/images/vero_home.png
styles:
entity_picture:
- opacity: 0.8
- value: not_home
entity_picture: /local/images/vero_out.png
styles:
entity_picture:
- opacity: 0.8
tap_action:
action: none
hold_action:
action: none
garageup:
card:
type: custom:button-card
show_name: false
styles:
card:
- background-color: rgba(255,255,255,0.0)
- background-image: url(/local/images/icones/garage_ouvrir.png)
- background-size: cover
- border: none
- height: 48px
- width: 48px
tap_action:
action: call-service
service: script.garage_porte_du_garage_ouvrir
garagestop:
card:
type: custom:button-card
show_name: false
styles:
card:
- background-color: rgba(255,255,255,0.0)
- background-image: url(/local/images/icones/garage_stopper.png)
- background-size: cover
- border: none
- height: 48px
- width: 48px
tap_action:
action: call-service
service: script.garage_porte_du_garage_arreter
garagedown:
card:
type: custom:button-card
show_name: false
styles:
card:
- background-color: rgba(255,255,255,0.0)
- background-image: url(/local/images/icones/garage_fermer.png)
- background-size: cover
- border: none
- height: 48px
- width: 48px
tap_action:
action: call-service
service: script.garage_porte_du_garage_fermer
port_open:
card:
type: custom:button-card
show_name: false
styles:
card:
- background-color: rgba(255,255,255,0.0)
- background-image: url(/local/images/icones/portail_ouvrir.png)
- background-size: cover
- border: none
- height: 48px
- width: 48px
tap_action:
action: call-service
service: script.ouvrir_portail
port_close:
card:
type: custom:button-card
show_name: false
styles:
card:
- background-color: rgba(255,255,255,0.0)
- background-image: url(/local/images/icones/portail_fermer.png)
- background-size: cover
- border: none
- height: 48px
- width: 48px
tap_action:
action: call-service
service: script.fermer_portail
ncourrier:
card:
type: custom:button-card
entity: input_boolean.maison_courrier
show_icon: false
name: 'Courrier :'
styles:
name:
- font-size: 0.7em
- font-weight: bold
- color: rgba(0,0,0,0.6)
state:
- value: 'off'
styles:
card:
- background-color: rgba(255,255,255,0.0)
- border: none
name:
- color: rgba(0,0,0,0.6)
- value: 'on'
styles:
card:
- background-color: rgba(255,0,0,0.7)
- border: 1px solid lightgray
name:
- color: rgba(255,255,255,1.0)
tap_action:
action: none
hold_action:
action: none
courrier:
card:
type: custom:button-card
entity: input_boolean.maison_courrier
show_name: false
show_icon: false
styles:
card:
- background-color: rgba(255,255,255,1.0)
- background-image: url(/local/images/icones/courrier.png)
- background-size: cover
- border-radius: 50%
- border: none
- height: 48px
- width: 48px
state:
- value: 'off'
styles:
card:
- background-color: rgba(255,255,255,1.0)
- value: 'on'
styles:
card:
- background-color: rgba(255,0,0,1.0)
- animation: shadowcolorswap 3s linear infinite
extra_styles: |
@keyframes shadowcolorswap {
0% {
box-shadow: none;
}
25% {
box-shadow: 0px 0px 6px 3px rgba(255,0,0,0.8);
}
50% {
box-shadow: none;
}
75% {
box-shadow: 0px 0px 6px 3px rgba(255,0,0,0.8);
}
100% {
box-shadow: none;
}
tap_action:
action: call-service
service: script.reinitialiser_courrier
styles:
custom_fields:
fond:
- background-image: url(/local/images/maison.png)
- position: absolute
- left: 0
- top: 0
- width: 100%
- height: 100%
- background-size: cover
- background-position: center
- opacity: 0.5
ncarte:
- position: absolute
- left: 10px
- top: '-3px'
ngarage:
- width: 60%
- position: absolute
- left: 33%
- top: 14%
garage:
- width: 60%
- position: absolute
- left: 33%
- top: 14%
nportail:
- width: 60%
- position: absolute
- left: 33%
- top: 47%
portail:
- width: 60%
- position: absolute
- left: 33%
- top: 47%
nlampe:
- position: absolute
- left: 5%
- top: 28%
lampe:
- position: absolute
- left: 10%
- top: 35%
garageup:
- position: absolute
- left: 54%
- top: 23%
garagestop:
- position: absolute
- left: 68%
- top: 23%
garagedown:
- position: absolute
- left: 82%
- top: 23%
port_open:
- position: absolute
- left: 56%
- top: 57%
port_close:
- position: absolute
- left: 70%
- top: 57%
nyann:
- width: 15%
- position: absolute
- left: 5%
- top: 72%
yann:
- border-radius: 50%
- position: absolute
- left: 7%
- top: 78%
nvero:
- width: 20%
- position: absolute
- left: 20%
- top: 72%
vero:
- border-radius: 50%
- width: 60px
- position: absolute
- left: 24%
- top: 78%
ncourrier:
- border-radius: 50%
- width: 60px
- position: absolute
- left: 82.5%
- top: 72%
courrier:
- border-radius: 50%
- width: 60px
- position: absolute
- left: 84%
- top: 80%
Ne regarde que le code pour le portail (le garage n’est plus fonctionnel pour le moment, il faut que je réappaire les détecteurs d’ouverture et fermeture).
Pour l’ouverture simultanée du portail et du garage, la meilleure solution est d’appeler un script qui effectuera en parallèle les deux actions.