Karta `button-card` - jak uzależnić kolor ikony na przycisku od skutku wywołania akcji `call_service`

Home Assistant Komponenty niestandardowe
1

Dzień dobry,

Na karcie button-card chcę powiązać wykonywanie różnych akcji z kolorem ikony.

Przykład: urządzeniem jest klimatyzacja (device class: climate)

  • tap_action włącza tryb chłodzenia cool. Kolor ikony powinien zmienić się na niebieski.
  • double_tap_action włącza tryb ogrzewania heat. Kolor ikony powinien zmienić się na czerwony.
  • hold_action wyłącza urządzenie (turn_off). Kolor ikony powinien wrócić do koloru domyślnego (u mnie jest biały).

Ochoczo zabrałem się za pisanie kodu w yaml'u i nadziobałem coś takiego:

489×721 17 KB

Niestety, karta nie działa zgodnie z oczekiwaniem.
Same akcje wykonują się po kliknięciu bezbłędnie, ale ikona na przycisku NIE zmienia koloru. W dokumentacji custom:button-card rzeczywiście nie widać, aby była możliwość prostej zmiany koloru ikony encji climate.haier.ac1 na przycisku pod wpływem akcji, nie mniej jednak wciąż nie umiem poradzić sobie z tym zadaniem pomimo, że widziałem ten efekt i wiem, że jest ono wykonalne:

  • linia 13 = parametr akcji ==> linia 15 = oczekiwany efekt wizualny na przycisku,
  • linia 23 = parametr akcji ==> linia 25 = oczekiwany efekt wizualny na przycisku,
  • linia 4 color_type: action wskazuje, że wywołanie akcji pociąga za sobą upragnioną zmianę koloru.

W rzeczywistości kolor ikony pozostaje bez zmian.
Odwołuję się więc do Waszych doświadczeń eksperckich z tą kartą prosząc o garść podpowiedzi, jak ogarnąć to zadanie… Liczę na Waszą, jak zawsze niezawodną pomoc :wink:

2

Wydaje mi się, że powinno być dopisane " state:"
Np. linia 15

  color: rgb(0, 0, 255)
  state:
    - value: 'cool'
      color: rgb(x, x, x)

Edit:
ScreenShot_20211224222726

1 polubienie
3

Faktycznie, zadziałało! Bardzo pomogłeś, @krskrab, serdeczne DZIĘKI! :beer:

obraz obraz obraz

To rzeczywiście dość trudna karta do opanowania… wymaga niesamowitej uwagi podczas definiowania.

4

Gdyby ktoś potrzebował opanowałem do takiego stopnia :slight_smile:

image
image461×864 59.2 KB 

