Img buttons broke

[jeroen-vd-nl]

Yeah yeah all latest etc etc, I even rebooted HA

after the last update my card is ruined. Especially the images don’t work anymore, thus I’m missing a complete line of buttons.

I also have no clue where that blue comes from all of a sudden.

  canalplus:
    style:
      background-image: >-
        url("https://images.crunchbase.com/image/upload/c_pad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/v1425199547/gkrrhijmxcsw0376zude.jpg")
      background-size: 50px
      background-repeat: no-repeat
      background-position: center
    tap_action:
      action: call-service
      service: media_player.select_source
      data:
        source: CANAL+
  Spotify:
    style:
      background-image: >-
        url("https://upload.wikimedia.org/wikipedia/commons/1/19/Spotify_logo_without_text.svg")
      background-size: 48px
      background-repeat: no-repeat
      background-position: center
    tap_action:
      action: call-service
      service: media_player.select_source
      data:
        source: Spotify
  YouTube:
    style:
      background-image: >-
        url("https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg")
      background-size: 48px
      background-repeat: no-repeat
      background-position: center
    tap_action:
      action: call-service
      service: media_player.select_source
      data:
        source: YouTube
  F1:
    style:
      background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/33/F1.svg")
      background-size: 48px
      background-repeat: no-repeat
      background-position: center
    tap_action:
      action: call-service
      service: media_player.select_source
      data:
        source: F1 TV
  nos:
    style:
      background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/b9/NOS_logo.svg")
      background-size: 48px
      background-repeat: no-repeat
      background-position: center
    tap_action:
      action: call-service
      service: media_player.select_source
      data:
        source: NOS

[Nerwyn]

I just pushed a fix for older devices which should also fix the blue color, but I'll look into the image buttons once I push the fix to my other project.

[Nerwyn]

Add this to your custom button styles:

height: 50px
width: 50px
border-radius: 0px

Can you add the rest of your card config, so I can figure out what's wrong with the direction buttons?

[jeroen-vd-nl]

Thanks for your very fast reply.

your suggestion works! 👍 Got my buttons back. Also my wife is very happy with that.

I didn’t receive the update yet through HACS, so I can’t see if the blue color is fixed, I will keep you updated about this.

the location of the crossbar I assume it has something to do with the mushroom theme I use. When I initially created it, I had to pixelf*ck already. I think I just have to do that again. So I think that’s not in scope for this issue.

[Nerwyn]

Crossbar? Do you mean the direction buttons? Some of the v4 changes like changing how buttons are made snuck into this release, so it is still possibly a bug.

[jeroen-vd-nl]

ok, in that case:

type: custom:android-tv-card
remote_id: remote.woonkamer
media_player_id: media_player.woonkamer
slider_id: media_player.55oled903_12
autofill_entity_id: true
rows:
  - - - - dpad
    - - - play
        - pause
        - power
      - - menu
        - home
        - hue
      - - volume_down
        - volume_up
        - volume_mute
  - - - - canalplus
        - Spotify
        - YouTube
        - F1
        - nos
  - - - - touchpad
touchpad_style:
  background-image: >-
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Apple_logo_grey.svg/505px-Apple_logo_grey.svg.png")
  background-size: 200px
  background-repeat: no-repeat
  background-position: center
