Jak dodawać i usuwać elementy na przyciskach

Witam,

bawię się trochę dodatkiem button-card, który umożliwia umieszczenie dodatkowego elementu na przycisku. Ogólnie coś tam udało mi się zrobić, wyświetlam sobie na przycisku urządzenia działającego z timerem czas pozostały do końca:
obraz
Działa to fajnie. Problem jaki mam, to włączanie i wyłączanie tej dodatkowej informacji ponieważ chciałbym aby ona była widoczna tylko kiedy urządzenie działa w trybie timera. Aktualnie mam zrobione tak, że po prostu manipuluje kolorami, jak timer działa to element dostaje czerwony kolor a jak timer nie działa to element dostaje kolor tła. Niestety ładnie to wygląda tylko na przyciskach z ikonami, które mają puste tło w miejscu dodatkowego elementu. W przypadku innych ikon pojawia się na nich brzydki kwadrat w kolorze tła dla tego to rozwiązanie jest dość ułomne. Poniżej kod przycisku, pytanie czy to w ogóle jest możliwe, jeśli tak to jak zbudować warunek dla tej akcji?

type: custom:button-card
entity: switch.sonoff4ch_2
icon: mdi:shower
name: ' '
aspect_ratio: 1/1
styles:
  card:
    - height: 75px
    - color: |
        [[[
          if (states['sensor.minutnik_wanny'].state == 0)
            return "var(--ha-card-background)";
          return "white";
        ]]]
  icon:
    - width: 50px
    - height: 50px
  grid:
    - position: relative
  custom_fields:
    notification:
      - background-color: |
          [[[
            if (states['sensor.minutnik_wanny'].state == 0)
              return "var(--ha-card-background)";
            return "red";
          ]]]
      - border-radius: 20%
      - position: absolute
      - left: 10%
      - top: 10%
      - height: 22px
      - width: 22px
      - font-size: 14px
      - line-height: 22px
custom_fields:
  notification: |
    [[[ return  (states['sensor.minutnik_wanny'].state) ]]]

Możesz zrobić tak:

  custom_fields:
    notification:
      - background-color: |
          [[[
            if (states['sensor.minutnik_wanny'].state == 0)
              return "transparent";
            return "red";
          ]]]

lub tak:

  custom_fields:
    notification:
      - background-color: |
          [[[
            if (states['sensor.minutnik_wanny'].state == 0)
              return "rgb(0, 0, 0, 0.0)";
            return "red";
          ]]]

Przy zabawach z kartą button-card polecam zapoznanie się z potężnym źródłem wiedzy:

oraz

1 Like

Faktycznie, zapomniałem o przezroczystości :-).
Dziękuję za podpowiedź bo już kombinowałem z przesunięciem obiektu poza przycisk ale przezroczystość wydaje się poprawniejsza.