Skip to content

📺 TV Remote Card (with touchpad and haptic feedback)

License

Notifications You must be signed in to change notification settings

lightsabata/tv-card

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TV Remote Card (with touchpad and haptic feedback)

GitHub Release License hacs_badge Project Maintenance GitHub Activity Community Forum

Github

📦 This repo is a fork of usernein/tv-card) edited to work with LG WebOS TV's

  • Fully functional touchpad for navigation (thanks to iablon's Touchpad Card) ❤️
  • Slider for volume (thanks to AnthonMS's Slider Card) ❤️
  • Supports Webos TV official integration
  • 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

ex

Options

Name Type Requirement Description
type string Required custom:tv-card
entity string Required The media_player entity to control
title string Optional Card title for showing as header
enable_double_click boolean Optional Whether a double click on the touchpad should send the key in double_click_keycode. Defaults to true.
double_click_keycode string Optional The key for double clicks on the touchpad. Defaults to KEY_RETURN
enable_button_feedback boolean Optional Shall clicks on the buttons return a vibration feedback? Defaults to true.
enable_slider_feedback boolean Optional Shall the volume slider return a vibration feedback when you slide through it? Defaults to true.
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:

power_row:
  - power
media_control_row:
  - rewind
  - play
  - pause
  - fast_forward

The available rows are power_row, channel_row, apps_row, source_row and media_control_row There also volume_row and navigation_row, but these requires a string 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.
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 uses media_player.play_media to send keys to the TV. This is the way ollo69's SamsungTV Smart Component (which i based this card on) works, but don't worry: if your TV is from another brand or simply the TV integration does not use media_player.play_media for sending keys, you can still use this card by setting custom buttons with services to send keys to your TV (or do whatever you want) in your way (just like the original tv-card).

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:

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

guide

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
        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
title: Example 1
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:

disorder example

Example 2

Buttons, buttons everywhere!

type: custom:tv-card
entity: media_player.tv
title: Example 2
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:

buttons example

Example 3

Using less

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

Result:

less example

Extra

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

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

empty buttons example

About

📺 TV Remote Card (with touchpad and haptic feedback)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%