Custom:bar-card ... "0" in Mitte, Ausschlag nach LINKS < --- 0 --- > RECHTS

[Schwippser]

Ich war auf der Suche nach einer Karte um die Nulleinspeisung meiner PV darzustellen. Mit “0” in der Mitte, linkem Ausschlag bei Einspeisung und rechtem Ausschlag bei Netzbezug.
Leider habe ich nicht gefunden. Blieb also nur selber basteln:

Hier der Code:

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      padding: 20px;
    }
mode: horizontal
keep:
  background: false
cards:
  - type: custom:bar-card
    animation:
      state: "on"
      speed: "2"
    name: Nulleinspeisung
    width: 100%
    height: 50px
    min: "0"
    max: "-300"
    entity_row: true
    severity:
      - color: rgb(var(--mush-rgb-red))
        from: -300
        to: -40
      - color: rgb(var(--mush-rgb-orange))
        from: -39
        to: -20
      - color: rgb(var(--mush-rgb-green))
        from: -19
        to: -0.1
      - from: 0.1
        to: 2100
        hide: true
    positions:
      icon: "off"
      indicator: "on"
      name: "off"
      value: "off"
    entities:
      - entity: sensor.testsensor
        target: -0.1
    card_mod:
      style: |
        ha-card {
          background-color: red;
          border: 1px dotted;
          border-left: 2px solid;
          border-color: white;
          margin-right: -4px !important;
          transform: rotate(180deg);
          --bar-card-border-radius: 0px;
          --mush-rgb-red: 244, 67, 54;
          --mush-rgb-pink: 233, 30, 99;
          --mush-rgb-purple: 156, 39, 176;
          --mush-rgb-deep-purple: 103, 58, 183;
          --mush-rgb-indigo: 63, 81, 181;
          --mush-rgb-blue: 33, 150, 243;
          --mush-rgb-light-blue: 3, 169, 244;
          --mush-rgb-cyan: 0, 188, 212;
          --mush-rgb-teal: 0, 150, 136;
          --mush-rgb-green: 76, 175, 80;
          --mush-rgb-light-green: 139, 195, 74;
          --mush-rgb-lime: 205, 220, 57;
          --mush-rgb-yellow: 255, 235, 59;
          --mush-rgb-amber: 255, 193, 7;
          --mush-rgb-orange: 255, 152, 0;
          --mush-rgb-deep-orange: 255, 87, 34;
          --mush-rgb-brown: 121, 85, 72;
          --mush-rgb-grey: 158, 158, 158;
          --mush-rgb-blue-grey: 96, 125, 139;
          --mush-rgb-black: 0, 0, 0;
          --mush-rgb-white: 255, 255, 255;
        }

        bar-card-backgroundbar {
          opacity: 0.0;
          filter: brightness(1);
          border-radius: 0px;
          border: 1px dotted;
          border-color: white

        }
  - type: custom:bar-card
    animation:
      state: "on"
      speed: "2"
    name: Nulleinspeisung
    width: 100%
    height: 50px
    min: "0"
    max: "300"
    entity_row: true
    severity:
      - color: rgb(var(--mush-rgb-green))
        from: 0
        to: 19
      - color: rgb(var(--mush-rgb-orange))
        from: 20
        to: 39
      - color: rgb(var(--mush-rgb-red))
        from: 40
        to: 300
      - from: 0.1
        to: -2100
        hide: true
    positions:
      icon: "off"
      indicator: "on"
      name: "off"
      value: "off"
    entities:
      - entity: sensor.testsensor
        target: -0.1
    card_mod:
      style: |
        ha-card {
          background-color: red;
          border: 1px dotted;
          border-left: 2px solid;
          border-color: white;
          margin-left: -4px !important;
          --bar-card-border-radius: 0px;
          --mush-rgb-red: 244, 67, 54;
          --mush-rgb-pink: 233, 30, 99;
          --mush-rgb-purple: 156, 39, 176;
          --mush-rgb-deep-purple: 103, 58, 183;
          --mush-rgb-indigo: 63, 81, 181;
          --mush-rgb-blue: 33, 150, 243;
          --mush-rgb-light-blue: 3, 169, 244;
          --mush-rgb-cyan: 0, 188, 212;
          --mush-rgb-teal: 0, 150, 136;
          --mush-rgb-green: 76, 175, 80;
          --mush-rgb-light-green: 139, 195, 74;
          --mush-rgb-lime: 205, 220, 57;
          --mush-rgb-yellow: 255, 235, 59;
          --mush-rgb-amber: 255, 193, 7;
          --mush-rgb-orange: 255, 152, 0;
          --mush-rgb-deep-orange: 255, 87, 34;
          --mush-rgb-brown: 121, 85, 72;
          --mush-rgb-grey: 158, 158, 158;
          --mush-rgb-blue-grey: 96, 125, 139;
          --mush-rgb-black: 0, 0, 0;
          --mush-rgb-white: 255, 255, 255;
        }

        bar-card-backgroundbar {
          opacity: 0.0;
          filter: brightness(1);
          border-radius: 0px;
          border: 1px dotted;
          border-color: white
        }

