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 Like
#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 Likes
#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 Likes
#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 Like
#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 Likes
#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 Like
#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.