Bonjour,
J’ai remonté tous mes capteurs de porte Ring dans HA au travers d’un tracker MQTT.
J’ai bien les entités , ça fonctionne bien, mais ce que je pensais le plus simple me prend la tête …
Comment , simplement si possible, mettre des LED rouges / vertes sur le plan de ma maison que j’ai intégré dans un élément d’image. J’arrive bien a avoir de toutes petites icones , mais impossible d’avoir un truc sympa, style LED de couleur (tout simple)
Un idée ?
Tu veux le code ? Chaque « led » est un custom_fields avec trois états possible, « on », « off » ou « unavailable »
custom_fields:
led:
card:
type: custom:button-card
styles:
card:
- width: 12px
- height: 12px
- background: |
[[[
const status = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_gauche_contact'].state;
if (status === 'off') {
return 'radial-gradient(circle at 3px 3px, Lime 10%, Green 50%)';
} else if (status === 'on') {
return 'radial-gradient(circle at 3px 3px, Orange 10%, Red 50%)';
} else if (status === 'unavailable') {
return 'radial-gradient(circle at 3px 3px, Gold 10%, Yellow 50%)';
}
]]]
- border-radius: 50%
- box-shadow: |
[[[
const status = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_gauche_contact'].state;
if (status === 'off') {
return '0 0 5px 2px rgba(0, 255, 0, 0.5)';
} else if (status === 'on') {
return '0 0 5px 3px rgba(255, 0, 0, 0.5)';
} else if (status === 'unavailable') {
return '0 0 5px 3px rgba(255, 255, 0, 0.5)';
}
]]]
- border: |
[[[
const status = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_gauche_contact'].state;
if (status === 'off') {
return '1px solid DarkGreen';
} else if (status === 'on') {
return '1px solid DarkRed';
} else if (status === 'unavailable') {
return '1px solid Orange';
}
]]]
3 « J'aime »
Re,
Oui je veux bien merci, je fais quasi que de la button card maintenant 
cdt
Code ci-dessus 
chaque led est un mix de background avec un radial-gradient, de box-shadow et de border. Tu peux les « templatiser » pour réduire significativement le nombre de lignes de code. J’ai eu la flemme de le faire pour l’instant, du coup ma carte fait 1583 lignes 
re,
Impeccable merci j’ai un template sous le coude mais je n’utilise que le rouge et le vert pour les automations. ouais button card c’est trop copieux tout est streamlinisé 
je peux donner le template si besoin
streamline template
streamline_templates:
automation_status:
card:
type: custom:button-card
entity: '[[entity]]'
name: '[[name]]'
show_icon: false
show_name: false
show_label: false
custom_fields:
name: |
[[[
var name_to_display = '[[custom_name]]';
if (name_to_display === '' || name_to_display === 'undefined') {
// Utilise le nom par défaut de la carte si custom_name n'est pas fourni
name_to_display = variables.name;
}
return `<div style="text-align: left; line-height: 1.2;">${name_to_display}</div>`;
]]]
led:
card:
type: custom:button-card
styles:
card:
- width: 12px
- height: 12px
- background: |
[[[
// Récupère l'état de l'entité (automation: 'on' ou 'off')
const status = entity.state;
// Vert pour 'on' (activé), Rouge pour 'off' (désactivé)
return (status === 'on')
? 'radial-gradient(circle at 3px 3px, Lime 10%, Green 50%)'
: 'radial-gradient(circle at 3px 3px, Orange 10%, Red 50%)';
]]]
- border-radius: 50%
- box-shadow: |
[[[
const status = entity.state;
return (status === 'on')
? '0 0 5px 2px rgba(0, 255, 0, 0.5)'
: '0 0 5px 3px rgba(255, 0, 0, 0.5)';
]]]
- border: |
[[[
const status = entity.state;
return (status === 'on')
? '1px solid DarkGreen'
: '1px solid DarkRed';
]]]
lock:
enabled: '[[[ return true; ]]]'
duration: 3
unlock: double_tap
styles:
card:
- background: rgba(255,255,255,0.1) !important
- padding: 0px
- border-radius: 15px !important
- border: 2px solid rgba(255, 255, 255, 0.3)
- height: 56px
- text-align: left
- padding: 8px 8px
custom_fields:
led:
- position: absolute
- top: 50%
- left: 10px
- transform: translateY(-50%)
name:
- position: absolute
- top: 50%
- left: 35px
- transform: translateY(-50%)
- color: white
- text-align: left
- font-size: 15px
- width: calc(100% - 50px)
lock:
- color: transparent
tap_action:
action: toggle
cdt
1 « J'aime »
Ca va pour le template, il n’y a qu’une variable à mettre pour le fonctionnement
Au passage, il manque un « s » à Automatismes sur ton panneau
1 « J'aime »
Hello,
Du coup pour tes capteurs je ne saurais que trop te recommander le 3 états, le unavailable/vibration ou que sais-je, ça sert tjs
cdt
A vrai dire., ce serait plutôt pour animer les capteurs d’ouverture des portes et fenêtres que récupère via l’intégration Ring, c’est de simple capteurs binaires.
Re,
bah du coup c’est peut-être plus simple de faire avec des images
- type: image
entity: binary_sensor.olimex_esp32_poe_labo_porte_chaufferie
style:
top: 33.5%
left: 82.5%
width: 12%
state_image:
"on": /local/plan3D/piece maxi/ouvrant/porte chaufferie ouverte maxi.gif
"off": /local/plan3D/piece maxi/ouvrant/porte chaufferie base maxi.png
unavailable: /local/plan3D/piece maxi/ouvrant/porte chaufferie defaut maxi.gif
que tu positionne sur ton plan, il y a une grille dans mon topic au cas ou pour placer ça plus vte
et en toute logique tu as juste à prendre la partie qui te convient si les images ici te conviennent via gimp ou autre
cdt
en cherchant un peu je suis tombé sur ça, à voir pour les droits j’ai pas vérifié
https://www.vhv.rs/dpng/d/1-12427_led-green-red-icon-hd-png-download.png
Bonjour.
Pour des détecteurs d’ouverture j’ai repris avec succès le code de freetronic de ses états d’automate hier soir.
2 « J'aime »
Avec les infos ci-dessus, j’ai pu mettre en place mes capteurs, un grand MERCI pour l’aide !!
Il me reste un truc qui m’agace, j’ai mis les cartes de cette façons :
Pour avoir les deux cartes, je me suis battu avec les réglages de la carte :
Pour finir par mettre manuellement en yaml les valeurs :
grid_options:
rows: 10
columns: 24
Sur ordinateur, dans un navigateur c’est pas trop mal, mais dans l’app … c’est la cata, il y a un immense espace entre les cartes, je ne comprends pas ce que je fais de faux …
Le souci est que les images se redimentionnent à la taille de l’écran, limité en largeur.
Comme tu as mis une hauteur fixe (row) cela te génère du vide sur téléphone car la largeur limitée redimentionne l’image.
Au final j’ai viré la ligne row : xx et la hauteur se gère en auto
Tout est OK !
Merci pour vos retours