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

agenovese820 · September 20, 2024, 6:55pm

Love this thing, now trying my best to make it look pretty. Is there a way to change colors of individual default buttons (spotify green, youtube red, etc)? I figured out the css style for the custom buttons, but cant get it for the default ones…

Nerwyn · September 20, 2024, 11:16pm

Create a custom action with the same name as the source button with autofill enabled. It’ll autofill with the default key/source information. Make sure the action and icon autofills correctly, as it may prematurely autofill with the name of a shorter default key/source like y instead of youtube. If it does change the icon and set the tap action to default. From there you can apply CSS styles to it under the appearances panel. See this example in the README.

extremeaudio · September 25, 2024, 10:52am

The new visual editor has me confused a bit. I pasted my old kodi remote config, pressed “Update Old Config” but some things wont work. For eg on the touchpad, tapping once used to send a “return” which was like the “Ok” or “Enter”. That does not work now and gives the error “Action : remote.send_command not found” Similarly I had a double tap mapped to back, that also doesnt work.

I used the visual editor to add few elements and the touchpad in that works fine unlike my old one. But I had my volume buttons in my old config mapped to my AVR and not to Kodi, dont know how to achieve that in the new one. Also unsure how to use double tap and long press in the new one.

Would be very appreciative of any help. Thank you.

My old raw config yaml as below

type: custom:android-tv-card
keyboard_id: media_player.kodi
rows:
  - - back
    - home
    - menu
  - - info
    - play_pause
    - stop
  - - - volume_buttons
    - touchpad
    - - textbox
      - null
      - search
      - null
      - fullscreen
long_click_keycode: menu
custom_actions:
  - type: button
    name: up
    tap_action:
      action: perform-action
      perform_action: kodi.call_method
      data:
        method: Input.ButtonEvent
        button: Up
        keymap: KB
      target:
        entity_id: media_player.kodi
    hold_action:
      action: repeat
    icon: mdi:chevron-up
    mode: single
  - type: button
    name: down
    tap_action:
      action: perform-action
      perform_action: kodi.call_method
      data:
        method: Input.ButtonEvent
        button: Down
        keymap: KB
      target:
        entity_id: media_player.kodi
    hold_action:
      action: repeat
    icon: mdi:chevron-down
    mode: single
  - type: button
    name: left
    tap_action:
      action: perform-action
      perform_action: kodi.call_method
      data:
        method: Input.ButtonEvent
        button: Left
        keymap: KB
      target:
        entity_id: media_player.kodi
    hold_action:
      action: repeat
    icon: mdi:chevron-left
    mode: single
  - type: button
    name: right
    tap_action:
      action: perform-action
      perform_action: kodi.call_method
      data:
        method: Input.ButtonEvent
        button: Right
        keymap: KB
      target:
        entity_id: media_player.kodi
    hold_action:
      action: repeat
    icon: mdi:chevron-right
    mode: single
  - type: button
    name: center
    tap_action:
      action: perform-action
      perform_action: kodi.call_method
      data:
        method: Input.ButtonEvent
        button: return
        keymap: KB
      target:
        entity_id: media_player.kodi
    icon: mdi:kodi
    mode: single
  - type: button
    name: back
    tap_action:
      action: perform-action
      perform_action: kodi.call_method
      data:
        method: Input.ButtonEvent
        button: backspace
        keymap: KB
      target:
        entity_id: media_player.kodi
    icon: mdi:arrow-left-bold
    mode: single
  - type: button
    name: volume_mute
    tap_action:
      data:
        method: Application.SetMute
        mute: toggle
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    icon: mdi:volume-mute
  - type: button
    name: volume_up
    tap_action:
      data:
        method: Application.SetVolume
        volume: increment
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    hold_action:
      action: repeat
    icon: mdi:volume-plus
  - type: button
    name: volume_down
    tap_action:
      data:
        method: Application.SetVolume
        volume: decrement
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    hold_action:
      action: repeat
    icon: mdi:volume-minus
  - type: button
    name: menu
    tap_action:
      data:
        method: Input.ContextMenu
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    icon: mdi:menu
  - type: button
    name: home
    tap_action:
      data:
        method: Input.Home
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    icon: mdi:home
  - type: button
    name: info
    tap_action:
      data:
        method: Input.Info
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    icon: mdi:information
  - type: button
    name: play_pause
    tap_action:
      data:
        method: Player.PlayPause
        playerid: 1
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    icon: mdi:play-pause
  - type: button
    name: stop
    tap_action:
      data:
        method: Player.Stop
        playerid: 1
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    icon: mdi:stop
  - icon: mdi:fullscreen
    mode: single
    name: fullscreen
    tap_action:
      action: perform-action
      perform_action: kodi.call_method
      data:
        method: Input.ButtonEvent
        button: Tab
        keymap: KB
      target:
        entity_id: media_player.kodi
    type: button
  - type: touchpad
    name: touchpad
    tap_action:
      action: key
      key: DPAD_CENTER
    up:
      tap_action:
        action: perform-action
        perform_action: kodi.call_method
        data:
          method: Input.ButtonEvent
          button: Up
          keymap: KB
        target:
          entity_id: media_player.kodi
      hold_action:
        action: repeat
      mode: single
      name: up
      type: button
    down:
      tap_action:
        action: perform-action
        perform_action: kodi.call_method
        data:
          method: Input.ButtonEvent
          button: Down
          keymap: KB
        target:
          entity_id: media_player.kodi
      hold_action:
        action: repeat
      mode: single
      name: down
      type: button
    left:
      tap_action:
        action: perform-action
        perform_action: kodi.call_method
        data:
          method: Input.ButtonEvent
          button: Left
          keymap: KB
        target:
          entity_id: media_player.kodi
      hold_action:
        action: repeat
      mode: single
      name: left
      type: button
    right:
      tap_action:
        action: perform-action
        perform_action: kodi.call_method
        data:
          method: Input.ButtonEvent
          button: Right
          keymap: KB
        target:
          entity_id: media_player.kodi
      hold_action:
        action: repeat
      mode: single
      name: right
      type: button
    styles: |-
      toucharea {
        height: 400px;
      }
    haptics: false
    double_tap_action:
      action: key
      key: back
    hold_action:
      action: key
      key: menu