[Max.Solar]

Nette Idee. Die inspiriert mich zu mehr. Danke Vg Max

[Schwippser]

Dankeschön … hab den Code noch ein wenig überarbeitet

type: custom:stack-in-card
mode: vertical
card_mod:
  style: |
    ha-card {
      height:170px;
    }
keep:
  background: false
cards:
  - type: custom:mushroom-template-card
    primary: Nulleinspeisung
    secondary: "{{states('sensor.stromzahler_channel_a_power')}} W"
    icon: ""
    layout: vertical
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {
          padding: 20px;
          ha-card-box-shadow: 0px;
        }
    mode: horizontal
    keep:
      background: false
    cards:
      - type: custom:bar-card
        animation:
          state: "on"
          speed: "2"
        name: Nulleinspeisung
        width: 100%
        height: 50px
        min: "0"
        max: "-50"
        entity_row: true
        severity:
          - from: 0.1
            to: 2100
            hide: true
        positions:
          icon: "off"
          indicator: "on"
          name: "off"
          value: "off"
        entities:
          - entity: sensor.stromzahler_channel_a_power
            target: -0.1
        card_mod:
          style: |
            ha-card {
              background-color: red;
              border: 1px dotted;
              border-left: 2px solid;
              border-color: white;
              margin-right: -4px !important;
              transform: rotate(180deg);
              --bar-card-border-radius: 0px;
              --mush-rgb-red: 244, 67, 54;
              --mush-rgb-pink: 233, 30, 99;
              --mush-rgb-purple: 156, 39, 176;
              --mush-rgb-deep-purple: 103, 58, 183;
              --mush-rgb-indigo: 63, 81, 181;
              --mush-rgb-blue: 33, 150, 243;
              --mush-rgb-light-blue: 3, 169, 244;
              --mush-rgb-cyan: 0, 188, 212;
              --mush-rgb-teal: 0, 150, 136;
              --mush-rgb-green: 76, 175, 80;
              --mush-rgb-light-green: 139, 195, 74;
              --mush-rgb-lime: 205, 220, 57;
              --mush-rgb-yellow: 255, 235, 59;
              --mush-rgb-amber: 255, 193, 7;
              --mush-rgb-orange: 255, 152, 0;
              --mush-rgb-deep-orange: 255, 87, 34;
              --mush-rgb-brown: 121, 85, 72;
              --mush-rgb-grey: 158, 158, 158;
              --mush-rgb-blue-grey: 96, 125, 139;
              --mush-rgb-black: 0, 0, 0;
              --mush-rgb-white: 255, 255, 255;
            }

            bar-card-backgroundbar {
              background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%);
            }
            bar-card-currentbar {
              background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%);
              clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
            }
      - type: custom:bar-card
        animation:
          state: "on"
          speed: "2"
        name: Nulleinspeisung
        width: 100%
        height: 50px
        min: "0"
        max: "50"
        entity_row: true
        severity:
          - from: 0.1
            to: -2100
            hide: true
        positions:
          icon: "off"
          indicator: "on"
          name: "off"
          value: "off"
        entities:
          - entity: sensor.stromzahler_channel_a_power
            target: -0.1
        card_mod:
          style: |
            ha-card {
              background-color: red;
              border: 1px dotted;
              border-left: 2px solid;
              border-color: white;
              margin-left: -4px !important;
              --bar-card-border-radius: 0px;
              --mush-rgb-red: 244, 67, 54;
              --mush-rgb-pink: 233, 30, 99;
              --mush-rgb-purple: 156, 39, 176;
              --mush-rgb-deep-purple: 103, 58, 183;
              --mush-rgb-indigo: 63, 81, 181;
              --mush-rgb-blue: 33, 150, 243;
              --mush-rgb-light-blue: 3, 169, 244;
              --mush-rgb-cyan: 0, 188, 212;
              --mush-rgb-teal: 0, 150, 136;
              --mush-rgb-green: 76, 175, 80;
              --mush-rgb-light-green: 139, 195, 74;
              --mush-rgb-lime: 205, 220, 57;
              --mush-rgb-yellow: 255, 235, 59;
              --mush-rgb-amber: 255, 193, 7;
              --mush-rgb-orange: 255, 152, 0;
              --mush-rgb-deep-orange: 255, 87, 34;
              --mush-rgb-brown: 121, 85, 72;
              --mush-rgb-grey: 158, 158, 158;
              --mush-rgb-blue-grey: 96, 125, 139;
              --mush-rgb-black: 0, 0, 0;
              --mush-rgb-white: 255, 255, 255;
            }

            bar-card-backgroundbar {
              background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%);
            }
            bar-card-currentbar {
              background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%);
              clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
            }

