Universal Remote Card - Buttons, Touchpads, Sliders, and Keyboards for Multiple Platforms

I have this set up by just using the sections view, then in each remote card section, set the visibility to be dependent on the input selected.

For example set the visibility of the Apple TV card for entity state of your input to be Apple TV etc etc and you should then only ever see one remote card (that of your input).

1 Like

Very interesting! Do you know of any examples of how to do this, or would you be amenable to posting a sample?

Its pretty straight forward. I put each remote card as its own section on the dashboard. Then for each of those sections I configured the section visibility, which you can do in the visual editor, no need to tinker with the yaml.

For example in my case, the Apple TV remote card will only show if it is switched on, configured as below in the UI. The Apple TV can report “on”, “idle”, “paused” and a few other states when it is on, so I configured the card to show when it was not “off” or “standby”.

Your setup will be different to mine, so just play around with these until you get your desired result. Good luck :grinning:

2 Likes

Screenshot 2024-11-27 171916

While that change in CSS styles template worked for changing the color of a button corresponding to state for an Android TV, it did not work for a Samsung TV. Any suggestions for where I went wrong? Thanks again!

type: custom:android-tv-card
remote_id: remote.samsung_tv_22
media_player_id: media_player.samsung_tv_22
autofill_entity_id: true
title: Samsung TV
custom_actions:
  - type: button
    name: up
    tap_action:
      action: key
      key: KEY_UP
    hold_action:
      action: repeat
    icon: mdi:chevron-up
  - type: button
    name: down
    tap_action:
      action: key
      key: KEY_DOWN
    hold_action:
      action: repeat
    icon: mdi:chevron-down
  - type: button
    name: left
    tap_action:
      action: key
      key: KEY_LEFT
    hold_action:
      action: repeat
    icon: mdi:chevron-left
  - type: button
    name: right
    tap_action:
      action: key
      key: KEY_RIGHT
    hold_action:
      action: repeat
    icon: mdi:chevron-right
  - type: button
    name: center
    tap_action:
      action: key
      key: KEY_ENTER
    icon: mdi:checkbox-blank-circle
    double_tap_action:
      action: key
      key: KEY_RETURN
  - type: button
    name: power
    tap_action:
      action: perform-action
      target:
        entity_id: switch.samsung_tv
      perform_action: switch.toggle
    icon: mdi:power
  - type: button
    name: home
    tap_action:
      action: key
      key: KEY_HOME
    icon: mdi:home
  - type: button
    name: back
    tap_action:
      action: key
      key: KEY_RETURN
    icon: mdi:keyboard-backspace
  - type: button
    name: volume_mute
    tap_action:
      action: key
      key: KEY_MUTE
    icon: mdi:volume-low
  - icon: mdi:arrow-up-bold
    tap_action:
      action: key
      key: KEY_CHUP
    name: ch_up
    type: button
  - icon: mdi:arrow-down-bold
    tap_action:
      action: key
      key: KEY_CHDOWN
    name: ch_down
    type: button
  - type: button
    name: power
    tap_action:
      action: perform-action
      target:
        entity_id: switch.samsung_tv
      perform_action: switch.toggle
    icon: mdi:power
    styles: |-
      .icon {
          {% if is_state("switch.samsung_tv", "on") %}
          color: #FFC107;
          {% endif %}
      }
  - type: button
    name: volume_mute
    tap_action:
      action: perform-action
      target:
        entity_id: switch.samsung_tv
      perform_action: script.samsung_tv_mute_toggle
    icon: >-
      {{ iif(is_state("sensor.mute_lr", "True"), "mdi:volume-variant-off",
      "mdi:volume-low") }}
    styles: |-
      .icon {
          {% if is_state("sensor.mute_lr", "True") %}
          color: #FFC107
          {% endif %}
      }
  - tap_action:
      action: perform-action
      data:
        source: Amazon Fire TV stick
      target:
        entity_id: media_player.samsung_tv_22
      perform_action: media_player.select_source
    icon: mdi:video-input-hdmi
    name: fire
    type: button
    styles: |-
      .icon {
          {% if is_state("sensor.tuner", "Amazon Fire TV stick") %}
          color: #FFC107
          {% endif %}
      }
  - tap_action:
      action: perform-action
      data:
        source: TV
      target:
        entity_id: media_player.samsung_tv_22
      perform_action: media_player.select_source
    icon: mdi:television-classic
    name: sammy
    type: button
    styles: |-
      .icon {
          {% if is_state("sensor.tuner", "TV/HDMI") %}
        color: #FFC107
        {% elif is_state("sensor.tuner", "TV") %}
        color: #FFC107          
      {% endif %}
      }
