Bonjour,
je vous présente une nouvelle carte lovelace-entity-progress-cardqui peu remplacer bar-card ( projet abandonné, sinon un fork a été repris ici )
La carte a un bon potentiel et le dev est a l’écoute. N’hésité pas à la tester et mettre en favoris cette carte.
il y a 3 cartes intégrées :
Je partage quelques captures de son utilisation :
type: custom:entity-progress-card
entity: sensor.0x00158d000804b0ad_battery
force_circular_background: true
marginless: true
bar_effect: radius
bar_size: large
layout: horizontal
name: Aqara Mini Switch Salle à manger
theme: optimal_when_high
watermark:
low: 15
type: striped
opacity: 1
disable_high: true
card_mod:
style: |
.left {
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
border-radius: 50%;
}
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:entity-progress-card
entity: sensor.system_monitor_utilisation_du_processeur
icon: phu:intel-cpu
color: indigo
bar_color: indigo
bar_size: large
force_circular_background: true
max_value: 100
name: Charge CPU
watermark:
high: 90
type: striped
opacity: 1
disable_low: true
- type: custom:entity-progress-card
entity: sensor.system_monitor_temperature_du_processeur
color: orange
bar_color: orange
name: Temp CPU
decimal: 0
max_value: 60
force_circular_background: true
bar_size: large
watermark:
high: 50
type: striped
opacity: 1
disable_low: true
- type: custom:entity-progress-card
entity: sensor.system_monitor_utilisation_de_la_memoire
icon: phu:ram-memory
bar_color: red
color: red
bar_size: large
max_value: 100
force_circular_background: true
name: RAM Utilisé
watermark:
high: 90
type: striped
opacity: 1
disable_low: true
- type: horizontal-stack
cards:
- type: custom:entity-progress-card
entity: sensor.system_monitor_utilisation_du_disque
icon: phu:seagate-ssd
color: light-grey
bar_color: light-grey
bar_size: large
force_circular_background: true
max_value: 100
name: SSD Utilisé
watermark:
high: 75
type: striped
opacity: 1
disable_low: true
- type: custom:entity-progress-card
entity: sensor.system_monitor_debit_du_reseau_entrant_via_end0
icon: mdi:download
color: green
bar_color: green
name: Download
decimal: 2
max_value: 1000
force_circular_background: true
bar_size: large
- type: custom:entity-progress-card
entity: sensor.system_monitor_debit_du_reseau_sortant_via_end0
icon: mdi:upload
bar_color: red
color: red
bar_size: large
decimal: 2
max_value: 800
force_circular_background: true
name: Upload
type: custom:entity-progress-card-template
entity: sun.sun
height: 45px
bar_size: medium
bar_effect: radius
name: >
{% set sunrise = as_datetime(states('sensor.sun_next_rising')) %} {% set
sunset = as_datetime(states('sensor.sun_next_setting')) %} {% set now_time
= now() %} {% if sunrise and sunset %}
{% if sunrise < sunset %}
Soleil sous l'horizon | Prochain lever: {{ sunrise.timestamp() | timestamp_custom('%Hh%M', true) }}
{% else %}
Soleil au-dessus de l'horizon | Prochain coucher: {{ sunset.timestamp() | timestamp_custom('%Hh%M', true) }}
{% endif %}
{% else %}
Sun information pas disponible
{% endif %}
bar_color: |
{% if states('sun.sun') == 'below_horizon' %}
#40445a
{% else %}
yellow
{% endif %}
secondary: >
{% set sunrise = as_datetime(states('sensor.sun_next_rising')) %} {% set
sunset = as_datetime(states('sensor.sun_next_setting')) %} {% set now_time
= now() %} {% if sunrise and sunset %}
{% if sunrise < sunset %}
{% set next_event = sunrise %}
{% set last_event = sunrise - timedelta(days=1) %}
{% else %}
{% set next_event = sunset %}
{% set last_event = sunset - timedelta(days=1) %}
{% endif %}
{% set delta = next_event - now_time %}
{% set total_seconds = delta.total_seconds() %}
{% if total_seconds > 1 %}
{% set days = (total_seconds // 86400) | int %}
{% set hours = (total_seconds % 86400) // 3600 %}
{% set minutes = (total_seconds % 3600) // 60 %}
{% set seconds = (total_seconds % 60) %}
Dans
{% if days > 0 %}
{{ days }}d
{% endif %}
{{ '%02dh%02dm%02ds' | format(hours | int, minutes | int, seconds | int) }}
{% else %}
now
{% endif %}
{% else %}
--h--m--s
{% endif %}
percent: >
{% set sunrise = as_datetime(states('sensor.sun_next_rising')) %} {% set
sunset = as_datetime(states('sensor.sun_next_setting')) %} {% set now_time
= now() %} {% if sunrise and sunset %}
{% if sunrise < sunset %}
{% set next_event = sunrise %}
{% set last_event = sunrise - timedelta(days=1) %}
{% else %}
{% set next_event = sunset %}
{% set last_event = sunset - timedelta(days=1) %}
{% endif %}
{% set total = (next_event - last_event).total_seconds() %}
{% set elapsed = (now_time - last_event).total_seconds() %}
{% if total > 0 %}
{{ ((elapsed / total) * 100) | round(2) }}
{% else %}
0
{% endif %}
{% else %}
0
{% endif %}
tap_action:
action: more-info
Badge :
Belle trouvaille.
J’ai remplacé quelques ancienne carte par celle-ci et c’est vraiment pas mal.
Le seul truc qui me manque c’est un Entity Progress Badge Template
Je pourrai adapter mes mushroom-template-badge pour la batterie/essence voire l’entretien
Bonjour,
Étant dans la même situation que beaucoup il y a quelques mois, il a fallu choisir entre râler… ou développer quelque chose. Ce projet a donc vu le jour dans cette dynamique.
Les retours partagés sur GitHub sont pris en compte autant que possible pour proposer une solution à la fois simple, accessible et évolutive. Des fonctionnalités plus avancées sont également intégrées pour celles et ceux qui souhaitent aller plus loin avec Jinja et personnaliser davantage leur interface.
L’objectif est de faire évoluer le projet rapidement, tout en restant à l’écoute et réactif face aux éventuels bugs ou problèmes rencontrés.
Le projet est actuellement en 1.4.11 et… au mois d’Août le projet basculera en 1.5 avec de nouvelles langues, l’extension des entités supportés, l’ajout d’un nouveau badge.
Un grand merci à @WarC0zes pour ton post à propos de ce projet, ainsi que pour tes messages sur GitHub, qui a contribué à son évolution.
++
Salut,
Oui j’ai vu ta réponse à la demande.
Merci !
Hello,
Testez la dernière Release Candidate de la Entity Progress Card et découvrez les nouvelles fonctionnalités, la validation améliorée et une documentation mise à jour.
Fichier JS : entity-progress-card.js
Processus de test RC : docs/rc-testing.md
Notes et infos RC : docs/rc-testing-notes.md
Points forts de cette RC :
Template Badge !
Positionnement de la barre de progression avec bar_position (top, bottom, overlay)
Mode single-line pour les barres overlay avec bar_single_line
Indicateurs de tendance pour suivre l’évolution des valeurs
Système de validation renforcé
Support multilingue et documentation complète
Votre avis compte ! Testez, signalez les problèmes et contribuez à rendre la version stable encore meilleure.
Bon, je suis en plein dans les bagages donc pas vraiment en mesure de tester pour les 15 prochains jours. Mais j’y crois ! Bravo !
Bonjour @Francois-Le-Ko4la ,
vraiment top cette 1.5.0RC2.
Ça ressemble vraiment à bar-card 
le positionnement de la barre 
l’option force_circular_background fonctionne bien dans une carte template
le badge template
Super boulot, que tu nous as fait 
Bonjour, j’essaye de créer une carte pour afficher la production prévu pour la semaine :
type: custom:auto-entities
filter:
include:
- options:
type: custom:entity-progress-card-template
name: "{{ state_attr('this.entity_id', 'dayname') }}"
secondary: "{{ states('this.entity_id') }}"
theme: optimal_when_high
icon: mdi:solar-power
force_circular_background: true
reverse_secondary_info_row: true
icon_tap_action:
action: more-info
entity_id: sensor.solcast_pv_forecast_forecast_day_*
card:
square: false
type: grid
columns: 1
show_empty: false
card_param: cards
Mais je n’arrive pas à afficher les valeurs sur les barres avec “entity-progress-card-template”
sans le mode template => entity-progress-card :
Quelqu’un à une idée ?
Merci d’avance
Pas vraiment d’idée et éventuellement hors-sujet mais pour le même besoin j’étais tombé sur cette carte pv-forecast-card
Bonjour,
un exemple :
type: custom:auto-entities
filter:
include:
- options:
type: custom:entity-progress-card-template
name: "{{ state_attr('this.entity_id', 'friendly_name') }}"
secondary: "{{ states('this.entity_id', with_unit=true) }}"
theme: optimal_when_high
icon: mdi:solar-power
force_circular_background: true
reverse_secondary_info_row: false
bar_size: large
bar_effect: radius
percent: >
{% set current = states(entity) | float(0) %} {% set max_value = 50 %} {%
set percent = (current / max_value * 100) | round(1) %} {{ percent }}
icon_tap_action:
action: more-info
entity_id: sensor.lywsd03mmc_*_temperature
card:
square: false
type: grid
columns: 1
show_empty: false
card_param: cards
Parfait, j’ai réussi ce que je voulais faire 
type: custom:auto-entities
filter:
include:
- entity_id: sensor.solcast_pv_forecast_forecast_today
options:
type: custom:entity-progress-card-template
name: Today
secondary: "{{ states('this.entity_id') }}"
theme: optimal_when_high
icon: mdi:solar-power
force_circular_background: true
reverse_secondary_info_row: false
bar_size: large
bar_effect: radius
percent: >
{% set current = states(entity) | float(0) %} {% set max_value = 30 %}
{% set percent = (current / max_value * 100) | round(1) %} {{ percent
}}
bar_color: |-
{% set level = states('this.entity_id') | int %}
{% if level < 10 %}
linear-gradient(90deg, orange, red)
{% elif level > 15 %}
linear-gradient(90deg, lightgreen, green)
{% else %}
linear-gradient(90deg, orange, red)
{% endif %}
color: |-
{% if states('this.entity_id') | int < 10 %}
red
{% elif states('this.entity_id') | int > 15 %}
green
{% else %}
orange
{% endif %}
icon_tap_action:
action: more-info
- entity_id: sensor.solcast_pv_forecast_forecast_tomorrow
options:
type: custom:entity-progress-card-template
name: Tomorrow
secondary: "{{ states('this.entity_id') }}"
theme: optimal_when_high
icon: mdi:solar-power
force_circular_background: true
reverse_secondary_info_row: false
bar_size: large
bar_effect: radius
percent: >
{% set current = states(entity) | float(0) %} {% set max_value = 30 %}
{% set percent = (current / max_value * 100) | round(1) %} {{ percent
}}
bar_color: |-
{% set level = states('this.entity_id') | int %}
{% if level < 10 %}
linear-gradient(90deg, orange, red)
{% elif level > 15 %}
linear-gradient(90deg, lightgreen, green)
{% else %}
linear-gradient(90deg, orange, red)
{% endif %}
color: |-
{% if states('this.entity_id') | int < 10 %}
red
{% elif states('this.entity_id') | int > 15 %}
green
{% else %}
orange
{% endif %}
icon_tap_action:
action: more-info
- entity_id: sensor.solcast_pv_forecast_forecast_day_*
options:
type: custom:entity-progress-card-template
name: "{{ state_attr('this.entity_id', 'dayname') }}"
secondary: "{{ states('this.entity_id') }}"
theme: optimal_when_high
icon: mdi:solar-power
force_circular_background: true
reverse_secondary_info_row: false
bar_size: large
bar_effect: radius
percent: >
{% set current = states(entity) | float(0) %} {% set max_value = 30 %}
{% set percent = (current / max_value * 100) | round(1) %} {{ percent
}}
bar_color: |-
{% set level = states('this.entity_id') | int %}
{% if level < 10 %}
linear-gradient(90deg, orange, red)
{% elif level > 15 %}
linear-gradient(90deg, lightgreen, green)
{% else %}
linear-gradient(90deg, orange, red)
{% endif %}
color: |-
{% if states('this.entity_id') | int < 10 %}
red
{% elif states('this.entity_id') | int > 15 %}
green
{% else %}
orange
{% endif %}
icon_tap_action:
action: more-info
card:
square: false
type: grid
columns: 1
show_empty: false
card_param: cards
Bonjour, merci pour la carte elle est vraiment super !
Je cherche à faire une chose mais je n’y arrive pas, je ne sais pas si c’est possible donc je viens demander votre aide.
J’ai une:
Ce que je souhaite c’est regrouper les 3 en un :
Pour savoir la proportion sur solaire ou EDF
Merci 
hello @Kisifrot
Je ferais une seule carte pour tout mettre sachant que la partie info sous le nom peut intégrer différentes valeurs en Jinja et donc afficher toutes les infos.
Est-ce que ca pourrait convenir ?
++
Bonjour,
merci pour ce superbe travail qui va permettre de remplacer les custom bar-card avantageusement.
j’aurais quelques questions:
Serait-il possible de modifier en taille et normal/gras la police des textes ? nom et valeurs
Je ne sais pas si on peut modifier l’arrière plan de la barre de progression? L’idée serait d’afficher en mode transparence les différentes zones renseignées dans custom-thème.
En mode overlay pouvoir paramétrer une barre plus fine ?
Encore merci pour tout ce partage 
Bonjour,
oui possible avec card_mod
card_mod:
style: |
.name {
font-size: 20px;
font-weight: bold;
}
.state-and-progress-info {
font-size: 20px;
font-weight: bold;
}
oui, exemple :
card_mod:
style: |
.progress-bar {
background-color: red;
}
un exemple de barre que j’utilise :
type: custom:entity-progress-card
entity: sensor.m2101k9g_internal_storage
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: darkgrey;
}
Merci beaucoup je vais tester cela.
Bon dimanche
Bonjour,
En utilisant center_zero: true,
par exemple sur une échelle de valeurs de -5000 à 15000, le point 0 est situé au milieu de la barre.
Comment faire pour qu’il soit situé proportionnellement à la plage des valeurs, dans cet exemple au 1er 1/4 de la barre ?
Cordialement