[Max.Solar]

Ein wenig nervös ist er jetzt der kleine.
Ich mag es lieber kleiner und zierlicher.

Vg Max

[Schwippser]

Noch einmal etwas überarbeitet …

type: custom:stack-in-card
mode: vertical
keep:
  background: false
cards:
  - type: custom:mushroom-template-card
    primary: null
    secondary: Nulleinspeisung {{states('sensor.stromzahler_channel_a_power')}} W
    icon: ""
    layout: vertical
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          margin: 10px;
        }
    cards:
      - type: custom:bar-card
        animation:
          state: "on"
          speed: "2"
        name: Nulleinspeisung
        width: 100%
        height: 20px
        min: "0"
        max: "-50"
        entity_row: true
        severity:
          - from: 0.1
            to: 2100
            hide: true
        positions:
          icon: "off"
          indicator: "on"
          name: "off"
          value: "off"
        entities:
          - entity: sensor.stromzahler_channel_a_power
            target: -0.1
        card_mod:
          style: |
            ha-card {
              background-color: red;
              border-radius: 0px;
              border: 1px dotted;
              border-left: 4px solid;
              border-color: white;
              margin-right: -4px !important;
              transform: rotate(180deg);
            }

            bar-card-backgroundbar {
              background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%);
            }
            bar-card-currentbar {
              background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%);
              clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
            }
      - type: custom:bar-card
        animation:
          state: "on"
          speed: "2"
        name: Nulleinspeisung
        width: 100%
        height: 20px
        min: "0"
        max: "50"
        entity_row: true
        severity:
          - from: 0.1
            to: -2100
            hide: true
        positions:
          icon: "off"
          indicator: "on"
          name: "off"
          value: "off"
        entities:
          - entity: sensor.stromzahler_channel_a_power
            target: -0.1
        card_mod:
          style: |
            ha-card {
              background-color: red;
              border-radius: 0px;
              border: 1px dotted;
              border-left: 4px solid;
              border-color: white;
              margin-left: -4px !important;
            }

            bar-card-backgroundbar {
              background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%);
            }
            bar-card-currentbar {
              background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%);
              clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
            }

[Sagitariusstern]

Hey Leute,
muss mich mal zu diesem Thema melden.
Hat noch jemand das Problem, dass seit dem Update auf 2025.5
keine Farben mehr in der Bar-Card angezeigt werden?

[HAndy]

Ich habe dasselbe Problem. In drei unterschiedlichen Karten wird nur noch die Standardfarbe angezeigt.

[anon76678013]

Das liegt daran, dass die styles.ts noch die alten paper-Werte hat.

Also entweder händisch ändern oder ein Issue eröffnen.

[Sagitariusstern]

Könntest du bitte erklären was da händisch geändert werden muss.
Wenn es keine Umstände macht, natürlich.

[metallmanu]

Klar, steht hier unter Themen und Typografie ausführlich bei den incompatible changes beschrieben, welche man vor jedem Update auch unbedingt lesen sollte:

