Textfarbe in Karte bei negativen Zahlen

Allgemein
1

Hallo zusammen,

ich befasse mich erst seit ein paar Wochen mit Home Assistant und habe voller Stolz mein erstes Dashboard kreiert.

Ein kleiner Punkt stört mich noch. Ich habe eine Karte, die die Leistung des Fritz Smart Energy 250 Sensors anzeigt. Minus -Werte bedeuten Einspeisung, Plus-Werte sind Netzbezug. Nun hätte ich gerne, daß die negativen Werte in Grün erscheinen, die positiven Werte in Rot. Ich habe schon alle möglichen Codes ausprobiert, aber die Farbe ändert sich nicht. Vielleicht kann mir jemand helfen. Dann wissen es alle, wann die Waschmaschine einzuschalten ist :grin:

type: entity
entity: sensor.fritz_smart_energy_250_2_leistung
grid_options:
  columns: 9
  rows: 1
  card_mod:
    style:
      state-badge$:
        - ha-icon:
            $: |
              ha-svg-icon {
                color: {{ 'green' if states('sensor.fritz_smart_energy_250_2_leistung') | float < 0 else 'red'}};
              }
icon: mdi:home-lightning-bolt-outline
state_color: true

Momentan sieht es so aus:

image
image397×164 3.88 KB

Grüsse

Robert

2

Auf den ersten Blick würde ich sagen, Einrückungen sind falsch.

card-mod gehört mw ganz nach links.

(Ist Aktiv wenn ein Stift neben “Show Code Editor” (unten Links) angezeigt wird.)
(Mein HA läuft in english)

3

Eine Lösung einfach nur hingeworfen, weil ich los mus

  - entity: sensor.node_pve_gesamte_updates
    name: PVE Updates vorhanden
    card_mod:
      style: |
        {% set v = states('sensor.node_pve_gesamte_updates') | float(1) %}
        :host {
        {% if v > 0 %}
            --card-mod-icon-color: blue;
            color: blue;
        {% else %}
            --card-mod-icon-color: black;
            color: black;
        {% endif %}
        }

image
image567×215 7.55 KB

4

Das definitiv.

Das färbt den State:

type: tile
entity: sensor.fritz_smart_energy_250_2_leistung
card_mod:
  style: |
    :host {
      --ha-tile-info-secondary-color: {{ 'red' if states('sensor.fritz_smart_energy_250_2_leistung') | float(0) > 0 else 'green' }};
    }

Ich wundere mich, das du mit deinem Code auf ein Icon abzielst. (ha-svg-icon) Soll der State oder das Icon? Oder beides?

für das Icon:

    ha-card {
      --tile-color: {{ 'red' if states('sensor.fritz_smart_energy_250_2_leistung') | float(0) > 0 else 'green' }} !important;
    }

Das ist der Name:

    :host {
      --ha-tile-info-primary-color: {{ 'red' if states('sensor.fritz_smart_energy_250_2_leistung') | float(0) > 0 else 'green' }};
    }

Alles:

type: tile
entity: sensor.fritz_smart_energy_250_2_leistung
card_mod:
  style: |
    :host {
      --ha-tile-info-secondary-color: {{ 'red' if states('sensor.fritz_smart_energy_250_2_leistung') | float(0) > 0 else 'green' }};
      --ha-tile-info-primary-color: {{ 'red' if states('sensor.fritz_smart_energy_250_2_leistung') | float(0) > 0 else 'green' }};
    }
    ha-card {
      --tile-color: {{ 'red' if states('sensor.fritz_smart_energy_250_2_leistung') | float(0) > 0 else 'green' }} !important;
    }
5

Vielen Dank für alle Antworten,

der Code Schnipsel von Schlumperdix war die Lösung :star_struck:

6

Eine Kleinigkeit hätte ich noch:

Wenn der Primary Text weiß bleiben soll, und nur der Leistungswert (Secondary Text) eingefärbt werden soll, wie muß ich den ha-card Code erweitern?

Etwa so, primary-text-color bzw. secondary-text color …

ha-card {
      #--tile-color: {{ 'red' if states('sensor.fritz_smart_energy_250_2_leistung') | float(0) > 0 else 'green' }} !important;
       --primary-text-color: {{'white !important;}}
       --secondary-text-color: {{'red' if states('sensor.fritz_smart_energy_250_2_leistung') | float(0) > 0 else 'green' }} !important;
    }

funktioniert aber leider nicht. :slightly_frowning_face:

7

Ne. Das ist nur ne css Definition. Die Klammern dienen dazu um den Jinja2 Code reinzubringen.

Dann nur so:

--primary-text-color: white !important;

Reicht es nicht wenn man --primary-text-color: ganz weglässt?

8

Vielen Dank,

die Klammern waren das Problem.