platform: Kodi

Nerwyn · September 26, 2024, 10:15pm

That YAML is in the new format (custom_actions is a list instead of a dict/object). Do you still have a copy of the old config? Your new one is working fine for me on my Kodi dev instance.

Have you read the new README? It has instructions with screenshots on how to use the configuration UI.

extremeaudio · September 27, 2024, 12:51pm

Ok, maybe the yaml got written over when I did an Update Old Config.

I can see the descriptive readme but pool old me is having a tough time adapting it to my needs

Appreciate your help, the old yaml is below. As I mentioned, the only things not working are the center button (single tap), long press and double tap.

type: custom:android-tv-card
        keyboard_id: media_player.kodi
        keyboard_mode: KODI
        rows:
          - - back
            - home
            - menu
          - - info
            - play_pause
            - stop
          - - - vol_buttons
            - touchpad
            - - textbox
              - null
              - search
              - null
              - fullscreen
        touchpad_style:
          height: 400px
        enable_touchpad_feedback: false
        enable_double_click: true
        double_click_keycode: back
        long_click_keycode: menu
        custom_keys:
          up:
            icon: mdi:chevron-up
            service: kodi.call_method
            service_data:
              method: Input.ButtonEvent
              button: Up
              keymap: KB
              entity_id: media_player.kodi
            mode: single
          down:
            icon: mdi:chevron-down
            service: kodi.call_method
            service_data:
              method: Input.ButtonEvent
              button: Down
              keymap: KB
              entity_id: media_player.kodi
            mode: single
          left:
            icon: mdi:chevron-left
            service: kodi.call_method
            service_data:
              method: Input.ButtonEvent
              button: Left
              keymap: KB
              entity_id: media_player.kodi
            mode: single
          right:
            icon: mdi:chevron-right
            service: kodi.call_method
            service_data:
              method: Input.ButtonEvent
              button: Right
              keymap: KB
              entity_id: media_player.kodi
            mode: single
          center:
            icon: mdi:kodi
            service: kodi.call_method
            service_data:
              method: Input.ButtonEvent
              button: return
              keymap: KB
              entity_id: media_player.kodi
            mode: single
          back:
            icon: mdi:arrow-left
            service: kodi.call_method
            service_data:
              method: Input.ButtonEvent
              button: backspace
              keymap: KB
              entity_id: media_player.kodi
            mode: single
          volume_mute:
            icon: mdi:volume-mute
            service: kodi.call_method
            target:
              entity_id: media_player.kodi
            data:
              method: Application.SetMute
              mute: toggle
          volume_up:
            icon: mdi:volume-minus
            service: kodi.call_method
            target:
              entity_id: media_player.kodi
            data:
              method: Application.SetVolume
              volume: decrement
          volume_down:
            icon: mdi:volume-plus
            service: kodi.call_method
            target:
              entity_id: media_player.kodi
            data:
              method: Application.SetVolume
              volume: increment
          menu:
            service: kodi.call_method
            target:
              entity_id: media_player.kodi
            data:
              method: Input.ContextMenu
          home:
            service: kodi.call_method
            target:
              entity_id: media_player.kodi
            data:
              method: Input.Home
          info:
            service: kodi.call_method
            target:
              entity_id: media_player.kodi
            data:
              method: Input.Info
          play_pause:
            service: kodi.call_method
            target:
              entity_id: media_player.kodi
            data:
              method: Player.PlayPause
              playerid: 1
          stop:
            service: kodi.call_method
            target:
              entity_id: media_player.kodi
            data:
              method: Player.Stop
              playerid: 1
          fullscreen:
            icon: mdi:fullscreen
            service: kodi.call_method
            service_data:
              method: Input.ButtonEvent
              button: Tab
              keymap: KB
              entity_id: media_player.kodi
            mode: single
      - type: media-control
        entity: media_player.kodi

