Zmiana ikon (wg statusu) w custom:mini-graph-card

Home Assistant
,
1

Dobry. Chciałem zrobić kartę z airly caqi i określać stan. Wiele wersji powstało i skończyłem na zwykłym kwadraciku z wykresem. Kolor zmieniam na color_thresholds więc pewne zależności które trenowałem i działały tu są niepotrzebne.
Nie potrafię poradzić sobie ze zmianą ikony w zależności od zmiany stanu encji (numerycznej).
Kod jakoś działa ale tylko z jednym warunkiem (mniejszy niż 25 to daj ikonę A a w pozostałych przypadkach daj B). Jak daję resztę to nic się nie generuje.

kod:

   - type: grid
     cards:
       - type: custom:mini-graph-card
         entities:
           - sensor.dom_caqi
         name: POWIETRZE
         show:
           name_adaptive_color: false
           icon_adaptive_color: true
           graph: bar
           extrema: false
         line_color: '#b80000'
         line_width: 12
         font_size: 120
         font_size_header: 12
         align_state: left
         hours_to_show: 12
         points_per_hour: 2
         smoothing: true
         hour24: true
         color_thresholds:
           - value: 0
             color: '#20c400'
           - value: 25
             color: '#c4bd00'
           - value: 50
             color: '#c48600'
           - value: 75
             color: '#c48600'
           - value: 87.5
             color: '#c40000'
           - value: 100
             color: '#c40065'
           - value: 125
             color: '#a000c4'
         card_mod:
           style: |
             :host {
               --card-mod-icon:
                 {% if states('sensor.dom_caqi')|float<25 %} mdi:emoticon-happy;
                 
                 {% else %} mdi:emoticon-neutral;
                 {% endif %}
             }

W pustym miejscu dodałem :

                {% if states('sensor.dom_caqi')|float >= 25 && states('sensor.dom_caqi')|float < 50 %} mdi:emoticon-neutral;
                {% if states('sensor.dom_caqi')|float >= 50 && states('sensor.dom_caqi')|float < 75 %} mdi:emoticon-neutral;
                {% if states('sensor.dom_caqi')|float >= 75 && states('sensor.dom_caqi')|float < 87.5 %} mdi:emoticon-sad;
                {% if states('sensor.dom_caqi')|float >= 87.5 && states('sensor.dom_caqi')|float < 100 %} mdi:emoticon-sad;
                {% if states('sensor.dom_caqi')|float >= 100 && states('sensor.dom_caqi')|float < 125 %} mdi:emoticon-sad;
                {% if states('sensor.dom_caqi')|float > 125 %} mdi:emoticon-dead;

Próbowałem z dodatkowymi nawiasami i nic. Może mi ktoś doradzić z zapisem (formatowaniem)? Bo to musi iść zrobić…

Tak to wygląda:
Przechwytywanie

2

Co prawda używam custom button-card, ale u mnie działa coś takiego

    if (entity.state < 26) return "mdi:emoticon-excited-outline";
    if ((entity.state < 51) && (entity.state > 25)) return "mdi:emoticon-happy-outline";
    if ((entity.state < 76) && (entity.state > 50)) return "mdi:emoticon-neutral-outline";
    if ((entity.state < 88) && (entity.state > 75)) return "mdi:emoticon-confused-outline";
    if ((entity.state < 101) && (entity.state > 87)) return "mdi:emoticon-sad-outline";
    if ((entity.state < 126) && (entity.state > 100)) return "mdi:emoticon-angry-outline";
    if (entity.state > 125) return "mdi:emoticon-dead-outline";
3

Nie wiem czy chodziło dokładnie o to ale ja mam coś takiego do pokazywania stężenie pyłków:

  - type: custom:bar-card
    entities:
      - entity: sensor.stezenie_dab
        attribute: value
        name: Dąb
      - entity: sensor.stezenie_komosa
        attribute: value
        name: Komosa
      - entity: sensor.stezenie_cladosporium
        attribute: value
        name: Cladospor.
      - entity: sensor.stezenie_babka
        attribute: value
        name: Babka
      - entity: sensor.stezenie_szczaw
        attribute: value
        name: Szczaw
    show_state: true
    show_icon: true
    columns: '5'
    direction: up
    positions:
      icon: outside
      indicator: inside
      name: inside
      value: 'off'
      minmax: 'off'
    max: '100'
    min: '0'
    height: 100px
    severity:
      - to: '10'
        color: green
        from: '1'
      - to: '20'
        color: yellow
        from: '11'
      - to: '50'
        color: orange
        from: '21'
      - to: '100'
        color: red
        from: '51'
    color: green
    target: '0'
    animation:
      state: 'on'
      speed: '20'
4

Z tymi buźkami nie wyszło dobrze i raz działały raz nie. Jedno z rozwiązań jakie mi pomogło to zrobienie w configuration.yaml wpisu z nową encją na bazie starej:

- platform: template
  sensors:
    dom_caqi2:
      friendly_name: Powietrze
      unit_of_measurement: CAQI
      value_template: "{{states('sensor.dom_caqi')|int(0)}}"
      device_class: aqi
      icon_template: >
        {% set powietrze = states('sensor.dom_caqi')|int(0) %}
        {% if powietrze < 25 %}
          mdi:emoticon-happy
        {% elif powietrze >= 25 and powietrze < 50 %}
          mdi:emoticon-neutral
        {% elif powietrze >= 50 and powietrze < 100 %}
          mdi:emoticon-confused
        {% elif powietrze >= 100 %}
          mdi:emoticon-sad
        {% endif %}

Mamy wtedy nową encję na bazie “sensor.dom_caqi”, której zmienia się ikonka w zależności od wartości. Kolory akurat zmieniam już w “enticie” (custom:mini-graph-card).
Na chwilę obecną mam to tak:
Przechwytywanie
ale zamierzam zmienić na custom:button-card i zrobić taką dużą buźkę żeby było widać z daleka (mam tablet na ścianie).

Jako ciekawostkę (dla mnie) podam, że help oficjalny namawia do innego formatu zapisu “- platform: template” a ten obecny traktuje jako starą alternatywę więc dla nowych może to być mylące czemu kod czasem zapisany jest różnie, a wykonuje się tak samo (nie każdy początkujący czyta od razu oficjalny support).

5

Ja z kolei mam coś takiego:

obraz

zmieniany cały kolor kafelka i ikona, wartość w kółku.

Template do custom-button-card:

