Ce que je voudrais c’est choisir la couleur de fond ou la deuxième couleur. Par exemple en jaune mon % d’autoconsommation et en bleu le reste qui correspond à la conso edf.
type: custom:entity-progress-card
entity: sensor.nascedric_memoire_disponible
name: Espace libre
bar_position: overlay
bar_single_line: true
height: 41px
watermark:
low: 15
low_color: red
type: line
line_size: 3px
opacity: 1
disable_high: true
card_mod:
style: >
.progress-bar-container.overlay {
height: 75%;
margin-top: 5px;
} .progress-bar-container.overlay .progress-bar,
.progress-bar-container.overlay .progress-bar-effect-radius
.progress-bar-container.overlay .progress-bar-inner {
border-radius: 25px !important;
} .name {
font-size: 20px;
font-weight: bold;
} .state-and-progress-info {
font-size: 20px;
font-weight: bold;
} .progress-bar {
background-color: blue;
} .progress-bar-inner {
background-color: lightblue;
} .content-section.overlay.single-line {
background-color: green
} .progress-bar-low-wm {
background-color: white
}
Salut, comme ceci ?
Cette barre semble hyper pratique, est-ce-qu’il serait possible de répondre à mes besoins de ce sujet :
Je n’y connais malheureusement rien en codage.
Merci pour les renseignements.
Bonjour. Super card en effet. J’e n’ai pas vu par contre le moyen d’afficher la barre de progression verticalement 
Merci mais cela n’a pas d’effet. Dans le readme on a:
“Adjusts the progress bar direction to display from right to left.”. Valeurs possibles rtl ou ltr ….
Merci beaucoup. Bonne soirée
Bonjour
J’essaye de changer le bar_color suivant un range mais cela ne fonctionne pas. Mon code est
- type: vertical-stack
cards:
- type: custom:entity-progress-card
card_mod:
style: |
ha-card {
--epb-progress-bar-background-color: rgb(76 73 73);
}
custom_theme:
- min: 0
max: 15
bar_color: "#fff000"
- min: 15
max: 30
bar_color: "#ffd000"
- min: 31
max: 45
bar_color: "#ffb000"
- min: 46
max: 60
bar_color: "#ff9000"
- min: 61
max: 75
bar_color: "#ff7000"
- min: 76
max: 90
bar_color: "#ff5000"
- min: 91
max: 100
bar_color: "#ff0000"
entity: sensor.mon-sensor-numerique
max_value: 500
name: "sensor"
#color: "#f37320"
#bar_color: "#f37320"
decimal: 0
Au lieu d’afficher la couleur du range, l’icone et le bar s’affiche en bleu (qui doit être la couleur standard?). Y-a-t-il un problème dans mon code ? Je vous remercie.
type: custom:entity-progress-card
entity: sensor.lywsd03mmc_0945_battery
name: en cours
max_value: 100
decimal: 0
custom_theme:
- min: 0
max: 25
icon_color: grey
bar_color: "#fff000"
- min: 25
max: 50
icon_color: grey
bar_color: "#ffb000"
- min: 50
max: 75
icon_color: grey
bar_color: "#ff7000"
- min: 75
max: 100
icon_color: grey
bar_color: "#ff0000"
force_circular_background: true
merci. cela fonctionne parfaitement
Bonjour,
J’ai remarqué que card_mod est fréquemment utilisé partout. J’ai mis à jour le CSS dernièrement et constaté que certaines variables, même complexes, étaient modifiées par card_mod par certains utilisateurs. J’ai donc procédé à un nettoyage complet. La nouvelle version inclut :
- Variables internes
- Variables externes (contrat)
Certaines variables vont changer… et oui… il y aura probablement des breaking change… Cependant, cette modification vise à simplifier l’utilisation future et à faciliter l’adaptation de la carte à vos thèmes.
Pour certains, cela leur permet enfin de verrouiller les paramètres et d’éviter complètement l’utilisation de card_mod de façon systématique en positionnant les bonnes valeur dans leur configuration de thème.
Le principal avantage est d’établir un contrat entre développeurs et utilisateurs afin de garantir une cohérence maximale, quelle que soit la structure interne, qui peut évoluer… et de documenter ce contrat.
Vous trouverez ci-dessous un exemple tiré de mon environnement de test, ainsi qu’une liste des variables existantes. Vos suggestions sont les bienvenues.
Dimensions de la carte
-
--epb-card-height
→ Hauteur de la carte
→ Exemple :80px -
--epb-card-width
→ Largeur minimale de la carte
→ Exemple :300px
Bordures
-
--epb-card-border-width
→ Épaisseur de la bordure
→ Exemple :2px -
--epb-card-border-color
→ Couleur de la bordure
→ Exemple :#ff6600 -
--epb-card-border-radius
→ Rayon des coins
→ Exemple :20px -
--epb-card-border-style
→ Style de bordure
→ Exemple :dashed
Couleurs
-
--epb-progress-bar-color
→ Couleur de remplissage de la barre de progression
→ Exemple :#ff6600 -
--epb-progress-bar-background-color
→ Couleur de fond de la barre de progression
→ Exemple :#333333 -
--epb-icon-and-shape-color
→ Couleur des icônes et formes
→ Exemple :#ff6600 -
--epb-low-watermark-color
→ Couleur du seuil bas
→ Exemple :#ff0000 -
--epb-high-watermark-color
→ Couleur du seuil haut
→ Exemple :#00ff00 -
--epb-watermark-opacity
→ Opacité du watermark
→ Exemple :0.5 -
--epb-watermark-line-size
→ Épaisseur des lignes de watermark
→ Exemple :3px -
--epb-zero-mark-width
→ Épaisseur du marqueur zéro
→ Exemple :2px
Barre de progression
-
--epb-progress-bar-size
→ Force la taille de remplissage (écrase la valeur calculée)
→ Exemple :60% -
--epb-progress-bar-radius
→ Rayon du conteneur de la barre
→ Exemple :4px -
--epb-progress-inner-radius
→ Rayon du remplissage interne
→ Exemple :4px
Typographie
-
--epb-card-font-family
→ Police de la carte
→ Exemple :monospace -
--epb-name-color
→ Couleur du nom
→ Exemple :#ffffff -
--epb-name-font-size
→ Taille du nom
→ Exemple :16px -
--epb-name-font-weight
→ Épaisseur du nom
→ Exemple :700 -
--epb-name-letter-spacing
→ Espacement des lettres du nom
→ Exemple :2px -
--epb-detail-color
→ Couleur des détails
→ Exemple :#aaaaaa -
--epb-detail-font-size
→ Taille des détails
→ Exemple :12px -
--epb-detail-font-weight
→ Épaisseur des détails
→ Exemple :300 -
--epb-detail-letter-spacing
→ Espacement des lettres des détails
→ Exemple :1px
type: custom:entity-progress-card-template-dev
entity: light.bandeau_led
icon: mdi:washing-machine
name: Entity Progress Card
secondary: Template
badge_icon: mdi:update
badge_color: green
percent: « {{ 50 }} »
force_circular_background: true
card_mod:
style: |
ha-card {
–epb-card-border-width: 2px;
–epb-card-border-color: red;
–epb-card-border-radius: 20px;
–epb-card-border-style: dashed;
–epb-progress-bar-color: yellow;
–epb-progress-bar-background-color: green;
–epb-icon-and-shape-color: lime;
–epb-low-watermark-color: #ff0000;
–epb-high-watermark-color: #00ff00;
–epb-watermark-opacity: 0.5;
–epb-watermark-line-size: 3px;
–epb-zero-mark-width: 2px;
–epb-progress-bar-size: 8px;
–epb-progress-bar-radius: 4px;
–epb-progress-inner-radius: 4px;
–epb-card-font-family: monospace;
–epb-name-color: orange;
–epb-name-font-size: 16px;
–epb-name-font-weight: 700;
–epb-name-letter-spacing: 2px;
–epb-detail-color: #aaaaaa;
–epb-detail-font-size: 12px;
–epb-detail-font-weight: 300;
–epb-detail-letter-spacing: 1px;
}
Tu n’es plus à la page, c’est uix maintenant (à partir de 2026.3.x).
ça corrige des bugs, compatibilité et ajout d’amélioration par rapport à card_mod (qui n’est plus trop maintenu par le dev)
Hooooooo top ! Je ne l’avais pas vu passer merci !!!
Bonjour,
Je viens de figer la 1.6.0 avec pas mal d'améliorations... En cours de finalisation avant publication mais testable en utilisant la méthode des RC.
Quoi de neuf ?
Cette mise à jour est une évolution majeure de l'Entity Progress Card : intégration plus poussée à Home Assistant, moteur de rendu plus rapide et nouvelle API CSS pour une personnalisation simplifiée. Toutes les nouveautés sont configurables depuis l'éditeur visuel.
Les grandes nouveautés
Une barre de progression directement dans une Tile Card
La carte peut désormais s'intégrer comme une fonctionnalité native des Tile Cards. La barre peut être ajoutée dans une tuile ou affichée en surimpression en haut ou en bas.
Des interactions 100 % natives
Les actions tap, hold et double tap utilisent désormais le système de gestes natif de Home Assistant, pour un comportement identique aux cartes officielles.
Personnalisation via les thèmes
Introduction des variables CSS --epb-*, configurables directement depuis votre thème ou via card_mod, sans astuces particulières.
Nouveaux modes de coloration
La barre peut maintenant être affichée :
- en segments,
- avec un dégradé arc-en-ciel,
- ou en mode automatique (comportement actuel).
Changements de syntaxe (sans casse)
Quelques options YAML évoluent :
max_value_attributeest intégré àmax_valuedisable_unitest remplacé parhideadditionsdevientbar_stack
Les anciennes configurations continuent de fonctionner automatiquement. Un bouton Migrate config permet même de convertir le YAML.
Nouvelles fonctionnalités
Barre segmentée
Affichage façon niveau de batterie ou barres de réseau.
Bar Stack
Fusionnez plusieurs entités dans une seule barre avec plusieurs modes d'affichage, couleurs indépendantes et prise en charge de center_zero.
Icônes animées
6 animations disponibles :
spinpulsebounceshakepingreveal
Alertes visuelles
La carte peut attirer l'attention lorsqu'un seuil est dépassé (bordure pulsante ou fond coloré).
Min et Max dynamiques
Les valeurs minimales et maximales peuvent désormais provenir :
- d'une valeur fixe,
- d'une entité,
- d'un template.
Nouveau center_zero
Le point central n'est plus obligatoirement 0 : il peut être n'importe quelle valeur de référence.
Watermarks simplifiés
Les repères de seuil utilisent directement l'unité du capteur ou un template.
Échelle logarithmique
Nouveau mode bar_scale: log pour les capteurs couvrant de très grandes plages de valeurs.
Masquage conditionnel
L'option hide accepte maintenant un template pour afficher ou masquer dynamiquement des éléments.
Meilleure mise en page
- Mode overlay amélioré.
- Nouveau fond occupant toute la carte.
- Les coins suivent automatiquement le thème Home Assistant.
Éditeur visuel largement enrichi
La quasi-totalité des options est désormais configurable sans écrire de YAML :
- sélection du type de min/max,
- édition graphique des zones de couleur,
- panneau d'interactions plus clair,
- interface plus proche du style natif Home Assistant.
Diagnostic intégré
La commande EPB_DIAG.dump() dans la console du navigateur génère automatiquement les informations utiles pour un rapport de bug.
Dashboard de démonstration
Un tableau de bord d'exemple est fourni pour tester toutes les fonctionnalités.
Accessibilité
La barre expose désormais correctement ses informations aux lecteurs d'écran grâce aux attributs ARIA.
Nouvelles langues
Ajout de nombreuses traductions, dont :
- Catalan
- Espagnol (Amérique latine)
- Estonien
- Hongrois
- Lituanien
- Letton
- Portugais (Brésil)
- Slovaque
- Slovène
- Chinois simplifié
- Chinois traditionnel
Corrections
Compatible avec Home Assistant 2026.2+.
Parmi les principales corrections :
- meilleure gestion des entités atypiques (plus de crashs, messages d'erreur explicites),
- correction des doubles déclenchements au clic,
- suppression des scintillements des badges,
- correction des flèches de tendance,
- positionnement correct des watermarks,
- correction de plusieurs bugs liés à
center_zero, - correction des animations Ripple sur les cartes Template,
- mise à jour des thèmes intégrés,
- respect du format numérique régional (par exemple le format suisse),
- performances nettement améliorées sur les tableaux de bord comportant de nombreuses cartes,
- renforcement de la sécurité empêchant l'injection de scripts via les templates.