Nickel. Tu gères le CSS !!! -
Une autre question. J’ai 2 dashboard. Un pour ma tablette (qui intègre un header). L’autre plus général pour mon téléphone (le header masque les boutons du fait de la largeur trop petite de l’écran…). Bref jusque là tout va bien.
Hormis le header, le code est un copier/coller y compris les badges donc la personnalisation via mod-car.
Sur l’ordi, quand je navoigue entre les 2 dashboard, j’ai pas le même comportement.
Sur le dashboard de la tablette tout s’affiche correctement. Sur l’autre dashboard, les personnalisations ne s’affichent pas ou rarement. Ca fait pareil sur mon téléphone. Ca semble assez aléatoire… Elles se sont pourtant déjà affichées. Notament que je fait une modif.
T’as déjà eu ça ?
Voici une vidéo pour expliquer le phénomène qu’on voit bien. Incompréhensible
https://www.swisstransfer.com/d/c9b7bd42-1cf3-4387-ad5d-5dd7d7f1964b
Salut @Loic69
Non j’ai jamais eu ce genre de comportement.
[EDIT]
Je vois dans la vidéo, qu’on peut corriger/améliorer le code.
Exemple ici :
Tu peux remplacer par :
badges:
- entity: binary_sensor.presence_home
card_mod:
style: |
:host {
{% if is_state(config.entity, 'on') %}
--label-badge-text-color: orange;
{% endif %}
}
Le :
.: |
Ne s’utilise que dans certaines conditions, c’est expliquer dans la doc de card-mod et dans la vidéo de @Clemalex :
Bref partages la partie « badges » de tes différents « dashboard », on pourra la checker complétement
3 « J'aime »
Corrigé merci. Top cette vidéo !
Tjs le même probleme.
Voici le code. Pas vu d’erreur comme ça
theme: Backend-selected
title: Home
icon: mdi:home
path: home
badges:
- entity: binary_sensor.presence_home
card_mod:
style: |
:host {
{% if is_state(config.entity, 'on') %}
--label-badge-text-color: orange;
{% endif %}
}
- entity: person.madame
- entity: person.monsieur
- entity: binary_sensor.madame_au_volant
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
{% if is_state(config.entity, 'on') %}
.badge-container .label-badge .value::after {
content: "{{ state_attr(config.entity, 'car') }}";
background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.05em;
font-size: 0.5em;
}
{% endif %}
.: |
:host {
{% if is_state(config.entity, 'on') %}
--label-badge-text-color: orange;
{% endif %}
}
- entity: binary_sensor.monsieur_au_volant
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
{% if is_state(config.entity, 'on') %}
.badge-container .label-badge .value::after {
content: "{{ state_attr(config.entity, 'car') }}";
background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.05em;
font-size: 0.5em;
}
{% endif %}
.: |
:host {
{% if is_state(config.entity, 'on') %}
--label-badge-text-color: orange;
{% endif %}
}
- entity: sensor.tiguan_combustion_range
card_mod:
style: |
:host {
{% set km = states(config.entity) %}
{% if is_number(km) and km | int < 100 %}
--label-badge-text-color: red;
{% endif %}
}
- entity: light.general
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
{% if is_state(config.entity, 'on') %}
.badge-container .label-badge .value::after {
content: "{{expand(state_attr(config.entity, 'entity_id')) | selectattr('state','eq','on')|map(attribute='entity_id')|list|count}}";
background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.05em;
font-size: 0.5em;
}
{% endif %}
- entity: cover.volets_jour
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
{% if is_state(config.entity, 'open') %}
.badge-container .label-badge .value::after {
content: "{{expand(state_attr(config.entity, 'entity_id')) | selectattr('state','eq','open')|map(attribute='entity_id')|list|count}}";
background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.05em;
font-size: 0.5em;
}
{% endif %}
- entity: binary_sensor.ouvrants
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
{% if is_state(config.entity, 'on') %}
.badge-container .label-badge .value::after {
content: "{{expand(state_attr(config.entity, 'entity_id')) | selectattr('state','eq','on')|map(attribute='entity_id')|list|count}}";
background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.05em;
font-size: 0.5em;
}
{% endif %}
.: |
:host {
{% if is_state(config.entity, 'on') %}
--label-badge-text-color: orange;
{% endif %}
}
- entity: sensor.tarif_edf
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
.badge-container .label-badge .value::after {
content: "{{ state_attr(config.entity, 'couleur_du_jour') }}";
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.05em;
font-size: 0.5em;
}
@keyframes blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
{% if state_attr(config.entity, 'couleur_du_jour') == 'BLANC' %}
.badge-container .label-badge .value::after {
background-color: silver;
color: var(--ha-label-badge-label-color, black);
}
{% elif state_attr(config.entity, 'couleur_du_jour') == 'ROUGE' %}
.badge-container .label-badge .value::after {
background-color: red;
color: var(--ha-label-badge-label-color, white);
animation: blink 1.5s linear infinite;
}
{% elif state_attr(config.entity, 'couleur_du_jour') == 'BLEU' %}
.badge-container .label-badge .value::after {
background-color: dodgerblue;
color: var(--ha-label-badge-label-color, white);
}
{% endif %}
.: |
:host {
{% if state_attr(config.entity, 'couleur_du_jour') == 'ROUGE' %}
--label-badge-text-color: red;
{% elif state_attr(config.entity, 'couleur_du_jour') == 'BLEU' %}
--label-badge-text-color: dodgerblue;
{% endif %}
}
- entity: alarm_control_panel.alarmo_z1
- entity: alarm_control_panel.alarmo_z2
- entity: sensor.frigo_temperature
- entity: sensor.sonde_aqara_congel_cuisine_temperature
- entity: sensor.air_monitor_temperature
- entity: sensor.air_monitor_humidity
- entity: sensor.air_monitor_air_quality
Bonjour,
J’ai un petit souci que je n’arrive pas à résoudre, j’ai lu plein de fils es essayé plein de trucs sans succès.
Mes badges au démarrage de l’appllication sont tous orange/rouge et ne tiennent pas compte de la personnalisation.
Si je change de TDB ils prennent les couleurs en compte.
Le souci c’est pour mes utilisateurs en lecture seule, ils ne pensent pas à la manip et ont juste des badges rouge moche
Pouvez-vous m’aider SVP ?
je n’en ai mis qu’un mais c’est pareil pour les autres !
views:
- title: Home
icon: mdi:home
badges:
- entity: device_tracker.scf0f7f2482a9a7f1c_98b4
name: Eric
card_mod:
style: |
:host {
{% set state = states('device_tracker.scf0f7f2482a9a7f1c_98b4') %}
{% if state == 'home' %}
--label-badge-red: green;
{% else %}
--label-badge-red: grey;
{% endif %}
}
Merci d’avance
bonjour,
j’ai suivi ton code afin de faire clignoter mon badge afficahnt le nombre de jours restant de validité de mon certificat htttps.
je galère à résoudre les pbs d’indentation car je ne comprends pas la syntaxe du message d’erreur. du coup je tatonne en ajoutant et ou supprimant des espaces…bref c’est nul et je cherche qqun en mesure de m’expliquer le contenu du message d’erreur afin que je m’en sorte tout seul.
voici le message d’erreur:
Impossible d’analyser le YAML : YAMLException: bad indentation of a mapping entry (118:11) 115 | {% if is_state(sensor.valid … 116 | .value { 117 | animation: blink 2s linear in … 118 | } -----------------^ 119 | @keyframes blink { 120 | from {opacity: 0;}
et voici mon code:
- entity: sensor.validite_https
name: test
card_mod:
style:
ha-state-label-badge $ ha-label-badge $ .badge-container .label-badge: |
{% if is_state(sensor.validite_https, '<21') %}
.value {
animation: blink 2s linear infinite;
}
@keyframes blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
{% endif %}
aurais tu l’amabilité de bien vouloir m’aider? merci
Salut @phil
Indentation et template à revoir
Tu peux tester ça :
- entity: sensor.validite_https
card_mod:
style:
ha-state-label-badge $ ha-label-badge $ .badge-container .label-badge: |
{% if states(config.entity) | int <= 21 %}
.value {
animation: blink 2s linear infinite;
}
@keyframes blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
{% endif %}
Merci @Herbs pour ta réactivité. Bon tu m’as donné directement la solution et je t’en remercie. en fait je souhaite que le contour du badge reste vert et passe au rouge avec la valeur aussi en rouge clignotante si >21 jours .
voilà ce que cela donne actuellement.
Sinon et si cela n’ai pas trop te demander, quand j’ai ce message :
bad indentation of a mapping entry (118:11) 115 | {% if is_state(sensor.valid …
que veut dire (118:11) 115 ?? merci
Ok, je regarde ça dans le week-end
très gentil de ta part.
Bonjour et merci pour le sujet du post.
J’ai essayé les badges dans ma page principale, je vois bien le badge en mode édition, mais il n’apparait pas une fois sorti du mode config
Et en fait, ça n’a pas l’air de fonctionner en masonry, du coup j’ai essayé en tuiles et là le badge apparait. Mais du coup je perds la possibilité de choisir le nombre de colonnes.
Salut @phil
Tu peux essayer ça :
- entity: sensor.validite_https
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
{% if states(config.entity) | int <= 21 %}
.label-badge {
--ha-label-badge-color: red;
--ha-label-badge-label-color: white;
}
.badge-container .label-badge .value {
animation: blink 2s linear infinite;
}
@keyframes blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
{% endif %}
.: |
:host {
{% if states(config.entity) | int <= 21 %}
--label-badge-text-color: red;
{% endif %}
}
Hello @Herbs
Sur cette vue, j’avais mis max_cols: 4.
Mais je pense que je vais passer sur la carte « Sections (expérimental) » qui répond à mes besoins.
1 « J'aime »
bonjour @Herbs,
merci pour ton aide. la valeur passe au rouge clignotant quand elle est inférieure à 21 jours et je t’en remercie. cependant, je souhaitais dans ma demande initiale à ce que lorsque la valeur est supérieure à 21 jours le badge reste au vert. actuellement il est toujours rouge . merci à toi
j’ai suivi ta logique et j’ai essayé ce code mais bien sur, cela ne marche pas…
- entity: sensor.validite_https
name: validité certificat
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
{% if states(config.entity) | int > 21 %}
.label-badge {
--ha-label-badge-color: green;
--ha-label-badge-label-color: white;
}
{% if states(config.entity) | int <= 21 %}
.label-badge {
--ha-label-badge-color: red;
--ha-label-badge-label-color: white;
}
.badge-container .label-badge .value {
animation: blink 2s linear infinite;
}
@keyframes blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
{% endif %}
.: |
:host {
{% if states(config.entity) | int <= 21 %}
--label-badge-text-color: red;
{% endif %}
}
Voilà, maintenant va falloir aller lire la doc un peu, les liens sont plus dans la discussion
- entity: sensor.validite_https
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
{% if states(config.entity) | int <= 21 %}
.label-badge {
--ha-label-badge-color: red;
--ha-label-badge-label-color: white;
}
.badge-container .label-badge .value {
animation: blink 2s linear infinite;
}
@keyframes blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
{% else %}
.label-badge {
--ha-label-badge-color: green;
}
{% endif %}
.: |
:host {
{% if states(config.entity) | int <= 21 %}
--label-badge-text-color: red;
{% endif %}
}
bonjour Herbs,
Merci pour ton aide. Cela fonctionne en effet et correspond à mon besoin. Concernant la doc, quant on est autodidacte ce n’est pas si simple parfois, et dans ma première demande, tu remarqueras que je ne demandais pas une solution toute faite mais à ce que l’on m’explique le message d’erreur afin de ne pas avoir à déranger tous le monde. Cela étant, encore un grand merci. Je vais m’atteler à prendre le temps de comprendre cette doc (je pense que tu parles de celle-là: Templating - Home Assistant). Excellente journée. cordialement, Phil