2025.5: Two Million Strong and Getting Better

[Sagitariusstern]

Ganz ehrlich, wenn ich mir das durchlese, bin ich genauso schlau wie vorher.

[HAndy]

Dem kann ich nur zustimmen.
Und ich habe mir die Changes vor dem Update durchgelesen - also eher überflogen. Ich wäre da aber nie darauf gekommen, dass dadurch die Farbgebung in den Bar-Cards verschwinden.

[Sagitariusstern]

Ich poste mal meinen Code, vielleicht kann mir es dann jemand besser erklären was abgeändert werden muss.

type: custom:bar-card
bar-card-min: 35
bar-card-max: 90
animation:
  state: "on"
  speed: "5"
card_mod:
  style: |-
    ha-icon {
      color: blue;
    }
    bar-card-name {
      color: black;
    }
    background {
      color: linear-gradient(to right, #FE2712 30%, #FD4D0C 35%, #FC7307 40%, #FB9902 45%, #FCBA12 50%, #FDDC22 55%, #FEFE33 60%, #CBE432 65%, #98CA32 70%, #66B032 75%, #448D76 80%, #236AB9 85%, #0247FE 90%);    
    }
entities:
  - entity: sensor.ts_bad_humidity
    name: Bad Luftfeuchtigkeit
    icon: mdi:water
    animate: true
  - entity: sensor.ts_flur_humidity
    name: Flur Luftfeuchtigkeit
    icon: mdi:water
    animate: true
  - entity: sensor.ts_nathan_humidity
    name: Nathan Luftfeuchtigkeit
    icon: mdi:water
    animate: true
  - entity: sensor.ts_leandra_humidity
    name: Leandra Luftfeuchtigkeit
    icon: mdi:water
    animate: true
  - entity: sensor.ts_schlafzimmer_humidity
    name: Schlafzimmer Luftfeuchtigkeit
    icon: mdi:water
    animate: true
  - entity: sensor.ts_wohnzimmer_humidity
    name: Wohnzimmer Luftfeuchtigkeit
    icon: mdi:water
    animate: true
  - entity: sensor.ts_esszimmer_humidity
    name: Esszimmer Luftfeuchtigkeit
    icon: mdi:water
    animate: true
  - entity: sensor.ts_kuche_humidity
    name: Küche Luftfeuchtigkeit
    icon: mdi:water
    animate: true
entity_row: true
limit_value: true
grid_options:
  columns: 24
  rows: auto

[dp20eic]

Moin,

ich habe keinen Beitrag zu der hier vorgestellten Custom-Card ich wollte einfach mal eine andere Möglichkeit hier aufzeigen, dies ist nur ein Beispiel, da ich kein BKW, oder PV Anlage besitze, somit habe ich das mit einer Temperatur versucht zu visualisieren.

Der Code dazu, sieht so aus

type: custom:canvas-gauge-card
entity: sensor.wolf_bm2_0x30_220103_aussentemperatur
card_height: 125
gauge:
  type: radial-gauge
  title: Außentemperatur (°C)
  width: 220
  height: 220
  borderShadowWidth: 0
  borderOuterWidth: 0
  borderMiddleWidth: 0
  borderInnerWidth: 0
  minValue: -35
  maxValue: 35
  startAngle: 90
  ticksAngle: 180
  valueBox: false
  majorTicks:
    - "-35"
    - "-30"
    - "-25"
    - "-20"
    - "-15"
    - "-10"
    - "-5"
    - "0"
    - "5"
    - "10"
    - "15"
    - "20"
    - "25"
    - "30"
    - "35"
  minorTicks: 2
  strokeTicks: true
  highlights:
    - from: -35
      to: -25
      color: rgba(204,0,0, .75)
    - from: -25
      to: -20
      color: rgba(230,145,56, .75)
    - from: -20
      to: -15
      color: rgba(255,217,102, .75)
    - from: -15
      to: 0
      color: rgba(220,243,255, .75)
    - from: 0
      to: 15
      color: rgba(220,243,255, .75)
    - from: 15
      to: 20
      color: rgba(255,217,102, .75)
    - from: 20
      to: 25
      color: rgba(230,145,56, .75)
    - from: 25
      to: 35
      color: rgba(204,0,0, .75)
  borders: true

Das dazugehörige HACS ist dieses

GitHub - custom-cards/canvas-gauge-card: The card makes it possible to use gauges from...

VG
Bernd

[metallmanu]

Oben ist doch die styles.ts verlinkt. Diese hast du ja auch in deinem Ordner der heruntergeladenen Karte. Dort dann das paper… austauschen wie im Link von mir angegeben

[anon76678013]

Wegen der Farbe: Im readme sind alle CSS-Variablen aufgelistet, die sollte man manipulieren können.

[HAndy]

@Sagitariusstern

type: custom:bar-card
bar-card-min: 35
bar-card-max: 90
animation:
  state: "on"
  speed: "5"
card_mod:
  style: |-
    ha-icon {
      color: blue !important;
    }
    bar-card-name {
      color: black !important;
    }
    background {
      color: linear-gradient(to right, #FE2712 30%, #FD4D0C 35%, #FC7307 40%, #FB9902 45%, #FCBA12 50%, #FDDC22 55%, #FEFE33 60%, #CBE432 65%, #98CA32 70%, #66B032 75%, #448D76 80%, #236AB9 85%, #0247FE 90%) !important;    
    }

Die Lösung für das Problem ist viel simpler als gedacht. Hinter den Werten fehlte einfach nur ein “!important;”!

Gefunden in dem Beitrag:

Probleme mit Home Assistant Update ab Version 2025.5.* (aktuell 2025.5.1) + Video

Das HA-Update 2025.5 ist online! Video von simon42 [Home Assistant 2025.5: MEHR Backup Flexibilität & iOS Bug Endlich behoben ] Release Notes von Home Assistant Damit wird es Zeit, einen neuen Sammelthread für Probleme und Fragen zu diesem Update zu eröffnen. Den 2025.4.#er-Thread ist geschlossen. Der Thread ist aber hier noch zu finden: KLICK Auch das Mai-Release hat wieder viele spannende Features, u.a. weitere Optimierungen in der HA-internen Ba…

[Schwippser]

Hier der angepasste code

  - type: custom:stack-in-card
    mode: vertical
    keep:
      background: false
    cards:
      - type: custom:mushroom-template-card
        primary: null
        secondary: Nulleinspeisung {{states('sensor.stromzahler_channel_a_power')}} W
        icon: ""
        layout: vertical
      - type: custom:stack-in-card
        mode: horizontal
        card_mod:
          style: |
            ha-card {
              margin: 10px;
              margin-top: -10px;
              margin-bottom: 10px;
            }
        cards:
          - type: custom:bar-card
            animation:
              state: "on"
              speed: "2"
            name: Nulleinspeisung
            width: 100%
            height: 20px
            min: "0"
            max: "-50"
            entity_row: true
            severity:
              - from: 0.1
                to: 2100
                hide: true
            positions:
              icon: "off"
              indicator: "on"
              name: "off"
              value: "off"
            entities:
              - entity: sensor.stromzahler_channel_a_power
                target: -0.1
            card_mod:
              style: |
                ha-card {
                  background-color: transparent !important;
                  border-radius: 0px !important;
                  border: 1px dotted !important;
                  border-left: 4px solid !important;
                  border-color: white !important;
                  margin-right: -4px !important;
                  transform: rotate(180deg) !important;
                }

                bar-card-backgroundbar {
                  background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%) !important;
                }
                bar-card-currentbar {
                  background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%) !important;
                  clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%) !important;
                }
          - type: custom:bar-card
            animation:
              state: "on"
              speed: "2"
            name: Nulleinspeisung
            width: 100%
            height: 20px
            min: "0"
            max: "50"
            entity_row: true
            severity:
              - from: 0.1
                to: -2100
                hide: true
            positions:
              icon: "off"
              indicator: "on"
              name: "off"
              value: "off"
            entities:
              - entity: sensor.stromzahler_channel_a_power
                target: -0.1
            card_mod:
              style: |
                ha-card {
                  background-color: transparent !important;
                  border-radius: 0px !important;
                  border: 1px dotted !important;
                  border-left: 4px solid !important;
                  border-color: white !important;
                  margin-left: -4px !important;
                }

                bar-card-backgroundbar {
                  background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%) !important;
                }
                bar-card-currentbar {
                  background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%) !important;
                  clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%) !important;
                }