type: vertical-stack
cards:
  - type: custom:button-card
    color_type: label-card
    color: rgb(35, 35, 35)
    name: Biuro
    styles:
      card:
        - height: 1px
  - type: grid
    columns: 6
    cards:
      - type: custom:button-card
        entity: light.biuro_1
        icon: mdi:ceiling-light
        state:
          - value: 'on'
            styles:
              card:
                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - transition: all 2s ease
        style: |
          ha-card:hover {
          transform: scale(1.05);
          box-shadow: 0 0 10px;
          }
        hold_action:
          action: more-info
      - type: custom:button-card
        entity: light.biuro_2
        icon: mdi:ceiling-light
        state:
          - value: 'on'
            styles:
              card:
                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - transition: all 2s ease
        style: |
          ha-card:hover {
          transform: scale(1.05);
          box-shadow: 0 0 10px;
          }
        hold_action:
          action: more-info
      - type: custom:button-card
        entity: light.biuro_3
        icon: mdi:ceiling-light
        state:
          - value: 'on'
            styles:
              card:
                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - transition: all 2s ease
        style: |
          ha-card:hover {
          transform: scale(1.05);
          box-shadow: 0 0 10px;
          }
        hold_action:
          action: more-info
      - type: custom:button-card
        entity: switch.officepowersocket
        name: Biuro
        color: rgb(255, 255, 100)
        icon: mdi:printer
        state:
          - value: 'on'
            styles:
              card:
                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - box-shadow: 0 0 0.95rem 0.2rem rgb(255,132,19)
                - transition: all 2s ease
        style: |
          ha-card:hover {
          transform: scale(1.05);
          box-shadow: 0 0 10px;
          }
        hold_action:
          action: more-info
      - type: custom:button-card
        entity: switch.officelaptoppowersocket
        name: Zasilacz
        color: rgb(255, 255, 100)
        icon: mdi:laptop
        state:
          - value: 'on'
            styles:
              card:
                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - box-shadow: 0 0 0.95rem 0.2rem rgb(255,132,19)
                - transition: all 2s ease
        style: |
          ha-card:hover {
          transform: scale(1.05);
          box-shadow: 0 0 10px;
          }
        hold_action:
          action: more-info
      - type: custom:button-card
        entity: switch.gniazdko_tv_biuro
        name: Biuro
        color: rgb(255, 255, 100)
        icon: mdi:television
        state:
          - value: 'on'
            styles:
              card:
                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - box-shadow: 0 0 0.95rem 0.2rem rgb(255,132,19)
                - transition: all 2s ease
        style: |
          ha-card:hover {
          transform: scale(1.05);
          box-shadow: 0 0 10px;
          }
        hold_action:
          action: more-info
    square: false
  - type: custom:button-card
    color_type: label-card
    color: rgb(35, 35, 35)
    name: Łazienka
    styles:
      card:
        - height: 1px
  - type: grid
    cards:
      - type: grid
        columns: 3
        cards:
          - type: custom:button-card
            entity: light.lazienka_gorna_1
            name: 1
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.lazienka_gorna_2
            name: 2
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.lazienka_gorna_3
            name: 3
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.lazienka_gorna_4
            name: 4
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.lustro_lazienka_gorna
            name: lustro
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.led_lazienka_gorna
            name: led
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem rgb(230, 230, 230)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
        square: false
      - type: grid
        columns: 3
        cards:
          - type: custom:button-card
            entity: switch.gniazdko_lazienka
            name: Gniazdko
            color: rgb(255, 255, 100)
            icon: mdi:toothbrush-paste
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem rgb(44, 109, 214)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: switch.kaloryfer_lazienka_gorna
            name: Kaloryfer
            color: rgb(255, 255, 100)
            icon: mdi:google-home
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem rgb(44, 109, 214)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
        square: false
    columns: 2
    square: false
  - type: custom:button-card
    color_type: label-card
    color: rgb(35, 35, 35)
    name: Sypialnia i garderoba
    styles:
      card:
        - height: 1px
  - type: grid
    cards:
      - type: grid
        columns: 3
        cards:
          - type: custom:button-card
            entity: light.sypialnia_1
            name: Światło
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.iwona_sypialnia
            name: Iwona
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.badroom_m_light_wall
            name: Marcin
            state:
              - value: 'on'
                styles:
                  icon:
                    - color: var(--button-card-light-color)
                  card:
                    - '-webkit-box-shadow': 0px 0px 9px 3px var(--button-card-light-color)
                    - box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.garderoba_sypialnia
            name: Garderoba
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
        square: false
      - type: grid
        columns: 3
        cards:
          - type: custom:button-card
            entity: switch.gniazdko_tv_sypialnia
            name: Telewizor
            color: rgb(255, 255, 100)
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem rgb(81,188,165)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
        square: false
    columns: 2
    square: false
  - type: custom:button-card
    color_type: label-card
    color: rgb(35, 35, 35)
    name: Julia
    styles:
      card:
        - height: 20px
  - type: grid
    cards:
      - type: grid
        columns: 3
        cards:
          - type: custom:button-card
            entity: light.julia_1
            name: Światło
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.juliawall
            name: Nocna
            state:
              - value: 'on'
                styles:
                  icon:
                    - color: var(--button-card-light-color)
                  card:
                    - '-webkit-box-shadow': 0px 0px 9px 3px var(--button-card-light-color)
                    - box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
        square: false
      - type: grid
        columns: 3
        cards:
          - type: custom:button-card
            entity: switch.gniazdko_tv_julia
            name: Głośnik
            color: rgb(255, 255, 100)
            icon: mdi:google-home
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem rgb(100,100,100)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: switch.julia_laptop
            name: Laptop
            color: rgb(255, 255, 100)
            icon: mdi:laptop
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem rgb(100,100,100)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
        square: false
    square: false
    columns: 2
  - type: custom:button-card
    color_type: label-card
    color: rgb(35, 35, 35)
    name: Oliwia
    styles:
      card:
        - height: 20px
  - type: grid
    cards:
      - type: grid
        columns: 3
        cards:
          - type: custom:button-card
            entity: light.oliwia_1
            name: Światło
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.oliwia_2
            name: Światło
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.oliwiawall
            name: Nocna
            state:
              - value: 'on'
                styles:
                  icon:
                    - color: var(--button-card-light-color)
                  card:
                    - '-webkit-box-shadow': 0px 0px 9px 3px var(--button-card-light-color)
                    - box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
        square: false
      - type: grid
        columns: 3
        cards:
          - type: custom:button-card
            entity: switch.gniazdko_tv_oliwia
            name: Głośnik
            color: rgb(255, 255, 100)
            icon: mdi:google-home
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem rgb(200,50,200)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
        square: false
    columns: 2
    square: false
  - type: custom:button-card
    color_type: label-card
    color: rgb(35, 35, 35)
    name: Korytarz
    styles:
      card:
        - height: 20px
  - type: grid
    columns: 6
    cards:
      - type: custom:button-card
        entity: light.korytarz_gorny_1
        name: Światło
        state:
          - value: 'on'
            styles:
              card:
                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - transition: all 2s ease
        style: |
          ha-card:hover {
          transform: scale(1.05);
          box-shadow: 0 0 10px;
          }
        hold_action:
          action: more-info
      - type: custom:button-card
        entity: light.korytarz_gorny_2
        name: Światło
        state:
          - value: 'on'
            styles:
              card:
                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - transition: all 2s ease
        style: |
          ha-card:hover {
          transform: scale(1.05);
          box-shadow: 0 0 10px;
          }
        hold_action:
          action: more-info
      - type: custom:button-card
        entity: light.led_korytarz_gorny
        name: led
        state:
          - value: 'on'
            styles:
              card:
                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                - box-shadow: 0 0 0.95rem 0.2rem rgb(230, 230, 230)
                - transition: all 2s ease
        style: |
          ha-card:hover {
          transform: scale(1.05);
          box-shadow: 0 0 10px;
          }
        hold_action:
          action: more-info
    square: false
  - type: custom:button-card
    color_type: label-card
    color: rgb(35, 35, 35)
    name: Pralnia
    styles:
      card:
        - height: 20px
  - type: grid
    cards:
      - type: grid
        columns: 3
        cards:
          - type: custom:button-card
            entity: light.pralnia_1
            name: null
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.pralnia_2
            name: null
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
        square: false
      - type: grid
        columns: 3
        cards:
          - type: custom:button-card
            entity: switch.gniazdko_pralnia_1
            name: Gniazdko 1
            color: rgb(255, 255, 100)
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem rgb(44, 109, 214)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
          - type: custom:button-card
            entity: switch.gniazdko_pralnia_2
            name: Gniazdko 2
            color: rgb(255, 255, 100)
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem rgb(44, 109, 214)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
        square: false
    square: false
    columns: 2
  - type: custom:button-card
    color_type: label-card
    color: rgb(35, 35, 35)
    name: Rozdzielnica i strych
    styles:
      card:
        - height: 20px
  - type: grid
    cards:
      - type: grid
        columns: 3
        cards:
          - type: custom:button-card
            entity: light.rozdzielnica
            name: null
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
          - type: custom:button-card
            entity: light.strych
            name: null
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
        square: false
      - type: grid
        columns: 3
        cards:
          - type: custom:button-card
            entity: switch.gniazdka_strych
            name: Strych
            color: rgb(255, 255, 100)
            icon: mdi:antenna
            state:
              - value: 'on'
                styles:
                  card:
                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
                    - box-shadow: 0 0 0.95rem 0.2rem rgb(81,188,165)
                    - transition: all 2s ease
            style: |
              ha-card:hover {
              transform: scale(1.05);
              box-shadow: 0 0 10px;
              }
            hold_action:
              action: more-info
        square: false
    square: false
    columns: 2
