usernein / tv-card

📺 TV Remote Card (with touchpad and haptic feedback)
Apache License 2.0
107 stars 26 forks source link

Add colors for buttons #17

Open znanywawa opened 2 years ago

znanywawa commented 2 years ago

Is your feature request related to a problem? Please describe. I do love this card, but I think that it would be a great idea to add ability to add colors for some buttons.

Describe the solution you'd like Mostly I am thinking about RED, GREEN, YELLOW, CYAN buttons where such color brings easy identify what kind of button are we using (of course, all those buttons on another row ubt already I gave a FR for additional custom rows).

Describe alternatives you've considered I didnt as this card is overal great but I think that such improvement for buttons collors would be great.

roumano commented 2 years ago

i would, also, like to have this enhancement ideally also able to set the colors via templating

example of my own tv-card (based with only custom:button-card ) for power icon :

type: custom:button-card
icon: mdi:power
styles:
  icon:
    - color: |
          [[[
            if (states['sensor.tv_power'].state > 10)
              return 'orange';
            else
            return 'green';
          ]]]
solid-pixel commented 1 year ago

@roumano @znanywawa FYI it's possible to change the icons' color with the help of lovelace-card-mod:

type: custom:tv-card
entity: media_player.android_tv
card_mod:
  style:
    ha-icon-button:
      .: |
        ha-icon-button[title='power'] {
          {% if states('media_player.android_tv_192_168_0_100') in ['off', 'unknown', 'unavailable'] %}          
            opacity: .3;
          {% else %}
            color: red;
          {% endif %};
        }

...

replace power with the button's title, you can find it by inspecting it with your browser's devtools:

image