search

usernein / tv-card

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

Custom buttons #6

Closed jgeorge1983 closed 2 years ago

jgeorge1983 commented 2 years ago

Sorry, am I being an idiot? Do we add the custom buttons to the tv-card.js file?

I have added it to that file as below:

var custom_keys = {
  guide:
    icon: "mdiTelevisionGuide"
    key: KEY_GUIDE
  toggle_light:
    icon: "mdiLightbulb"
    service: light.toggle
    service_data:
      entity_id: light.bedroom_light
};

rebooted, cleared cache, but when I add it i just get a blank spot on the remote, the remote code looks like:

type: custom:tv-card
entity: media_player.living_room_tv
title: TV
power_row:
  - power
  - guide
  - toggle_light
channel_row:
  - channel_up
  - info
  - channel_down
volume_row: slider
source_row:
  - return
  - home
  - source
navigation_row: buttons
media_control_row:
  - rewind
  - play
  - pause
  - fast_forward
ajurna commented 2 years ago

i am having the same issues. using the examples

custom_keys:
  disney:
    icon: phu:disney-plus
    source: Disney+
  plex:
    icon: mdi:plex
    source: Plex
mdb17 commented 2 years ago

I am just using the standard mdi icons and also getting blank buttons. Here is my code: 

- type: custom:tv-card
    entity: media_player.43_tcl_roku_tv
    #title: Example 2
    custom_keys:
      power:
        icon: "mdipower"
        action: call-service
        service: remote.toggle
        service_data:
          entity_id: remote.43_tcl_roku_tv
    power_row:
      - power
    channel_row:
      - channel_up
      - info
      - channel_down

The power buton is blank on two different devices.

jgeorge1983 commented 2 years ago

Does it work if you click the blank space? on my Windows device where i manage the front end if i hover it knows the button is there, but if i press it nothing happens. Tested with the light bulb toggle.

mdb17 commented 2 years ago

Yes, my button is working

have you tried:

custom_keys:
  guide:
    icon: "mdiTelevisionGuide"
    key: KEY_GUIDE
  toggle_light:
    icon: "mdiLightbulb"
    service: light.toggle
    service_data:
      entity_id: light.bedroom_light
usernein commented 2 years ago

@jgeorge1983: Do we add the custom buttons to the tv-card.js file?

No, no. You set them in the card config, where you also set the layout (you called it remote code):

type: custom:tv-card
entity: media_player.living_room_tv
title: TV
power_row:
  - power
  - guide
  - toggle_light
channel_row:
  - channel_up
  - info
  - channel_down
volume_row: slider
source_row:
  - return
  - home
  - source
navigation_row: buttons
media_control_row:
  - rewind
  - play
  - pause
  - fast_forward
custom_keys:
  guide:
    icon: "mdiTelevisionGuide"
    key: KEY_GUIDE
  toggle_light:
    icon: "mdiLightbulb"
    service: light.toggle
    service_data:
      entity_id: light.bedroom_light

You don't need to touch the .js files for any setting, everything is customized in the card config

ajurna commented 2 years ago

just to confirm the buttons work in my example too, just no icon.

usernein commented 2 years ago

@ajurna: i am having the same issues. using the examples

custom_keys:
  disney:
    icon: phu:disney-plus
    source: Disney+
  plex:
    icon: mdi:plex
    source: Plex

This card currently only supports icons from MDI Check here how to use them. For using any other icons that doesn't exist in MDI, you can set custom icons

For plex, it will be:

custom_keys:
  plex:
    icon: mdiPlex
    source: Plex

For Disney+, you will need to set a custom icon

usernein commented 2 years ago

@mdb17: The power buton is blank on two different devices.

That's because the icon names are case-sensitive. It's "mdiPower", not "mdipower" Also, there's no "action" inside the custom buttons params. But that's not a problem, the card will just ignore the unnecessary param

jgeorge1983 commented 2 years ago

@jgeorge1983: Do we add the custom buttons to the tv-card.js file?

No, no. You set them in the card config, where you also set the layout (you called it remote code):

type: custom:tv-card
entity: media_player.living_room_tv
title: TV
power_row:
  - power
  - guide
  - toggle_light
channel_row:
  - channel_up
  - info
  - channel_down
volume_row: slider
source_row:
  - return
  - home
  - source
navigation_row: buttons
media_control_row:
  - rewind
  - play
  - pause
  - fast_forward
custom_keys:
  guide:
    icon: "mdiTelevisionGuide"
    key: KEY_GUIDE
  toggle_light:
    icon: "mdiLightbulb"
    service: light.toggle
    service_data:
      entity_id: light.bedroom_light

You don't need to touch the .js files for any setting, everything is customized in the card config

And just like that, it works, I swear i put it in the card first and it didnt work. Obviously I missed something! great card and thanks for the work!

Any plans on releasing something similar for FireTV?

mdb17 commented 2 years ago

@mdb17: The power buton is blank on two different devices.

That's because the icon names are case-sensitive. It's "mdiPower", not "mdipower" Also, there's no "action" inside the custom buttons params. But that's not a problem, the card will just ignore the unnecessary param

That fixed it, thanks! I am not sure I follow you on the action comment though.

usernein commented 2 years ago

This card currently only supports icons from MDI

I've just released v0.5.0 and this is not true anymore. You can now use SimpleIcons and FontAwesome easier, without touching svg paths and custom_icons.

Just install the integrations and you'll be able to use them:

custom_keys:
  guide:
    icon: fas:heart
    key: KEY_GUIDE
custom_sources:
  plex:
    icon: si:plex
    source: Plex

If you upgrade to v0.5.0, remember to rename your old icons from MDI to the new format, e.g. mdiTelevisionGuide -> mdi:television-guide, mdiPower -> mdi:power

ajurna commented 2 years ago

seems to be fixed in v0.5.0. thanks!

ickam commented 1 year ago

Hi, So I still have a problem my code is this:

`type: custom:tv-card entity: media_player.samsung title: Samsung power_row:

but I am still not getting the app icons. Can you help @usernein ?