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

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;
}
1 Like

@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.

I don’t know if there’s a tutorial. The custom svg paths was something added in the project this card was forked from that I’ve continued to use but haven’t expanded much upon. You do need to copy just the path fields from within the SVG XML.

where would i copy the svg xml. sorry not understanding how? noobie to this?

The SVG XML has a bunch of elements named path with attributes named d. The The d attribute contains the commands that draw the SVG icon. You need to copy all of the path commands into the editor and then modify it as needed. To be honest it probably won’t work well with that icon, as this card’s custom icon feature was made to work with binary icons. You may be better off using a background image, like in this example.

Easiest way I’ve found to build custom icons/svg is with Adobe Illustrator.
Took me 2mins to build this one from your low-res screenshot:

Link to the svg file:

https://www.dropbox.com/scl/fi/xgdpbnqhl2h1png2a9tzg/plex-test2.svg?rlkey=yifoi6fdb2rmi5sgjp6lplgj7&st=ijcg8m66&dl=0

More details here:

1 Like

Hi.
i love this card and its working nicely.
i would like to know how is it possible to run and a button from this card using script
for example how i can run this in a script:

type: button
name: freetv
icon: mdi:television-box
tap_action:
action: source
source: tv.freetv.androidtv

key and source are shortcuts for different actions. As of 4.1.1, these actions vary by platform. For Android TV, it uses the remote.turn_on action as described in the Home Assistant Android TV Remote integration documentation.

action: remote.turn_on
data:
  activity: tv.freetv.androidtv
target:
  entity_id: remote.android_tv

Version 4.2.0 has been released with two new features:

  • Sony BRAVIA platform support.
  • Custom actions from file.
1 Like

Hello.
i am really having difficulty understanding how to get the path for svg files.
can you help me with those images:
https://cms.freetv.tv/uploads/landing_logo_4404f591a4.svg
NordVPN:
G166NGtIsLp_UdpDjC1FF6dooIgd83fs2lstSI7mhW06q7gmiE1cw4BZ16OCX0WokPE (512×512)

What have you tried so far? You don’t need to get the path with Illustrator.

i want to have those 2 logos in the Remote card. and I tried to find a way to get the path for them.
but without sucess.
is there any other way i could add it to HA and use it as an icon?

i want to have those 2 logos in the Remote card. and I tried to find a way to get the path for them.
but without sucess.
is there any other way i could add it to HA and use it as an icon?

It’s pretty easy:

  1. Install GitHub - thomasloven/hass-fontawesome: 🔹 Use icons from fontawesome in home-assistant (read the docs about custom svg)…
  2. Copy the .svg icon to config/custom_icons directory
  3. Use a custom action for the button, specifying the icon as below.
- name: custom2
  type: button
  tap_action:
    ...
  icon: fapro:plex-test2#fullcolor

And voila:

1 Like

so I installed fontawesome and created the custom_icons folder (i home in the right directory).
i added my svg file it is now saves without the .svg extention.
and created a custom button, but i still dont see the icon.
Screenshot 2024-11-12 194212
Screenshot 2024-11-12 193745
Screenshot 2024-11-12 193738

  1. custom_icons is in the config directory
  2. don’t forget the #fullcolor at the end of the icon.
  3. test with a standfard fapro icon

Google TV question for you folk.

I have a Hisense UST Projector with built in Google TV.

I have the Android Debug Bridge integration which creates a remote and media player.

I also have the Android TV Remote integration which creates another remote and media player.

With Universal Remote Card, which ones do you use (should I use)?

My crude understanding is that the ADB devices are well featured (full app list) but slow (adb is slow)…while the Android TV Remote is less featured - but faster? But I could be dead wrong and their might be an even better approach - that I don’t know.

Thoughts?

Per the README, use the Android TV Remote integration remote ID for remote ID, and the ADB integration remote ID for the keyboard ID.

Thanks for this great contribution!

Color of buttons by state seems to no longer be working, whereas it had been before the breaking updates (e.g., change the power button to yellow color when on). What am I doing wrong? Thank you.

type: custom:android-tv-card
remote_id: remote.family_room_tv
media_player_id: media_player.family_room_tv_2
title: Family Room TV
rows:
  - - power
    - menu
  - - channel_up
    - info
    - channel_down
  - - navigation_buttons
  - - back
    - home
    - tv
  - - rewind
    - play
    - pause
    - fast_forward
  - - volume_buttons
  - - slider
  - - hulu
    - netflix
    - youtube
    - primevideo
custom_actions:
  - type: button
    name: power
    tap_action:
      action: key
      key: POWER
    icon: mdi:power
    styles: |-
      :host {
        color: {% if is_state("remote.family_room_tv", "on") %}
      #FFC107
      {% endif %}
      ;
      }
  - tap_action:
      action: perform-action
      data:
        activity: market://launch?id=com.hulu.livingroomplus
      target:
        entity_id: remote.family_room_tv
      perform_action: remote.turn_on
    icon: mdi:hulu
    name: hulu
    type: button
    styles: |-
      :host {
        color: {% if is_state("sensor.media_source", "Hulu") %}
      #FFC107
      {% endif %}
      ;
      }
  - type: button
    name: netflix
    tap_action:
      action: source
      source: netflix://
    icon: mdi:netflix
    styles: |-
      :host {
        color: {% if is_state("sensor.media_source", "Netflix") %}
      #FFC107
      {% endif %}
      ;
      }
  - type: button
    name: youtube
    tap_action:
      action: source
      source: vnd.youtube://
    icon: mdi:youtube
    styles: |-
      :host {
        color: {% if is_state("sensor.media_source", "YouTube") %}
      #FFC107
      {% endif %}
      ;
      }
  - type: button
    name: primevideo
    tap_action:
      action: source
      source: https://app.primevideo.com
    icon: primevideo
    styles: |-
      :host {
        color: {% if is_state("sensor.media_source", "Prime") %}
      #FFC107
      {% endif %}
      ;
      }
  - type: button
    name: tv
    tap_action:
      action: key
      key: TV
    icon: mdi:television-box
    styles: |-
      :host {
        color: {% if is_state("sensor.media_source", "Cast") %}
      #FFC107
      {% endif %}
      ;
      }
  - type: button
    name: home
    tap_action:
      action: key
      key: HOME
    icon: mdi:home
    styles: |-
      :host {
        color: {% if is_state("sensor.media_source", "Launcher") %}
      #FFC107
      {% endif %}
      ;
      }
visibility:
  - condition: state
    entity: remote.family_room_tv
    state: "on"
styles: |-
  .row {
    color: #44739E;
  }

The v3 to v4 config upgrade process wasn’t perfect and some templates would break due to the change in styles format. Try modifying your CSS styles templates to wrap the entire variable and use the icon class selector like so:

.icon {
    {% if is_state("remote.family_room_tv", "on") %}
    color: #FFC107;
    {% endif %}
}
1 Like

That worked! Thanks-