Nerwyn · September 27, 2024, 1:57pm

Try this, it’s working for me.

type: custom:android-tv-card
keyboard_id: media_player.kodi
rows:
  - - back
    - home
    - menu
  - - info
    - play_pause
    - stop
  - - - volume_buttons
    - touchpad
    - - textbox
      - null
      - search
      - null
      - fullscreen
platform: Kodi
custom_actions:
  - type: button
    name: back
    tap_action:
      action: perform-action
      perform_action: kodi.call_method
      data:
        method: Input.ButtonEvent
        button: backspace
        keymap: KB
      target:
        entity_id: media_player.kodi
    icon: mdi:arrow-left
    mode: single
  - type: button
    name: volume_mute
    tap_action:
      data:
        method: Application.SetMute
        mute: toggle
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    icon: mdi:volume-mute
  - type: button
    name: volume_up
    tap_action:
      data:
        method: Application.SetVolume
        volume: decrement
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    hold_action:
      action: repeat
    icon: mdi:volume-minus
  - type: button
    name: volume_down
    tap_action:
      data:
        method: Application.SetVolume
        volume: increment
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    hold_action:
      action: repeat
    icon: mdi:volume-plus
  - type: button
    name: menu
    tap_action:
      data:
        method: Input.ContextMenu
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    icon: mdi:menu
  - type: button
    name: home
    tap_action:
      data:
        method: Input.Home
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    icon: mdi:home
  - type: button
    name: play_pause
    tap_action:
      data:
        method: Player.PlayPause
        playerid: 1
      target:
        entity_id: media_player.kodi
      action: perform-action
      perform_action: kodi.call_method
    icon: mdi:play-pause
  - icon: mdi:fullscreen
    mode: single
    name: fullscreen
    tap_action:
      action: perform-action
      perform_action: kodi.call_method
      data:
        method: Input.ButtonEvent
        button: Tab
        keymap: KB
      target:
        entity_id: media_player.kodi
    type: button
  - type: touchpad
    name: touchpad
    tap_action:
      action: perform-action
      perform_action: kodi.call_method
      data:
        method: Input.Select
    up:
      tap_action:
        action: perform-action
        perform_action: kodi.call_method
        data:
          method: Input.ButtonEvent
          button: Up
          keymap: KB
        target:
          entity_id: media_player.kodi
      hold_action:
        action: repeat
      mode: single
      name: up
      type: button
    down:
      tap_action:
        action: perform-action
        perform_action: kodi.call_method
        data:
          method: Input.ButtonEvent
          button: Down
          keymap: KB
        target:
          entity_id: media_player.kodi
      hold_action:
        action: repeat
      mode: single
      name: down
      type: button
    left:
      tap_action:
        action: perform-action
        perform_action: kodi.call_method
        data:
          method: Input.ButtonEvent
          button: Left
          keymap: KB
        target:
          entity_id: media_player.kodi
      hold_action:
        action: repeat
      mode: single
      name: left
      type: button
    right:
      tap_action:
        action: perform-action
        perform_action: kodi.call_method
        data:
          method: Input.ButtonEvent
          button: Right
          keymap: KB
        target:
          entity_id: media_player.kodi
      hold_action:
        action: repeat
      mode: single
      name: right
      type: button
    styles: |-
      toucharea {
        height: 400px;
      }
    haptics: false
    double_tap_action:
      action: perform-action
      perform_action: kodi.call_method
      data:
        method: Input.Back
    hold_action:
      action: perform-action
      perform_action: kodi.call_method
      data:
        method: Input.ContextMenu
      target: {}
  - type: button
    name: stop
    tap_action:
      action: perform-action
      perform_action: kodi.call_method
      target:
        entity_id: media_player.kodi
      data:
        method: Player.Stop
        playerid: 1
    icon: mdi:stop
media_player_id: media_player.kodi

The upgrade process isn’t perfect, especially for really old configs, so there’s bound to be some issues.

I also don’t think you need the keymap fields in your custom actions, as I don’t include them in the new Kodi default key maps and they work fine without them.

extremeaudio · September 30, 2024, 12:33pm

It works. Big thank you!

Keyboard doesnt work. It says androidtv.adb_command not found.

Another peculiar thing I observe is that I am not able to edit the yaml config properly. When I try to edit/ delete some sections, the cursor suddenly just goes to the top left corner of the window, to the beginning of the code. Its as though the visual editor wont let me edit it. Even when I delete the entire yaml I am still able to see the remote in the right preview pane.