icon_aqi:
  show_state: true
  custom_fields:
    icon: >
      [[[
      if (entity.state != 'unavailable')
      {
        if (entity.state === 'dobry') {
          var temp_color ="'#A8E05F";
          return `<svg viewBox="0 0 50 50"><g fill="rgba(0, 0, 0, 0.6)"><path d="M22.579 30.814c.512.148.986.22 1.447.22.46 0 .934-.072 1.447-.22a.378.378 0 0 0 .076-.693.373.373 0 0 0-.284-.03c-.89.257-1.586.257-2.477 0a.377.377 0 0 0-.21.724"/><path d="M40.139 24.513a1.36 1.36 0 0 0-.924-.238c.377-1.81.637-3.614.777-5.363.382-4.79-.863-8.887-3.6-11.849-2.92-3.158-7.437-4.97-12.392-4.97-1.258 0-2.374.124-3.007.242a8.88 8.88 0 0 1-.759-.438l-.051-.035a.19.19 0 0 0-.26.052l-.334.492a.187.187 0 0 0-.03.144c.01.05.04.094.082.12l.054.035c.856.561 1.79.983 2.561 1.157.875.197 1.311.622 1.493.858l.032.04a.19.19 0 0 0 .236.053l.532-.278a.188.188 0 0 0 .065-.277l-.042-.06c-.172-.24-.653-.795-1.595-1.132.342-.019.783-.033 1.023-.033 4.697 0 8.963 1.701 11.701 4.668 2.59 2.807 3.719 6.554 3.353 11.137a43.37 43.37 0 0 1-.944 6.087l-.051.27a.254.254 0 0 0 .247.3h.362a.255.255 0 0 0 .154-.054l.057-.045c.245-.187.546-.236.716-.115.343.242.35 1.053.019 2.064l-.335 1.03-.01.027c-.192.595-.39 1.21-.637 1.943-.389 1.152-1.092 1.899-1.898 2.024l.063-.145c.047-.11.095-.22.142-.336a.255.255 0 0 0-.143-.327l-.408-.16a.255.255 0 0 0-.324.141c-1.775 4.454-3.995 7.823-6.986 10.603-1.625 1.51-3.206 1.82-5.079 1.82-1.872 0-3.453-.31-5.079-1.821-2.992-2.78-5.211-6.149-6.985-10.602a.253.253 0 0 0-.326-.14l-.407.16a.252.252 0 0 0-.141.327c.046.116.094.227.142.338l.06.137c-.014-.002-.027-.003-.04-.006-.796-.146-1.472-.88-1.855-2.013-.243-.718-.438-1.322-.627-1.907l-.354-1.095c-.332-1.01-.325-1.82.018-2.062.175-.123.47-.073.734.129l.067.042c.046.028.1.04.15.038l.357-.024a.222.222 0 0 0 .114-.039c.031.014.087.01.133-.002.351-.088.698-.396.95-.843.41-.727.704-1.79 1.044-3.02.684-2.48 1.537-5.566 3.756-6.964 2.485-1.567 4.625-1.291 7.106-.971 2.38.306 5.074.652 8.572-.574l.08.052c.257 1.897 1.445 4.389 4.016 5.73a.376.376 0 1 0 .347-.668c-2.394-1.249-3.448-3.569-3.636-5.324a.38.38 0 0 0-.172-.278l-.387-.245a.37.37 0 0 0-.33-.037c-3.418 1.24-6.063.898-8.406.595-2.51-.321-4.882-.624-7.592 1.083-2.465 1.553-3.36 4.796-4.08 7.401-.327 1.182-.608 2.203-.973 2.85-.152.269-.312.403-.42.459a42.846 42.846 0 0 1-.89-5.833c-.743-9.32 4.854-13.079 8.257-14.49l.046-.019c.42.184.812.318 1.167.398.875.197 1.312.622 1.494.858l.032.041a.192.192 0 0 0 .236.052l.532-.278a.188.188 0 0 0 .065-.277l-.043-.06c-.209-.29-.832-.998-2.102-1.286-.658-.147-1.473-.518-2.235-1.015l-.05-.034a.188.188 0 0 0-.261.051l-.334.492a.187.187 0 0 0-.03.144c.01.05.04.094.083.122l.053.033c.111.073.226.141.338.207-5.757 2.681-8.739 8.19-8.185 15.136.138 1.736.4 3.54.778 5.363a1.354 1.354 0 0 0-.924.237c-.423.3-1.032 1.102-.37 3.124l.343 1.057c.193.597.393 1.216.641 1.95.668 1.98 2.005 2.685 3.034 2.685.05 0 .1-.005.15-.01l.008-.001c1.733 3.91 3.835 6.934 6.612 9.515 1.959 1.821 3.907 2.072 5.72 2.072 1.812 0 3.76-.25 5.72-2.071 2.776-2.582 4.879-5.606 6.612-9.516h.007c.05.006.101.01.152.01 1.028 0 2.365-.705 3.032-2.683.253-.748.453-1.364.652-1.982l.332-1.025c.664-2.023.054-2.826-.368-3.125"/><path d="M31.026 24.643c0-.515-.689-.935-1.536-.935-.846 0-1.534.42-1.534.935 0 .524.673.934 1.534.934.847 0 1.536-.42 1.536-.934m-12.539.934c.848 0 1.537-.42 1.537-.934 0-.515-.69-.935-1.537-.935-.846 0-1.535.42-1.535.935 0 .524.674.934 1.535.934m9.093 9.999c-.404 1.021-1.388 2.631-3.58 2.631-2.19 0-3.176-1.61-3.58-2.631h7.16zM24 38.96c2.524 0 3.963-1.89 4.467-3.658a.375.375 0 0 0-.362-.48h-8.21a.378.378 0 0 0-.363.48c.505 1.768 1.944 3.658 4.468 3.658zm7.942-16.711a.372.372 0 0 0-.002-.288.373.373 0 0 0-.206-.203 6.035 6.035 0 0 0-2.239-.437c-.959 0-1.752.241-2.249.443a.377.377 0 0 0 .142.725.37.37 0 0 0 .141-.028 5.305 5.305 0 0 1 1.966-.387c.837 0 1.526.208 1.958.383a.38.38 0 0 0 .49-.208m-11.494.211a.375.375 0 0 0 .488-.495.376.376 0 0 0-.205-.202 6.042 6.042 0 0 0-2.249-.442c-.955 0-1.745.238-2.24.438a.377.377 0 0 0 .284.698 5.277 5.277 0 0 1 1.956-.383c.837 0 1.53.21 1.966.386"/></g></svg>`;
        } else if(entity.state === 'umiarkowany') {
          temp_color = "#FDD64B";
          return `<svg viewBox="0 0 50 50"><g fill="rgba(0, 0, 0, 0.6)"><path d="M24.027 31.035c.46 0 .934-.072 1.446-.22a.377.377 0 0 0-.207-.725c-.892.259-1.587.258-2.479 0a.374.374 0 0 0-.466.257c-.057.2.059.41.258.467.513.149.987.22 1.448.22"/><path d="M40.139 24.513a1.358 1.358 0 0 0-.924-.238c.377-1.81.637-3.614.777-5.363.382-4.79-.863-8.887-3.6-11.849-2.92-3.158-7.437-4.97-12.392-4.97-1.258 0-2.374.124-3.007.242a8.836 8.836 0 0 1-.759-.438l-.051-.035a.191.191 0 0 0-.26.052l-.334.492a.189.189 0 0 0 .053.265l.053.034c.856.561 1.79.983 2.561 1.157.875.197 1.311.622 1.493.858l.033.041a.19.19 0 0 0 .235.052l.531-.278a.191.191 0 0 0 .066-.278l-.042-.059c-.172-.24-.653-.795-1.595-1.132.342-.019.783-.033 1.022-.033 4.698 0 8.964 1.701 11.702 4.668 2.59 2.807 3.719 6.554 3.353 11.137a43.37 43.37 0 0 1-.944 6.087l-.051.27a.254.254 0 0 0 .247.3h.362a.255.255 0 0 0 .154-.054l.057-.045c.245-.187.546-.236.716-.115.343.242.35 1.053.019 2.064l-.335 1.03-.01.027c-.192.595-.39 1.21-.637 1.943-.389 1.152-1.092 1.899-1.898 2.024l.063-.145c.047-.11.095-.22.142-.336a.255.255 0 0 0-.143-.327l-.408-.16a.255.255 0 0 0-.324.141c-1.775 4.454-3.995 7.823-6.986 10.603-1.625 1.51-3.206 1.82-5.079 1.82s-3.453-.31-5.079-1.821c-2.992-2.78-5.211-6.15-6.985-10.602a.252.252 0 0 0-.325-.14l-.408.16a.252.252 0 0 0-.141.327c.045.114.092.222.14.332l.061.143a.45.45 0 0 1-.039-.006c-.796-.146-1.472-.88-1.855-2.014a142.07 142.07 0 0 1-.628-1.911l-.353-1.09c-.333-1.01-.325-1.82.018-2.062.175-.123.47-.072.734.129l.067.042a.25.25 0 0 0 .15.038l.357-.024a.224.224 0 0 0 .114-.039.261.261 0 0 0 .133-.002c.352-.089.698-.396.95-.843.41-.727.704-1.79 1.044-3.019.684-2.48 1.537-5.566 3.756-6.965 2.486-1.568 4.627-1.291 7.106-.971 2.38.306 5.074.652 8.572-.574l.08.052c.257 1.897 1.445 4.389 4.016 5.73a.376.376 0 1 0 .347-.668c-2.394-1.249-3.448-3.569-3.636-5.324a.38.38 0 0 0-.172-.278l-.387-.245a.37.37 0 0 0-.33-.037c-3.418 1.24-6.063.898-8.406.595-2.512-.322-4.882-.625-7.592 1.083-2.466 1.554-3.361 4.796-4.08 7.401-.327 1.182-.608 2.203-.973 2.85-.153.27-.314.404-.42.46a42.807 42.807 0 0 1-.89-5.834c-.743-9.32 4.854-13.079 8.258-14.49a.635.635 0 0 1 .045-.019c.42.184.813.318 1.167.398.876.197 1.312.622 1.494.858l.032.041a.19.19 0 0 0 .236.052l.53-.277a.191.191 0 0 0 .097-.124.184.184 0 0 0-.03-.154l-.043-.06c-.208-.29-.831-.998-2.102-1.286-.658-.147-1.472-.518-2.235-1.015l-.05-.034a.19.19 0 0 0-.261.051l-.334.492a.189.189 0 0 0 .053.266l.053.033c.112.073.226.141.338.207-5.757 2.681-8.74 8.19-8.185 15.136a43.8 43.8 0 0 0 .777 5.363 1.362 1.362 0 0 0-.923.237c-.423.298-1.033 1.102-.37 3.124l.334 1.026c.209.648.402 1.245.65 1.982.668 1.978 2.005 2.684 3.034 2.684.05 0 .1-.005.15-.01l.008-.001c1.733 3.91 3.835 6.935 6.612 9.515 1.959 1.821 3.907 2.072 5.72 2.072 1.812 0 3.76-.25 5.72-2.071 2.776-2.582 4.879-5.606 6.612-9.516h.007c.05.006.101.01.152.01 1.028 0 2.365-.705 3.032-2.683.253-.748.453-1.364.652-1.982l.332-1.025c.664-2.023.054-2.826-.368-3.125"/><path d="M25.41 38.404v-.112a.365.365 0 0 0 0-.53v-.112h-2.814v.107a.367.367 0 0 0-.121.27c0 .101.043.199.12.27v.107h2.816zm2.611-2.498a.377.377 0 0 0-.376-.377h-7.29a.377.377 0 0 0 0 .755h7.29c.208 0 .376-.17.376-.378m4.044-14.184a.377.377 0 0 0-.376-.377h-4.396a.377.377 0 0 0 0 .753h4.396a.377.377 0 0 0 .376-.376m-2.575 3.855c.848 0 1.537-.42 1.537-.934 0-.515-.69-.935-1.537-.935-.846 0-1.535.42-1.535.935 0 .524.675.934 1.535.934m-8.428-3.855a.377.377 0 0 0-.376-.377H16.29a.377.377 0 0 0 0 .753h4.396a.377.377 0 0 0 .376-.376m-2.575 3.855c.848 0 1.537-.42 1.537-.934 0-.515-.69-.935-1.537-.935-.846 0-1.534.42-1.534.935 0 .524.674.934 1.534.934"/></g></svg>`;
        } else if(entity.state === 'niezdrowy dla grup wrażliwych') {
          temp_color = "#FF9B57";
          return `<svg viewBox="0 0 50 50"><g fill="rgba(0, 0, 0, 0.6)"><path d="M22.851 37.65a.377.377 0 0 0 0 .754h2.298a.376.376 0 0 0 0-.753h-2.298zm-.272-6.836c.513.148.986.22 1.448.22.46 0 .934-.072 1.446-.22a.378.378 0 0 0 .076-.693.372.372 0 0 0-.283-.03c-.892.257-1.587.257-2.479 0a.366.366 0 0 0-.283.03.372.372 0 0 0-.182.227.371.371 0 0 0 .032.287.373.373 0 0 0 .225.18m5.363 6.349a.375.375 0 0 0 .374-.418.374.374 0 0 0-.138-.252c-1.143-.92-2.496-1.387-4.025-1.387-1.53 0-2.883.466-4.026 1.387a.374.374 0 0 0-.057.53c.13.16.368.187.53.056 1.004-.81 2.2-1.22 3.553-1.22 1.353 0 2.548.41 3.553 1.22.068.055.15.084.236.084m4.072-14.527a.375.375 0 0 0 .324-.422.382.382 0 0 0-.423-.323c-1.588.21-3.277-.342-4.408-1.445a.378.378 0 0 0-.64.275.38.38 0 0 0 .114.265c1.093 1.065 2.686 1.702 4.262 1.702.259 0 .518-.018.771-.052M21.01 20.454a.373.373 0 0 0-.266-.114h-.004a.374.374 0 0 0-.262.107c-1.13 1.103-2.816 1.658-4.408 1.444a.374.374 0 0 0-.423.324.377.377 0 0 0 .324.422c.254.034.514.052.771.052 1.577 0 3.17-.637 4.263-1.703a.377.377 0 0 0 .005-.532m10.016 4.189c0-.515-.689-.935-1.536-.935-.846 0-1.534.42-1.534.935 0 .524.673.934 1.534.934.847 0 1.536-.42 1.536-.934m-12.539.934c.848 0 1.537-.42 1.537-.934 0-.515-.69-.935-1.537-.935-.846 0-1.534.42-1.534.935 0 .524.674.934 1.534.934"/><path d="M40.139 24.513a1.358 1.358 0 0 0-.924-.238c.377-1.81.637-3.614.777-5.363.382-4.79-.863-8.887-3.6-11.849-2.92-3.158-7.437-4.97-12.392-4.97-1.258 0-2.374.124-3.007.242a8.836 8.836 0 0 1-.759-.438l-.051-.035a.191.191 0 0 0-.26.052l-.334.492a.189.189 0 0 0 .053.265l.053.034c.856.561 1.79.983 2.561 1.157.875.197 1.311.622 1.493.858l.033.041a.19.19 0 0 0 .235.052l.531-.278a.191.191 0 0 0 .066-.278l-.042-.059c-.172-.24-.653-.795-1.595-1.132.342-.019.783-.033 1.022-.033 4.698 0 8.964 1.701 11.702 4.668 2.59 2.807 3.719 6.554 3.353 11.137a43.37 43.37 0 0 1-.944 6.087l-.051.27a.254.254 0 0 0 .247.3h.362a.255.255 0 0 0 .154-.054l.057-.045c.245-.187.546-.236.716-.115.343.242.35 1.053.019 2.064l-.335 1.03-.01.027c-.192.595-.39 1.21-.637 1.943-.389 1.152-1.092 1.899-1.898 2.024l.063-.145c.047-.11.095-.22.142-.336a.255.255 0 0 0-.143-.327l-.408-.16a.255.255 0 0 0-.324.141c-1.775 4.454-3.995 7.823-6.986 10.603-1.625 1.51-3.206 1.82-5.079 1.82-1.873 0-3.453-.31-5.078-1.821-2.993-2.78-5.212-6.15-6.985-10.602a.253.253 0 0 0-.326-.14l-.407.16a.25.25 0 0 0-.142.327c.046.116.094.227.143.338.02.046.04.09.058.137a.45.45 0 0 1-.039-.006c-.796-.146-1.472-.88-1.855-2.014a142.07 142.07 0 0 1-.628-1.911l-.353-1.09c-.333-1.01-.325-1.82.018-2.062.175-.123.47-.072.734.129l.067.042a.251.251 0 0 0 .15.038l.357-.024a.226.226 0 0 0 .114-.039.252.252 0 0 0 .133-.002c.352-.089.698-.396.95-.843.41-.727.704-1.79 1.044-3.019.684-2.48 1.537-5.566 3.756-6.965 2.486-1.568 4.627-1.291 7.106-.971 2.38.306 5.074.652 8.572-.574l.08.052c.257 1.897 1.445 4.389 4.016 5.73a.376.376 0 1 0 .347-.668c-2.394-1.249-3.448-3.569-3.636-5.324a.38.38 0 0 0-.172-.278l-.387-.245a.37.37 0 0 0-.33-.037c-3.418 1.24-6.063.898-8.406.595-2.512-.322-4.881-.625-7.592 1.083-2.466 1.554-3.361 4.796-4.08 7.401-.327 1.182-.608 2.203-.973 2.85-.153.27-.314.404-.42.46a42.807 42.807 0 0 1-.89-5.834c-.743-9.32 4.854-13.079 8.258-14.49a.635.635 0 0 1 .045-.019c.42.184.813.318 1.167.398.876.197 1.312.622 1.494.858l.032.041a.19.19 0 0 0 .236.052l.53-.277a.191.191 0 0 0 .097-.124.184.184 0 0 0-.03-.154l-.043-.06c-.208-.29-.831-.998-2.102-1.286-.658-.147-1.472-.518-2.235-1.015l-.05-.034a.19.19 0 0 0-.261.051l-.334.492a.189.189 0 0 0 .053.266l.053.033c.112.073.226.141.338.207-5.757 2.681-8.74 8.19-8.185 15.136a43.8 43.8 0 0 0 .777 5.363 1.361 1.361 0 0 0-.923.237c-.423.298-1.033 1.102-.37 3.124l.334 1.026c.209.648.402 1.245.65 1.982.668 1.978 2.005 2.684 3.034 2.684.05 0 .1-.005.15-.01l.008-.001c1.733 3.91 3.835 6.935 6.612 9.515 1.959 1.821 3.907 2.072 5.72 2.072 1.812 0 3.76-.25 5.72-2.071 2.776-2.58 4.878-5.605 6.611-9.516h.007c.05.006.101.01.153.01 1.028 0 2.365-.705 3.032-2.683.253-.748.453-1.364.652-1.982l.332-1.025c.664-2.023.054-2.826-.368-3.125"/></g></svg>`;
        } else if(entity.state === 'niezdrowy') {
          temp_color = "#FE6A69";
          return `<svg viewBox="0 0 50 50"><g fill="rgba(0, 0, 0, 0.6)"><path d="M32.065 21.722a.377.377 0 0 0-.376-.377h-4.396a.376.376 0 0 0 0 .754h4.396c.207 0 .376-.17.376-.377m-4.11 2.921c0 .524.674.934 1.535.934.847 0 1.536-.42 1.536-.934 0-.516-.689-.935-1.536-.935-.846 0-1.535.42-1.535.935m-6.893-2.921a.377.377 0 0 0-.376-.377H16.29a.376.376 0 0 0 0 .754h4.396c.208 0 .376-.17.376-.377m-4.109 2.921c0 .524.674.934 1.534.934.847 0 1.536-.42 1.536-.934 0-.516-.689-.935-1.536-.935-.846 0-1.534.42-1.534.935m10.753 9.122h-7.411a.377.377 0 0 0 0 .754h7.41a.377.377 0 0 0 0-.754m.001 2.212h-7.411a.377.377 0 0 0 0 .753h7.41a.377.377 0 0 0 0-.753m.001 2.213h-7.411a.377.377 0 0 0 0 .752h7.41a.377.377 0 0 0 0-.753"/><path d="M11.586 32.41a2.976 2.976 0 0 1-.467-.072l-.024-.008c-.435-.118-1.237-.535-1.727-1.986-.245-.726-.443-1.338-.633-1.928l-.348-1.071c-.332-1.012-.324-1.822.018-2.064.171-.122.48-.074.715.115.1.079.136.145.147.185.477 1.834 1.227 4.102 2.007 6.067l.312.763zm23.771.777c-1.663 3.677-3.66 6.525-6.278 8.957-1.625 1.511-3.206 1.82-5.08 1.82-1.872 0-3.453-.309-5.078-1.82-2.619-2.433-4.615-5.281-6.278-8.957.574-.017 1.302-.132 2.336-.728a63.87 63.87 0 0 0 2.612-1.607l.024-.015c2.364-1.51 4.232-2.703 6.385-2.704 2.153.001 4.02 1.194 6.386 2.704a65.4 65.4 0 0 0 2.635 1.622c1.034.596 1.762.71 2.336.728zm4.257-5.842l-.349 1.071c-.19.591-.388 1.202-.633 1.929-.49 1.451-1.292 1.867-1.727 1.985l-.022.008c-.122.032-.28.056-.469.073l.312-.763c.78-1.964 1.53-4.232 2.006-6.065a.42.42 0 0 1 .148-.187.797.797 0 0 1 .48-.182c.09 0 .172.022.235.067.343.242.35 1.052.019 2.064zm.525-2.832a1.36 1.36 0 0 0-.924-.238c.377-1.81.637-3.614.777-5.363.382-4.79-.863-8.887-3.6-11.849-2.92-3.158-7.437-4.97-12.392-4.97-1.258 0-2.374.124-3.007.242a8.836 8.836 0 0 1-.759-.439l-.051-.034a.19.19 0 0 0-.26.052l-.334.491a.19.19 0 0 0 .053.265l.053.035c.856.561 1.79.983 2.561 1.157.875.197 1.311.622 1.493.858l.033.041a.19.19 0 0 0 .235.051l.531-.277a.191.191 0 0 0 .066-.278l-.042-.058c-.172-.24-.653-.795-1.595-1.134.343-.018.785-.032 1.022-.032 4.698 0 8.964 1.701 11.702 4.668 2.59 2.806 3.719 6.554 3.353 11.137a42.16 42.16 0 0 1-.943 6.085c-.471 2.041-1.554 5.263-2.525 7.513-.669.01-1.27-.099-2.19-.63a63.936 63.936 0 0 1-2.605-1.605c-2.37-1.512-4.415-2.818-6.795-2.822-2.37.003-4.416 1.309-6.787 2.822a63.116 63.116 0 0 1-2.606 1.605c-.92.53-1.529.64-2.188.63-.882-2.04-1.846-4.847-2.414-7.023.337-.1.667-.4.91-.83.41-.727.703-1.79 1.043-3.02.684-2.48 1.537-5.567 3.756-6.966 2.486-1.567 4.627-1.29 7.106-.97 2.38.306 5.074.652 8.572-.573l.08.051c.257 1.897 1.445 4.389 4.016 5.73a.376.376 0 1 0 .347-.668c-2.394-1.25-3.448-3.569-3.636-5.323a.38.38 0 0 0-.172-.279l-.387-.245a.37.37 0 0 0-.33-.037c-3.418 1.24-6.063.898-8.406.595-2.512-.322-4.882-.625-7.592 1.083-2.466 1.554-3.361 4.795-4.08 7.401-.327 1.182-.608 2.203-.973 2.85-.153.27-.314.404-.42.46a42.82 42.82 0 0 1-.89-5.834c-.743-9.32 4.854-13.079 8.258-14.49l.045-.019c.42.185.813.319 1.167.398.876.198 1.312.622 1.494.858l.032.04a.19.19 0 0 0 .236.053l.53-.278a.19.19 0 0 0 .067-.277l-.043-.06c-.208-.29-.831-.998-2.102-1.285-.658-.148-1.472-.519-2.235-1.016l-.05-.034a.19.19 0 0 0-.261.051l-.334.492a.189.189 0 0 0 .053.266l.053.033c.112.073.226.141.338.207-5.757 2.681-8.74 8.19-8.185 15.135.139 1.74.4 3.543.777 5.364a1.36 1.36 0 0 0-.923.237c-.423.298-1.033 1.102-.37 3.123l.334 1.027c.198.617.398 1.234.65 1.982.668 1.978 2.005 2.684 3.034 2.684.05 0 .101-.005.151-.01h.007c1.735 3.911 3.837 6.936 6.612 9.515 1.96 1.82 3.907 2.071 5.72 2.071 1.812 0 3.76-.25 5.72-2.072 2.776-2.58 4.878-5.604 6.613-9.515h.005c.05.006.101.01.153.01 1.028 0 2.365-.705 3.032-2.683.257-.759.463-1.395.652-1.982l.332-1.025c.664-2.023.054-2.826-.368-3.125z"/></g></svg>`;
        } else if(entity.state === 'bardzo niezdrowy') {
          temp_color = "#A97ABC";
          return `<svg viewBox="0 0 50 50"><g fill="rgba(0, 0, 0, 0.6)"><path d="M26.22 36.782a2.152 2.152 0 0 1-2.148 2.152 2.152 2.152 0 0 1 0-4.302 2.15 2.15 0 0 1 2.147 2.15m-2.147-2.9a2.9 2.9 0 0 0 0 5.802 2.901 2.901 0 0 0 0-5.802"/><path d="M27.889 36.914A3.696 3.696 0 0 1 24.2 40.61a3.696 3.696 0 0 1 0-7.389 3.695 3.695 0 0 1 3.688 3.694M24.2 32.471a4.445 4.445 0 0 0 0 8.888 4.445 4.445 0 0 0 0-8.888"/><path d="M38.206 36.981a.102.102 0 0 1-.007.08l-4.565 8.86a.104.104 0 0 1-.139.044l-1.017-.526 4.66-9.044 1.017.526a.102.102 0 0 1 .05.06zm-27.431-.06l1.017-.526 4.66 9.045-1.017.525a.107.107 0 0 1-.139-.044l-4.565-8.86a.105.105 0 0 1-.007-.08.105.105 0 0 1 .05-.06zm8.907 6.342c-.125.391-.393.71-.757.898l-1.808.935-4.66-9.044 1.808-.935a1.529 1.529 0 0 1 2.066.66l3.253 6.314c.188.364.223.78.098 1.172zm8.764-.213c-1.378.875-2.732.996-3.99.996-1.253 0-2.601-.12-3.975-.986a2.275 2.275 0 0 0-.232-1.313l-3.254-6.313c-.022-.044-.05-.083-.077-.123l-.018-.026c2.134-3.991 5.75-6.972 7.566-6.976 1.816.004 5.43 2.984 7.565 6.975l-.02.03a.976.976 0 0 0-.076.12l-3.254 6.313c-.205.4-.286.85-.235 1.303zm3.367 2.046l-1.808-.935a1.54 1.54 0 0 1-.659-2.07l3.253-6.314a1.525 1.525 0 0 1 1.364-.832c.246 0 .482.058.702.172l1.808.935-4.398 8.537-.262.507zm8.677-20.407a1.347 1.347 0 0 0-.918-.237c.374-1.802.633-3.597.771-5.337.38-4.767-.856-8.844-3.576-11.791-2.9-3.144-7.388-4.947-12.31-4.947-1.25 0-2.359.124-2.989.24-.29-.151-.53-.29-.753-.435l-.051-.034a.19.19 0 0 0-.258.051l-.332.49a.184.184 0 0 0-.03.141c.01.05.04.095.083.122l.053.034c.85.559 1.777.979 2.543 1.152.87.196 1.303.618 1.484.853l.032.041a.188.188 0 0 0 .234.052l.528-.277a.19.19 0 0 0 .066-.277l-.043-.058c-.17-.239-.648-.79-1.584-1.127.34-.018.778-.033 1.016-.033 4.667 0 8.904 1.694 11.624 4.646 2.574 2.793 3.695 6.522 3.332 11.083a43.229 43.229 0 0 1-.938 6.058l-.05.269a.248.248 0 0 0 .053.206.245.245 0 0 0 .192.091h.36a.255.255 0 0 0 .152-.053l.057-.044c.243-.187.542-.235.711-.115.34.241.348 1.048.02 2.054l-.347 1.066c-.19.588-.386 1.196-.63 1.92-.385 1.146-1.085 1.89-1.884 2.014.02-.05.041-.098.062-.146.047-.109.094-.218.14-.333a.253.253 0 0 0-.141-.325l-.407-.16a.253.253 0 0 0-.321.141c-.382.96-.795 1.884-1.258 2.816l-.023.03-.151-.079a2.256 2.256 0 0 0-1.74-.146c-.26.083-.5.21-.715.378a20.2 20.2 0 0 0-3.814-4.82c-1.611-1.482-3.127-2.3-4.277-2.303-1.143.003-2.66.822-4.27 2.304a20.203 20.203 0 0 0-3.815 4.82 2.263 2.263 0 0 0-.717-.379 2.255 2.255 0 0 0-1.739.146l-.151.078-.063-.078a36.789 36.789 0 0 1-1.238-2.767.25.25 0 0 0-.322-.14l-.406.16a.252.252 0 0 0-.14.326c.044.111.09.218.136.325l.064.147a.46.46 0 0 1-.04-.006c-.79-.145-1.462-.875-1.842-2.004-.24-.71-.433-1.309-.62-1.888l-.356-1.098c-.329-1.006-.321-1.812.02-2.053.173-.123.464-.072.729.128l.066.042a.244.244 0 0 0 .15.038l.354-.023a.235.235 0 0 0 .113-.04.25.25 0 0 0 .132-.002c.35-.088.693-.393.944-.838.408-.724.7-1.78 1.037-3.005.68-2.468 1.526-5.54 3.731-6.932 2.47-1.56 4.597-1.284 7.06-.966 2.365.304 5.04.649 8.516-.57l.08.051c.255 1.888 1.434 4.368 3.99 5.701a.375.375 0 0 0 .344-.664c-2.379-1.242-3.426-3.551-3.613-5.298a.377.377 0 0 0-.17-.276l-.384-.244a.369.369 0 0 0-.328-.037c-3.396 1.234-6.023.894-8.351.592-2.496-.32-4.851-.622-7.543 1.078-2.45 1.545-3.339 4.772-4.054 7.365-.324 1.176-.604 2.192-.967 2.836-.155.276-.318.409-.417.459A42.807 42.807 0 0 1 9.5 19.04c-.739-9.275 4.822-13.015 8.203-14.42l.045-.019c.418.184.808.317 1.16.397.87.196 1.303.619 1.484.853l.032.041a.19.19 0 0 0 .234.052l.527-.276a.19.19 0 0 0 .066-.277l-.042-.059c-.207-.289-.826-.994-2.089-1.28-.653-.147-1.462-.515-2.22-1.01l-.05-.034a.187.187 0 0 0-.259.051l-.332.49a.19.19 0 0 0 .052.263l.053.034c.111.073.225.14.337.205-5.72 2.669-8.683 8.152-8.132 15.063.137 1.73.397 3.526.772 5.337a1.358 1.358 0 0 0-.918.237c-.42.297-1.026 1.097-.366 3.108l.33 1.022c.198.614.396 1.228.647 1.972.663 1.97 1.992 2.671 3.014 2.671.05 0 .098-.005.146-.01h.01c.189.426.397.869.634 1.348l-2.492 1.288a1.044 1.044 0 0 0-.447 1.402l4.566 8.861a1.038 1.038 0 0 0 1.4.448l3.488-1.805c.411-.212.75-.532.986-.928 1.453.805 2.837.916 4.117.916 1.222 0 2.667-.11 4.129-.924.235.4.577.722.991.936l3.49 1.805a1.036 1.036 0 0 0 1.4-.448l4.565-8.86a1.043 1.043 0 0 0-.446-1.403l-2.508-1.295c.233-.472.44-.912.63-1.342l.012.001c.048.005.096.01.146.01 1.021 0 2.35-.702 3.013-2.671.254-.755.459-1.389.647-1.972l.33-1.02c.66-2.014.054-2.813-.365-3.11z"/><path d="M31.938 21.552a.375.375 0 0 0-.374-.376h-4.367a.374.374 0 0 0 0 .75h4.367a.374.374 0 0 0 .374-.374m-3.703 2.673c0 .521.67.929 1.525.929.841 0 1.526-.417 1.526-.929 0-.513-.685-.93-1.526-.93-.84 0-1.525.417-1.525.93m-6.885-2.673a.375.375 0 0 0-.374-.376h-4.367a.374.374 0 0 0 0 .75h4.367a.374.374 0 0 0 .374-.374m-4.409 2.673c0 .521.67.929 1.525.929.841 0 1.526-.417 1.526-.929 0-.513-.685-.93-1.526-.93-.84 0-1.525.417-1.525.93"/></g></svg>`;
        } else if(entity.state === 'niebezpieczny') {
          temp_color = "#A87383";
          return `<svg viewBox="0 0 50 50"><g fill="rgba(0, 0, 0, 0.6)"><path d="M27.746 24.537c0-1.464.882-2.655 1.964-2.655 1.083 0 1.965 1.191 1.965 2.655 0 1.463-.882 2.655-1.965 2.655-1.082 0-1.964-1.192-1.964-2.655m1.964 3.408c1.499 0 2.717-1.529 2.717-3.408s-1.218-3.408-2.717-3.408c-1.498 0-2.716 1.53-2.716 3.408 0 1.879 1.218 3.408 2.716 3.408m-13.386-3.408c0-1.464.882-2.655 1.964-2.655 1.083 0 1.965 1.191 1.965 2.655 0 1.463-.882 2.655-1.965 2.655-1.082 0-1.964-1.192-1.964-2.655m1.964 3.408c1.499 0 2.717-1.529 2.717-3.408s-1.218-3.408-2.717-3.408c-1.498 0-2.716 1.53-2.716 3.408 0 1.879 1.218 3.408 2.716 3.408m1.865 11.492c.997-.617 2.385-.967 3.847-.967s2.85.35 3.848.967zm-1.383 1.746c.06-.345.225-.68.49-.994h9.48c.265.315.429.649.49.994zm8.833 2.5c-.982.533-2.251.825-3.603.825-1.353 0-2.62-.292-3.602-.825zm1.597-1.747c-.091.35-.287.684-.582.993h-9.236c-.295-.31-.49-.643-.582-.993zM24 45.262c3.317 0 6.015-1.693 6.015-3.773S27.317 37.717 24 37.717s-6.016 1.692-6.016 3.772 2.7 3.773 6.016 3.773z"/><path d="M17.74 38.036c.26-2.17 3.02-3.88 6.286-3.888 3.265.009 6.027 1.722 6.287 3.901.428 3.054.461 3.494.461 3.556 0 2.399-3.027 4.357-6.748 4.367-3.72-.01-6.748-1.968-6.748-4.367 0-.062.033-.502.462-3.569m6.285-21.54c5.077.007 9.18 2.16 10.21 5.357 1.212 3.769-1.398 9.52-4.534 13.573-1.334-1.265-3.439-2.024-5.65-2.036H24c-2.21.012-4.315.771-5.648 2.036-3.136-4.053-5.746-9.804-4.534-13.573 1.03-3.197 5.132-5.35 10.208-5.357m16.114 8.017a1.366 1.366 0 0 0-.924-.238c.377-1.81.638-3.614.777-5.363.382-4.79-.863-8.887-3.6-11.849-2.92-3.158-7.437-4.97-12.392-4.97-1.258 0-2.374.124-3.008.242a8.916 8.916 0 0 1-.758-.439l-.051-.033a.19.19 0 0 0-.26.052l-.334.49a.188.188 0 0 0 .053.265l.053.035c.857.562 1.791.984 2.56 1.157.876.197 1.312.622 1.494.857l.032.042a.19.19 0 0 0 .236.051l.531-.277a.19.19 0 0 0 .066-.278l-.042-.059c-.172-.24-.653-.794-1.595-1.133.342-.018.783-.032 1.022-.032 4.699 0 8.964 1.7 11.702 4.668 2.59 2.806 3.718 6.553 3.353 11.137a43.393 43.393 0 0 1-.944 6.088l-.051.27a.253.253 0 0 0 .247.298h.362a.254.254 0 0 0 .154-.052l.057-.046c.243-.187.546-.236.717-.115.342.243.349 1.052.018 2.064l-.335 1.03c-.22.678-.405 1.254-.647 1.97-.389 1.151-1.092 1.899-1.898 2.024l.063-.145c.047-.11.095-.22.141-.336a.253.253 0 0 0-.142-.327l-.408-.16a.255.255 0 0 0-.324.14c-1.29 3.237-2.844 5.928-4.75 8.22-.068-.504-.15-1.106-.25-1.815-.081-.68-.366-1.337-.846-1.95 3.307-4.232 6.047-10.306 4.737-14.376-1.129-3.51-5.522-5.874-10.93-5.882-5.407.008-9.799 2.372-10.929 5.882-1.31 4.07 1.43 10.144 4.737 14.376-.48.614-.764 1.27-.844 1.948-.104.733-.188 1.354-.258 1.87-1.929-2.309-3.498-5.016-4.795-8.272a.254.254 0 0 0-.326-.14l-.408.16a.252.252 0 0 0-.14.327c.045.115.093.226.14.338a2.1 2.1 0 0 1 .06.137.45.45 0 0 1-.039-.006c-.796-.146-1.472-.88-1.855-2.014-.244-.719-.439-1.325-.628-1.911l-.354-1.09c-.332-1.01-.324-1.82.019-2.063.175-.123.47-.072.735.13l.066.042a.255.255 0 0 0 .15.038l.358-.023a.229.229 0 0 0 .113-.04.24.24 0 0 0 .134-.003c.35-.087.697-.394.95-.841.41-.728.703-1.79 1.043-3.02.684-2.48 1.536-5.567 3.756-6.965 2.486-1.568 4.627-1.292 7.106-.971 2.38.306 5.074.651 8.572-.573l.08.05c.257 1.898 1.444 4.39 4.016 5.73a.38.38 0 0 0 .507-.16.372.372 0 0 0 .025-.288.37.37 0 0 0-.185-.22c-2.394-1.248-3.448-3.568-3.636-5.323a.381.381 0 0 0-.172-.278l-.387-.245a.372.372 0 0 0-.33-.036c-3.418 1.238-6.062.897-8.406.594-2.513-.321-4.883-.624-7.592 1.083-2.466 1.553-3.361 4.797-4.081 7.402-.326 1.18-.607 2.201-.973 2.85-.152.27-.312.403-.42.458a42.788 42.788 0 0 1-.888-5.833C8.203 9.517 13.8 5.759 17.203 4.348l.046-.019c.42.185.813.318 1.168.398.875.198 1.311.622 1.493.858l.032.04a.19.19 0 0 0 .236.053l.532-.278a.192.192 0 0 0 .095-.124.187.187 0 0 0-.03-.154l-.042-.058c-.209-.292-.832-1-2.103-1.286-.657-.148-1.472-.518-2.235-1.016l-.05-.034a.19.19 0 0 0-.26.052l-.335.491a.187.187 0 0 0 .053.265l.053.034c.111.073.226.14.339.206-5.758 2.682-8.74 8.192-8.186 15.137a43.8 43.8 0 0 0 .777 5.363 1.355 1.355 0 0 0-.924.236c-.422.3-1.032 1.103-.369 3.125l.334 1.026c.209.648.402 1.245.65 1.982.669 1.979 2.006 2.684 3.034 2.684.05 0 .1-.005.15-.01l.008-.001c1.338 3.019 2.942 5.555 4.903 7.75-.034.298-.05.469-.05.537 0 2.807 3.355 5.105 7.479 5.125h.052c4.124-.02 7.48-2.318 7.48-5.125 0-.071-.018-.26-.057-.589 1.94-2.185 3.529-4.704 4.857-7.698h.006c.05.006.1.01.152.01 1.028 0 2.366-.704 3.034-2.684.252-.747.452-1.363.65-1.98l.333-1.026c.664-2.023.054-2.826-.368-3.125"/></g></svg>`;
        }
      } ]]]
  styles:
    card:
      - color: 'rgba(0, 0, 0, 0.6)'
      - background-color: >
          [[[
            if (entity.state != 'unavailable')
              {
                if (entity.state === 'dobry') {
                  return '#B0E867';
                } else if(entity.state === 'umiarkowany') {
                  return '#E3C143';
                } else if(entity.state === 'niezdrowy dla grup wrażliwych') {
                  return '#E48B4E';
                } else if(entity.state === 'niezdrowy') {
                  return '#E45F5E';
                } else if(entity.state === 'bardzo niezdrowy') {
                  return '#986EA9';
                } else if(entity.state === 'niebezpieczny') {
                  return '#A5516B';
                }
              } else {
            return variables.state_on ?
              'rgba(255, 255, 255, 0.8)' :
              'rgba(115, 115, 115, 0.2)';
              }
          ]]]