custom_actions:
  power:
    icon: mdi:power
    tap_action:
      action: key
      key: wakeup
    hold_action:
      action: key
      key: suspend
  menu:
    icon: mdi:arrow-left-bold
    tap_action:
      action: key
      key: menu
  home:
    tap_action:
      action: key
      key: home
    hold_action:
      action: more-info
  up:
    style:
      z-index: 2
      '--size': 50px
      left: '-6px'
      top: '-1px'
    tap_action:
      action: key
      key: up
  down:
    style:
      z-index: 2
      '--size': 50px
      left: '-6px'
      bottom: 5px
    tap_action:
      action: key
      key: down
  left:
    style:
      z-index: 2
      '--size': 50px
      left: 2px
      top: '-2px'
    tap_action:
      action: key
      key: left
  right:
    style:
      z-index: 2
      '--size': 50px
      top: '-2px'
      right: 18px
    tap_action:
      action: key
      key: right
  volume_up:
    tap_action:
      action: call-service
      service: scene.turn_on
      target:
        entity_id: scene.surround_volume_up
  volume_down:
    tap_action:
      action: call-service
      service: scene.turn_on
      target:
        entity_id: scene.surround_volume_down
  volume_mute:
    tap_action:
      action: call-service
      service: scene.turn_on
      target:
        entity_id: scene.surround_power_toggle
  play:
    tap_action:
      action: key
      key: play
  pause:
    tap_action:
      action: key
      key: pause
  center:
    style:
      color: rgba(150, 150, 150, 0.5)
      background: rgba(100, 100, 100, 0.3)
      border-radius: 10em
      '--size': 66px
      width: 32px
      height: 32px
      top: '-12px'
      left: 2px
      margin: '-64px'
      padding: 64px
    tap_action:
      action: key
      key: select
    double_tap_action:
      action: key
      key: menu
  hue:
    icon: mdi:television-ambient-light
    tap_action:
      action: call-service
      service: switch.toggle
      target:
        entity_id: switch.tvwk_ambilight_hue
    style:
      color: |
        {% if is_state("switch.tvwk_ambilight_hue", "on") %}
        rgba(254,211,140,255)
        {% endif %}
  canalplus:
    style:
      background-image: >-
        url("https://images.crunchbase.com/image/upload/c_pad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/v1425199547/gkrrhijmxcsw0376zude.jpg")
      background-size: 50px
      background-repeat: no-repeat
      background-position: center
      height: 50px
      width: 50px
      border-radius: 0px
    tap_action:
      action: call-service
      service: media_player.select_source
      data:
        source: CANAL+
  Spotify:
    style:
      background-image: >-
        url("https://upload.wikimedia.org/wikipedia/commons/1/19/Spotify_logo_without_text.svg")
      background-size: 48px
      background-repeat: no-repeat
      background-position: center
      height: 50px
      width: 50px
      border-radius: 0px
    tap_action:
      action: call-service
      service: media_player.select_source
      data:
        source: Spotify
  YouTube:
    style:
      background-image: >-
        url("https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg")
      background-size: 48px
      background-repeat: no-repeat
      background-position: center
      height: 50px
      width: 50px
      border-radius: 0px
    tap_action:
      action: call-service
      service: media_player.select_source
      data:
        source: YouTube
  F1:
    style:
      background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/33/F1.svg")
      background-size: 48px
      background-repeat: no-repeat
      background-position: center
      height: 50px
      width: 50px
      border-radius: 0px
    tap_action:
      action: call-service
      service: media_player.select_source
      data:
        source: F1 TV
  nos:
    style:
      background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/b9/NOS_logo.svg")
      background-size: 48px
      background-repeat: no-repeat
      background-position: center
      height: 50px
      width: 50px
      border-radius: 0px
    tap_action:
      action: call-service
      service: media_player.select_source
      data:
        source: NOS

Update concerning the blue color: it's there in the mobile, but not on the laptop

[Nerwyn]

Ah I see what you mean, that's a lot of CSS adjustments to not only the direction keys but the center key as well. I think this should get you back to your old styles:

  center:
    style:
      --icon-color: rgba(150, 150, 150, 0.5)
      background: rgba(100, 100, 100, 0.3)
      border-radius: 10em
      '--size': 66px
      width: 32px
      height: 32px
      margin: '-80px'
      padding: 80px
    tap_action:
      action: key
      key: select
    double_tap_action:
      action: key
      key: menu
  up:
    style:
      z-index: 2
      '--size': 50px
    tap_action:
      action: key
      key: up
  down:
    style:
      z-index: 2
      '--size': 50px
      bottom: 2px
    tap_action:
      action: key
      key: down
  left:
    style:
      z-index: 2
      '--size': 50px
      left: 10px
    tap_action:
      action: key
      key: left
  right:
    style:
      z-index: 2
      '--size': 50px
      right: 10px
    tap_action:
      action: key
      key: right

As for the blue color, I noticed it happened on iPhones but not any other platform but I think I've fixed it. Can you try the latest 3.8.2 beta?

[jeroen-vd-nl]

Sure. I will test it in the evening. First work day, after that HA fun ;)

[jeroen-vd-nl]

all fixed on laptop and mobile/companion app css more clean as well

tnx man 💌