rows:
  - - power
    - null
    - volume_mute
  - - ch_up
    - ch_down
  - - navigation_buttons
  - - back
    - home
  - - slider
  - - fire
    - sammy
styles: |-
  .row {
    color: #44739E;
  }

LG webOS TV users!

I’ve added keyboard support for this platform to the 4.3.0 beta, but I do not have an LG webOS TV to actually test this on. I could really use help from users to validate that my LG webOS TV keyboard support implementation is working correctly!

1 Like

Version 4.3.0 has been released! It’s got a few big features:

  • New default platforms Jellyfin and Unified Remote for Windows, macOS, and Linux.
  • Keyboard support for LG webOS (untested, please give feedback) and Unified Remote.
  • A new touchpad interaction mode - drag actions. Great as an alternate navigation mode for existing platforms and as a mousepad for Unified Remote
2 Likes

hi.
i would like to create a button to a specific youtube video and a specific spotify list to start on my android tv…
how do i do that?

See this section of the Home Assistant Android TV remote integration documentation. You should be able to use the media_player.play_media or remote.turn_on actions to open a specific video or playlist, and then create a button in this card to call that action.

Thanks.
so i treid it but when i use the action to open a specific link it opens in the cast app on the tv and i just have a blue chromcast logo on the tv. so it doesnt open the link in the youtube app

type: button
name: Cosy
label: Cosy
tap_action:
  action: perform-action
  perform_action: media_player.play_media
  target:
    entity_id:
      - media_player.living_room_tv
  data:
    media_content_id: https://www.youtube.com/watch?v=cSm1vsO-SmE
    media_content_type: url

this is the code i have with the link.

and this is the coed i have to open youtube, but i dont know how to tell it then to play a specific url

name: youtube
tap_action:
  source: com.google.android.youtube.tv
  action: source
type: button

Love this card but one thing is missing for me, the tv input select button. I have an Android tv system and it would make the remote complete. Best thing would be a direct input to certain hdmi numbers, but the tv itself doesnt havae that.

Is it possible to open input menu? (Ie hdmi 1, hdmi 2 etc)

“you can enter text into which will be sent to your Android TV via ADB. Make sure to also create delete and enter buttons so you can easily remove and search for the text you enter.”*

THANKS for this!!! I have this working great on a Sony Bravia and I’m able to send text, press enter, and press Delete. Is there a way to automate the “enter” press right after the “Send text”?

If you use seamless keyboard mode, then the dialog enter button sends the enter key. Otherwise nope.

I guess I don’t, since I don’t know what, “seamless keyboard mode” means… :slight_smile: You did get me searching and I found that if I added Google Keyboard to by Samsung phone, I can now use the Microphone to enter the text and then send text… Just thought maybe I was missing something for adding commands together. Thanks for the response and the GREAT card!!!

This part of the README explains the different keyboard modes.

Wow! Thanks. I added the Keyboard (enabled typing on TV screen) and it sends “enter” after Send but I can’t use voice to enter the text(the voice text want show on TV screen). Previously I only had textbox… With Text box I can use Microphone for voice entry of text and then hit Send and the Enter button. I’m real happy with Voice to text!!! I think I’ll stick with it. Thanks for your help.

Love this card. Thanks.

I have an icon button with haptics on. When I click on the button a light gray circle flashes and fades which is good visual feedback, but how can I make that circle larger and perhaps change the color?

Add this to your global CSS styles (requires the latest patch version 4.3.4, I added some CSS variables for better ripple styling and fixed hover ripples).

:host {
  --ha-ripple-height: 200%;
  --ha-ripple-width: 200%;
  --ha-ripple-left: -50%;
  --ha-ripple-color: red;
}

Slightly related, does anyone know if an Xbox One remote card already exists? Can’t seem to find one

Using 4.3.4 and manually refreshing, I’m not seeing any change in ripple. Here’s my latest test:

type: custom:android-tv-card
rows:
  - - vol_up
custom_actions:
  - type: button
    name: vol_up
    tap_action:
      action: perform-action
      perform_action: button.press
      target:
        entity_id: button.family_audio_vol
      data: {}
    icon: mdi:volume-plus
    value_attribute: icon
styles: |-
  :host {
    --ha-ripple-height: 200%;
    --ha-ripple-width: 200%;
    --ha-ripple-left: -50%;
    --ha-ripple-color: red;
  }

Are you sure you’ve refreshed cache properly? Your example config is working for me.
Screenshot 2025-01-09 113649