6

Witaj mógłbyć pokazać jak zmieniasz kolor ikonki już w “enticie” (custom:mini-graph-card).

7

Na razie mam to tak zrobione. Jak jest do 25 to jest zielone i głowa się lekko kołysze “zadowolona”. Jak czerwone albo fioletowe (czyli 125+) to mruga.

Przechwytywanie

      - type: custom:button-card
        name: Powietrze
        entity: sensor.dom_caqi2
        tap_action: none
        size: 100%
        state:
          - value: 25
            operator: <
            styles:
              icon:
                - animation:
                    - twister 5s linear infinite
          - value: 125
            operator: ''
            styles:
              icon:
                - animation:
                    - blink 5s linear infinite
        extra_styles: |
          @keyframes twister {
            0% {transform: rotatez(0deg);}
            25% {transform: rotatez(15deg);}
            75% {transform: rotatez(-15deg);}
            100% {transform: rotatez(0deg);}
        styles:
          card:
            - padding-top: 15%
            - padding-bottom: 5%
            - padding-left: 10%
            - padding-right: 10%
            - height: 100%
          grid:
            - grid-template-areas: '"n" "i" "stan"'
            - grid-template-rows: 20px 1fr 30px
          name:
            - font-family: Julius Sans One
            - font-size: 13px
            - color: var(--secondary-text-color)
            - align-self: start
            - justify-self: start
          img_cell:
            - justify-content: middle
            - align-items: middle
            - margin: none
          icon:
            - color: |
                [[[
                  if (entity.state < 25) return '#20c400';
                  if (entity.state >= 25 && entity.state < 50) return '#c4bd00';
                  if (entity.state >= 50 && entity.state < 75) return '#c48600';
                  if (entity.state >= 75 && entity.state < 87.5) return '#c48600';
                  if (entity.state >= 87.5 && entity.state < 100) return '#c40000';
                  if (entity.state >= 100 && entity.state < 125) return '#c40065';
                  else return '#a000c4';
                ]]]
          custom_fields:
            stan:
              - align-self: end
              - justify-self: center
        custom_fields:
          stan: |
            [[[
              return `
              <span style="color: var(--text-color-sensor);font-size: 26px;font-weight: bold; font-family: Roboto Flex;">${states['sensor.dom_caqi2'].state}</span><span style="font-family: Comfortaa; color: var(--secondary-text-color);font-size: 12px;"> CAQI</span>
              `
            ]]]
8

Jeśli pytasz o zmianę ikony w encji to rozwiązanie jest tam i służy do tego template, jeśli natomiast pytałeś o kod karty co sugeruje to co w nawiasie

to musisz sobie zredukować wcięcia bo @LUBANG podał tutaj kod lovelace “po staremu”, czyli jako fragment dawnego lovelace.yaml (obecnieużywa się do tego główny edytor YAML w dashboardzie)

Dla edytora kart powinno to wyglądać jakoś tak:

type: custom:button-card
name: Powietrze
entity: sensor.dom_caqi2
tap_action: none
size: 100%
state:
  - value: 25
    operator: <
    styles:
      icon:
        - animation:
            - twister 5s linear infinite
  - value: 125
    operator: ''
    styles:
      icon:
        - animation:
            - blink 5s linear infinite
extra_styles: |
  @keyframes twister {
    0% {transform: rotatez(0deg);}
    25% {transform: rotatez(15deg);}
    75% {transform: rotatez(-15deg);}
    100% {transform: rotatez(0deg);}
styles:
  card:
    - padding-top: 15%
    - padding-bottom: 5%
    - padding-left: 10%
    - padding-right: 10%
    - height: 100%
  grid:
    - grid-template-areas: '"n" "i" "stan"'
    - grid-template-rows: 20px 1fr 30px
  name:
    - font-family: Julius Sans One
    - font-size: 13px
    - color: var(--secondary-text-color)
    - align-self: start
    - justify-self: start
  img_cell:
    - justify-content: middle
    - align-items: middle
    - margin: none
  icon:
    - color: |
        [[[
          if (entity.state < 25) return '#20c400';
          if (entity.state >= 25 && entity.state < 50) return '#c4bd00';
          if (entity.state >= 50 && entity.state < 75) return '#c48600';
          if (entity.state >= 75 && entity.state < 87.5) return '#c48600';
          if (entity.state >= 87.5 && entity.state < 100) return '#c40000';
          if (entity.state >= 100 && entity.state < 125) return '#c40065';
          else return '#a000c4';
        ]]]
  custom_fields:
    stan:
      - align-self: end
      - justify-self: center
custom_fields:
  stan: |
    [[[
      return `
      <span style="color: var(--text-color-sensor);font-size: 26px;font-weight: bold; font-family: Roboto Flex;">${states['sensor.dom_caqi2'].state}</span><span style="font-family: Comfortaa; color: var(--secondary-text-color);font-size: 12px;"> CAQI</span>
      `
    ]]]