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

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:

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:

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

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.

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

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

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

@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

Ż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

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

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

1 Like