3 polubienia
5

Screenshot - 27.12.2021 , 17_12_03

Kod

type: horizontal-stack
cards:
  - entity: light.led_board_3_2
    icon: mdi:led-strip
    tap_action:
      action: toggle
      haptic: light
    hold_action:
      action: more-info
      haptic: medium
    styles:
      card:
        - width: min(20vw, 60px)
        - height: min(20vw, 60px)
        - margin: 20px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
        - box-shadow: |
            [[[
              if (states['sun.sun'].state == "below_horizon")
                return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
              else if (states['sun.sun'].state == "above_horizon")
                return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
            ]]]
      icon:
        - color: var(--primary-text-color)
    state:
      - value: 'on'
        styles:
          card:
            - border-style: solid
            - border-width: 2px
            - border-color: var(--paper-item-icon-active-color)
            - box-shadow: |
                [[[
                  if (states['sun.sun'].state == "below_horizon")
                    return 'inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919';
                  else if (states['sun.sun'].state == "above_horizon")
                    return 'inset -4px -4px 5px #ffffff, inset 4px 4px 5px #ebebeb';
                ]]]
          icon:
            - color: var(--paper-item-icon-active-color)
    show_icon: true
    show_name: false
    triggers_update:
      - sun.sun
    type: custom:button-card
  - entity: switch.sw_1_2
    icon: mdi:globe-light
    tap_action:
      action: toggle
      haptic: light
    hold_action:
      action: more-info
      haptic: medium
    styles:
      card:
        - width: min(20vw, 60px)
        - height: min(20vw, 60px)
        - margin: 20px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
        - box-shadow: |
            [[[
              if (states['sun.sun'].state == "below_horizon")
                return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
              else if (states['sun.sun'].state == "above_horizon")
                return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
            ]]]
      icon:
        - color: var(--primary-text-color)
    state:
      - value: 'on'
        styles:
          card:
            - border-style: solid
            - border-width: 2px
            - border-color: var(--paper-item-icon-active-color)
            - box-shadow: |
                [[[
                  if (states['sun.sun'].state == "below_horizon")
                    return 'inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919';
                  else if (states['sun.sun'].state == "above_horizon")
                    return 'inset -4px -4px 5px #ffffff, inset 4px 4px 5px #ebebeb';
                ]]]
          icon:
            - color: var(--paper-item-icon-active-color)
    show_icon: true
    show_name: false
    triggers_update:
      - sun.sun
    type: custom:button-card
  - entity: switch.sw_2_2
    icon: mdi:lamp
    tap_action:
      action: toggle
      haptic: light
    hold_action:
      action: more-info
      haptic: medium
    styles:
      card:
        - width: min(20vw, 60px)
        - height: min(20vw, 60px)
        - margin: 20px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
        - box-shadow: |
            [[[
              if (states['sun.sun'].state == "below_horizon")
                return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
              else if (states['sun.sun'].state == "above_horizon")
                return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
            ]]]
      icon:
        - color: var(--primary-text-color)
    state:
      - value: 'on'
        styles:
          card:
            - border-style: solid
            - border-width: 2px
            - border-color: var(--paper-item-icon-active-color)
            - box-shadow: |
                [[[
                  if (states['sun.sun'].state == "below_horizon")
                    return 'inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919';
                  else if (states['sun.sun'].state == "above_horizon")
                    return 'inset -4px -4px 5px #ffffff, inset 4px 4px 5px #ebebeb';
                ]]]
          icon:
            - color: var(--paper-item-icon-active-color)
    show_icon: true
    show_name: false
    triggers_update:
      - sun.sun
    type: custom:button-card
  - entity: light.downlight_z_komputer
    icon: mdi:lamp
    tap_action:
      action: toggle
      haptic: light
    hold_action:
      action: more-info
      haptic: medium
    styles:
      card:
        - width: min(20vw, 60px)
        - height: min(20vw, 60px)
        - margin: 20px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
        - box-shadow: |
            [[[
              if (states['sun.sun'].state == "below_horizon")
                return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
              else if (states['sun.sun'].state == "above_horizon")
                return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
            ]]]
      icon:
        - color: var(--primary-text-color)
    state:
      - value: 'on'
        styles:
          card:
            - border-style: solid
            - border-width: 2px
            - border-color: var(--paper-item-icon-active-color)
            - box-shadow: |
                [[[
                  if (states['sun.sun'].state == "below_horizon")
                    return 'inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919';
                  else if (states['sun.sun'].state == "above_horizon")
                    return 'inset -4px -4px 5px #ffffff, inset 4px 4px 5px #ebebeb';
                ]]]
          icon:
            - color: var(--paper-item-icon-active-color)
    show_icon: true
    show_name: false
    triggers_update:
      - sun.sun
    type: custom:button-card
