Graphique jauge horizontale

Bonjour,
Je cherche une carte qui me permettrait d’afficher l’équivalent des jauges standard, mais avec une simple barre horizontale.
J’ai une page avec le niveau de toutes les batteries des capteurs, mais les jauges en arc de cercle prennent beaucoup de place pour pas grand chose.
J’ai cherché dans HACS sans trouver.
Merci

Salut,
ta c’est carte

Default

1 « J'aime »

La Bar card est très bien et très configurable.
Toutes les gaudes ci-dessous sont faites avec, horizontales et verticales:

image

image

1 « J'aime »

Merci @WarC0zes et @AlexHass,
Je m’aperçois d’ailleurs que cette carte est déjà installée car utilisée sur le dashboard météo je pense.
En effet, cette carte correspond tout à fait. Reste maintenant à jouer avec les paramètres qui sont nombreux.
Je risque de revenir vers vous avec quelques questions de détail d’ici quelques heures :wink:

1 « J'aime »

Pour clore ce sujet, voici ce que j’ai réussi à obtenir:
image

1 « J'aime »

Oui c’est la meilleure carte je pense.

Salut,
herveaurel tu pourrais partager ton code svp?

Mon github sera bientôt mis a jour avec mes nouvelles créations : GitHub - herveaurel/HomeAssistant: Mad-Geek : My Custom Dashboard

Salut

Elle marche cette carte ? ça bug chez moi

Merci

Bonjour , je n’arrive pas à l’installer chez moi , encore d’actualité
Merci

Salut,
la carte fonctionne, mais il faut la configurer en mode yaml, par l’éditeur elle bug.

je m’en sers beaucoup et pas de problème à configurer en YAML:

Salut @WarC0zes

Je l’ai mis en place en yaml effectivement pour la voir apparaitre, mais je n’ai pas les « codes » pour la parametrer visuellement
Tu pourrais montrer ton code pour voir comment mettre en place ces visuels que tu as ?
Merci

Voici un exemple :
image

    type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:bar-card
            entities:
              - entity: sensor.system_monitor_utilisation_du_processeur
                name: CPU Use
                icon: phu:intel-cpu
                color: rgb(68, 115, 158)
                height: 27px
                min: "0"
                max: "100"
                target: "90"
                positions:
                  name: inside
                  indicator: "off"
            card_mod:
              style:
                ha-icon $: |
                  ha-svg-icon {
                    margin-top: 7px;
                    margin-left: 7px;
                  }
                .: |
                  ha-card {
                    margin-top: -20px;
                    margin-left: -10px;
                    margin-right: -5px;
                    background: none;
                  }
                  bar-card-currentbar, bar-card-backgroundbar {
                    border-radius: 15px;
                    border: 1px rgba(0,0,0,1.0) outset;
                    box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
                  }
                  bar-card-name {
                    margin: 5px;
                  }
                  ha-icon {
                    margin-top: -15px;
                    margin-left:  0px;
                    width: 42px;
                    height: 38px;
                    box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
                    border: 1px rgba(0,0,0,1.0) outset !important;
                    border-radius: 50px;
                  }
          - type: custom:bar-card
            entities:
              - entity: sensor.system_monitor_temperature_du_processeur
                name: CPU Temp
                icon: mdi:thermometer
                height: 27px
                color: orange
                min: "1"
                max: "80"
                target: "65"
                decimal: 0
                positions:
                  name: inside
                  indicator: "off"
            card_mod:
              style:
                ha-icon $: |
                  ha-svg-icon {
                    margin-top: 7px;
                    margin-left: 7px;
                  }
                .: |
                  ha-card {
                    margin-top: -20px;
                    margin-left: -15px;
                    margin-right: -5px;
                    background: none;
                  }
                  bar-card-currentbar, bar-card-backgroundbar {
                    border-radius: 15px;
                    border: 1px rgba(0,0,0,1.0) outset;
                    box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
                  }
                  bar-card-name {
                    margin: 5px;
                  }
                  ha-icon {
                    margin-top: -13px;
                    margin-left:  0px;
                    width: 42px;
                    height: 38px;
                    box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
                    border: 1px rgba(0,0,0,1.0) outset !important;
                    border-radius: 50px;
                  }

Merci à toi, je vais creuser le sujet

Bonne journée

Re,

peut tu me dire ce que signifie :
" target: « 90" »
" indicator: « off »"

je continue de creuser le reste

Merci

quand tu choisir un min et max , le target permet de t’afficher une barre d’alerte.
image

tu as un indicateur, pour dire si la valeur à augmenter ou diminuer . sur off, il s’affiche pas.
image

tu as la doc pour expliquer tout ça, avec des exemples de configuration :

dac merci, je vais étudier ça

C’est chaud quand même, car j’ai l’impression que la syntaxe a changée

par exemple pour que le début de tes barres fonctionnement chez moi, j’ai du les mettre comme ça
et encore, tout ne fonctionne pas completemet
problème d’indentation je pense

type: custom:bar-card
entities:
  - entity: sensor.consommation_d_energie_de_la_maison
    name: Conso maison
    icon: mdi:thermometer
    color: rgb(68, 115, 158)
    height: 27px
    min: "0"
    max: "8000"
    target: "800"
    positions:
      name: inside
      indicator: "on"
  - entity: sensor.consommation_d_energie_de_la_maison
    name: CPU Tempdddddddddd
    icon: mdi:thermometer
    height: 27px
    color: blue
    min: "0"
    max: "2000"
    target: "65"
    decimal: 0
    positions:
      name: inside
      indicator: "off"

Mon code, est pour mettre des barres en horizontal et avec deux carte bar-card .

ton code fonctionne bien après

Non rien à changer, c’est juste qui faut comprendre le code et savoir ce qu’on fait.
Ce n’est pas en copiant/collant du code que tu vas comprendre le fonctionnement.

ok noté
J’avance, j’avance
Merci