Bonjour tout le monde,
J’ai créé un dashboard qui visuellement donne ça :
Le code est le suivant :
type: vertical-stack
cards:
- type: markdown
content: |
<div>
<div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
<div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
</div>
card_mod:
style: |
ha-card {
height: 20vh;
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('/local/banner.png') center/cover no-repeat;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
border-radius: 0 !important;
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 1em;
}
- type: horizontal-stack
cards:
- type: sensor
entity: sensor.temperature_exterieure
name: Extérieure
icon: mdi:thermometer
card_mod:
style: |
ha-card {
border-radius: 0.5em !important;
height: 100px;
min-width: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1.5em;
}
ha-icon {
width: 30px !important;
height: 30px !important;
}
- type: sensor
entity: sensor.temperature_salon
name: Intérieure
icon: mdi:thermometer
card_mod:
style: |
ha-card {
border-radius: 0.5em !important;
height: 100px;
min-width: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1.5em;
}
ha-icon {
width: 30px !important;
height: 30px !important;
}
- type: vertical-stack
card_mod:
style: |
:host {
display: flex !important;
justify-content: center !important;
}
ha-card {
width: 100% !important;
max-width: 600px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
height: 40vh;
margin: 0 auto !important;
padding: 16px !important;
}
cards:
- type: conditional
conditions:
- entity: person.penguin
state:
- home
- Proximité
card:
type: button
name: Portail
icon: mdi:gate
tap_action:
action: call-service
service: script.appuie_bouton_portail
entity: switch.commande_portail
show_state: false
icon_height: 32px
card_mod:
style: |
ha-card {
width: 100% !important;
height: 80px !important;
margin: 8px 0 !important;
display: flex !important;
justify-content: center !important;
border-radius: 1.5em !important;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
background-color: var(--card-background-color);
box-shadow: none;
}
{% if is_state('input_boolean.portail_feedback', 'on') %}
ha-card {
background-color: rgba(0, 150, 255, 0.9) !important;
box-shadow: 0 0 10px 3px rgba(0, 150, 255, 0.9);
}
{% endif %}
- type: conditional
conditions:
- entity: person.penguin
state: home
card:
type: button
name: Garage
icon: mdi:window-shutter
tap_action:
action: call-service
service: script.appuie_bouton_garage
entity: switch.commande_porte_garage
show_state: false
icon_height: 32px
card_mod:
style: |
ha-card {
width: 100% !important;
height: 80px !important;
margin: 8px 0 !important;
display: flex !important;
justify-content: center !important;
border-radius: 1.5em !important;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
background-color: var(--card-background-color);
box-shadow: none;
}
{% if is_state('input_boolean.garage_feedback', 'on') %}
ha-card {
background-color: rgba(0, 150, 255, 0.9) !important;
box-shadow: 0 0 10px 3px rgba(0, 150, 255, 0.9);
}
{% endif %}
- type: conditional
conditions:
- entity: person.penguin
state: home
- entity: binary_sensor.afficher_bouton_terrasse
state: "on"
card:
type: button
entity: switch.shelly_chauffe_eau
name: Terrasse
icon: mdi:lightbulb-on
tap_action:
action: toggle
card_mod:
style: |
ha-card {
width: 100% !important;
height: 80px !important;
margin: 8px 0 !important;
display: flex !important;
justify-content: center !important;
border-radius: 1.5em !important;
}
Là où vient la difficulté, c’est l’ajout d’une caméra live à l’intérieur de mon bouton Portail.
Le seul truc valable que j’ai réussi à obtenir est ça :
Mon bouton est coupé en deux.
Voici le code en question :
type: vertical-stack
cards:
- type: markdown
content: |
<div>
<div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
<div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
</div>
card_mod:
style: |
ha-card {
height: 20vh;
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('/local/banner.png') center/cover no-repeat;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
border-radius: 0 !important;
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 1em;
}
- type: horizontal-stack
cards:
- type: sensor
entity: sensor.temperature_exterieure
name: Extérieure
icon: mdi:thermometer
card_mod:
style: |
ha-card {
border-radius: 0.5em !important;
height: 100px;
min-width: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1.5em;
}
ha-icon {
width: 30px !important;
height: 30px !important;
}
- type: sensor
entity: sensor.temperature_salon
name: Intérieure
icon: mdi:thermometer
card_mod:
style: |
ha-card {
border-radius: 0.5em !important;
height: 100px;
min-width: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1.5em;
}
ha-icon {
width: 30px !important;
height: 30px !important;
}
- type: vertical-stack
card_mod:
style: |
:host {
display: flex !important;
justify-content: center !important;
}
ha-card {
width: 100% !important;
max-width: 600px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
height: auto;
margin: 0 auto !important;
padding: 0 !important;
}
cards:
- type: horizontal-stack
card_mod:
style: |
ha-card {
width: 100% !important;
border-radius: 1em !important;
overflow: hidden !important;
}
cards:
- type: picture-entity
entity: camera.sonnette_video
camera_view: live
show_state: false
show_name: false
card_mod:
style: |
ha-card {
height: 80px !important;
width: 120px !important;
border-radius: 1em 0 0 1em !important;
overflow: hidden;
margin: 0 !important;
}
- type: button
name: Portail
icon: mdi:gate
tap_action:
action: call-service
service: script.appuie_bouton_portail
entity: switch.commande_portail
show_state: false
icon_height: 32px
card_mod:
style: |
ha-card {
flex-grow: 1;
height: 80px !important;
border-radius: 0 1em 1em 0 !important;
margin: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
font-size: 1.3em;
}
- type: conditional
conditions:
- entity: person.penguin
state: home
card:
type: button
name: Garage
icon: mdi:garage
tap_action:
action: call-service
service: script.appuie_bouton_garage
entity: switch.commande_porte_garage
show_state: false
icon_height: 32px
card_mod:
style: |
ha-card {
width: 100% !important;
height: 80px !important;
margin: 8px 0 !important;
display: flex !important;
justify-content: center !important;
border-radius: 1.5em !important;
}
Après multiples essais avec ChatGPT / Mistral / DeepkSeek, j’ai échoué.
Si ça vous intéresse, voici un lien vers un chat Mistral : https://chat.mistral.ai/chat/7a0195e7-63a7-4ef4-8240-9662c5792ea0
Si vous avez une idée pour résoudre mon problème avec l’objectif que la caméra soit intégrée ou en superposition dans le bouton et lorsque je clique sur toute la zone, que ça me lance l’ouverture du portail et pas le détail de l’entité caméra par exemple.
Si vous y arrivez, bravo ! J’ai l’impression que j’atteins les limites d’Home Assistant pour arriver au résultat attendu
J’y est passé pas mal d’heures (je ne suis pas un développeur)
