Textfarbe Value ändern abhängig vom Wert (Card-mod)

Dashboard/Cards/Frontend
1

Hallo zusammen,

ich nutze Card-Mod für diverse Anpassungen, was grundsätzlich funktioniert.
Nun möchte ich aber die Werte/Values in Abhängigkeit der Werte färben.
Wenn also z.B. Luftfeuchtigkeit über 60%, dann Wert in rot darstellen.
Ich habe bislang:

square: false
type: grid
cards:
  - type: custom:button-card
    entity: sensor.lumi_lumi_weather_humidity
    icon: mdi:water-percent
    name: Wohnen
    show_label: true
    show_state: true
    layout: vertical
    styles:
      card:
        - height: 80px
        - width: 80px
        - background-color: rgb(33,38,40)
        - border: 1px solid rgb(80,80,80)
        - border-radius: 5%
        - font-family: sans-serif
        - font-size: 12px
        - padding: 5%
      name:
        - text-transform: none
        - justify-self: center
        - padding: 0px 5px
      icon:
        - color: rgb(243,156,15)
        - width: 20px
        - height: 20px
        - padding: 0px 5px 5px 0px
      state:
        - justify-self: center
        - font-size: 20px
        - padding: 0px 5px

image
Wenn der Wert 60% übersteigt, möchte ich z.B. 60,5 % in Rot darstellen.
Ich finde bezüglich Card-Mod Beispiele um die Farbe des Icons oder der Entität in Abhängigkeit des Wertes zu ändern, aber nirgends, ob man auch den Wert in der Farbe ändern kann.
Geht das mit Card-mod nicht?

1 „Gefällt mir“
2

Die button card kann das auch ohne card mod

styles:
          state:
                - color: |
                    [[[
                      if (entity.state > 25) return '#e63232';
                      if (entity.state > 23) return '#ff6f22';
                      if (entity.state > 20) return 'var(--orange-color)';
                      if (entity.state > 18) return '#4d6dff';
                      else return '#4d6dff';
                    ]]]

Statt nem Rgb Code. Kannst auch einfach ‘red’ schreiben

3

Sauber. Viieelen Dank :+1:

4

Auch wenn’s gelöst ist,
mich hat’s auch genervt das man bei der custom button-card kein color-threshold für den state hat. Und sich dutzend Einzelpunkte zu definieren war dann auch extremst aufwändig.

 styles:
    state:
      - color: |
            [[[
              var val = Number(entity.state);
              var min = -100; var minc = '#ff0000';
              var mid = -0;   var midc = '#ffff00';
              var max = 600;  var maxc = '#00ff00';
              var stp = 3; // 2 oder 3 Farben, bei 2 wird mid nicht beachtet
              if (min < 0) {
                var shift = Math.abs(min); // zu faul um mit negativen Werten zu rechnen
              } else {
                var shift = min * -1;
              }
              var min2 = min + shift;
              var mid2 = mid + shift;
              var max2 = max + shift;
              var val2 = val + shift;
              if (stp == 2) {
                var percent = ((val2 - min2)/max2); // von 0 bis 1
                var x = interpolate(minc, maxc, percent); // 2 Farben von min - max
              }
              if (stp == 3) {
                if (val < mid) {
                  var percent = ((val2 - min2) / mid2);
                  var x = interpolate(minc, midc, percent); // Farbe 1-2 von min bis mid
                } else {
                  var percent = ((val2 - mid2) / max2);
                  var x = interpolate(midc, maxc, percent); // Farbe 2-3 von mid bis max
                }
              }
              function interpolate(color1, color2, percent) {
                const r1 = parseInt(color1.substring(1, 3), 16);
                const g1 = parseInt(color1.substring(3, 5), 16);
                const b1 = parseInt(color1.substring(5, 7), 16);
                const r2 = parseInt(color2.substring(1, 3), 16);
                const g2 = parseInt(color2.substring(3, 5), 16);
                const b2 = parseInt(color2.substring(5, 7), 16);
                const r = Math.round(r1 + (r2 - r1) * percent);
                const g = Math.round(g1 + (g2 - g1) * percent);
                const b = Math.round(b1 + (b2 - b1) * percent);
                return "rgb(" + r + ", " + g + ", " + b + ")";
              }
              return x;
            ]]]

PS: wenn man es für mehr als nur 2 Karten benötigt empfiehlt sich mit templates zu arbeiten die man im RAW{} Konfigurationseditor verortet.

1 „Gefällt mir“