{"id":15630688,"url":"https://github.com/nerwyn/android-tv-card","last_synced_at":"2025-04-08T19:22:29.749Z","repository":{"id":175733839,"uuid":"654393646","full_name":"Nerwyn/android-tv-card","owner":"Nerwyn","description":"A completely customizable universal remote card for Home Assistant. Supports multiple platforms out of the box.","archived":false,"fork":false,"pushed_at":"2025-03-28T01:44:21.000Z","size":12468,"stargazers_count":312,"open_issues_count":6,"forks_count":17,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-01T16:17:02.791Z","etag":null,"topics":["adb","android-tv","androidtv","apple-tv","bravia","fire-tv","hacs","hass","hassio","home-assistant","jellyfin","kodi","lovelace","remote","roku","samsung-tv","unified-remote","webos","webos-tv"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"usernein/tv-card","license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nerwyn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-16T03:14:31.000Z","updated_at":"2025-03-31T08:20:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"fc170e93-84c0-4aed-bac9-2d46ba37456e","html_url":"https://github.com/Nerwyn/android-tv-card","commit_stats":{"total_commits":1727,"total_committers":18,"mean_commits":95.94444444444444,"dds":0.09959467284308043,"last_synced_commit":"d1b44ddf332d9e96af7530aa69846fab50fc4550"},"previous_names":["nerwyn/android-tv-card"],"tags_count":1140,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nerwyn%2Fandroid-tv-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nerwyn%2Fandroid-tv-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nerwyn%2Fandroid-tv-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nerwyn%2Fandroid-tv-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nerwyn","download_url":"https://codeload.github.com/Nerwyn/android-tv-card/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247909288,"owners_count":21016491,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adb","android-tv","androidtv","apple-tv","bravia","fire-tv","hacs","hass","hassio","home-assistant","jellyfin","kodi","lovelace","remote","roku","samsung-tv","unified-remote","webos","webos-tv"],"created_at":"2024-10-03T10:35:14.092Z","updated_at":"2025-04-08T19:22:29.725Z","avatar_url":"https://github.com/Nerwyn.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/nerwyn"],"categories":[],"sub_categories":[],"readme":"# Universal Remote Card\r\n\r\n[![GitHub Release](https://img.shields.io/github/release/Nerwyn/android-tv-card.svg?style=for-the-badge)](https://github.com/nerwyn/android-tv-card/releases)\r\n[![License](https://img.shields.io/github/license/Nerwyn/android-tv-card.svg?style=for-the-badge)](LICENSE)\r\n[![hacs_badge](https://img.shields.io/badge/HACS-Default-blue.svg?style=for-the-badge)](https://github.com/hacs/default)\r\n[![Project Maintenance](https://img.shields.io/badge/maintainer-Nerwyn-blue.svg?style=for-the-badge)](https://github.com/Nerwyn)\r\n![Github](https://img.shields.io/github/followers/Nerwyn.svg?style=for-the-badge)\r\n[![GitHub Activity](https://img.shields.io/github/last-commit/Nerwyn/android-tv-card?style=for-the-badge)](https://github.com/Nerwyn/android-tv-card/commits/main)\r\n[![Community Forum](https://img.shields.io/badge/community-forum-brightgreen.svg?style=for-the-badge)](https://community.home-assistant.io/t/android-tv-card-a-tv-card-fork-for-android-tv/585089)\r\n[![Buy Me A Coffee](https://img.shields.io/badge/donate-☕buy_me_a_coffee-yellow.svg?style=for-the-badge)](https://www.buymeacoffee.com/nerwyn)\r\n\r\n[![My Home Assistant](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?repository=android-tv-card\u0026owner=Nerwyn\u0026category=Plugin)\r\n\r\n_Formerly called Android TV Card_\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/screenshot.png\" alt=\"example\" width=\"300\"/\u003e\r\n\r\nA super customizable universal remote card iterating on the work of several other projects. Featuring:\r\n\r\n- Configuration UI.\r\n- Out of the box support for [several platforms](#media-platform-and-entity-ids) with default keys and sources lists.\r\n - Android TV (with keyboard via ADB)\r\n - Sony BRAVIA (with keyboard via ADB)\r\n - Fire TV (with keyboard)\r\n - Roku (with keyboard)\r\n - LG webOS (with keyboard)\r\n - Kodi (with keyboard)\r\n - Unified Remote for Windows, macOS, and Linux (with keyboard)\r\n - Apple TV\r\n - Samsung TV\r\n - Jellyfin\r\n- Support for multiple buttons, touchpads, and sliders using default or user defined custom actions.\r\n- Complete [Home Assistant actions](https://www.home-assistant.io/dashboards/actions/) support.\r\n- [Keyboard and search](#keyboard-textbox-and-search) dialog actions for most platforms.\r\n- [Template](#a-note-on-templating) support for almost all fields using nunjucks.\r\n- Toggleable haptics.\r\n- Remappable touchpad with [momentary, multi-touch, and drag](#touchpad-actions) gesture support.\r\n- Remappable slider with vertical orientation support.\r\n- User configurable remote [layout](#layout).\r\n- Icons and labels for all elements.\r\n- Custom SVG icon support.\r\n- CSS style options for all sub-elements.\r\n\r\n# How To Use\r\n\r\nThis project now has a fully featured configuration user interface! To get started, install this project using HACS. Then go to a dashboard and create a universal remote card or edit an existing one.\r\n\r\nThe editor has four tabs - General, Layout, Actions, and Icons.\r\n\r\n# General\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_general_tab.png\" alt=\"editor general tab\" width=\"600\"/\u003e\r\n\r\nPlatform, entity ID, and timing fields set in the general tab will be used for default keys and sources. If you do not set these fields for custom actions and autofill is enabled, they will also use these fields. If you explicitly set one of these fields in a custom action, it will not be overwritten if you change the matching general field until you clear the field in the custom action. To completely clear toggle fields, you must remove them from the config using the code editor.\r\n\r\n## Media Platform and Entity IDs\r\n\r\nThis card supports several media platforms with default key and source lists. For the most part it uses the Home Assistant integrations for these platforms via their remote and/or media player entities. Some platforms require custom integrations as listed below. Different platforms use the remote and media player entities for different functions as shown below. For platforms with keyboard support, the keyboard entity ID (which doesn't always match the remote and media player entities) can also be provided.\r\n\r\n| Platform | Remote | Media Player | Keyboard |\r\n| -------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |\r\n| [Android TV](https://www.home-assistant.io/integrations/androidtv_remote/) | Default keys and sources | Default slider | [ADB](https://www.home-assistant.io/integrations/androidtv/) remote (preferred) or media player |\r\n| [Sony BRAVIA](https://www.home-assistant.io/integrations/braviatv/) | Default keys | Default sources and slider | [ADB](https://www.home-assistant.io/integrations/androidtv/) remote (preferred) or media player |\r\n| [Fire TV](https://www.home-assistant.io/integrations/androidtv/) | Default keys | Default sources and slider | Remote (preferred) or media player |\r\n| [Roku](https://www.home-assistant.io/integrations/roku/) | Default keys | Default sources and slider | Remote for keyboard, media player for search (provide one for keyboard ID and the others in their fields) |\r\n| [LG webOS](https://www.home-assistant.io/integrations/webostv/) | NA | Default keys, sources, and slider | Media player |\r\n| [Kodi](https://www.home-assistant.io/integrations/kodi/) | NA | Default keys, sources, and slider | Media player |\r\n| [Unified Remote](https://github.com/DaviPtrs/hass-unified-remote) | NA (see below) | NA (see below) | NA (see below) |\r\n| [Apple TV](https://www.home-assistant.io/integrations/apple_tv) | Default keys | Default sources and slider | NA |\r\n| [Samsung TV](https://www.home-assistant.io/integrations/samsungtv/) | Default keys | Default sources (requires the [SamsungTV Smart Component custom integration](https://github.com/ollo69/ha-samsungtv-smart)) and slider | NA |\r\n| [Jellyfin](https://www.home-assistant.io/integrations/jellyfin/) | Default keys | Play/pause and slider | NA |\r\n\r\n### Samsung TV Sources\r\n\r\nThe Home Assistant Samsung TV integration does not allow you to change sources. To do so you need to setup the [SamsungTV Smart Component custom integration](https://github.com/ollo69/ha-samsungtv-smart) and provide it's media player entity ID to this card.\r\n\r\n### Unified Remote Setup\r\n\r\nUnlike most platforms, Unified Remote relies entirely on [a custom integration](https://github.com/DaviPtrs/hass-unified-remote), which is used to control a [Unified Remote server](https://www.unifiedremote.com/) on your PC. This custom integration does not create any entities, but does provide us with the action `unified_remote.call`, which can be used to call any Unified Remote API. It requires that you install the integration and setup your computer hosts [as described here in its README](https://github.com/DaviPtrs/hass-unified-remote?tab=readme-ov-file#home-assistant). You can then use the host name or IP address in the remote and keyboard ID fields in the configuration UI (make sure it does not autofill with an actual entity, you may have to fix it with the code editor).\r\n\r\n## Action Timings\r\n\r\nDouble tap and hold actions have user adjustable timings to change how they are triggered. These values can be set globally in the general tab or for each custom action.\r\n\r\n### Hold Time\r\n\r\nHold actions are triggered by holding down on a button for a defined amount of time and then releasing. The default amount of time is 500ms. You can change this by setting `Hold time` in the hold action to a different number.\r\n\r\n### Repeat and Repeat Delay\r\n\r\nBy setting a hold action to `repeat`, the tap action will repeat while the button is held down. The default delay between repeats is 100ms. You can change this by setting `Repeat delay` in the hold action to a different number.\r\n\r\nThe following default keys have hold actions set to `repeat` by default. You can disable this by creating a custom action for them and setting their hold actions to `none` or a different action. The touchpad direction actions also are set to repeat when held, and can similarly be disabled or remapped by creating a custom action for the touchpad and changing it's hold action.\r\n\r\n- up\r\n- down\r\n- left\r\n- right\r\n- volume_up\r\n- volume_down\r\n- delete\r\n- forward_delete\r\n- touchpad up/down/left/right\r\n\r\n### Double Tap Window\r\n\r\nDouble tap actions have a default window of 200ms to trigger before a single tap action is triggered instead. You can change this by setting `Double tap window` in the double tap action to a different number.\r\n\r\n**NOTE**: Setting `Double tap window` above or too close to `Hold time` can result in undesirable behavior, as the hold timer expires before the double tap timer does. If you increase the `Double tap window` you should also increase `Hold time` to not be too close to it by at least 100ms if not more. In a custom action without a hold action defined, you can set `Hold behavior` explicitly to `Nothing` to render the `Hold time` field.\r\n\r\n## Miscellaneous\r\n\r\n### CSS Styles\r\n\r\nStyles can be set and changed for all remote sub-elements using regular CSS and templating. CSS styles have to be encapsulated in a CSS selector like the following.\r\n\r\n| CSS Selector | Element |\r\n| ------------- | ----------------------------- |\r\n| :host | Global values. |\r\n| .row | All rows. |\r\n| .column | All columns. |\r\n| .button-pad | All default button pads. |\r\n| .empty-button | All empty/null button spaces. |\r\n| remote-button | All buttons. |\r\n| #row-1 | The first row. |\r\n| #column-1 | The first column. |\r\n| #pad-1 | The first button default pad. |\r\n\r\n```css\r\n.row {\r\n justify-content: center;\r\n}\r\nremote-button {\r\n background: rgb(27, 27, 27);\r\n padding: 8px;\r\n margin: 4px;\r\n border-radius: 24px;\r\n --size: 24px;\r\n}\r\n```\r\n\r\nIf you hover over the card preview window, a red dashed outline will appear along with a tooltip showing either the element name or the row, column, or pad ID selector.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_hover_id.png\" alt=\"editor hover id\" width=\"600\"/\u003e\r\n\r\n### Autofill and Haptics\r\n\r\nWhen creating custom actions, the card editor will autofill fields using information set in the general tab. This can be disabled by toggling `Autofill` off. This value can also be set at the custom remote element level. Haptics can be similarly toggled globally or for individual custom remote elements and are enabled by default.\r\n\r\n### Other\r\n\r\nYou can add a title to the card with the title field.\r\n\r\nInstead of copying the same custom actions across multiple remote cards, you can put custom actions in an array in a JSON or YAML file on your Home Assistant server's config www folder and fetch them by filename, like `local/remote_card_custom_actions.yaml`.\r\n\r\nIf you are updating from an older version of this card, you may find that your configurations no longer work. Sorry! To upgrade them, click the button `UPDATE OLD CONFIG` at the bottom of the general tab. It should update your configuration to work with newer versions of this card.\r\n\r\n# Layout\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_layout_tab.png\" alt=\"editor layout tab\" width=\"600\"/\u003e\r\n\r\nThe remote layout is defined using a series of nested arrays. The lowest level of arrays is each row. As you nest arrays further it switches between rows and columns, allowing you to create unique remote layouts.\r\n\r\n```yaml\r\n- - home\r\n - menu\r\n - back\r\n - keyboard\r\n- - - volume_buttons\r\n - momentary_light\r\n - - netflix\r\n - hulu\r\n - disney\r\n - max\r\n - primevideo\r\n - touchpad\r\n - slider\r\n- - chandelier_light_color\r\n - light_color\r\n - sunroom_light\r\n - search\r\n```\r\n\r\nThe default keys and sources lists for your selected platform are displayed below the layout code editor. If you have configured any custom actions, they will be displayed above this. You can use this as reference as you create your remote, or drag and drop entries from these lists to the editor. The default keys list also includes the default touchpad and slider, along with some special elements for button pads and layouts. Not all special elements are available for all platforms.\r\n\r\n| Name | Type | Description |\r\n| ------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| touchpad | touchpad | A touchpad for swipe navigation. |\r\n| dragpad | touchpad | A touchpad for drag navigation. Use two fingers for faster movement. |\r\n| mousepad | touchpad | A touchpad for mouse navigation. **NOTE**: mousepad support is dependent on the platform supporting mouse movement via a Home Assistant action. |\r\n| slider | slider | A slider that controls the volume of the entity defined by `media_player_id`. **NOTE**: Volume slider support is dependent on the media player supporting the `media_player.volume_set` action. |\r\n| volume_buttons | button rows | Shorthand to generate a set of volume down, volume mute, and volume up buttons in a row or column. |\r\n| navigation_buttons | button rows | Shorthand to generate a set of up, down, left, right, and center buttons across three rows within a column. |\r\n| dpad | button grid | Shorthand to generate a set of up, down, left, right, and center buttons arranged in a square grid. |\r\n| numpad | button grid | Shorthand to generate a set of 1-9 buttons arranged in a square grid. Does not include `n0`. |\r\n| xpad | button grid | Shorthand to generate a set of A, B, X, and Y buttons arranged in a square grid. |\r\n| npad | button grid | Shorthand to generate a set of A, B, X, and Y buttons arranged in an alternate square grid. |\r\n\r\n# Actions\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_actions_tab.png\" alt=\"editor actions tab\" width=\"600\"/\u003e\r\n\r\nIn addition to the default keys and sources, you can create your own custom actions. You can also overwrite default keys and sources (including the default touchpad and slider) by setting the custom action name to match a default one. If you do so the default key or source information will be autopopulated if autofill is enabled.\r\n\r\n**NOTE**: If the remote element (default or custom) actions targets are not explicitly set in the UI they will be autofilled (if autofill is enabled) using the custom action entity or global IDs depending on which best matches the `perform-action` domain.\r\n\r\nClick the `ADD REMOTE ELEMENT` button to add a custom action remote element. Custom action remote elements can be buttons, sliders, or touchpads.\r\n\r\nCustom actions in this list can be reordered for organization, but doing so does not have any effect on the the remote card layout. They can also be deleted, copied, and edited.\r\n\r\n## General Options\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_actions_general_options.png\" alt=\"editor actions general options\" width=\"600\"/\u003e\r\n\r\nEvery remote element must have a name so that it can be added to your remote.\r\n\r\nEvery remote element can have an entity assigned to it, which is used to track it's internal value. This value can then be used in styles and actions using templates, like `{{ value | float }}`. By default the value will be derived from the entity state, but it can be changed to an attribute using the corresponding field.\r\n\r\nSome additional value logic is applied for certain attributes:\r\n\r\n- `brightness` - Converted from the default range of 0-255 to 0-100.\r\n- `media_position` - Updated twice per second using the current timestamp and the attribute `media_position_updated_at` when the entity state is `playing`, and locked to a max value using the attribute `media_duration`.\r\n- `elapsed` - Only for timer entities. Updated twice per second using the the current timestamp and the attributes `duration`, `remaining`, and `finishes_at`, and locked to a max value using the attribute `duration`.\r\n - **NOTE**: `elapsed` is not an actual attribute of timer entities, but is a possible attribute for timer entities in this card for the purpose of displaying accurate timer elapsed values. Timer entities do have an attribute `remaining`, which only updates when the timer state changes. The actual `remaining` attribute can be calculated using the elapsed value and the timer duration attribute.\r\n\r\nIf you find that the autofilling of fields in actions or remote element values is causing issues, setting `Autofill` to false may help. Just remember to set the entity ID of the remote element and the entity, device, area, or label ID of the action target.\r\n\r\nHaptics are enabled for remote elements by default, but can be toggled globally or at the custom action level.\r\n\r\n### Slider General Options\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_actions_general_options_slider.png\" alt=\"editor actions general options slider\" width=\"600\"/\u003e\r\n\r\nSliders have some additional general options. They have a range `Min` and `Max` which defaults to 0 and 1 respectively. They also have a `Step` size which defaults to 0.01.\r\n\r\nSliders will wait one second before updating their internal values from Home Assistant to prevent it from bouncing between the old and new values. This time can be changed by setting `Update after action delay`, which defaults to 1000ms\r\n\r\n### Touchpad Tabs\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_actions_general_options_touchpad.png\" alt=\"editor actions general options touchpad\" width=\"600\"/\u003e\r\n\r\nTouchpads have five tabs at the top of their actions page for each direction and it's center. Only the center tab has general options as these apply to the entire touchpad remote element. Each direction and center have their own options for appearance and interactions as described below.\r\n\r\n## Appearance\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_actions_appearance_options.png\" alt=\"editor actions appearance options\" width=\"600\"/\u003e\r\n\r\nAll remote elements can have a `Label`, `Icon`, and `Units`. These fields can also be set using templates. Similar to the general tab, each remote element can have it's CSS styles set (also supports templates).\r\n\r\nYou may find the following CSS selectors useful for styling:\r\n\r\n| CSS Selector | Element |\r\n| ------------ | ------------------------------ |\r\n| :host | The element itself. |\r\n| .icon | The element icon. |\r\n| .label | The element label. |\r\n| button | A button element background. |\r\n| toucharea | A touchpad element background. |\r\n| input | A slider element. |\r\n| .background | A slider element background. |\r\n| .tooltip | A slider element tooltip. |\r\n| .button-pad | All button pads. |\r\n\r\nWhile you can now set most CSS fields directly using their sub-element selectors, you may find the following CSS properties useful, especially for sliders which use and modify them internally.\r\n\r\n| Name | Description |\r\n| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| --size | Height and width of the icon. |\r\n| --thumb-width | Slider thumb width, defaults to `48px`. |\r\n| --height | Slider height when horizontal and width when vertical. |\r\n| --tooltip-label | Slider tooltip label template, defaults to `'{{ value }}'`. |\r\n| --tooltip-transform | Slider tooltip location transform function, defaults to `translate(var(--thumb-offset), calc(-0.5 * var(--height) - 0.4em - 10px))` for horizontal sliders and `translate(calc(-0.3 * var(--height) - 0.8em - 18px), calc(-1 * var(--thumb-offset)))` for vertical sliders. |\r\n| --icon-transform | Slider icon transform function, defaults to `translateX(var(--thumb-offset))` for horizontal sliders and `translateY(calc(-1 * var(--thumb-offset)))` for vertical sliders. |\r\n| --ha-ripple-color | Color of ripples when hovered over or pressed, defaults to `var(--secondary-text-color)`. |\r\n| --ha-ripple-hover-color | Color of ripples when hovered over, defaults to `var(--secondary-text-color)`. |\r\n| --ha-ripple-pressed-color | Color of riples when pressed, defaults to `var(--secondary-text-color)`. |\r\n| --ha-ripple-hover-opacity | Opacity of ripples when hovered over, defaults to `0.08`. |\r\n| --ha-ripple-pressed-opacity | Opacity of ripples when pressed, defaults to `0.12`. |\r\n| --ha-ripple-height | Ripple height, defaults to `100%`. |\r\n| --ha-ripple-width | Ripple width, defaults to `100%`. |\r\n| --ha-ripple-top | Ripple top offset, defaults to `0`. |\r\n| --ha-ripple-left | Ripple left offset, defaults to `0`. |\r\n\r\n### Vertical Sliders\r\n\r\nSliders have an additional `Vertical` toggle which rotates it 90 degrees to make it vertical. By default sliders will be horizontal. Vertical slider heights are determined by the slider's sibling elements. If it has no sibling elements or you find that it is not consistently rendering correctly, then you may need to explicitly set it's height using the style options like so:\r\n\r\n```css\r\n:host {\r\n height: 350px;\r\n}\r\n```\r\n\r\n### Multiple Icons and Labels for Touchpads\r\n\r\nTouchpads can have a separate icon and label for the center and each direction. You can also style each of these icons and labels independently using their own `CSS Styles` fields. General touchpad styles such as those for `toucharea` like height should go in the center tab styles.\r\n\r\n### A Note on Templating\r\n\r\nAlmost all fields support nunjucks templating. Nunjucks is a templating engine for JavaScript, which is heavily based on the jinja2 templating engine for Python which Home Assistant uses. While the syntax of nunjucks and jinja2 is almost identical, you may find the [nunjucks documentation](https://mozilla.github.io/nunjucks/templating.html) useful. Most extensions supported by Home Assistant templates are supported by this templating system, but not all and the syntax may vary. Please see the [ha-nunjucks](https://github.com/Nerwyn/ha-nunjucks) repository for a list of available extensions. If you want additional extensions to be added or have templating questions or bugs, please make an issue or discussion on that repository, not this one.\r\n\r\nYou can include the current value of a remote element and it's units by using the variables `value` and `unit` in a label template. You can also include `hold_secs` in a template if performing a momentary end action. Each remote element can also reference it's configuration using `config` within templates. `config.entity` and `config.attribute` will return the remote element's entity ID and attribute with their templates rendered (if they have them), and other templated config fields can be rendered within templates by wrapping them in the function `render` within a template. You can access the entire card config in a template via `config.card`, and global values such as remote ID within that like `config.card.remote_id`. Note that default values for some fields are not actually in the config and will not appear in templates, and you have to default to them using \"or\", like `config.card.platform or 'Android TV'`.\r\n\r\nYou can include touch location information in your templates using the values `initialX`, `initialY`, `currentX`, `currentY`, `deltaX`, and `deltaY` This is especially useful when using drag interactions on the touchpad, like with the Unified Remote default mousepad or as a dragpad on all platforms.\r\n\r\n## Interactions\r\n\r\nThere are three traditional ways to trigger an action - tap, double tap, and hold. Buttons, touchpad center support all three, touchpad swipes only support tap and hold actions, and sliders only support tap actions. Defining a double tap action that is not `none` introduces a 200ms delay to single tap actions.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_actions_interactions.png\" alt=\"editor actions interactions\" width=\"600\"/\u003e\r\n\r\nEach action also supports the `confirmation` field. More information on Home Assistant action confirmations can be found [here](https://www.home-assistant.io/dashboards/actions/#options-for-confirmation).\r\n\r\nWhen setting the action for a slider, you must use `value` within a template in the action data to use the feature value in action. For convenience, a codebox for the action will be displayed below the normal action options.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_actions_interactions_slider.png\" alt=\"editor actions interactions slider\" width=\"600\"/\u003e\r\n\r\n### Action Types\r\n\r\nActions follow the [Home Assistant actions](https://www.home-assistant.io/dashboards/actions/) syntax. All Home Assistant actions are supported along with some additional ones.\r\n\r\n| Action | Description |\r\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| More info | Open the more info dialog. |\r\n| Toggle | Toggle between the target's on and off (or similar) states. |\r\n| Navigate | Navigate to another Home Assistant page. |\r\n| URL | Navigate to an external URL. |\r\n| Perform action | Call any Home Assistant service action. |\r\n| Assist | Open the assist dialog. Uses the mobile dialog if available, like in the Home Assistant app. The pipeline ID and start listening options only work in the mobile assist dialog. |\r\n| Key | Send a key to the media platform via the action `remote.send_command`. If no hold action is defined, then `hold_secs: 1` is added when a hold action is fired. |\r\n| Source | Open a source via the action `remote.turn_on`. |\r\n| Keyboard | Open a dialog for sending seamless keyboard input. |\r\n| Textbox | Open a dialog for sending bulk keyboard input. |\r\n| Search | Open a dialog for sending a global search query. |\r\n| Fire DOM event | Fire a browser dom event using the action object as the event detail. Useful for opening [browser mod popup cards](https://github.com/thomasloven/hass-browser_mod?tab=readme-ov-file#how-do-i-update-a-popup-from-the-browser-mod-15). |\r\n| Repeat | Repeat the tap action ten times a second while held. Only applicable to hold. |\r\n| Nothing | Explicilty set a command to do nothing. |\r\n\r\n### Key and Source\r\n\r\n`Key` and `Source` are shortcuts for `perform-action` actions and vary by platform. Read the Home Assistant documentation as linked above [in this table](#media-platform-and-entity-ids) for more information on the actions performed by each platform. You can also look at the default key and source map files [here](https://github.com/Nerwyn/android-tv-card/tree/main/src/models/maps). They will use the general remote or media player ID if set but can be overridden at the custom action level.\r\n\r\nFor Android TV you may find the [Android TV deep linking guide helpful](https://community.home-assistant.io/t/android-tv-remote-app-links-deep-linking-guide/567921).\r\n\r\nIf you find keys or sources that are not part of the default lists that you wish to add, please make a feature or even a pull request to add them, especially if they are for a platform other than Android TV (Android TV default list improvements also welcome).\r\n\r\nWhile most default keys use the `key` action, some actions require more information and call the actions directly.\r\n\r\n### Momentary Mode\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_actions_interactions_momentary.png\" alt=\"editor actions interactions momentary\" width=\"600\"/\u003e\r\n\r\nAs an alternative to normal tap, hold, and double tap actions, buttons and the touchpad center can also be used in a momentary mode. Configuring this option disables the normal tap, hold, and double tap actions.\r\n\r\nThe momentary start action is fired when you first press down on a button or touchpad. The momentary end action is fired when you release the button or touchpad. These actions can be used together or separately.\r\n\r\nFor momentary end actions you can include the number of seconds a button has been held down using `hold_secs` in a template. For convenience, the momentary end action YAML is included in a code box below the action, like shown above.\r\n\r\n### Touchpad Actions\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_actions_interactions_touchpad.png\" alt=\"editor actions interactions touchpad\" width=\"600\"/\u003e\r\n\r\nThe touchpad's center acts like a button, with support for the same actions. The touchpad's direction actions are activated when the user swipes in a direction, and do not support double tap actions or momentary mode.\r\n\r\nTouchpads also support multi-touch mode, which fires alternate actions when more than one finger is used with it. This mode is disabled by default but can be enabled by setting a touchpad's multi-touch actions to something other than `Nothing`. Multi-touch mode supports center tap, double tap, and hold actions, and direction swipe and hold actions.\r\n\r\nTouchpads also support an alternate drag mode. This action is called whenever movement is detected on the touchpad, and works best with mouse movement actions like Unified Remote's `Relmtech.Basic Input delta`. The touchpad X and Y movement can be added to actions using templates using `deltaX` and `deltaY`. Because this action fires every time movement is detected on the touchpad, you may find that it fires too often, or not often enough. You can either use math to modify the values of `deltaX` and `deltaY` within the action data templates, or introduce a delay in which movement will be ignored after a drag action is fired using the configuration UI option `Sampling delay` to tweak the speed of your drag movements and action fire rate. The drag action can also be used in multi-touch mode. Enabling this action disables directional actions.\r\n\r\n### Keyboard, Textbox, and Search\r\n\r\nThis card supports sending text to the following platforms:\r\n\r\n- Android TV\r\n- Sony BRAVIA\r\n- Fire TV\r\n- Roku\r\n- LG webOS\r\n- Kodi\r\n- Unified Remote (PC, Mac, Linux)\r\n\r\nIf the user defined general platform is listed above, then any action set to a keyboard action (that has autofill enabled) will inherit it. Otherwise it will default to `Android TV`. Keyboard support for more platforms can be added if there is a way to do so through their Home Assistant (or community made) integrations.\r\n\r\nWhen you use any keyboard action, a dialog will open that can be typed into.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/keyboard_dialog.png\" alt=\"keyboard dialog\" width=\"300\"/\u003e\r\n\r\nYou can change the prompt text that appears before you type anything using the `Prompt` field at the action level.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_actions_interactions_keyboard_prompt.png\" alt=\"editor actions interactions keyboard prompt\" width=\"600\"/\u003e\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/keyboard_dialog_custom_prompt.png\" alt=\"keyboard dialog custom prompt\" width=\"600\"/\u003e\r\n\r\nFor Android TV you need to include the Android TV Remote integration remote entity ID at the general or action level as it is used to send the keys enter and delete (backspace).\r\n\r\nFor Roku make sure to include both the remote and media player IDs at the general or action level, as the remote is used for normal keyboard entry while the media player is used for search.\r\n\r\n#### Keyboard - Seamless Text Entry\r\n\r\nSend text to your supported media platform seamlessly using the action or default key `keyboard`. The dialog has several listeners which will send anything you type to your media platform immediately.\r\n\r\nBecause we do not have a way to retrieve the currently on screen text of most media platforms, the dialog and platform text may become out of sync if a message gets dropped due to a network issue, you attempt to erase more than one character at a time, you try to modify the middle of the entered text, or if you prematurely close the dialog window. The keyboard dialog will attempt to prevent you from doing things that would cause this, but please remember that if you make a mistake you have to backspace all the way to the incorrect character from the end of your input text one character at at a time. In my testing the dialog always kept in sync with the platform text unless I attempted to delete more than one character. This does not apply to Kodi or LG webOS, whose text entry methods replace the on screen text when called instead of appending/inserting.\r\n\r\nADB can be slow and you may notice some delay in what you type and what appears on your Android TV, Sony BRAVIA, or Fire TV device. Make sure to use the newer ADB integration remote entity for a faster typing experience.\r\n\r\n#### Textbox - Bulk Text Entry\r\n\r\nSend text to your supported media platform in bulk using the action or default button `textbox`. The dialog will not send any information until you tap the send button. It is highly recommended that you also create buttons for delete and enter so you can easily delete the text you send and quickly search using it.\r\n\r\n#### Search - Global Search\r\n\r\nNot supported by the platforms LG webOS or Unified Remote.\r\n\r\nSend a global search query to your media platform using the action or default button `search`. Like the bulk entry method, the dialog will not send any information until you tap the search button. This method cannot be used to enter text into currently visible text fields.\r\n\r\n## Icons\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_icons.png\" alt=\"editor icons\" width=\"600\"/\u003e\r\n\r\nYou can add custom SVG path icons to use with this card using the icons tab. The custom icons list works the same as the custom actions list, except that there is only one type of custom icon you can add.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/editor_icons_editor.png\" alt=\"editor icons editor\" width=\"600\"/\u003e\r\n\r\nEach custom icon has to have a name and a SVG path. The SVG path must generate a 24x24 pixel icon to properly render in the remote. A preview of the icon is shown below the path. I highly recommend using a tool like [this SVG path editor](https://yqnn.github.io/svg-path-editor/) to modify SVG paths to work with this card.\r\n\r\nOnce setup, you can reference these icons in custom actions in the icon field by name. Many default sources similarly use SVG paths instead of the Home Assistant built in icons. If you have an SVG icon you wish to add to this project, you can create a feature or pull request to do so.\r\n\r\n# YAML Examples\r\n\r\nWhile all configuration can now be done through the user interface, these YAML examples can provide some insight on layout basics.\r\n\r\n## Example 1\r\n\r\nPlaying with order, moving and repeating buttons.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/disorder.png\" alt=\"disorder example\" width=\"300\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nremote_id: remote.google_chromecast\r\nmedia_player_id: media_player.google_chromecast\r\ntitle: Example 1\r\nrows:\r\n - - power\r\n - - back\r\n - home\r\n - tv\r\n - netflix\r\n - - youtube\r\n - spotify\r\n - netflix\r\n - - touchpad\r\n - - slider\r\n - - channel_up\r\n - channel_down\r\n - info\r\n - - rewind\r\n - play\r\n - spotify\r\n - pause\r\n - fast_forward\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 2\r\n\r\nButtons, buttons everywhere!\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/buttons_everywhere.png\" alt=\"buttons example\" width=\"300\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nremote_id: remote.google_chromecast\r\ntitle: Example 2\r\nrows:\r\n - - power\r\n - channel_up\r\n - info\r\n - channel_down\r\n - - netflix\r\n - youtube\r\n - spotify\r\n - - volume_buttons\r\n - - dpad\r\n - - back\r\n - home\r\n - tv\r\n - - rewind\r\n - play\r\n - pause\r\n - fast_forward\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 3\r\n\r\nUsing less and a vertical slider.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/using_less.png\" alt=\"less example\" width=\"300\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nremote_id: remote.google_chromecast\r\nmedia_player_id: media_player.google_chromecast\r\ntitle: Example 3\r\nrows:\r\n - - power\r\n - netflix\r\n - youtube\r\n - spotify\r\n - - touchpad\r\n - slider\r\n - - back\r\n - home\r\ncustom_actions:\r\n - type: slider\r\n name: slider\r\n range:\r\n - 0\r\n - 1\r\n step: 0.01\r\n value_attribute: volume_level\r\n tap_action:\r\n action: perform-action\r\n perform_action: media_player.volume_set\r\n data:\r\n volume_level: '{{ value | float }}'\r\n vertical: true\r\n icon: mdi:volume-high\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 4\r\n\r\nIn any row, if you add a `null` item, there will be an empty button sized space.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/empty_buttons.png\" alt=\"empty buttons example\" width=\"300\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nrows:\r\n - - back\r\n - home\r\n - tv\r\n - - rewind\r\n - null\r\n - null\r\n - fast_forward\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 5\r\n\r\nA tablet layout using nested rows and columns.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/tablet.png\" alt=\"tablet example\" width=\"800\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nremote_id: remote.google_chromecast\r\nrows:\r\n - - - - back\r\n - null\r\n - home\r\n - null\r\n - menu\r\n - - volume_down\r\n - null\r\n - volume_mute\r\n - null\r\n - volume_up\r\n - - rewind\r\n - null\r\n - play_pause\r\n - null\r\n - fast_forward\r\n - - netflix\r\n - disney\r\n - hulu\r\n - max\r\n - primevideo\r\n - - plex\r\n - vudu\r\n - youtube\r\n - spotify\r\n - - - keyboard\r\n - search\r\n - - touchpad\r\ncustom_actions:\r\n - type: touchpad # All of this except styles will be autofilled\r\n name: touchpad # when you create a custom touchpad with the name touchpad\r\n tap_action:\r\n action: key\r\n key: DPAD_CENTER\r\n up:\r\n tap_action:\r\n action: key\r\n key: DPAD_UP\r\n hold_action:\r\n action: repeat\r\n down:\r\n tap_action:\r\n action: key\r\n key: DPAD_DOWN\r\n hold_action:\r\n action: repeat\r\n left:\r\n tap_action:\r\n action: key\r\n key: DPAD_LEFT\r\n hold_action:\r\n action: repeat\r\n right:\r\n tap_action:\r\n action: key\r\n key: DPAD_RIGHT\r\n hold_action:\r\n action: repeat\r\n styles: |-\r\n toucharea {\r\n height: 300px;\r\n }\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 6\r\n\r\nCombining Apple TVs `wakeup` and `suspend` keys into one custom power action and using an icon for the touchpad background.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/apple_tv.png\" alt=\"apple tv example\" width=\"400\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nremote_id: remote.apple_tv\r\nplatform: Apple TV\r\nautofill_entity_id: true\r\nrows:\r\n - - power\r\n - menu\r\n - home\r\n - - skip_backward\r\n - play\r\n - pause\r\n - skip_forward\r\n - - touchpad\r\n - - appletv\r\n - netflix\r\n - disney\r\n - primevideo\r\n - allente\r\n - - nrktv\r\n - tv2play\r\n - max\r\n - skyshowtime\r\n - plex\r\n - - viaplay\r\n - discovery\r\n - spotify\r\n - youtube\r\ncustom_actions:\r\n - type: button\r\n name: power\r\n tap_action:\r\n action: key\r\n key: wakeup\r\n icon: mdi:power\r\n hold_action:\r\n action: key\r\n key: suspend\r\n - type: touchpad\r\n name: touchpad\r\n tap_action:\r\n action: key\r\n key: select\r\n up:\r\n tap_action:\r\n action: key\r\n key: up\r\n hold_action:\r\n action: repeat\r\n down:\r\n tap_action:\r\n action: key\r\n key: down\r\n hold_action:\r\n action: repeat\r\n left:\r\n tap_action:\r\n action: key\r\n key: up\r\n hold_action:\r\n action: repeat\r\n right:\r\n tap_action:\r\n action: key\r\n key: right\r\n hold_action:\r\n action: repeat\r\n styles: |-\r\n .icon {\r\n --size: 250px;\r\n }\r\n double_tap_action:\r\n action: key\r\n key: menu\r\n icon: mdi:apple\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 7\r\n\r\nA user's Kodi remote.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/kodi.png\" alt=\"kodi example\" width=\"400\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nkeyboard_id: media_player.kodi\r\nmedia_player_id: media_player.kodi\r\nplatform: Kodi\r\nrows:\r\n - - back\r\n - home\r\n - menu\r\n - - info\r\n - osd\r\n - play_pause\r\n - - - volume_buttons\r\n - touchpad\r\n - - keyboard\r\n - null\r\n - search\r\ncustom_actions:\r\n - type: touchpad\r\n name: touchpad\r\n tap_action:\r\n action: key\r\n key: Input.Select\r\n up:\r\n tap_action:\r\n action: key\r\n key: Input.Up\r\n hold_action:\r\n action: repeat\r\n styles: ''\r\n down:\r\n tap_action:\r\n action: key\r\n key: Input.Down\r\n hold_action:\r\n action: repeat\r\n left:\r\n tap_action:\r\n action: key\r\n key: Input.Left\r\n hold_action:\r\n action: repeat\r\n right:\r\n tap_action:\r\n action: key\r\n key: Input.Right\r\n hold_action:\r\n action: repeat\r\n styles: |-\r\n toucharea {\r\n height: 200px;\r\n background-image: url(\"https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Kodi-logo-Thumbnail-light-transparent.png/600px-Kodi-logo-Thumbnail-light-transparent.png?20141126003611\");\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n opacity: 1.0;;\r\n }\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 8\r\n\r\nA touchpad remapped to work with a [Denon/Marantz Receiver](https://www.home-assistant.io/integrations/denonavr).\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nmedia_player_id: media_player.marantz_sr7013\r\nautofill_entity_id: true\r\nrows:\r\n - - touchpad\r\ncustom_actions:\r\n - type: touchpad\r\n name: touchpad\r\n tap_action:\r\n action: perform-action\r\n perform_action: denonavr.get_command\r\n data:\r\n command: /goform/formiPhoneAppDirect.xml?MNENT\r\n up:\r\n tap_action:\r\n action: perform-action\r\n perform_action: denonavr.get_command\r\n data:\r\n command: /goform/formiPhoneAppDirect.xml?MNCUP\r\n hold_action:\r\n action: repeat\r\n down:\r\n tap_action:\r\n action: perform-action\r\n perform_action: denonavr.get_command\r\n data:\r\n command: /goform/formiPhoneAppDirect.xml?MNCDN\r\n hold_action:\r\n action: repeat\r\n left:\r\n tap_action:\r\n action: perform-action\r\n perform_action: denonavr.get_command\r\n data:\r\n command: /goform/formiPhoneAppDirect.xml?MNCLT\r\n hold_action:\r\n action: repeat\r\n right:\r\n tap_action:\r\n action: perform-action\r\n perform_action: denonavr.get_command\r\n data:\r\n command: /goform/formiPhoneAppDirect.xml?MNCRT\r\n hold_action:\r\n action: repeat\r\n styles: |-\r\n toucharea {\r\n height: 200px;\r\n }\r\n double_tap_action:\r\n action: perform-action\r\n perform_action: denonavr.get_command\r\n data:\r\n command: /goform/formiPhoneAppDirect.xml?MNRTN\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 9\r\n\r\nEven more disorder with columns and special elements in the same row as buttons, stylized everything, and a label to display the slider value.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/more_disorder.png\" alt=\"more disorder example\" width=\"500\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nremote_id: remote.google_chromecast\r\nmedia_player_id: media_player.google_chromecast\r\nrows:\r\n - - - home\r\n - menu\r\n - back\r\n - keyboard\r\n - - netflix\r\n - hulu\r\n - disney\r\n - max\r\n - primevideo\r\n - touchpad\r\n - - slider\r\n - search\r\ncustom_actions:\r\n - type: button\r\n name: netflix\r\n tap_action:\r\n action: source\r\n source: netflix://\r\n icon: mdi:netflix\r\n styles: |-\r\n :host {\r\n --icon-color: rgb(229, 9, 20);\r\n }\r\n - type: button\r\n name: hulu\r\n tap_action:\r\n action: source\r\n source: hulu://\r\n icon: mdi:hulu\r\n styles: |-\r\n :host {\r\n --icon-color: rgb(28, 231, 131);\r\n }\r\n - type: button\r\n name: disney\r\n tap_action:\r\n action: source\r\n source: https://www.disneyplus.com\r\n icon: disney\r\n styles: |-\r\n :host {\r\n --icon-color: rgb(17, 60, 207);\r\n }\r\n - type: button\r\n name: max\r\n tap_action:\r\n action: source\r\n source: market://launch?id=com.wbd.stream\r\n icon: max\r\n styles: |-\r\n :host {\r\n --icon-color: rgb(0, 35, 246);\r\n }\r\n - type: button\r\n name: primevideo\r\n tap_action:\r\n action: source\r\n source: https://app.primevideo.com\r\n icon: primevideo\r\n styles: |-\r\n :host {\r\n --icon-color: rgb(0, 165, 222);\r\n }\r\n - type: slider\r\n name: slider\r\n range:\r\n - 0\r\n - 0.6\r\n step: 0.01\r\n value_attribute: volume_level\r\n tap_action:\r\n action: perform-action\r\n perform_action: media_player.volume_set\r\n data:\r\n volume_level: '{{ value | float }}'\r\n styles: |-\r\n :host {\r\n height: 24px;\r\n border-radius: 4px;\r\n --background-height: 12px;\r\n --color: darkred;\r\n --background: red;\r\n --thumb-border-radius: 0;\r\n }\r\n .icon {\r\n display: none;\r\n }\r\n .label {\r\n {% if not states(config.entity, 'on') %}\r\n display: none;\r\n {% endif %}\r\n transform: var(--icon-transform);\r\n font-size: 14px;\r\n font-weight: 1000;\r\n color: var(--primary-text-color);\r\n }\r\n .tooltip {\r\n display: none;\r\n }\r\n label: '{{ (value * 100 ) | int }}%'\r\n - type: touchpad\r\n name: touchpad\r\n tap_action:\r\n action: key\r\n key: DPAD_CENTER\r\n up:\r\n tap_action:\r\n action: key\r\n key: DPAD_UP\r\n hold_action:\r\n action: repeat\r\n down:\r\n tap_action:\r\n action: key\r\n key: DPAD_DOWN\r\n hold_action:\r\n action: repeat\r\n left:\r\n tap_action:\r\n action: key\r\n key: DPAD_LEFT\r\n hold_action:\r\n action: repeat\r\n right:\r\n tap_action:\r\n action: key\r\n key: DPAD_RIGHT\r\n hold_action:\r\n action: repeat\r\n styles: |-\r\n toucharea {\r\n background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);\r\n }\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 10\r\n\r\nA simple gamepad with a custom button grid\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/gamepad.png\" alt=\"gamepad example\" width=\"500\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\nttype: custom:android-tv-card\r\nremote_id: remote.google_chromecast\r\nrows:\r\n - - - null\r\n - up\r\n - null\r\n - left\r\n - null\r\n - right\r\n - null\r\n - down\r\n - null\r\n - xpad\r\ncustom_actions:\r\n - type: button\r\n name: a\r\n tap_action:\r\n action: key\r\n key: BUTTON_A\r\n icon: mdi:alpha-a-circle\r\n styles: |-\r\n :host {\r\n padding: 0;\r\n margin: 0;\r\n --size: 48px;\r\n --icon-color: #C1121C;\r\n }\r\n - type: button\r\n name: b\r\n tap_action:\r\n action: key\r\n key: BUTTON_B\r\n icon: mdi:alpha-b-circle\r\n styles: |-\r\n :host {\r\n padding: 0;\r\n margin: 0;\r\n --size: 48px;\r\n --icon-color: #F7BA0B;\r\n }\r\n - type: button\r\n name: x\r\n tap_action:\r\n action: key\r\n key: BUTTON_X\r\n icon: mdi:alpha-x-circle\r\n styles: |-\r\n :host {\r\n padding: 0;\r\n margin: 0;\r\n --size: 48px;\r\n --icon-color: #00387b;\r\n }\r\n - type: button\r\n name: 'y'\r\n tap_action:\r\n action: key\r\n key: BUTTON_Y\r\n icon: mdi:alpha-y-circle\r\n styles: |-\r\n :host {\r\n padding: 0;\r\n margin: 0;\r\n --size: 48px;\r\n --icon-color: #007243;\r\n }\r\nstyles: |-\r\n remote-button {\r\n background: rgb(27,27,27);\r\n padding: 8px;\r\n margin: 4px;\r\n border-radius: 24px;\r\n --size: 24px;\r\n }\r\n .row {\r\n justify-content: center;\r\n }\r\n #column-1 {\r\n display: grid;\r\n direction: ltr;\r\n grid-template-rows: repeat(3, var(--size, 48px));\r\n grid-template-columns: repeat(3, var(--size, 48px));\r\n grid-gap: 8px 16px;\r\n padding: 0;\r\n flex: 0;\r\n background: rgb(27,27,27);\r\n border-radius: 128px;\r\n }\r\nhaptics: false\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 11\r\n\r\nConditional layouts using templating and an input select.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/conditional_layouts.png\" alt=\"conditional layouts example\" width=\"500\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nremote_id: remote.google_tv\r\nmedia_player_id: media_player.google_tv\r\nrows:\r\n - - next_thing\r\n - |\r\n {% if is_state(\"input_select.select_test\", \"A\") %}\r\n - touchpad\r\n - - slider\r\n {% elif is_state(\"input_select.select_test\", \"B\") %}\r\n - dpad\r\n - - volume_buttons\r\n {% elif is_state(\"input_select.select_test\", \"C\") %}\r\n - numpad\r\n {% endif %}\r\ncustom_actions:\r\n - icon: mdi:skip-next-circle\r\n name: next_thing\r\n tap_action:\r\n data:\r\n cycle: true\r\n target:\r\n entity_id: input_select.select_test\r\n action: perform-action\r\n perform_action: input_select.select_next\r\n type: button\r\n entity_id: input_select.select_test\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 12\r\n\r\nRGB Remote using Broadlink RM4 Pro.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/rgb.png\" alt=\"rgb remote example\" width=\"500\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nremote_id: remote.rm4_pro\r\ntitle: TV RGB\r\nrows:\r\n - - power\r\n - null\r\n - poweroff\r\n - - up\r\n - null\r\n - down\r\n - - 1\r\n - 2\r\n - 3\r\n - - 4\r\n - 5\r\n - 6\r\n - - 7\r\n - 8\r\n - 9\r\n - - 10\r\n - 11\r\n - 12\r\ncustom_actions:\r\n - icon: mdi:circle\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: red\r\n name: '1'\r\n type: button\r\n styles: |-\r\n :host {\r\n --size: 42px;\r\n --icon-color: red;\r\n }\r\n - icon: mdi:circle\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: green\r\n name: '2'\r\n type: button\r\n styles: |-\r\n :host {\r\n --size: 42px;\r\n --icon-color: green;;\r\n }\r\n - icon: mdi:circle\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: dark_blue\r\n name: '3'\r\n type: button\r\n styles: |-\r\n :host {\r\n --size: 42px;\r\n --icon-color: darkblue;;\r\n }\r\n - icon: mdi:circle\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: yellow\r\n name: '4'\r\n type: button\r\n styles: |-\r\n :host {\r\n --size: 42px;\r\n --icon-color: yellow;;\r\n }\r\n - icon: mdi:circle\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: yellow-orange\r\n name: '5'\r\n type: button\r\n styles: |-\r\n :host {\r\n --size: 42px;\r\n --icon-color: goldenrod;;\r\n }\r\n - icon: mdi:circle\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: orange\r\n name: '6'\r\n type: button\r\n styles: |-\r\n :host {\r\n --size: 42px;\r\n --icon-color: orange;;\r\n }\r\n - icon: mdi:circle\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: orange-light\r\n name: '7'\r\n type: button\r\n styles: |-\r\n :host {\r\n --size: 42px;\r\n --icon-color: lightsalmon;;\r\n }\r\n - icon: mdi:circle\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: cyan\r\n name: '8'\r\n type: button\r\n styles: |-\r\n :host {\r\n --size: 42px;\r\n --icon-color: cyan;;\r\n }\r\n - icon: mdi:circle\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: blue\r\n name: '9'\r\n type: button\r\n styles: |-\r\n :host {\r\n --size: 42px;\r\n --icon-color: blue;;\r\n }\r\n - icon: mdi:circle\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: pink\r\n name: '10'\r\n type: button\r\n styles: |-\r\n :host {\r\n --size: 42px;\r\n --icon-color: magenta;;\r\n }\r\n - icon: mdi:circle\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: green_light\r\n name: '11'\r\n type: button\r\n styles: |-\r\n :host {\r\n --size: 42px;\r\n --icon-color: mediumseagreen;;\r\n }\r\n - icon: mdi:circle\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: white\r\n name: '12'\r\n type: button\r\n styles: |-\r\n :host {\r\n --size: 42px;\r\n --icon-color: white;;\r\n }\r\n - type: button\r\n name: power\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: 'on'\r\n icon: mdi:power\r\n styles: |-\r\n :host {\r\n --icon-color: green;\r\n }\r\n - icon: mdi:power\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: 'off'\r\n name: poweroff\r\n type: button\r\n styles: |-\r\n :host {\r\n --icon-color: red;\r\n }\r\n - type: button\r\n name: up\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: brightness+\r\n hold_action:\r\n action: repeat\r\n icon: mdi:chevron-up\r\n - type: button\r\n name: down\r\n tap_action:\r\n action: perform-action\r\n perform_action: remote.send_command\r\n data:\r\n device: Office TV Led\r\n command: brightness-\r\n hold_action:\r\n action: repeat\r\n icon: mdi:chevron-down\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 13\r\n\r\nStyle `dpad` to be like the Google TV app remote. **NOTE**: You have to add the provided overall styles including matching the row number. You can find the CSS IDs of your navigation button rows by hovering over the remote in the editor as described [in this section](#css-styles).\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/google_tv_dpad.png\" alt=\"google tv app styled dpad\" width=\"500\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nrows:\r\n - - dpad\r\ncustom_actions:\r\n - type: button\r\n name: center\r\n tap_action:\r\n action: key\r\n key: DPAD_CENTER\r\n icon: ''\r\n styles: |-\r\n :host {\r\n border-radius: 50%;\r\n z-index: 2;\r\n pointer-events: none;\r\n width: 200px;\r\n height: 200px;\r\n top: -75px;\r\n left: -75px;\r\n }\r\n button {\r\n height: 80%;\r\n width: 80%;\r\n border-radius: 50%;\r\n background: rgb(94, 94, 94);\r\n pointer-events: all;\r\n }\r\n - type: button\r\n name: up\r\n tap_action:\r\n action: key\r\n key: DPAD_UP\r\n hold_action:\r\n action: repeat\r\n icon: mdi:chevron-up\r\n styles: |-\r\n button {\r\n top: 10%;\r\n left: 10%;\r\n border-radius: 0;\r\n }\r\n .icon {\r\n transform: rotate(-45deg);\r\n color: rgb(197, 199, 197);\r\n }\r\n - type: button\r\n name: down\r\n tap_action:\r\n action: key\r\n key: DPAD_DOWN\r\n hold_action:\r\n action: repeat\r\n icon: mdi:chevron-down\r\n styles: |-\r\n button {\r\n bottom: 10%;\r\n right: 10%;\r\n border-radius: 0;\r\n }\r\n .icon {\r\n transform: rotate(-45deg);\r\n color: rgb(197, 199, 197);\r\n }\r\n - type: button\r\n name: left\r\n tap_action:\r\n action: key\r\n key: DPAD_LEFT\r\n hold_action:\r\n action: repeat\r\n icon: mdi:chevron-left\r\n styles: |-\r\n button {\r\n bottom: 10%;\r\n left: 10%;\r\n border-radius: 0;\r\n }\r\n .icon {\r\n transform: rotate(-45deg);\r\n color: rgb(197, 199, 197);\r\n }\r\n - type: button\r\n name: right\r\n tap_action:\r\n action: key\r\n key: DPAD_RIGHT\r\n hold_action:\r\n action: repeat\r\n icon: mdi:chevron-right\r\n styles: |-\r\n button {\r\n top: 10%;\r\n right: 10%;\r\n border-radius: 0;\r\n }\r\n .icon {\r\n transform: rotate(-45deg);\r\n color: rgb(197, 199, 197);\r\n }\r\nstyles: |-\r\n .button-pad {\r\n gap: 98px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n background: rgb(31, 31, 31);\r\n }\r\n .button-pad .empty-button {\r\n width: 0;\r\n height: 0;\r\n }\r\n .button-pad remote-button {\r\n top: -125%;\r\n left: -125%;\r\n width: 170px;\r\n height: 170px;\r\n transform: rotate(45deg);\r\n z-index: 1;\r\n }\r\n #row-1 {\r\n width: fit-content;\r\n }\r\ncustom_icons: []\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 14\r\n\r\nStyle `dpad` to be like a traditional tv remote. **NOTE**: You have to add the provided overall styles.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/traditional_dpad.png\" alt=\"traditional remote styled dpad\" width=\"500\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nrows:\r\n - dpad\r\ncustom_actions:\r\n - type: button\r\n name: center\r\n tap_action:\r\n action: key\r\n key: DPAD_CENTER\r\n icon: ok\r\n styles: |-\r\n :host {\r\n --size: 36px;\r\n top: -30%;\r\n left: -30%;\r\n width: 160%;\r\n height: 160%;\r\n border: 1px solid rgba(0,0,0,0.5);\r\n border-radius: 50%;\r\n transform: rotate(0deg);\r\n background: radial-gradient(circle at top left,#303030 15%,#101010 100%);\r\n z-index: 2;\r\n }\r\n .icon {\r\n color:rgba(128,128,128,0.8);\r\n }\r\n - type: button\r\n name: up\r\n tap_action:\r\n action: key\r\n key: DPAD_UP\r\n hold_action:\r\n action: repeat\r\n icon: mdi:chevron-up\r\n styles: |-\r\n .icon {\r\n transform:rotate(-45deg);\r\n color: rgba(96,96,96,0.8);\r\n }\r\n button {\r\n border-radius: 0;\r\n }\r\n - type: button\r\n name: down\r\n tap_action:\r\n action: key\r\n key: DPAD_DOWN\r\n hold_action:\r\n action: repeat\r\n icon: mdi:chevron-down\r\n styles: |-\r\n .icon {\r\n transform:rotate(-45deg);\r\n color: rgba(96,96,96,0.8);\r\n }\r\n button {\r\n border-radius: 0;\r\n }\r\n - type: button\r\n name: left\r\n tap_action:\r\n action: key\r\n key: DPAD_LEFT\r\n hold_action:\r\n action: repeat\r\n icon: mdi:chevron-left\r\n styles: |-\r\n .icon {\r\n transform:rotate(-45deg);\r\n color: rgba(96,96,96,0.8);\r\n }\r\n button {\r\n border-radius: 0;\r\n }\r\n - type: button\r\n name: right\r\n tap_action:\r\n action: key\r\n key: DPAD_RIGHT\r\n hold_action:\r\n action: repeat\r\n icon: mdi:chevron-right\r\n styles: |-\r\n .icon {\r\n transform:rotate(-45deg);\r\n color: rgba(96,96,96,0.8);\r\n }\r\n button {\r\n border-radius: 0;\r\n }\r\nstyles: |-\r\n .button-pad {\r\n gap: 14px;\r\n border: 1px solid #444;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n background: radial-gradient(circle at top left,#202020 15%,#303030 100%);\r\n }\r\n .button-pad .empty-button {\r\n width: 0;\r\n height: 0;\r\n }\r\n .button-pad remote-button {\r\n top: -40%;\r\n left: -40%;\r\n width: 180%;\r\n height: 180%;\r\n transform: rotate(45deg);\r\n overflow: hidden;\r\n border-radius: 0;\r\n }\r\ncustom_icons:\r\n - name: ok\r\n path: \u003e-\r\n M7 7A2 2 0 005 9V15A2 2 0 007 17H9A2 2 0 0011 15V9A2 2 0 009 7H7M7\r\n 9H9V15H7V9ZM13 7V17H15V13.7L17 17H19L16 12 19 7H17L15 10.3V7H13Z\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 15\r\n\r\nA Spotify app influenced music controller, with album art, album colored background, song info, media position information, controls, and a hidden vertical volume slider. Set `--max-album-height` in the global styles to reduce its size.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/music_controls.png\" alt=\"music controls\" width=\"500\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nmedia_player_id: media_player.spotify\r\nrows:\r\n - - album_art\r\n - volume\r\n - - song_info\r\n - show_volume\r\n - - shuffle\r\n - previous\r\n - play_pause\r\n - next\r\n - repeat\r\n - - media_position\r\ncustom_actions:\r\n - type: touchpad\r\n name: album_art\r\n tap_action:\r\n action: more-info\r\n styles: |-\r\n :host {\r\n display: flex;\r\n pointer-events: all;\r\n border-radius: 0;\r\n --size: 0;\r\n }\r\n toucharea {\r\n content: url(\"{{ state_attr(config.entity, 'entity_picture') }}\");\r\n background: transparent;\r\n height: fit-content;\r\n width: fit-content;\r\n max-width: 100%;\r\n max-height: var(--max-album-height, 50vh);\r\n border-radius: 8px;\r\n --ha-ripple-hover-color: transparent;\r\n }\r\n down:\r\n styles: ''\r\n left:\r\n styles: ''\r\n autofill_entity_id: true\r\n - type: touchpad\r\n name: song_info\r\n styles: |-\r\n toucharea {\r\n background: none;\r\n height: 50px;\r\n border-radius: 0;\r\n justify-content: center;\r\n gap: 4px;\r\n --ha-ripple-color: none;\r\n --size: 0px;\r\n }\r\n .toucharea-row {\r\n justify-content: flex-start;\r\n }\r\n #left, #right {\r\n display: none;\r\n }\r\n remote-icon-label {\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n align-items: flex-start;\r\n }\r\n .label {\r\n font-size: 18px;\r\n line-height: 18px;\r\n height: 22px;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n justify-content: flex-start;\r\n font-weight: 900;\r\n display: block;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n text-align: left;\r\n }\r\n value_attribute: media_title\r\n label: '{{ value | safe }}'\r\n down:\r\n styles: |-\r\n .label {\r\n color: var(--icon-color);\r\n font-weight: 500;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n justify-content: flex-start;\r\n display: block;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n text-align: left;\r\n }\r\n label: '{{ state_attr(config.entity, \"media_artist\") | safe }}'\r\n - type: button\r\n name: show_volume\r\n icon: mdi:volume-high\r\n tap_action:\r\n action: eval\r\n eval: \u003e-\r\n const card = this.parentNode.parentNode;\r\n\r\n const opacity = card.style.getPropertyValue('--volume-opacity');\r\n\r\n card.style.setProperty('--volume-opacity', opacity == 0 ? 100 : 0,\r\n 'important');\r\n\r\n card.style.setProperty('--volume-pointer-events', opacity == 0 ? 'all' :\r\n 'none', 'important');\r\n - type: slider\r\n name: volume\r\n value_attribute: volume_level\r\n tap_action:\r\n action: perform-action\r\n perform_action: media_player.volume_set\r\n data:\r\n volume_level: '{{ value | float }}'\r\n icon: mdi:music-note\r\n vertical: true\r\n styles: |-\r\n :host {\r\n opacity: var(--volume-opacity);\r\n position: absolute;\r\n height: var(--max-album-height, 50vh);\r\n width: 50px;\r\n right: 6px;\r\n top: 8px;\r\n --tooltip-label: \"{{ (100 * value) | int }}%\";\r\n --icon-color: var(--background-color);\r\n transition: all 0.1s ease-out;\r\n }\r\n .background {\r\n opacity: 0.5;\r\n }\r\n .slider {\r\n pointer-events: var(--volume-pointer-events);\r\n }\r\n autofill_entity_id: true\r\n - type: button\r\n name: shuffle\r\n tap_action:\r\n action: perform-action\r\n perform_action: media_player.shuffle_set\r\n target: {}\r\n data:\r\n shuffle: '{{ not value }}'\r\n styles: |-\r\n :host {\r\n --size: 24px;\r\n }\r\n {% if value %}\r\n :host {\r\n --icon-color: var(--active-color);\r\n }\r\n {% endif %}\r\n value_attribute: shuffle\r\n icon: |-\r\n {% if value %}\r\n mdi:shuffle-variant\r\n {% else %}\r\n mdi:shuffle-disabled\r\n {% endif %}\r\n - type: button\r\n name: previous\r\n tap_action:\r\n action: perform-action\r\n perform_action: media_player.media_previous_track\r\n target: {}\r\n icon: mdi:skip-previous\r\n - type: button\r\n name: play_pause\r\n tap_action:\r\n action: perform-action\r\n perform_action: media_player.media_play_pause\r\n target: {}\r\n icon: |-\r\n {% if is_state(config.entity, \"playing\") %}\r\n mdi:pause\r\n {% else %}\r\n mdi:play\r\n {% endif %}\r\n styles: |\r\n .icon {\r\n color: black;\r\n }\r\n button {\r\n background-color: white;\r\n height: var(--button_size);\r\n width: var(--button_size);\r\n --button_size: 48px;\r\n }\r\n - type: button\r\n name: next\r\n tap_action:\r\n action: perform-action\r\n perform_action: media_player.media_next_track\r\n target: {}\r\n icon: mdi:skip-next\r\n - type: button\r\n name: repeat\r\n tap_action:\r\n action: perform-action\r\n perform_action: media_player.repeat_set\r\n target: {}\r\n data:\r\n repeat: |-\r\n {% if value == 'off' %}\r\n all\r\n {% elif value == 'all' %}\r\n one\r\n {% else %}\r\n off\r\n {% endif %}\r\n styles: |-\r\n :host {\r\n --size: 24px;\r\n }\r\n {% if value in ['all', 'one'] %}\r\n :host {\r\n --icon-color: var(--active-color);\r\n }\r\n {% endif %}\r\n value_attribute: repeat\r\n icon: |-\r\n {% if value == 'all' %}\r\n mdi:repeat\r\n {% elif value == 'one' %}\r\n mdi:repeat-once\r\n {% else %}\r\n mdi:repeat-off\r\n {% endif %}\r\n - type: slider\r\n name: media_position\r\n value_attribute: media_position\r\n range:\r\n - 0\r\n - '{{ state_attr(config.entity, \"media_duration\") }}'\r\n tap_action:\r\n action: perform-action\r\n perform_action: media_player.media_seek\r\n data:\r\n seek_position: '{{ value }}'\r\n step: 1\r\n styles: |-\r\n :host {\r\n height: calc(3 * var(--height));\r\n --height: 4px;\r\n justify-content: flex-start;\r\n font-size: 12px;\r\n font-weight: 300;\r\n --tooltip-display: none;\r\n }\r\n .container {\r\n --thumb-width: 1px;\r\n --thumb-border-radius: 0;\r\n }\r\n\r\n .background {\r\n background: white;\r\n opacity: 0.2;\r\n }\r\n .slider {\r\n margin: 0;\r\n }\r\n @media (hover: hover) {\r\n :hover {\r\n --color: var(--active-color);\r\n }\r\n }\r\n :focus-visible, :active {\r\n --color: var(--active-color);\r\n }\r\n\r\n :host::before {\r\n content: '{% set minutes = (value / 60) | int %}{% set seconds = (value - 60 * minutes)\r\n | int %}{{ minutes }}:{{ 0 if seconds \u003c 10 else \"\" }}{{ seconds | int }}';\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n }\r\n :host::after {\r\n content: '{% set duration = state_attr(config.entity, \"media_duration\") %}{% set minutes = (duration / 60) | int %}{% set seconds = (duration - 60 * minutes)\r\n | int %}{{ minutes }}:{{ 0 if seconds \u003c 10 else \"\" }}{{ seconds | int }}';\r\n position: absolute;\r\n right: 0;\r\n bottom: 0;\r\n }\r\n value_from_hass_delay: 5000\r\ngrid_options:\r\n columns: 12\r\n rows: auto\r\nstyles: |-\r\n ha-card {\r\n overflow: hidden;\r\n --volume-opacity: 0;\r\n --volume-pointer-events: none;\r\n --size: 32px;\r\n --icon-color: #b3b3b3;\r\n --active-color: #1cb955;\r\n }\r\n ha-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-image: url(\"{{ state_attr(config.entity, 'entity_picture') }}\");\r\n background-size: cover;\r\n filter: blur(80px) brightness(80%);\r\n transform: scale(5);\r\n }\r\n\r\n remote-button:active {\r\n filter: brightness(80%);\r\n }\r\n @media (hover: hover) {\r\n remote-button:hover {\r\n transform: scale(1.02);\r\n --icon-color: white;\r\n }\r\n }\r\n\r\n remote-touchpad {\r\n pointer-events: none;\r\n }\r\nhaptics: false\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## Example 16\r\n\r\nMultiple sliders for light color control.\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/android-tv-card/main/assets/color_controls.png\" alt=\"color controls\" width=\"500\"/\u003e\r\n\r\n\u003cdetails\u003e\r\n\r\n\u003csummary\u003eRemote Config\u003c/summary\u003e\r\n\r\n```yaml\r\ntype: custom:android-tv-card\r\nrows:\r\n - - brightness\r\n - color_temp\r\n - hs_color\r\ncustom_actions:\r\n - type: slider\r\n vertical: true\r\n entity_id: light.sunroom_ceiling\r\n value_attribute: brightness\r\n range:\r\n - 0\r\n - 100\r\n step: 1\r\n tap_action:\r\n action: perform-action\r\n perform_action: light.turn_on\r\n data:\r\n brightness_pct: '{{ value | int }}'\r\n target:\r\n entity_id: '{{ config.entity }}'\r\n styles: |\r\n :host {\r\n height: 400px;\r\n border-radius: 4px;\r\n --height: 36px;\r\n --thumb-width: 18px;\r\n --color: rgb({{ state_attr(config.entity, \"rgb_color\") }});\r\n --thumb-border-radius: 4px;\r\n }\r\n .background {\r\n height: 24px;\r\n }\r\n name: brightness\r\n - type: slider\r\n vertical: true\r\n entity_id: light.sunroom_ceiling\r\n value_attribute: color_temp\r\n range:\r\n - '{{ state_attr(config.entity, \"min_mireds\") }}'\r\n - '{{ state_attr(config.entity, \"max_mireds\") }}'\r\n step: 1\r\n tap_action:\r\n action: perform-action\r\n data:\r\n color_temp: '{{ value | int }}'\r\n perform_action: light.turn_on\r\n target:\r\n entity_id: '{{ config.entity }}'\r\n styles: |\r\n :host {\r\n height: 400px;\r\n --color: rgba(0, 0, 0, 0.2);\r\n --background: linear-gradient(-90deg, rgb(255, 167, 87), rgb(255, 255, 251));\r\n --thumb-box-shadow: none;\r\n }\r\n .icon {\r\n filter: invert(1);\r\n mix-blend-mode: difference;\r\n }\r\n name: color_temp\r\n icon: mdi:thermometer\r\n - type: slider\r\n range:\r\n - 0\r\n - 360\r\n value_attribute: hs_color[0]\r\n tap_action:\r\n action: perform-action\r\n perform_action: light.turn_on\r\n data:\r\n hs_color:\r\n - '{{ value | int }}'\r\n - 100\r\n target:\r\n entity_id: '{{ config.entity }}'\r\n vertical: true\r\n step: 0.1\r\n icon: mdi:palette\r\n styles: |-\r\n :host {\r\n height: 400px;\r\n color: hsl({{ value | int }}, 100%, 50%);\r\n --color: rgba(0, 0, 0, 0.5);\r\n --background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 66%, #f0f 83%, #f00 100%);\r\n --thumb-box-shadow: none;\r\n }\r\n entity_id: light.sunroom_ceiling\r\n name: hs_color\r\n```\r\n\r\n\u003c/details\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnerwyn%2Fandroid-tv-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnerwyn%2Fandroid-tv-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnerwyn%2Fandroid-tv-card/lists"}