3 polubienia
6

@artpc skąd Ty bierzesz ten czas na takie dopiększanie tego - moja żona już mnie ma dość :stuck_out_tongue:
wygląda MEGA !!
PS - przez Ciebie znowu przerabiam swoje ikonki :stuck_out_tongue:

image

7

Życzę Wytrwałości.

Podświetlanie przycisków uzależnione jest od aktualnej pozycji słońca above_horizon i below_horizon
Dzień
Screenshot - 07.01.2022 , 00_09_22

Zamiast zmiennej if (states['sun.sun'] można podstawić swoja zmienna zmieniającą kolor dla box-shadow

Przydatnie linki https://html-css-js.com/css/generator/box-shadow/

https://forum.arturhome.pl/t/online-css-style-generator/1858

8

Ja także dzięki Wam czynię postępy:

obraz
obraz450×597 91.7 KB

Kolejnym stopniem wtajemniczenia będą ruchome ikony…
PS: Moja żona też ma mnie dość :stuck_out_tongue:

1 polubienie
9

creative-button-card-templates
Zestaw gotowych Szablonów (Templates) dla Button Card dla trybów yaml mode jak i (UI) Mode Tryb RAW .
Tutoriał zawiera gotowe kody kart, instrukcje jak przekształcić to dla trybu RAW.
Autor wykonał Kawał dobrej roboty
Tak wygląda
Screenshot - 13.02.2023 , 06_19_56
Screenshot - 13.02.2023 , 06_20_07

Strona: GitHub - wfurphy/creative-button-card-templates: Button Card templates for Home Assistant dashboards

type: custom:button-card
template:
  - device
  - dynamic_icons
entity: light.downlight_z_komputer
variables:
  width: 200px
  attributes:
    - id: brightness
      icon: mdi:plus
  icon: mdi:lightbulb
  icon_on: mdi:lightbulb
  icon_unavailable: mdi:lightbulb-alert

Screenshot - 13.02.2023 , 06_27_33

2 polubienia
10

Drodzy forumowicze borykam się z integracją karty button - card i nie mogę zrozumieć gdzie robię błąd. Mianowicie mam zainstalowany dodatek Midea
Air Appliance (LAN) i chcę ustawic ikonę wiatraka na ruchomą lub nie w zależności od tego czy kilimatyzacja jest włączona czy nie. Dotarłem do momentu gdzie przy wyłączonej klimatyzacji wiatrak nie kręci się a przy przełączeniu ( w sensie włączeniu) zmienia kolor na biały. Nie wiem gdzie i co moge zrobic aby efekt był zgodny z oczekiwanym czyli włączam klimatyzację kręci się wiatrak, wyłączam klimatyzację przestaje się kręcić.Kartę mam skonfigurowaną następująco:

image
image1920×1080 213 KB

Proszę o jakieś rady,Pozdrawiam

11

Tu znajdziesz wiele gotowców https://community.home-assistant.io/t/fun-with-custom-button-card/238450

https://www.youtube.com/watch?v=0wg9bdnGD00

12

Właśnie robiłem wg. tego filmu i w stanie ‘off’ wiatrak się kręci a jeśli na niego nacisnę robi się biały i się zatrzymuje a klimatyzacja się włącza.W stanie spoczynku czyli gdy klima nie działa wiatrak się kręci…

13 
type: custom:button-card
state:
  - value: 'on'
    color: red
    styles:
      icon:
        - animation:
            - rotating 2s linear infinite
tap_action:
  action: toggle
entity: input_boolean.house_alarmclock_snooze
icon: mdi:fan
14

Niestety animacja wiatraka nie kręci się i wydaje mi się że może coś z encją klimatyzacji jest nie tak,bo zastosowanie "input_boolean " jakby nie spełnia swej roli a mój kod w takiej postaci:

type: custom:button-card
tap_action:
  action: toggle
entity: climate.klima_sypialnia
icon: mdi:fan
state:
  - value: 'off'
    color: orange
    spin: true
  - value: 'on'
    color: red
    spin: false

Powoduje że animacja wiatraka kręci się cały czas gdy klima jest wyłączona a gdy kliknę na tą ikonę klima włącza się ale ikona zmienia kolor na biały i się zatrzymuje.( Efekt jest dokładnie odwrotny od oczekiwanego)…

Zrobiłem coś takiego że podmienilem dla twojego kodu gniazdko wifi gosund i wówczas to działa tak jakbym chciał,więc myślę że muszę dokonać modyfikacji i zmienić encje “climate.klima_sypialnia” na “switch” chyba stosując platformę “Template”…

15

Klima

Jeśli masz klime to sprawdź w Narzędziach deweloperskich > Stan, jakie klima otrzymuje “stany”
Np.

hvac_modes:
  - 'off'
  - cool
  - heat
  - dry
  - fan_only

Jak widzisz nie ma “on”, więc musisz zmienić np. na

 ...

 - value: 'heat'
 ...
1 polubienie
16

Mam coś takiego:


hvac_modes:
  - 'off'
  - auto
  - cool
  - heat
  - dry
  - fan_only
17 
type: custom:button-card
tap_action:
  action: toggle
entity: climate.klima_sypialnia
icon: mdi:fan
state:
  - value: 'auto'
    color: red
    styles:
      icon:
        - animation:
            - rotating 2s linear infinite
  - value: 'cool'
    color: blue
    styles:
      icon:
        - animation:
            - rotating 1s linear infinite
  - value: 'dry'
    color: green
    styles:
      icon:
        - animation:
            - rotating 2s linear infinite
  - value: 'fan_only'
    color: purple
    styles:
      icon:
        - animation:
            - rotating 2s linear infinite

  - value: 'off'
    color: orange
18

Tak to rozwiązało mój problem. Wielke wielkie dzięki :+1::+1::wave::wave:

19

Tutaj do wykorzystania pomysł efektu ‘kontrolek samochodowych’ w jednej karcie.

20

Jeszcze raz wracam do tematu zmiany kolorów ikony, choć tym razem w nieznacznie innym kontekście.

Mam encję media-player, która czasem ‘znika’ z HA (wiem dlaczego tak się dzieje i nie w tym jest problem). Na mojej ulubionej karcie custom:button-card chcę wyświetlać jej ikonę zawsze, niezależnie od jej dostępności czy stanu. Jedyne, czego pragnę, to możliwości zmian jej koloru w zależności od dostępności LUB aktualnej wartości encji. Wobec tego napisałem taki kod:

icon:
  - color: |
          [[[
            if ("{{ states('media_player.philips_tam8905') is defined }}")
             {
               if (states["media_player.philips_tam8905"].state == 'playing') return 'lime'
               else return 'dimgray'
              }
            else return 'var(--primary-background-color)'
          ]]]

Niestety, gdy encja znika z HA (to nie to samo co niedostępna - bo taki przypadek już sprawdziłem), pojawia się błąd karty. W przypadku całkowitego zaniku zasilania media_playera (np. poprzez wyłączenie jego wtyczki z gniazdka), znika z HA jego encja media_player.philips_tam8905, a karta button-card wywala na ekran uroczy komunikat o błędzie:

ButtonCardJSTemplateError: TypeError: states['media_player.philips_tam8905'] is undefined in 'if ("{{ states('media_player.philips_tam8905') is defined }}") { if (states["media_player.....

i to pomimo, że już w pierwszym kroku żądam od niej sprawdzenia, czy stosowna encja ‘media_player’ w ogóle jest zdefiniowana (czy istnieje). Wydaje się, że sama składnia kodu jest OK, pisałem ją w developerze i nie wykazywało błędów. Ale karta nie pracuje tak, jak powinna.

Moim zamysłem jest, aby ikona playera była ZAWSZE wyświetlana na karcie (konkretna pozycja na siatce grid tej karty), niezależnie od dostępności jej encji. Chcę jedynie zmieniać kolor ikony w zależności od dostępności lub aktualnej wartości encji playera. Gdy encja playera znika z HA, kolor ikony powinien ustawiać się na var(--primary-background-color). Ikona powinna w tej sytuacji stać się niewidoczna (jej kolor przyjmuje wartość koloru tła), ale nadal powinna dać się wyświetlać. A tu tymczasem ten komunikat o błędzie…
Czy ktoś z Was może podzielić się jakimiś pomysłami jak ten kod ogarnąć?