Nerwyn · October 1, 2024, 5:23am

Are you sure that your platform is set to Kodi, and that it isn’t overridden by any custom keyboard actions?

The cursor jumping is an issue with the code boxes and appears in some default cards. Which editor mode is this for? The entire card? The layout tab? An action?

extremeaudio · October 2, 2024, 2:27pm

The cursor is jumping when editing the entire card. I am left with no option but to create the yaml on notepad and replace the entire contents. When I try to delete a few lines, it does not allow me. This is quite problematic.

Nerwyn · October 2, 2024, 2:42pm

Unfortunately that’s a Home Assistant issue, I don’t have control over the entire card YAML editor, just the subsection ones. Can you try and see if it also happens with other custom cards? Why not use the UI editor?

extremeaudio · October 3, 2024, 1:02pm

I had forgotten the line

platform: Kodi

Hence the keyboard not working. Got it going.

I can edit the yaml just fine from the raw config editor, but not from the individual card. I had copied the conifg directory of another build to this one in the hopes of copying over all settings etc but that hadnt worked. Then I manually installed a bunch of stuff from HACS anyway. Hope that isnt causing the issues.

chipsfrisch · October 6, 2024, 8:36am

since updating my Android TV to version 12, some commands do not work anymore (e.g. TV, CHANNEL_UP and CHANNEL_DOWN). Other still do (e.g. dpad commands or HOME).
Did someone experience the same issue?

Think, I’ve had the same problem.
Solution: my Bravia Integration has been broken.

Removed it completely and added it again.
Now it works

Nerwyn · October 9, 2024, 11:02pm

4.1.0 has been released!

This version implements a massive overhaul of the templating system. Almost all of the Home Assistant templating extensions have been implemented into ha-nunjucks, my instantaneous synchronous frontend only alternative templating system for Home Assistant. This includes Pythonic datetimes! See the ha-nunjucks README for more information on all of the new templating functions, filters, and tests.

This version also adds a new action - Evaluate JS. If you know how to write JavaScript, you can now do so as an action. Just be careful that you don’t break anything!

davidaron1 · October 15, 2024, 12:41am

Can anyone provide insight as to why this isn’t triggering any action, it works in other cards:

type: custom:android-tv-card
platform: Apple TV
custom_actions:

type: button
name: Sopranos
icon: custom_icon_0
styles: |-
:host {
–icon-color: rgb(210, 51, 66);
tap_action:
action: call-service
service_data:
entity_id: media_player.masterbedroom
media_content_type: url
media_content_id: >-
Where's Johnny? - The Sopranos (Season 5, Episode 3) - Apple TV
remote_id: remote.masterbedroom
rows:
youtubetv
touchpad
volume_up
volume_down
home
Sopranos
custom_icons:
name: custom_icon_0

Nerwyn · October 15, 2024, 5:23am

Read the README, and use the configuration UI. service_data should be data, and call-service should be perform-action. You’re also missing the perform_action (formerly called service) field which I’m guessing should be media_player.play_media. There’s a button on the bottom of the first tab of the configuration UI which will update deprecated configs, including outdated actions (formerly called service calls, renamed by the Home Assistant developers a few monthly release ago) like yours.

lappen · October 15, 2024, 9:30pm

Sorry I have a few issues I have not been able to resolve.

type: custom:android-tv-card
remote_id: remote.shield
keyboard_id: media_player.android_tv_192_168_1_233
platform: Android TV
media_player_id: media_player.shield_2
rows:
 - keyboard
 - search
 - captions

‘- keboard’ ignores the string and sends ‘i’ only (Android Debug Bridge configured, connected to my Nvidia Shield with the corresponding keyboard_id)
‘- captions’ is not working at all, is that a strictly roki feature?
‘- search’ initiates google assistant correct string and finds what I need but ends with a voice command/waiting waiting for voice input (locks everything up for a while)

dom.emshur · October 23, 2024, 9:01pm

Is there a way to make the touchpad bigger? I can not figure out the code.

Thanks

Nerwyn · October 23, 2024, 10:17pm

keyboard only sending i and search also triggering voice input sound like really weird bugs, but I’m not sure what to do about them since they work fine on my Google TVs.

The Android TV default keys comes from the Python library list. It may not work on all Android TVs.

Nerwyn · October 23, 2024, 10:19pm

The width is defined by your card layout and Home Assistant. The height can be changed using CSS styles under the appearance section of a custom touchpad action.

.toucharea {
  height: 400px;
}

Robert_Shed · October 30, 2024, 8:37pm

@Nerwyn is their a tutorial on how to edit images like this into svg to fit the icon part. I could not find any good youtube videos to help me use this icon for my plex icon.