Bonjour à tous,
Je souhaite intégrer l’image de ma caméra dans l’entête de ma card :
Ma nouvelle passion est le custom:button-card mais je ne trouve pas comment intégrer l’image d’une camera dans un custom:button-card. Quelqu’un aurait des pistes à me donner ?
Merci d’avance.
Je me répond à moi même car j’ai trouvé la solution à mon problème et si ca peux en aider certains 
L’idée est toujours d’utiliser les custom:button-card et d’insérer dans les custom_fields une carte picture-glance :
Voilà mon YAML :
card_pool:
styles:
card:
- padding: "0px"
grid:
- grid-template-areas: "'cam overlay' 'measures measures'"
- grid-template-columns: "1fr 0"
- grid-template-rows: "180px min-content"
custom_fields:
overlay:
- height: 180px
- background: linear-gradient(180deg, rgba(var(--rgb-card-background-color),0) 45%, rgba(var(--rgb-card-background-color),1) 100%)
- opacity: 1
- padding: 0
custom_fields:
cam:
card:
type: picture-glance
camera_image: camera.poolcamera
entities: []
card_mod:
style:
hui-image:
$: |
div img {
height: 180px;
object-fit: cover;
object-position: center -25px;
}
.: |
hui-image {
height: 100%;
}
.: |
ha-card {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
box-shadow: none;
}
ha-card .box {
display: none;
}
overlay: <div></div>
measures:
card:
type: custom:button-card
name: Indicateurs de l'eau
label: "[[[ return states['sensor.pool_analysed_at'].state; ]]]"
show_name: true
show_label: true
styles:
card:
- padding: 4%
- border-radius: 0px
- box-shadow: "none"
grid:
- grid-template-areas: "'n tmp . ph . redox . sel' 'l tmp . ph . redox . sel'"
- grid-template-columns: "1fr 45px 5px 45px 5px 45px 5px 45px"
- grid-template-rows: "min-content min-content"
name:
- font-weight: "bold"
- font-size: "14px"
- place-self: end left
label:
- font-size: "10px"
- place-self: start
- filter: "opacity(40%)"
custom_fields:
tmp:
card:
type: custom:button-card
template: button_pool_measure
name: Temp
label: 23.5°C
variables:
color: "blue"
ph:
card:
type: custom:button-card
template: button_pool_measure
name: pH
label: 7.2
variables:
color: "green"
redox:
card:
type: custom:button-card
template: button_pool_measure
name: RedOx
label: 650mV
variables:
color: "yellow"
sel:
card:
type: custom:button-card
template: button_pool_measure
name: Sel
label: 3.3g/l
variables:
color: "red"
button_pool_measure:
variables:
color: "blue"
show_name: true
show_label: true
aspect_ratio: 1/1
styles:
card:
- padding: "0px"
- box-shadow: none
- background-color: var(--primary-background-color)
- background-image: >
[[[
let theme = hass.themes.themes[hass.themes.theme].modes[(hass.themes.darkMode ? "dark" : "light")];
let color_bckg = theme[`google-${variables.color}`].replace('#', '%23');
let opacity = theme['opacity-bg'];
return "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1440 1440'><path fill='"+color_bckg+"' fill-opacity='"+opacity+"' d='m 0,566 48,26.7 C 96,619 192,673 288,699.3 384,726 480,726 576,710 c 96,-16 192,-48 288,-42.7 96,5.7 192,47.7 288,58.7 96,11 192,-11 240,-21.3 l 48,-10.7 v 754 H 1392 1152 864 576 288 48 0 Z'></path></svg>\")";
]]]
- background-size: 100%
grid:
- grid-template-areas: "'n' 'l'"
- grid-template-columns: "1fr"
- grid-template-rows: "auto auto"
name:
- font-size: "10px"
- place-self: center
label:
- font-size: "10px"
- place-self: center
- font-weight: "bold"
- color: >
[[[
if (hass.themes.darkMode){
return "#FFFFFF";
} else {
return `rgba(var(--color-${variables.color}), 1)`;
}
]]]
Merci pour le partage 
Il y avait un autre exemple ici :
https://forum.hacf.fr/t/dashboard-minimalist/5507/183?u=clemalex
Extrêmement intéressant, merci pour le partage.
Comment as-tu tous ces métriques de l’eau de la piscine ?
Tu peux décrire ton matériel stp notamment pour la mesure de la température ? du PH ? Niveau d’eau ?
J’ai essayé mais rapidement les mesures se sont retrouvées fausses à cause de la détérioration des sondes liées à l’électrolyse.
Tu n’as pas domotisé le volet de ta piscine ?
Merci de ton aide ?
C’est le but du forum le partage 
J’ai une Blue Connect depuis 3 ans. Il marche nickel. Faut changer la sonde toutes les deux saisons. Faut la sonde pour les piscines au sel. J’aurais bien aimé la mesure de l’alcalinité mais cette sonde ne le fait pas.
Pour le niveau d’eau c’est du diy prévu pour cette année. Je vais juste mettre un flotteur dans un des skimmer.
C’est une idée que j’ai en tête mais que je n’ai pas encore mis en pratique. Plus pour l’ouverture lorsque le soleil donne dessus et que l’alarme est activée comme ça je sais qu’il n’y aurais pas mes enfants à côté !!!
Bonjour @Arnault ,
Justement, pour les métriques, qu’elle est ta config ?
J’ai un Blueconnect + Wifi Extender.
Je ne sais pas comment augmenter la fréquence des mesures.
Je n’ai pas l’abonnement, justement le but est de contourner.
++
J’ai acheté le modèle qui prend 20 mesures par jours en moyenne. J’aimerais bien pouvoir déclencher via bluetooth des mesures à la demande mais je ne me suis pas encore penché sur le sujet du bluetooth. Je sais que c’est possible mais je n’ai aucune connaissance sur le sujet.
OK merci pour ta réponse.
Salut @Arnault ,
J’essaye de mettre en place ta card mais les données ne veulent pas s’afficher…
Peut-être que c’est mon thème (minimalist) qui pose soucis mais je ne sais pas ou modifier.
Si tu as une idée je suis preneur
J’ai aussi l’affichage de la camera, qui « s’écrase » après quelque seconde comme si il y avait une adaptation de la résolution.
Bonjour @Arnault,
Je débute dans le monde de HA et encore plus dans avec custom:button-card
Ce que je souhaite faire me semble assez basique mais je n’y parviens pas…
Ce serait une tuile avec en fond l’image live stream de ma caméra pointée sur mon portail et y intégrer deux boutons (double clic pour éviter une fausse manoeuvre) qui permettent de déclencher l’ouverture/fermeture en mode piéton (ouverture partielle) ou en mode véhicules (ouverture totale).
J’ai essayé en altérant le yaml proposé ici mais je n’obtiens qu’une carte vide.
Merci d’avance de ton aide !
EDIT : j’ai un peu progressé avec custom:button-card en créant un horizontal-stack (boutons) intégré dans un vertical-stack (image + boutons), ça fonctionne mais ils restent visuellement séparés sur l’interface 