TV Remote Card (with touchpad and haptic feedback)

📦 This repo is a fork of tv-card and includes a bunch of new features and improvements, like:

Fully functional touchpad for navigation (thanks to iablon's Touchpad Card) ❤️
Slider for volume (thanks to AnthonMS's Slider Card) ❤️
Supports ollo69's SamsungTV Smart Component
Supports LG webOS Smart TV
Supports Android TV
Supports Sony Bravia TV
Much easier setup
Implements haptics feedback
Customizable layout, you can choose the order of the rows and buttons
All rows and buttons are optional, you can change whatever you (don't) like

Demo

Options

Name	Type	Requirement	Default	Description
type	string	Required		`custom:tv-card`
entity	string	Required		The `media_player` entity to control.
platform	string	Optional	`samsungtv`	Platform of `media_player`. Supported values: `samsungtv`, `androidtv`, `webostv`, `roku`, `braviatv`
remote_entity	string	Optional	`remote.{{entity_id}}`	The remote entity that controls the Roku and Bravia `media_player`
volume_entity	string	Optional	`entity`	The `media_player` entity for volume control (working only with volume_row: `slider`)
title	string	Optional		Card title for showing as header.
rows	object	Optional		Button rows
enable_double_click	boolean	Optional	`true`	Whether a double click on the touchpad should send the key in `double_click_action`
double_click_action	string	Optional	`return`	The action for double clicks on the touchpad. Defaults to `return`
enable_button_feedback	boolean	Optional	`true`	Shall clicks on the buttons return a vibration feedback?
enable_slider_feedback	boolean	Optional	`true`	Shall the volume slider return a vibration feedback when you slide through it?
slider_config	object	Optional		Custom configuration for the volume slider. See slider-card
custom_keys	object	Optional		Custom keys for the remote control. Each item is an object that should have `icon` and at least one of the following properties: `key`, `source`, `service`.
custom_sources	object	Optional		Custom sources for the remote control. Same object as above, but letting you split keys and sources.

Using only these options you will get an empty card (or almost empty, if you set a title). In order to include the buttons, you need to specify in the config the rows you want and which buttons you want in it. You do it by declaring the rows as arrays and its buttons as values, like this:

rows:
  power_row:
    - power
  media_control_row:
    - rewind
    - play
    - pause
    - fast_forward
  volume_row: slider
  numpad_row: true
  navigation_row: touchpad

The preset rows are volume_row, numpad_row and navigation_row, which requires a string or boolean as value.

Name	Type	Description
volume_row	string	Can be either `slider` or `buttons`. This defines the mode you want for setting the volume (you'll see them soon below). You need to have slider-card installed in order to use `slider`.
numpad_row	boolean	If `true`, numpad row will show.
navigation_row	string	Can be either `touchpad` or `buttons`. This defines the mode you want for navigating around your tv (you'll also see them soon below).

Notice

This card supports androidtv, webostv, roku, braviatv and samsungtv out of the box. If your TV is from another brand you can use this card by setting custom buttons with services to send keys to your TV (or do whatever you want) in your way. If you have time and wanna help, you can add new integrations to this card. Check this PR.

Platform webostv doesn't support power key (see webOS Integration)

Custom buttons

If you want to add custom buttons to the remote control (of if you want to reconfigure the existing buttons), you can do it by adding an object to the custom_keys option:

custom_keys:
  input_tv:
    icon: mdi:television-box
    key: KEY_TV
  browser:
    icon: mdi:web
    source: browser
  toggle_light:
    icon: mdi:lightbulb
    service: light.toggle
    service_data:
      entity_id: light.bedroom

The custom_sources exists for the same purpose, but you can use it to split the keys and sources.

custom_keys:
  input_tv:
    icon: mdi:television-box
    key: KEY_TV
  toggle_light:
    icon: mdi:lightbulb
    service: light.toggle
    service_data:
      entity_id: light.bedroom
custom_sources:
  browser:
    icon: mdi:web
    source: browser

Then you can easily use these buttons in your card:

rows:
  power_row:
    - browser
    - power
    - input_tv
  media_control_row:
    - rewind
    - play
    - pause
    - fast_forward
    - toggle_light

With custom buttons you can override existing buttons for changing its icon or even its functionality. Here i do both:

custom_keys:
  power:
    icon: mdi:power-cycle
    service: media_player.toggle
    service_data:
      entity_id: media_player.tv

Inside each button you may define icon and either key, source or service, as you've seen.

Option	internal function	Description
icon		The icon to show in the button. If empty, the button will be blank.
key	`media_player.play_media(media_content_id=key, media_content_type="send_key")`	The key to send to the TV via `media_player.play_media`
source	`media_player.select_source(source=source)`	The source to switch to via `media_player.select_source`
service	`_hass.callService(domain, service, service_data)`	A string representing service to call. Use the format `domain.service`, e.g. `"light.turn_on"`
service_data	passed with `service`	The data to pass to the service. May be an object depending on the service you are using.

Custom icons

You can customize any icon with a custom svg path using the custom_icons option.

Usage:

custom_icons:
  <button>: <svg_path>

Example:

custom_icons:
  hbo: >-
    M7.042 16.896H4.414v-3.754H2.708v3.754H.01L0
    7.22h2.708v3.6h1.706v-3.6h2.628zm12.043.046C21.795 16.94 24 14.689 24
    11.978a4.89 4.89 0 0 0-4.915-4.92c-2.707-.002-4.09 1.991-4.432
    2.795.003-1.207-1.187-2.632-2.58-2.634H7.59v9.674l4.181.001c1.686 0
    2.886-1.46 2.888-2.713.385.788 1.72 2.762 4.427 2.76zm-7.665-3.936c.387 0
    .692.382.692.817 0 .435-.305.817-.692.817h-1.33v-1.634zm.005-3.633c.387 0
    .692.382.692.817 0 .436-.305.818-.692.818h-1.33V9.373zm1.77
    2.607c.305-.039.813-.387.992-.61-.063.276-.068 1.074.006
    1.35-.204-.314-.688-.701-.998-.74zm3.43 0a2.462 2.462 0 1 1 4.924 0 2.462
    2.462 0 0 1-4.925 0zm2.462 1.936a1.936 1.936 0 1 0 0-3.872 1.936 1.936 0 0 0
    0 3.872Z

The svg path was copied from SimpleIcon. Although you can use this integration for using icons from SimpleIcons (there's also one for fontawesome).

Having defined the custom icon, you can use it on any custom button:

custom_sources:
  hbomax:
    icon: hbo
    source: HBO Max

Installation

Step 1

Install using HACS or see this guide.

Step 2

Add a custom element in your ui-lovelace.yaml

      - type: custom:tv-card
        entity: media_player.tv
        rows:
          power_row:
            - power
          channel_row:
            - channel_up
            - info
            - channel_down
          apps_row:
            - netflix
            - youtube
            - spotify
          volume_row: slider
          navigation_row: touchpad
          source_row:
            - return
            - home
            - source
          media_control_row:
            - rewind
            - play
            - pause
            - fast_forward

Example 1

Playing with order, moving and repeating buttons:

type: custom:tv-card
entity: media_player.tv
platform: samsungtv
title: Example 1
rows:
  power_row:
    - power
  source_row:
    - return
    - home
    - source
    - netflix
  apps_row:
    - youtube
    - spotify
    - netflix
  navigation_row: touchpad
  volume_row: slider
  channel_row:
    - channel_up
    - channel_down
    - info
  media_control_row:
    - rewind
    - play
    - spotify
    - pause
    - fast_forward

Result:

Example 2

Buttons, buttons everywhere!

type: custom:tv-card
entity: media_player.tv
platform: samsungtv
title: Example 2
rows:
  power_row:
    - power
  channel_row:
    - channel_up
    - info
    - channel_down
  apps_row:
    - netflix
    - youtube
    - spotify
  volume_row: buttons
  navigation_row: buttons
  source_row:
    - return
    - home
    - source
  media_control_row:
    - rewind
    - play
    - pause
    - fast_forward

Result:

Example 3

Using less

type: custom:tv-card
entity: media_player.tv
platform: samsungtv
title: Example 3
rows:
  power_row:
    - power
  apps_row:
    - netflix
    - youtube
    - spotify
  volume_row: slider
  navigation_row: touchpad
  source_row:
    - return
    - home

Result:

Extra

In any row, if you add an ampty item, there will be an empty/invisible button filling the space:

rows:
  source_row:
    - return
    - home
    - source
  media_control_row:
    - rewind
    -
    - 
    - fast-forward

Name		Name	Last commit message	Last commit date
Latest commit History 169 Commits
.github		.github
assets		assets
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
hacs.json		hacs.json
info.md		info.md
package.yaml		package.yaml
tv-card-editor.js		tv-card-editor.js
tv-card.js		tv-card.js

License

Zixties60/tv-card

Folders and files

Latest commit

History

Repository files navigation

TV Remote Card (with touchpad and haptic feedback)

Demo

Options

Notice

Custom buttons

Custom icons

Installation

Step 1

Step 2

Example 1

Example 2

Example 3

Extra

About

Resources

License

Stars

Watchers

Forks

Languages