Bonjour à tous,
@anon51798830 Il y a quelques mois, tu m’avais aidé à créer des boutons pour le portail et pour le garage dans un contexte qui n’était pas facile car le retour d’état du portail passait par la connexion normalement dédiée à la lampe portail, lampe que je n’avais pas. ça nous avait pris 1 jour avec @WarC0zes qui nous aidait aussi.
Aujourd’hui, je viens de faire mettre à jour les éléments de mon alarme Jablotron vers une alarme Jablotron JA103KRY avec module LAN et module GSM (si INternet ne fonctionne pas).
J’ai répondu avec quelques photos ici: Intégration jablotron - #2 par Matt1
Question: serait-il possible d’ajouter 2 boutons (Armer/Désarmer) en tant que premiers boutons de l’horizontal stack des 3 boutons que tu m’avais réalisé ?
Je n’arrive pas bien avec la carte bouton…
Je te mets en dessous le code actuel de l’horizontal stack des 3 boutons (dernière version que je l’ai légèrement adapté depuis la dernière fois).
J’ai conscience que ma demande est peut-être un peu complexe et que je suis en demande sans proposition avec une carte bouton, ce n’est pas grave si ce n’est pas possible, je comprends 
Bonne journée et bon week-end,
Ce que j’ai fait pour l’alarme:
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: script.armer_alarme
show_state: false
icon_height: 50px
hold_action:
action: none
card_mod:
style: |
ha-card {
border: 0px;
}
ha-state-icon {
{% if states('alarm_control_panel.maison') == 'armed_away' %}
--card-mod-icon-color: red
{% elif states('alarm_control_panel.maison') == 'arming' %}
animation: pulse 2s linear infinite;
--card-mod-icon-color: orange
{% elif states('alarm_control_panel.maison') == 'disarmed' %}
--card-mod-icon-color: grey
{% else %}
animation: pulse 2s linear infinite;
--card-mod-icon-color: red
{% endif %}
}
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: script.desarmer_alarme
show_state: false
icon_height: 50px
hold_action:
action: none
card_mod:
style: |
ha-card {
border: 0px;
}
ha-state-icon {
{% if states('alarm_control_panel.maison') == 'disarmed' %}
--card-mod-icon-color: green
{% elif states('alarm_control_panel.maison') == 'armed_away' %}
--card-mod-icon-color: grey
{% elif states('alarm_control_panel.maison') == 'arming' %}
--card-mod-icon-color: grey
{% else %}
animation: pulse 2s linear infinite;
--card-mod-icon-color: red
{% endif %}
}
Le code des 3 boutons « Cleya »:
type: custom:button-card
aspect_ratio: 14/3
custom_fields:
cardGaragePortail:
card:
type: custom:button-card
name: Portail &<br/>Garage
icon: mdi:gate-open
aspect_ratio: 1.6/1
styles:
name:
- font-size: 0.8em
- justify-self: middle
- align-self: end
- color: rgba(255,255,255,0.6)
card:
- background-color: rgba(32, 32, 32, 0.9)
- box-shadow: 0px 0px 0px 0px rgba(32,32,32,0.9)
- border: none
icon:
- border-radius: 50%
- border: none
- box-shadow: 0px 0px 5px 5px rgba(0,128,0,0.5)
- box-shadow: |
[[[
if (states['cover.porte_de_garage'].state == 'closed' && states['binary_sensor.portail_mouvement'].state == 'off')
return '0px 0px 5px 5px rgba(255,0,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'open' && states['binary_sensor.portail_mouvement'].state == 'on')
return '0px 0px 5px 5px rgba(0,128,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'closed' && states['binary_sensor.portail_mouvement'].state == 'off')
return '0px 0px 5px 5px rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'open' && states['binary_sensor.portail_mouvement'].state == 'on')
return '0px 0px 5px 5px rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'closing' && states['binary_sensor.portail_mouvement'].state == 'on')
return '0px 0px 5px 5px rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'opening' && states['binary_sensor.portail_mouvement'].state == 'on')
return '0px 0px 5px 5px rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'closing' && states['binary_sensor.portail_mouvement'].state == 'off')
return '0px 0px 5px 5px rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'opening' && states['binary_sensor.portail_mouvement'].state == 'off')
return '0px 0px 5px 5px rgba(255,140,0,0.5)';
]]]
- background-color: |
[[[
if (states['cover.porte_de_garage'].state == 'closed' && states['binary_sensor.portail_mouvement'].state == 'off')
return 'rgba(255,0,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'open' && states['binary_sensor.portail_mouvement'].state == 'on')
return 'rgba(0,128,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'closed' && states['binary_sensor.portail_mouvement'].state == 'on')
return 'rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'open' && states['binary_sensor.portail_mouvement'].state == 'off')
return 'rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'closing' && states['binary_sensor.portail_mouvement'].state == 'on')
return 'rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'opening' && states['binary_sensor.portail_mouvement'].state == 'on')
return 'rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'closing' && states['binary_sensor.portail_mouvement'].state == 'off')
return 'rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'opening' && states['binary_sensor.portail_mouvement'].state == 'off')
return 'rgba(255,140,0,0.5)';
]]]
- width: 42px
- height: 40px
- color: |
[[[
if (states['cover.porte_de_garage'].state == 'closed' && states['binary_sensor.portail_mouvement'].state == 'off')
return 'rgba(255,0,0,1.05)';
else if (states['cover.porte_de_garage'].state == 'open' && states['binary_sensor.portail_mouvement'].state == 'on')
return 'rgba(0,255,0,1.0)';
else if (states['cover.porte_de_garage'].state == 'closed' && states['binary_sensor.portail_mouvement'].state == 'on')
return 'rgba(255,140,0,1.0)';
else if (states['cover.porte_de_garage'].state == 'open' && states['binary_sensor.portail_mouvement'].state == 'off')
return 'rgba(255,140,0,1.0)';
else if (states['cover.porte_de_garage'].state == 'closing' && states['binary_sensor.portail_mouvement'].state == 'on')
return 'rgba(255,140,0,1.0)';
else if (states['cover.porte_de_garage'].state == 'opening' && states['binary_sensor.portail_mouvement'].state == 'on')
return 'rgba(255,140,0,1.0)';
else if (states['cover.porte_de_garage'].state == 'closing' && states['binary_sensor.portail_mouvement'].state == 'off')
return 'rgba(255,140,0,1.0)';
else if (states['cover.porte_de_garage'].state == 'opening' && states['binary_sensor.portail_mouvement'].state == 'off')
return 'rgba(255,140,0,1.0)';
]]]
tap_action:
action: call-service
service: script.portail_et_garage
hold_action:
action: none
cardGarage:
card:
type: custom:button-card
entity: cover.porte_de_garage
name: Garage
icon: mdi:garage
show_label: true
label: |
[[[
if (states['cover.porte_de_garage'].state == 'closed')
return '<font color= "red"><b>Fermé</font>';
else if (states['cover.porte_de_garage'].state == 'open')
return '<font color= "green"><b>Ouvert</font>';
else if (states['cover.porte_de_garage'].state == 'closing')
return '<font color= "orange"><b>Fermeture</font>';
else if (states['cover.porte_de_garage'].state == 'opening')
return '<font color= "orange"><b>Ouverture</font>';
]]]
aspect_ratio: 1.6/1
styles:
name:
- font-size: 0.8em
- justify-self: middle
- align-self: end
- color: rgba(255,255,255,0.6)
card:
- background-color: rgba(32, 32, 32, 0.9)
- box-shadow: 0px 0px 0px 0px rgba(32,32,32,0.9)
- border: none
icon:
- border-radius: 50%
- border: none
- box-shadow: 0px 0px 5px 5px rgba(0,128,0,0.5)
- box-shadow: |
[[[
if (states['cover.porte_de_garage'].state == 'closed')
return '0px 0px 5px 5px rgba(255,0,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'open')
return '0px 0px 5px 5px rgba(0,128,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'closing')
return '0px 0px 5px 5px rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'opening')
return '0px 0px 5px 5px rgba(255,140,0,0.5)';
]]]
- background-color: |
[[[
if (states['cover.porte_de_garage'].state == 'closed')
return 'rgba(255,0,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'open')
return 'rgba(0,128,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'closing')
return 'rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'opening')
return 'rgba(255,140,0,0.5)';
]]]
- width: 42px
- height: 40px
- color: |
[[[
if (states['cover.porte_de_garage'].state == 'closed')
return 'rgba(255,0,0,1.05)';
else if (states['cover.porte_de_garage'].state == 'open')
return 'rgba(0,255,0,1.0)';
else if (states['cover.porte_de_garage'].state == 'closing')
return 'rgba(255,140,0,0.5)';
else if (states['cover.porte_de_garage'].state == 'opening')
return 'rgba(255,140,0,0.5)';
]]]
label:
- animation: |
[[[
if (states['cover.porte_de_garage'].state == 'closing')
return 'blink 2s ease infinite';
else if (states['cover.porte_de_garage'].state == 'opening')
return 'blink 2s ease infinite';
]]]
tap_action:
action: toggle
hold_action:
action: none
cardportail:
card:
type: custom:button-card
entity: switch.portail
name: Portail
icon: mdi:gate
show_label: true
label: |
[[[
if (states['binary_sensor.portail_mouvement'].state == 'off')
return '<font color= "red"><b>Fermé</font>';
else if (states['binary_sensor.portail_mouvement'].state == 'on')
return '<font color= "green"><b>Ouvert</font>';
]]]
aspect_ratio: 1.6/1
styles:
name:
- font-size: 0.8em
- justify-self: middle
- align-self: end
- color: rgba(255,255,255,0.6)
card:
- background-color: rgba(32, 32, 32, 0.9)
- box-shadow: 0px 0px 0px 0px rgba(32,32,32,0.9)
- border: none
icon:
- border-radius: 50%
- border: none
- box-shadow: 0px 0px 5px 5px rgba(0,128,0,0.5)
- box-shadow: |
[[[
if (states['binary_sensor.portail_mouvement'].state == 'off')
return '0px 0px 5px 5px rgba(255,0,0,0.5)';
else if (states['binary_sensor.portail_mouvement'].state == 'on')
return '0px 0px 5px 5px rgba(0,128,0,0.5)';
]]]
- background-color: |
[[[
if (states['binary_sensor.portail_mouvement'].state == 'off')
return 'rgba(255,0,0,0.5)';
else if (states['binary_sensor.portail_mouvement'].state == 'on')
return 'rgba(0,128,0,0.5)';
]]]
- width: 42px
- height: 40px
- color: |
[[[
if (states['binary_sensor.portail_mouvement'].state == 'off')
return 'rgba(255,0,0,1.05)';
else if (states['binary_sensor.portail_mouvement'].state == 'on')
return 'rgba(0,255,0,1.0)';
]]]
tap_action:
action: toggle
hold_action:
action: none
styles:
card:
- background-color: rgba(32, 32, 32, 0.9)
custom_fields:
cardGaragePortail:
- width: 32%
- position: absolute
- left: 1%
- top: 4%
cardportail:
- width: 32%
- position: absolute
- left: 34%
- top: 4%
cardGarage:
- width: 32%
- position: absolute
- left: 67%
- top: 4%
Ma configuration
[center]## System Information
| version | core-2025.1.2 |
|---|---|
| installation_type | Home Assistant OS |
| dev | false |
| hassio | true |
| docker | true |
| user | root |
| virtualenv | false |
| python_version | 3.13.1 |
| os_name | Linux |
| os_version | 6.6.66-haos |
| arch | x86_64 |
| timezone | Europe/Brussels |
| config_dir | /config |
Home Assistant Community Store
| GitHub API | ok |
|---|---|
| GitHub Content | ok |
| GitHub Web | ok |
| HACS Data | ok |
| GitHub API Calls Remaining | 5000 |
| Installed Version | 2.0.3 |
| Stage | running |
| Available Repositories | 1503 |
| Downloaded Repositories | 46 |
Home Assistant Cloud
| logged_in | true |
|---|---|
| subscription_expiration | 28 avril 2025 à 02:00 |
| relayer_connected | true |
| relayer_region | eu-central-1 |
| remote_enabled | true |
| remote_connected | true |
| alexa_enabled | false |
| google_enabled | true |
| cloud_ice_servers_enabled | true |
| remote_server | eu-central-1-19.ui.nabu.casa |
| certificate_status | ready |
| instance_id | f0fd017040d14711b17f54352dde68e6 |
| can_reach_cert_server | ok |
| can_reach_cloud_auth | ok |
| can_reach_cloud | ok |
Home Assistant Supervisor
| host_os | Home Assistant OS 14.1 |
|---|---|
| update_channel | stable |
| supervisor_version | supervisor-2024.12.3 |
| agent_version | 1.6.0 |
| docker_version | 27.2.0 |
| disk_total | 938.2 GB |
| disk_used | 18.3 GB |
| healthy | true |
| supported | true |
| host_connectivity | true |
| supervisor_connectivity | true |
| ntp_synchronized | true |
| virtualization | |
| board | generic-x86-64 |
| supervisor_api | ok |
| version_api | ok |
| installed_addons | Matter Server (7.0.0), Terminal & SSH (9.16.0), File editor (5.8.0), Samba share (12.4.0), Home Assistant Google Drive Backup (0.112.1), Studio Code Server (5.18.0), Spotify Connect (0.13.0), OpenThread Border Router (2.13.0), Mosquitto broker (6.5.0), Frigate (0.14.1) |
Dashboards
| dashboards | 2 |
|---|---|
| resources | 39 |
| views | 9 |
| mode | storage |
Recorder
| oldest_recorder_run | 8 janvier 2025 à 02:43 |
|---|---|
| current_recorder_run | 18 janvier 2025 à 07:41 |
| estimated_db_size | 300.85 MiB |
| database_engine | sqlite |
| database_version | 3.47.1 |
Spotify
| api_endpoint_reachable | ok |
|---|
. Il suffit de mettre des conditions sur l’action, de la même manière que tu utilises des conditions pour changer la couleur de l’icône.
.
Encore merci pour ton temps 