{"id":28186406,"url":"https://github.com/nerwyn/universal-remote-card","last_synced_at":"2026-05-07T00:03:17.740Z","repository":{"id":175733839,"uuid":"654393646","full_name":"Nerwyn/universal-remote-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-05-14T03:13:30.000Z","size":12373,"stargazers_count":337,"open_issues_count":7,"forks_count":18,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-14T03:25:27.478Z","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":".github/CONTRIBUTING.md","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,"zenodo":null}},"created_at":"2023-06-16T03:14:31.000Z","updated_at":"2025-05-13T12:01:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"fc170e93-84c0-4aed-bac9-2d46ba37456e","html_url":"https://github.com/Nerwyn/universal-remote-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","nerwyn/universal-remote-card"],"tags_count":1162,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nerwyn%2Funiversal-remote-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nerwyn%2Funiversal-remote-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nerwyn%2Funiversal-remote-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nerwyn%2Funiversal-remote-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nerwyn","download_url":"https://codeload.github.com/Nerwyn/universal-remote-card/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254485062,"owners_count":22078767,"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":"2025-05-16T07:08:06.749Z","updated_at":"2026-05-07T00:03:17.721Z","avatar_url":"https://github.com/Nerwyn.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/nerwyn"],"categories":[],"sub_categories":[],"readme":"# Universal Remote Card\n\n[![GitHub Release](https://img.shields.io/github/release/Nerwyn/universal-remote-card.svg?style=for-the-badge)](https://github.com/nerwyn/universal-remote-card/releases)\n[![License](https://img.shields.io/github/license/Nerwyn/universal-remote-card.svg?style=for-the-badge)](LICENSE)\n[![hacs_badge](https://img.shields.io/badge/HACS-Default-blue.svg?style=for-the-badge)](https://github.com/hacs/default)\n[![Project Maintenance](https://img.shields.io/badge/maintainer-Nerwyn-blue.svg?style=for-the-badge)](https://github.com/Nerwyn)\n![Github](https://img.shields.io/github/followers/Nerwyn.svg?style=for-the-badge)\n[![GitHub Activity](https://img.shields.io/github/last-commit/Nerwyn/universal-remote-card?style=for-the-badge)](https://github.com/Nerwyn/universal-remote-card/commits/main)\n[![Community Forum](https://img.shields.io/badge/community-forum-brightgreen.svg?style=for-the-badge)](https://community.home-assistant.io/t/universal-remote-card-buttons-touchpads-sliders-and-keyboards-for-multiple-platforms/)\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)\n\n[![My Home Assistant](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?repository=universal-remote-card\u0026owner=Nerwyn\u0026category=Plugin)\n\n_Formerly called Android TV Card_\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/screenshot.png\" width=\"300\"/\u003e\n\nA super customizable universal remote card iterating on the work of several other projects. Featuring:\n\n- Configuration UI.\n- Out of the box support for [many platforms](#media-platform-and-entity-ids) with default key and source lists.\n - Android TV (with keyboard)\n - Sony BRAVIA (with keyboard)\n - Fire TV (with keyboard)\n - Apple TV (with keyboard)\n - Roku (with keyboard)\n - LG webOS (with keyboard)\n - Samsung TV (with keyboard)\n - Kodi (with keyboard)\n - Unified Remote for Windows, macOS, and Linux (with keyboard)\n - Philips TV\n - Denon AVR\n - Yamaha YNCA\n - Jellyfin\n - Unfolded Circle\n - Generic Remote\n- Support for multiple buttons, circlepads, touchpads, and sliders using default or user defined actions.\n- Complete [Home Assistant actions](https://www.home-assistant.io/dashboards/actions/) support.\n- [Keyboard and search](#keyboard-and-search) dialog actions for most platforms.\n- [Template](#a-note-on-templating) support for almost all fields using ha-nunjucks.\n- [Accessability keyboard controls](#keyboard-interactions-and-accessability) for all components.\n- Toggleable haptics.\n- User configurable remote [layout](#layout).\n- Icons and labels for all elements.\n- Custom SVG icon support.\n- CSS style options for all sub-elements.\n\n# How To Use\n\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.\n\nThe editor has four tabs - General, Layout, Elements, and Icons.\n\n# General\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_general_tab.png\" width=\"600\"/\u003e\n\nStart by selecting your media platform, then your device using the Config Entry ID field. The latter will autofill the remote and media player ID fields if available for the config entry. Platform, 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 elements and autofill is enabled, they will also use these fields. If you explicitly set one of these fields in a custom element, it will not be overwritten if you change the matching general field until you clear the field in the custom element. To completely clear toggle fields, you must remove them from the config using the code editor.\n\n## Media Platform and Entity IDs\n\nThis card supports several media platforms with default key and source lists. Different platforms require different fields as listed below. Some platforms require custom integrations or have additional configuration notes and are called out below the table.\n\n| Platform | Remote ID | Media Player ID | Keyboard ID | Config Entry ID | Remote/Device Name | MAC Address |\n| -------------------------------------------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | --------------- | ----------------------------------- | ----------- |\n| [Android TV](https://www.home-assistant.io/integrations/androidtv_remote/) | Default keys, sources, keyboard, and search | Default slider | | | | |\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 or media player for keyboard and search | | | |\n| [Fire TV](https://www.home-assistant.io/integrations/androidtv/) | Default keys, keyboard, and search | Default sources, slider, keyboard, and search | Keyboard and search | | | |\n| [Apple TV](https://www.home-assistant.io/integrations/apple_tv) | Default keys | Default sources and slider | | Keyboard | | |\n| [Roku](https://www.home-assistant.io/integrations/roku/) | Default keys and keyboard | Default sources, slider, and search | | | | |\n| [LG webOS](https://www.home-assistant.io/integrations/webostv/) | | Default keys, sources, slider, and keyboard | | | | Wake on LAN |\n| [Samsung TV](https://www.home-assistant.io/integrations/samsungtv/) | Default keys | Default sources, keyboard (requires the [SamsungTV Smart Component custom integration](https://github.com/ollo69/ha-samsungtv-smart)), and slider | | | | Wake on LAN |\n| [Kodi](https://www.home-assistant.io/integrations/kodi/) | | Default keys, sources, slider, keyboard, and search | | | | Wake on LAN |\n| [Unified Remote](https://github.com/akshansh1998/hass-unified-remote) | | | | | Default keys and keyboard | |\n| [Philips TV](https://www.home-assistant.io/integrations/philips_js/) | Default keys | Play/pause and slider | | | | |\n| [Denon AVR](https://www.home-assistant.io/integrations/denonavr/) | | Default keys, sources, and slider | | | | |\n| [Yamaha YNCA](https://github.com/mvdwetering/yamaha_ynca) | Default keys | Default sources, play/pause, volume, and slider | | | | |\n| [Jellyfin](https://www.home-assistant.io/integrations/jellyfin/) | Default keys | Play/pause and slider | | | | |\n| [Unfolded Circle](https://github.com/JackJPowell/hass-unfoldedcircle) | Default keys | | | | | |\n| Generic Remote | Default keys and sources | | | | `remote.send_command` `data.device` | |\n\n### Sony BRAVIA - Different APIs on Different Models\n\nSome Sony BRAVIA TVs do not support the Android TV Remote API, but do have their own proprietary API. The correct integration should be chosen based on which one your television supports. If you use the Sony BRAVIA platform, then you will also want to set up the Android Debug Bridge integration and provide its remote or media player entity ID in the Keyboard ID field in order to use the keyboard and search actions.\n\n### Fire TV - Android Debug Bridge\n\nFire TV is a heavily modified fork of Android TV. It uses the Android Debug Bridge integration for all interactions. If your Android TV does not support the Android TV Remote API, you can use this platform with the Android Debug Bridge integration instead.\n\nAmazon does have future plans to switch from their Android TV fork base to an entirely new operating system, at which point this integration will not work with newer Fire TVs.\n\n### Samsung TV - Sources and Keyboard Using Custom Integration\n\nThe Home Assistant Samsung TV integration does not allow you to change sources or send text. To do so you need to setup the [SamsungTV Smart Component custom integration](https://github.com/ollo69/ha-samsungtv-smart) and provide its media player entity ID to this card.\n\n### Unified Remote - Custom Integration\n\nUnified Remote relies entirely on [a custom integration](https://github.com/akshansh1998/hass-unified-remote), which is used to control a [Unified Remote server](https://www.unifiedremote.com/) on your PC. This custom integration creates a media player entity, but all default keys are called using the action `unified_remote.call` which can be used to call any Unified Remote API. You must enter the Unified Remote server friendly name you used when configuring the integration in the card Remote/Device Name field.\n\n### Yamaha YNCA - Custom integration\n\nYamaha YNCA relies entirely on [a custom integration](https://github.com/mvdwetering/yamaha_ynca), which is used to control Yamaha AV receivers that support the YNCA protocol. This custom integration creates remote and media player entities which can be provided to this card.\n\n### Unfolded Circle - Custom Integration\n\nUnfolded Circle relies entirely on [a custom integration](https://github.com/JackJPowell/hass-unfoldedcircle), which is used to control an [Unfolded Circle Remote Two/3](https://www.unfoldedcircle.com/). This custom integration creates a remote entity which can be provided to this card, which is then used to call its `unfoldedcircle.send_button_command` action.\n\n### Generic Remote - Shorthand for IR/RF Commands\n\nThe generic remote platform takes all default key and source buttons of all other platforms and creates generic remote actions using their names and icons. It also includes a default circlepad and touchpads.\n\n```yaml\nname: power\nicon: mdi:power\ntap_action:\n action: key\n key: power\n device: Generic Device\n```\n\nYou can use `remote.learn_command` on supported platforms like [Broadlink Remote](https://www.home-assistant.io/integrations/broadlink/#remote) to create commands that match these actions. If needed a remote/device name can be provided which will be included in the key actions data.\n\n## Action Timings\n\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 element.\n\n### Hold Time\n\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 general tab or a custom element hold action to a different number.\n\n### Repeat and Repeat Delay\n\nBy setting a hold action to `repeat`, the tap action will repeat while a button or touchpad direction is held down. The default delay between repeats is 100ms. You can change this by setting `Repeat delay` in the general tab or a custom element hold action to a different number.\n\nThe following default keys have their hold actions set to `repeat` by default. You can disable this by creating a custom element for them and setting their hold actions to `none` or a different action. The circlepad and touchpad direction actions also are set to repeat when held, and can similarly be disabled or remapped by creating a custom element for the touchpad and changing it's hold action.\n\n- up\n- down\n- left\n- right\n- volume_up\n- volume_down\n- delete\n- forward_delete\n- touchpad up/down/left/right\n\n### Double Tap Window\n\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 general tab or a custom element double tap action to a different number.\n\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 element without a hold action defined, you can set `Hold behavior` explicitly to `Nothing` to render the `Hold time` field.\n\n## Miscellaneous\n\n### CSS Styles\n\nStyles can be set and changed for the remote card and all sub-elements using regular CSS and templating. CSS styles have to be encapsulated in a CSS selector like the following.\n\n| CSS Selector | Element |\n| ------------------ | ------------------------------- |\n| :host | The card or sub-element host. |\n| .row | All rows. |\n| .column | All columns. |\n| .button-pad | All default button pads. |\n| .empty-button | All empty/null button spaces. |\n| remote-button | All buttons. |\n| #row-1 | The first row. |\n| #column-1 | The first column. |\n| #pad-1 | The first button default pad. |\n| #power | The name of a specific element. |\n| #power::part(icon) | The icon of a specific element. |\n\n```css\n/* All rows */\n.row {\n justify-content: center;\n}\n\n/* All buttons */\nremote-button {\n background: rgb(27, 27, 27);\n padding: 8px;\n margin: 4px;\n border-radius: 24px;\n --icon-size: 24px;\n}\n\n/* The icon of the power button\n * You no longer need to create a custom element just to style default ones by using ::part pseudo-elements\n */\n#power::part(icon) {\n color: red;\n}\n```\n\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.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_hover_id.png\" width=\"600\"/\u003e\n\n### Autofill and Haptics\n\nWhen creating custom elements, 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.\n\n### Other\n\nYou can add a title to the card with the title field.\n\nInstead of copying the same custom elements across multiple remote cards, you can put custom elements 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_elements.yaml`.\n\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.\n\n# Layout\n\nWhen you first create a universal remote card, it will have a default layout. Feel free to modify or delete this layout to your liking. Not all default keys used in the default layout are available for all platforms.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_layout_tab.png\" width=\"600\"/\u003e\n\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.\n\n```yaml\n- - home\n - menu\n - back\n - keyboard\n- - - volume_buttons\n - momentary_light\n - - netflix\n - hulu\n - disney\n - max\n - primevideo\n - touchpad\n - slider\n- - chandelier_light_color\n - light_color\n - sunroom_light\n - search\n```\n\nThe default keys and sources lists for your selected platform are displayed below the layout code editor. If you have configured any custom elements, 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.\n\n| Name | Type | Description |\n| ------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| circlepad | circlepad | A circlepad with five buttons for navigation. |\n| clickwheel | circlepad | A circlepad with five buttons for media control and iPod-like volume control. |\n| touchpad | touchpad | A touchpad for swipe navigation. |\n| dragpad | touchpad | A touchpad for drag navigation. Use two fingers for faster movement. |\n| mousepad | touchpad | A touchpad for mouse navigation. **Note**: mousepad support is dependent on the platform supporting mouse movement via a Home Assistant action. |\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. |\n| volume_buttons | button rows | Shorthand to generate a set of volume down, volume mute, and volume up buttons in a row or column. |\n| navigation_buttons | button rows | Shorthand to generate a set of up, down, left, right, and center buttons across three rows within a column. |\n| dpad | button grid | Shorthand to generate a set of up, down, left, right, and center buttons arranged in a square grid. |\n| numpad | button grid | Shorthand to generate a set of 1-9 buttons arranged in a square grid. Does not include `n0`. |\n| dialpad | button grid | Shorthand to generate a set of 1-9 buttons arranged in a square grid, reversed. Does not include `n0`. |\n| xpad | button grid | Shorthand to generate a set of A, B, X, and Y buttons arranged in a square grid. |\n| npad | button grid | Shorthand to generate a set of A, B, X, and Y buttons arranged in an alternate square grid. |\n\n# Custom Elements\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_actions_tab.png\" width=\"600\"/\u003e\n\nIn addition to the default keys and sources, you can create your own custom elements. You can also overwrite default keys and sources (including the default touchpad and slider) by setting the custom element name to match a default one. If you do so the default key or source information will be autopopulated if autofill is enabled.\n\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 element entity or global IDs depending on which best matches the `perform-action` domain.\n\nClick the `Add remote element` button to add a custom element remote element. Custom action remote elements can be buttons, sliders, or touchpads.\n\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.\n\n## General Options\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_actions_general_options.png\" width=\"600\"/\u003e\n\nEvery remote element must have a name so that it can be added to your remote.\n\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.\n\nSome additional value logic is applied for certain attributes:\n\n- `brightness` - Converted from the default range of 0-255 to 0-100.\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`.\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`.\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.\n\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.\n\nHaptics are enabled for remote elements by default, but can be toggled globally or at the custom element level.\n\n### Slider General Options\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_actions_general_options_slider.png\" width=\"600\"/\u003e\n\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.\n\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\n\n### Circlepad and Touchpad Tabs\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_actions_general_options_touchpad.png\" width=\"600\"/\u003e\n\nCirclepads and touchpads 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.\n\n## Appearance\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_actions_appearance_options.png\" width=\"600\"/\u003e\n\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).\n\n### Vertical Sliders\n\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:\n\n```css\n:host {\n height: 350px;\n}\n```\n\n### Multiple Icons and Labels for Circlepads and Touchpads\n\nCirclepads and touchpads 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 styles such as those for `toucharea` or `#center` like height should go in the center tab styles.\n\n### A Note on Templating\n\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.\n\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 repeat or 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'`.\n\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.\n\n### CSS Styles\n\nYou may find the following CSS selectors useful for styling:\n\n| CSS Selector | Element |\n| ---------------------------------- | -------------------------------------------------- |\n| :host | The element itself. |\n| .icon | The element icon. |\n| .label | The element label. |\n| .circlepad | The circlepad outer element. |\n| #up, #down, #left, #right, #center | The circlepad buttons. |\n| button | A button element background. |\n| toucharea | A touchpad element background. |\n| input | A slider range element. |\n| .thumb | A slider thumb visual element. |\n| .thumb .active | A slider thumb trailing / active track area. |\n| .background | A slider element background / inactive track area. |\n| .tooltip | A slider element tooltip. |\n| .button-pad | All button pads. |\n\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.\n\n| Name | Description |\n| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| --icon-size | Height and width of the icon. |\n| --thumb-width | Slider thumb interactable area width, defaults to `48px`. Does not represent the visually seen active area. |\n| --height | Slider height when horizontal and width when vertical. |\n| --thumb-translate | Slider thumb translation function, defaults to `var(--thumb-offset) 0`. |\n| --thumb-transition | Slider thumb transition animation, defaults to `translate 180ms ease-in-out, background 180ms ease-in-out`. |\n| --tooltip-label | Slider tooltip label template, defaults to `'{{ value }}'`. |\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. |\n| --ha-ripple-color | Color of ripples when hovered over or pressed, defaults to `var(--secondary-text-color)`. |\n| --ha-ripple-hover-color | Color of ripples when hovered over, defaults to `var(--secondary-text-color)`. |\n| --ha-ripple-pressed-color | Color of riples when pressed, defaults to `var(--secondary-text-color)`. |\n| --ha-ripple-hover-opacity | Opacity of ripples when hovered over, defaults to `0.08`. |\n| --ha-ripple-pressed-opacity | Opacity of ripples when pressed, defaults to `0.12`. |\n| --ha-ripple-height | Ripple height, defaults to `100%`. |\n| --ha-ripple-width | Ripple width, defaults to `100%`. |\n| --ha-ripple-top | Ripple top offset, defaults to `0`. |\n| --ha-ripple-left | Ripple left offset, defaults to `0`. |\n\nYou may also find the actual HTML of the remote elements useful for directly styling its subelements.\n\n#### Button HTML\n\n```html\n\u003cremote-button tabindex=\"0\" id=\"power\" title=\"Power\" key=\"p\"\u003e\n #shadow-root\n \u003cbutton part=\"button\" tabindex=\"-1\"\u003e\n \u003cdiv class=\"icon\" part=\"icon\"\u003e\n \u003cha-icon\u003e\u003c/ha-icon\u003e\n \u003c/div\u003e\n \u003cpre class=\"label\" part=\"label\"\u003e\"Power\"\u003c/pre\u003e\n \u003cmd-ripple part=\"ripple\"\u003e\u003c/md-ripple\u003e\n ::after\n \u003c/button\u003e\n\u003c/remote-button\u003e\n```\n\n#### Circlepad HTML\n\n```html\n\u003cremote-circlepad tab-index=\"0\" id=\"circlepad\" title=\"Circlepad\"\u003e\n #shadow-root\n \u003cremote-button class=\"direction\" id=\"up\" title=\"Up\" part=\"up\"\u003e\u003c/remote-button\u003e\n \u003cdiv class=\"center-row\"\u003e\n \u003cremote-button\n class=\"direction\"\n id=\"left\"\n title=\"Left\"\n part=\"left\"\n \u003e\u003c/remote-button\u003e\n \u003cremote-button id=\"center\" title=\"Center\" part=\"center\"\u003e\u003c/remote-button\u003e\n \u003cremote-button\n class=\"direction\"\n id=\"right\"\n title=\"Right\"\n part=\"right\"\n \u003e\u003c/remote-button\u003e\n \u003c/div\u003e\n \u003cremote-button\n class=\"direction\"\n id=\"down\"\n title=\"Down\"\n part=\"down\"\n \u003e\u003c/remote-button\u003e\n\u003c/remote-circlepad\u003e\n```\n\n#### Touchpad HTML\n\n```html\n\u003cremote-touchpad id=\"touchpad\" title=\"Touchpad\"\u003e\n #shadow-root\n \u003ctoucharea part=\"toucharea\" tabindex=\"0\"\u003e\n \u003cdiv class=\"toucharea-row\" part=\"top-row\"\u003e\n \u003cremote-icon-label id=\"up\" part=\"up\"\u003e\n #shadow-root\n \u003cdiv class=\"icon\" part=\"icon\"\u003e\n \u003cha-icon\u003e\u003c/ha-icon\u003e\n \u003c/div\u003e\n \u003cpre class=\"label\" part=\"label\"\u003e\u003c/pre\u003e\n \u003c/remote-icon-label\u003e\n \u003c/div\u003e\n \u003cdiv class=\"toucharea-row\" part=\"center-row\"\u003e\n \u003cremote-icon-label id=\"left\" part=\"left\"\u003e\u003c/remote-icon-label\u003e\n \u003cremote-icon-label id=\"center\" part=\"center\"\u003e\u003c/remote-icon-label\u003e\n \u003cremote-icon-label id=\"right\" part=\"right\"\u003e\u003c/remote-icon-label\u003e\n \u003c/div\u003e\n \u003cdiv class=\"toucharea-row\" part=\"bottom-row\"\u003e\n \u003cremote-icon-label id=\"down\" part=\"down\"\u003e\u003c/remote-icon-label\u003e\n \u003c/div\u003e\n \u003cmd-ripple part=\"ripple\"\u003e\u003c/md-ripple\u003e\n \u003c/toucharea\u003e\n\u003c/remote-touchpad\u003e\n```\n\n#### Slider HTML\n\n```html\n\u003cremote-slider id=\"slider\" title=\"Slider\"\u003e\n #shadow-root\n \u003cdiv class=\"container\" part=\"container\"\u003e\n \u003cdiv class=\"background\" part=\"background\"\u003e\u003c/div\u003e\n \u003cinput\n type=\"range\"\n part=\"range\"\n tabindex=\"-1\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n value=\"1\"\n /\u003e\n \u003cdiv class=\"thumb\" part=\"thumb\"\u003e\n \u003cdiv class=\"active\" part=\"active\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"icon\" part=\"icon\"\u003e\n \u003cha-icon\u003e\u003c/ha-icon\u003e\n \u003c/div\u003e\n \u003cpre class=\"label\" part=\"label\"\u003e\u003c/pre\u003e\n \u003c/div\u003e\n \u003cdiv class=\"tooltip\" part=\"tooltip\"\u003e::after\u003c/div\u003e\n\u003c/remote-slider\u003e\n```\n\n## Interactions\n\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.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_actions_interactions.png\" width=\"600\"/\u003e\n\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).\n\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.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_actions_interactions_slider.png\" width=\"600\"/\u003e\n\n### Action Types\n\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.\n\n| Action | Description |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| More info | Open the more info dialog. |\n| Toggle | Toggle between the target's on and off (or similar) states. |\n| Navigate | Navigate to another Home Assistant page. |\n| URL | Navigate to an external URL. |\n| Perform action | Call any Home Assistant service action. |\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. |\n| Key | Send an remote button press like action to the media platform. The actual action varies by platform. |\n| Source | Open an app using an action on a media platform. The actual action varies by platform. |\n| Keyboard | Open a dialog for sending seamless keyboard input. |\n| Textbox | Open a dialog for sending bulk keyboard input. |\n| Search | Open a dialog for sending a global search query. |\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). Use `data.event_type` to change the event type. |\n| Evaluate JS | Evaluate a string as JavaScript code. You have access to the custom feature via `this`, which includes `this.hass`, `this.config`, and `this.value`. **Potentially dangerous, do not do something dumb like call actions in a loop with no delay which can crash your browser or server.** |\n| Repeat | Repeat the tap action ten times a second while held. Only applicable to hold. |\n| Nothing | Explicilty set a command to do nothing. |\n\nThe entire action `data` and `target` fields are templatable, meaning that you can define the entire field as a YAML string in a template like so:\n\n```yaml\naction: light.turn_{{ iif(checked, 'on', 'off') }}\ndata: |\n {% if value == 'off' %}\n brightness_pct: 100\n {% endif %}\n```\n\n#### Key and Source\n\n`Key` and `Source` are shortcuts for `perform-action` actions and vary by platform as listed below. Some platforms do not support key or source.\n\n##### Keys\n\n| Platform | Action | Data |\n| -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Android TV\u003c/br\u003eSony BRAVIA\u003c/br\u003eFire TV\u003c/br\u003eRoku\u003c/br\u003eApple TV\u003c/br\u003eSamsung TV\u003c/br\u003ePhilips TV\u003c/br\u003eJellyfin\u003c/br\u003eGeneric Remote | remote.send_command | \u003ccode\u003e{\u003c/br\u003e\u0026nbsp;\u0026nbsp;command: action.key,\u003c/br\u003e\u0026nbsp;\u0026nbsp;device: config.device, // if defined\u003c/br\u003e\u0026nbsp;\u0026nbsp;hold_secs: 1 // if hold action performed but not defined\u003c/br\u003e}\u003c/code\u003e |\n| LG webOS | webostv.button | \u003ccode\u003e{\u003c/br\u003e\u0026nbsp;\u0026nbsp;button: action.key\u003c/br\u003e}\u003c/code\u003e |\n| Kodi | kodi.call_method | \u003ccode\u003e{\u003c/br\u003e\u0026nbsp;\u0026nbsp;method: action.key\u003c/br\u003e}\u003c/code\u003e |\n| Denon AVR | denonavr.get_command | \u003ccode\u003e{\u003c/br\u003e\u0026nbsp;\u0026nbsp;command: \\`/goform/formiPhoneAppDirect.xml?${action.key}\\`\u003c/br\u003e}\u003c/code\u003e |\n| Unfolded Circle | unfoldedcircle.send_button_command | \u003ccode\u003e{\u003c/br\u003e\u0026nbsp;\u0026nbsp;button: action.key\u003c/br\u003e}\u003c/code\u003e |\n\n##### Sources\n\n| Platform | Action | Data |\n| --------------------------------------------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------- |\n| Android TV | remote.turn_on | \u003ccode\u003e{\u003c/br\u003e\u0026nbsp;\u0026nbsp;activity: action.source\u003c/br\u003e}\u003c/code\u003e |\n| Sony BRAVIA | media_player.play_media | \u003ccode\u003e{\u003c/br\u003e\u0026nbsp;\u0026nbsp;media_content_id: action.source,\u003c/br\u003e\u0026nbsp;\u0026nbsp;media_content_type: \"app\"\u003c/br\u003e}\u003c/code\u003e |\n| Fire TV\u003c/br\u003eRoku\u003c/br\u003eLG webOS\u003c/br\u003eSamsung TV\u003c/br\u003eApple TV | media_player.select_source | \u003ccode\u003e{\u003c/br\u003e\u0026nbsp;\u0026nbsp;source: action.source\u003c/br\u003e}\u003c/code\u003e |\n| Kodi | kodi.call_method | \u003ccode\u003e{\u003c/br\u003e\u0026nbsp;\u0026nbsp;addonid: action.source,\u003c/br\u003e\u0026nbsp;\u0026nbsp;method: \"Addons.ExecuteAddon\"\u003c/br\u003e}\u003c/code\u003e |\n\nRead 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/universal-remote-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 element level.\n\nFor Android TV sources 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).\n\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). Make sure to also include a default SVG icon for any new sources if one is not available in the Home Assistant default mdi icon pack or the default icons file in this repository.\n\n### Momentary Mode\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_actions_interactions_momentary.png\" width=\"600\"/\u003e\n\nAs an alternative to normal tap, hold, and double tap actions, buttons can also be used in momentary mode. Configuring this option disables the normal tap, hold, and double tap actions.\n\nThe momentary start action is fired when you first press down on a button. The momentary end action is fired when you release it. Similarly to repeat hold action, the momentary repeat action is held when you hold down on the button for a set number of milliseconds. Unlike the repeat hold action, it can be different from the momentary start action. These actions can be used together or separately.\n\nFor momentary repeat and 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.\n\n### Touchpad Interactions\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_actions_interactions_touchpad.png\" width=\"600\"/\u003e\n\nThe touchpad's center supports the default tap, double tap, and hold actions. The touchpads direction actions are activated when the user swipes in a direction but do not support double tap actions. Direction actions hold actions are set to repeat by default.\n\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.\n\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 direction swipe actions, but not center default actions.\n\n### Circlepad Interactions\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_actions_interactions_circlepad.png\" width=\"600\"/\u003e\n\nCirclepads are made up of five buttons, each supporting all interactions that a regular button does. In addition to this, you can use the outer ring of the circlepad like an iPod clickwheel. When setting this action, you can use the template boolean variable `clockwise` to modify the clickwheel action based on the direction you are dragging, like shown in the screenshot. When the clickwheel action is enabled, you cannot drag to scroll on the circlepad, similar to the touchpad.\n\n### Keyboard and Search\n\nThis card supports sending text to the following platforms:\n\n| Platform | Keyboard | Search |\n| ------------------------------- | -------- | ------ |\n| Android TV | Inserts | Yes |\n| Sony BRAVIA | Inserts | Yes |\n| Fire TV | Inserts | Yes |\n| Apple TV | Replaces | No |\n| Roku | Inserts | Yes |\n| LG webOS | Replaces | No |\n| Samsung TV | Replaces | No |\n| Kodi | Replaces | Yes |\n| Unified Remote (PC, Mac, Linux) | Inserts | No |\n\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.\n\nWhen you use any keyboard action, a dialog will open that can be typed into.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/keyboard_dialog.png\" width=\"300\"/\u003e\n\nYou can change the prompt text that appears before you type anything using the `Prompt` field at the action level.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_actions_interactions_keyboard_prompt.png\" width=\"600\"/\u003e\n\nFor Sony BRAVIA, you need to include the Android Debug Bridge integration remote or media player entity ID in the keyboard ID field at the general or action level as it is used to send keys. All other integrations (including Fire TV which uses ADB for everything) will use the user provided remote and/or media player IDs for keyboard input. If you wish to use the ADB text input or search methods for Android TV instead of the newer Android TV Remote API methods, create custom elements for them with the corresponding actions and change the platform to `Fire TV`.\n\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.\n\n#### Keyboard - Seamless Text Entry\n\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.\n\nADB can be slow and you may notice some delay in what you type and what appears on your device. This is not a bug, this is the reality of using ADB as an input interface.\n\n##### Insert vs Replace\n\nPlatforms which insert text insert characters to the location of your on device screen (not the card text area screen) cursor. Because we do not have a way to retrieve the currently on screen text of any media platform, 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.\n\nPlatforms which replace replaced the entire on screen text with the text area text. These platforms do not have any restrictions on cursor movement within the card text area. If you close and re-open the card keyboard the text area will be cleared and if you type anything, it will clear the on device screen text.\n\n#### Textbox - Bulk Text Entry\n\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.\n\n#### Search - Global Search\n\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.\n\n### Keyboard Interactions and Accessability\n\nNot to be confused with keyboard input to platforms. You can control the elements of this card with your keyboard. By default you can focus on any element in the remote by tabbing to or click on it and then actuating it with the arrow or space/enter keys. You can also assign any key to any button using the `Keyboard Key` field at the bottom of the interactions pane. This button will then actuate when you press this key. All actions are supported when using keyboard interactions. For easier navigational input, any arrow or space/enter keys you type while focused on the remote card itself will be sent to the first circlepad or touchpad in the remote if not assigned to a button. Multi touch and clickwheel actions can be forwarded to touchpads and circlepads by holding down the shift key.\n\n## Icons\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_icons.png\" width=\"600\"/\u003e\n\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 elements list, except that there is only one type of custom icon you can add.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/editor_icons_editor.png\" width=\"600\"/\u003e\n\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.\n\nOnce setup, you can reference these icons in custom elements 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.\n\n# YAML Examples\n\nWhile all configuration can now be done through the user interface, these YAML examples can provide some insight on layout basics.\n\n## Example 1\n\nPlaying with order, moving and repeating buttons.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/disorder.png\" width=\"300\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nremote_id: remote.google_chromecast\nmedia_player_id: media_player.google_chromecast\ntitle: Example 1\nrows:\n - - power\n - - back\n - home\n - tv\n - netflix\n - - youtube\n - spotify\n - netflix\n - - touchpad\n - - slider\n - - channel_up\n - channel_down\n - info\n - - rewind\n - play\n - spotify\n - pause\n - fast_forward\n```\n\n\u003c/details\u003e\n\n## Example 2\n\nButtons, buttons everywhere!\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/buttons_everywhere.png\" width=\"300\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nremote_id: remote.google_chromecast\ntitle: Example 2\nrows:\n - - power\n - channel_up\n - info\n - channel_down\n - - netflix\n - youtube\n - spotify\n - - volume_buttons\n - - dpad\n - - back\n - home\n - tv\n - - rewind\n - play\n - pause\n - fast_forward\n```\n\n\u003c/details\u003e\n\n## Example 3\n\nUsing less and a vertical slider.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/using_less.png\" width=\"300\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nremote_id: remote.google_chromecast\nmedia_player_id: media_player.google_chromecast\ntitle: Example 3\nrows:\n - - power\n - netflix\n - youtube\n - spotify\n - - touchpad\n - slider\n - - back\n - home\ncustom_actions:\n - type: slider\n name: slider\n range:\n - 0\n - 1\n step: 0.01\n value_attribute: volume_level\n tap_action:\n action: perform-action\n perform_action: media_player.volume_set\n data:\n volume_level: '{{ value | float }}'\n vertical: true\n icon: mdi:volume-high\n```\n\n\u003c/details\u003e\n\n## Example 4\n\nIn any row, if you add a `null` item, there will be an empty button sized space.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/empty_buttons.png\" width=\"300\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nrows:\n - - back\n - home\n - tv\n - - rewind\n - null\n - null\n - fast_forward\n```\n\n\u003c/details\u003e\n\n## Example 5\n\nA tablet layout using nested rows and columns.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/tablet.png\" width=\"800\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nremote_id: remote.google_chromecast\nrows:\n - - - - back\n - null\n - home\n - null\n - menu\n - - volume_down\n - null\n - volume_mute\n - null\n - volume_up\n - - rewind\n - null\n - play_pause\n - null\n - fast_forward\n - - netflix\n - disney\n - hulu\n - max\n - primevideo\n - - plex\n - vudu\n - youtube\n - spotify\n - - - keyboard\n - search\n - - touchpad\ncustom_actions: []\nstyles: |-\n remote-touchpad::part(toucharea) {\n height: 300px;\n }\n```\n\n\u003c/details\u003e\n\n## Example 6\n\nCombining Apple TVs `wakeup` and `suspend` keys into one custom power action and using an icon for the touchpad background.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/apple_tv.png\" width=\"400\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nremote_id: remote.apple_tv\nplatform: Apple TV\nautofill_entity_id: true\nrows:\n - - power\n - menu\n - home\n - - skip_backward\n - play\n - pause\n - skip_forward\n - - touchpad\n - - appletv\n - netflix\n - disney\n - primevideo\n - allente\n - - nrktv\n - tv2play\n - max\n - skyshowtime\n - plex\n - - viaplay\n - discoveryplus\n - spotify\n - youtube\ncustom_actions:\n - type: button\n name: power\n tap_action:\n action: key\n key: wakeup\n icon: mdi:power\n hold_action:\n action: key\n key: suspend\n - type: touchpad\n name: touchpad\n tap_action:\n action: key\n key: select\n up:\n tap_action:\n action: key\n key: up\n hold_action:\n action: repeat\n down:\n tap_action:\n action: key\n key: down\n hold_action:\n action: repeat\n left:\n tap_action:\n action: key\n key: left\n hold_action:\n action: repeat\n right:\n tap_action:\n action: key\n key: right\n hold_action:\n action: repeat\n styles: |-\n .icon {\n --icon-size: 250px;\n }\n double_tap_action:\n action: key\n key: menu\n icon: mdi:apple\n```\n\n\u003c/details\u003e\n\n## Example 7\n\nA user's Kodi remote.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/kodi.png\" width=\"400\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nkeyboard_id: media_player.kodi\nmedia_player_id: media_player.kodi\nplatform: Kodi\nrows:\n - - back\n - home\n - menu\n - - info\n - osd\n - play_pause\n - - - volume_buttons\n - touchpad\n - - keyboard\n - null\n - search\ncustom_actions:\n - type: touchpad\n name: touchpad\n tap_action:\n action: key\n key: Input.Select\n up:\n tap_action:\n action: key\n key: Input.Up\n hold_action:\n action: repeat\n styles: ''\n down:\n tap_action:\n action: key\n key: Input.Down\n hold_action:\n action: repeat\n left:\n tap_action:\n action: key\n key: Input.Left\n hold_action:\n action: repeat\n right:\n tap_action:\n action: key\n key: Input.Right\n hold_action:\n action: repeat\n styles: |-\n toucharea {\n height: 200px;\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\");\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n opacity: 1.0;;\n }\n```\n\n\u003c/details\u003e\n\n## Example 8\n\nA touchpad remapped to work with a [Denon/Marantz Receiver](https://www.home-assistant.io/integrations/denonavr).\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nmedia_player_id: media_player.marantz_sr7013\nautofill_entity_id: true\nrows:\n - - touchpad\ncustom_actions:\n - type: touchpad\n name: touchpad\n tap_action:\n action: perform-action\n perform_action: denonavr.get_command\n data:\n command: /goform/formiPhoneAppDirect.xml?MNENT\n up:\n tap_action:\n action: perform-action\n perform_action: denonavr.get_command\n data:\n command: /goform/formiPhoneAppDirect.xml?MNCUP\n hold_action:\n action: repeat\n down:\n tap_action:\n action: perform-action\n perform_action: denonavr.get_command\n data:\n command: /goform/formiPhoneAppDirect.xml?MNCDN\n hold_action:\n action: repeat\n left:\n tap_action:\n action: perform-action\n perform_action: denonavr.get_command\n data:\n command: /goform/formiPhoneAppDirect.xml?MNCLT\n hold_action:\n action: repeat\n right:\n tap_action:\n action: perform-action\n perform_action: denonavr.get_command\n data:\n command: /goform/formiPhoneAppDirect.xml?MNCRT\n hold_action:\n action: repeat\n styles: |-\n toucharea {\n height: 200px;\n }\n double_tap_action:\n action: perform-action\n perform_action: denonavr.get_command\n data:\n command: /goform/formiPhoneAppDirect.xml?MNRTN\n```\n\n\u003c/details\u003e\n\n## Example 9\n\nEven more disorder with columns and special elements in the same row as buttons, stylized everything, and a label to display the slider value.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/more_disorder.png\" width=\"500\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nremote_id: remote.google_chromecast\nmedia_player_id: media_player.google_chromecast\nrows:\n - - - home\n - menu\n - back\n - keyboard\n - - netflix\n - hulu\n - disney\n - max\n - primevideo\n - touchpad\n - - slider\n - search\ncustom_actions:\n - type: slider\n name: slider\n range:\n - 0\n - 0.6\n step: 0.01\n value_attribute: volume_level\n tap_action:\n action: perform-action\n perform_action: media_player.volume_set\n data:\n volume_level: '{{ value | float }}'\n styles: |-\n :host {\n height: 24px;\n border-radius: 4px;\n --background-height: 12px;\n --color: darkred;\n --background: red;\n --thumb-border-radius: 0;\n }\n .icon {\n display: none;\n }\n .label {\n {% if not states(config.entity, 'on') %}\n display: none;\n {% endif %}\n transform: var(--icon-transform);\n font-size: 14px;\n font-weight: 1000;\n color: var(--primary-text-color);\n }\n .tooltip {\n display: none;\n }\n label: '{{ (value * 100 ) | int }}%'\nstyles: |-\n #netflix::part(icon) {\n color: rgb(229, 9, 20);\n }\n #hulu::part(icon) {\n color: rgb(28, 231, 131);\n }\n #disney::part(icon) {\n color: rgb(17, 60, 207);\n }\n #max::part(icon) {\n color: rgb(0, 35, 246);\n }\n #primevideo::part(icon) {\n color: rgb(0, 165, 222);\n }\n remote-touchpad::part(toucharea) {\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%);\n }\n```\n\n\u003c/details\u003e\n\n## Example 10\n\nA gamepad using a circlepad and custom styles for buttons.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/gamepad.png\" width=\"500\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nremote_id: remote.google_chromecast\nrows:\n - - l1\n - l2\n - l3\n - r3\n - r2\n - r1\n - - circlepad\n - xpad\n - - null\n - null\n - select\n - start\n - null\n - null\ncustom_actions:\n - type: button\n name: a\n tap_action:\n action: key\n key: BUTTON_A\n icon: mdi:alpha-a-circle\n styles: |-\n :host {\n padding: 0;\n margin: 0;\n --icon-size: 48px;\n --icon-color: #C1121C;\n }\n - type: button\n name: b\n tap_action:\n action: key\n key: BUTTON_B\n icon: mdi:alpha-b-circle\n styles: |-\n :host {\n padding: 0;\n margin: 0;\n --icon-size: 48px;\n --icon-color: #F7BA0B;\n }\n - type: button\n name: x\n tap_action:\n action: key\n key: BUTTON_X\n icon: mdi:alpha-x-circle\n styles: |-\n :host {\n padding: 0;\n margin: 0;\n --icon-size: 48px;\n --icon-color: #00387b;\n }\n - type: button\n name: 'y'\n tap_action:\n action: key\n key: BUTTON_Y\n icon: mdi:alpha-y-circle\n styles: |-\n :host {\n padding: 0;\n margin: 0;\n --icon-size: 48px;\n --icon-color: #007243;\n }\nstyles: |-\n #circlepad {\n width: 175px;\n }\n #circlepad::part(center) {\n visibility: hidden;\n }\n remote-button {\n background: var(--lovelace-background, var(--primary-background-color, #6f767d));;\n padding: 8px;\n margin: 4px;\n border-radius: 24px;\n --icon-size: 24px;\n }\n```\n\n\u003c/details\u003e\n\n## Example 11\n\nConditional layouts using templating and an input select.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/conditional_layouts.png\" width=\"500\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nremote_id: remote.google_tv\nmedia_player_id: media_player.google_tv\nrows:\n - - next_thing\n - |\n {% if is_state(\"input_select.select_test\", \"A\") %}\n - touchpad\n - - slider\n {% elif is_state(\"input_select.select_test\", \"B\") %}\n - dpad\n - - volume_buttons\n {% elif is_state(\"input_select.select_test\", \"C\") %}\n - numpad\n {% endif %}\ncustom_actions:\n - icon: mdi:skip-next-circle\n name: next_thing\n tap_action:\n data:\n cycle: true\n target:\n entity_id: input_select.select_test\n action: perform-action\n perform_action: input_select.select_next\n type: button\n entity_id: input_select.select_test\n```\n\n\u003c/details\u003e\n\n## Example 12\n\nRGB Remote using Broadlink RM4 Pro and the Generic Remote platform.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/rgb.png\" width=\"500\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nremote_id: remote.rm4_pro\ntitle: TV RGB\nrows:\n - - power\n - null\n - poweroff\n - - up\n - null\n - down\n - - red\n - green\n - dark_blue\n - - yellow\n - yellow_orange\n - orange\n - - orange_light\n - cyan\n - blue\n - - pink\n - green_light\n - white\ncustom_actions:\n - icon: mdi:circle\n tap_action:\n action: key\n key: red\n name: red\n type: button\n styles: |-\n :host {\n --icon-size: 42px;\n --icon-color: red;\n }\n - icon: mdi:circle\n tap_action:\n action: key\n key: green\n name: green\n type: button\n styles: |-\n :host {\n --icon-size: 42px;\n --icon-color: green;\n }\n - icon: mdi:circle\n tap_action:\n action: key\n key: dark_blue\n name: dark_blue\n type: button\n styles: |-\n :host {\n --icon-size: 42px;\n --icon-color: darkblue;\n }\n - icon: mdi:circle\n tap_action:\n action: key\n key: yellow\n name: yellow\n type: button\n styles: |-\n :host {\n --icon-size: 42px;\n --icon-color: yellow;\n }\n - icon: mdi:circle\n tap_action:\n action: key\n key: yellow_orange\n name: yellow_orange\n type: button\n styles: |-\n :host {\n --icon-size: 42px;\n --icon-color: goldenrod;\n }\n - icon: mdi:circle\n tap_action:\n action: key\n key: orange\n name: orange\n type: button\n styles: |-\n :host {\n --icon-size: 42px;\n --icon-color: orange;\n }\n - icon: mdi:circle\n tap_action:\n action: key\n key: orange_light\n name: orange_light\n type: button\n styles: |-\n :host {\n --icon-size: 42px;\n --icon-color: lightsalmon;\n }\n - icon: mdi:circle\n tap_action:\n action: key\n key: cyan\n name: cyan\n type: button\n styles: |-\n :host {\n --icon-size: 42px;\n --icon-color: cyan;\n }\n - icon: mdi:circle\n tap_action:\n action: key\n key: blue\n name: blue\n type: button\n styles: |-\n :host {\n --icon-size: 42px;\n --icon-color: blue;\n }\n - icon: mdi:circle\n tap_action:\n action: key\n key: pink\n name: pink\n type: button\n styles: |-\n :host {\n --icon-size: 42px;\n --icon-color: magenta;\n }\n - icon: mdi:circle\n tap_action:\n action: key\n key: green_light\n name: green_light\n type: button\n styles: |-\n :host {\n --icon-size: 42px;\n --icon-color: mediumseagreen;\n }\n - icon: mdi:circle\n tap_action:\n action: key\n key: white\n name: white\n type: button\n styles: |-\n :host {\n --icon-size: 42px;\n --icon-color: white;\n }\n - type: button\n name: power\n tap_action:\n action: key\n key: on\n icon: mdi:power\n styles: |-\n :host {\n --icon-color: green;\n }\n - icon: mdi:power\n tap_action:\n action: key\n key: off\n name: poweroff\n type: button\n styles: |-\n :host {\n --icon-color: red;\n }\n - type: button\n name: up\n tap_action:\n action: key\n key: brightness+\n hold_action:\n action: repeat\n icon: mdi:chevron-up\n - type: button\n name: down\n tap_action:\n action: key\n key: brightness-\n hold_action:\n action: repeat\n icon: mdi:chevron-down\nplatform: Generic Remote\n```\n\n\u003c/details\u003e\n\n## Example 13\n\nStyle a `circlepad` to be like a traditional tv remote.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/traditional_dpad.png\" width=\"500\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nrows:\n - - circlepad\ncustom_actions:\n - type: circlepad\n name: circlepad\n tap_action:\n action: key\n key: center\n up:\n icon: mdi:chevron-up\n tap_action:\n action: key\n key: up\n hold_action:\n action: repeat\n down:\n icon: mdi:chevron-down\n tap_action:\n action: key\n key: down\n hold_action:\n action: repeat\n left:\n icon: mdi:chevron-left\n tap_action:\n action: key\n key: left\n hold_action:\n action: repeat\n right:\n icon: mdi:chevron-right\n tap_action:\n action: key\n key: right\n hold_action:\n action: repeat\n styles: |-\n :host {\n width: 174px; \n }\n .circlepad {\n border: 1px solid #444;\n background: radial-gradient(circle at top left, #202020 15%, #303030 100%);\n --icon-color: rgba(128,128,128,0.5);\n }\n\n #center::part(button) {\n background: radial-gradient(circle at top left, #303030 15%, #101010 100%);\n border: 1px solid rgba(0, 0, 0, 0.5);\n }\n #center::part(icon) {\n color: rgba(128,128,128, 0.8);\n --icon-size: 36px;\n }\n\n #left,\n #right {\n width: 100%;\n }\n icon: ok\nstyles: ''\ncustom_icons:\n - name: ok\n path: \u003e-\n M7 7A2 2 0 005 9V15A2 2 0 007 17H9A2 2 0 0011 15V9A2 2 0 009 7H7M7\n 9H9V15H7V9ZM13 7V17H15V13.7L17 17H19L16 12 19 7H17L15 10.3V7H13Z\n```\n\n\u003c/details\u003e\n\n## Example 14\n\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.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/music_controls.png\" width=\"500\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nmedia_player_id: media_player.spotify\nrows:\n - - album_art\n - volume\n - - song_info\n - show_volume\n - - shuffle\n - previous\n - play_pause\n - next\n - repeat\n - - media_position\ncustom_actions:\n - type: touchpad\n name: album_art\n tap_action:\n action: more-info\n styles: |-\n :host {\n display: flex;\n pointer-events: all;\n border-radius: 0;\n --icon-size: 0;\n }\n toucharea {\n content: url(\"{{ state_attr(config.entity, 'entity_picture') }}\");\n background: transparent;\n height: fit-content;\n width: fit-content;\n max-width: 100%;\n max-height: var(--max-album-height, 50vh);\n border-radius: 8px;\n --ha-ripple-hover-color: transparent;\n }\n down:\n styles: ''\n left:\n styles: ''\n autofill_entity_id: true\n - type: touchpad\n name: song_info\n styles: |-\n toucharea {\n background: none;\n height: 50px;\n border-radius: 0;\n justify-content: center;\n gap: 4px;\n --ha-ripple-color: none;\n --icon-size: 0px;\n }\n .toucharea-row {\n justify-content: flex-start;\n }\n #left, #right {\n display: none;\n }\n remote-icon-label {\n width: -webkit-fill-available;\n width: -moz-available;\n align-items: flex-start;\n }\n .label {\n font-size: 18px;\n line-height: 18px;\n height: 22px;\n width: -webkit-fill-available;\n width: -moz-available;\n justify-content: flex-start;\n font-weight: 900;\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: left;\n }\n value_attribute: media_title\n label: '{{ value | safe }}'\n down:\n styles: |-\n .label {\n font-size: 16px;\n line-height: 16px;\n color: var(--icon-color);\n font-weight: 500;\n width: -webkit-fill-available;\n width: -moz-available;\n justify-content: flex-start;\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: left;\n }\n label: '{{ state_attr(config.entity, \"media_artist\") | safe }}'\n - type: button\n name: show_volume\n icon: mdi:volume-high\n tap_action:\n action: eval\n eval: |-\n const card = this.parentNode.parentNode;\n const volume = card.querySelector(\"#volume\")\n if (volume.hasAttribute(\"enabled\")) {\n volume.removeAttribute(\"enabled\")\n } else {\n volume.setAttribute(\"enabled\", \"\")\n }\n - type: slider\n name: volume\n value_attribute: volume_level\n tap_action:\n action: perform-action\n perform_action: media_player.volume_set\n data:\n volume_level: '{{ value | float }}'\n icon: mdi:music-note\n vertical: true\n styles: |-\n :host {\n position: absolute;\n height: var(--max-album-height, 50vh);\n width: 50px;\n right: 6px;\n top: 8px;\n --tooltip-label: \"{{ (100 * value) | int }}%\";\n --icon-color: var(--background-color);\n transition: all 0.1s ease-out;\n opacity: 0;\n }\n\n .background {\n opacity: 0.5;\n }\n input {\n pointer-events: none;\n }\n\n :host([enabled]) {\n opacity: 1;\n }\n :host([enabled]) input {\n pointer-events: all;\n }\n autofill_entity_id: true\n - type: button\n name: shuffle\n tap_action:\n action: perform-action\n perform_action: media_player.shuffle_set\n target: {}\n data:\n shuffle: '{{ not value }}'\n styles: |-\n :host {\n --icon-size: 24px;\n }\n {% if value %}\n :host {\n --icon-color: var(--active-color);\n }\n {% endif %}\n value_attribute: shuffle\n icon: |-\n {% if value %}\n mdi:shuffle-variant\n {% else %}\n mdi:shuffle-disabled\n {% endif %}\n - type: button\n name: previous\n tap_action:\n action: perform-action\n perform_action: media_player.media_previous_track\n target: {}\n icon: mdi:skip-previous\n - type: button\n name: play_pause\n tap_action:\n action: perform-action\n perform_action: media_player.media_play_pause\n target: {}\n icon: |-\n {% if is_state(config.entity, \"playing\") %}\n mdi:pause\n {% else %}\n mdi:play\n {% endif %}\n styles: |\n .icon {\n color: black;\n }\n button {\n background-color: white;\n height: var(--button_size);\n width: var(--button_size);\n --button_size: 48px;\n }\n - type: button\n name: next\n tap_action:\n action: perform-action\n perform_action: media_player.media_next_track\n target: {}\n icon: mdi:skip-next\n - type: button\n name: repeat\n tap_action:\n action: perform-action\n perform_action: media_player.repeat_set\n target: {}\n data:\n repeat: |-\n {% if value == 'off' %}\n all\n {% elif value == 'all' %}\n one\n {% else %}\n off\n {% endif %}\n styles: |-\n :host {\n --icon-size: 24px;\n }\n {% if value in ['all', 'one'] %}\n :host {\n --icon-color: var(--active-color);\n }\n {% endif %}\n value_attribute: repeat\n icon: |-\n {% if value == 'all' %}\n mdi:repeat\n {% elif value == 'one' %}\n mdi:repeat-once\n {% else %}\n mdi:repeat-off\n {% endif %}\n - type: slider\n name: media_position\n value_attribute: media_position\n range:\n - 0\n - '{{ state_attr(config.entity, \"media_duration\") }}'\n tap_action:\n action: perform-action\n perform_action: media_player.media_seek\n data:\n seek_position: '{{ value }}'\n step: 1\n styles: |-\n :host {\n height: calc(2.5 * var(--height));\n justify-content: flex-start;\n font-size: 12px;\n font-weight: 300;\n \n --height: 10px;\n --tooltip-display: none;\n }\n .container {\n overflow: visible;\n overflow-x: clip;\n\n --thumb-width: 4px;\n --thumb-border-radius: 4px;\n }\n\n .background {\n background: white;\n opacity: 0.2;\n height: 4px;\n top: 33%;\n }\n .slider {\n margin: 0;\n }\n @media (hover: hover) {\n :hover {\n --color: var(--active-color);\n }\n }\n :focus-visible, :active {\n --color: var(--active-color);\n }\n\n .thumb {\n height: 24px;\n top: -66%;\n }\n .thumb .active {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='610 1101 1220 75'%3E%3Cpath fill='%23D0BCFF' d='M1870.425 1173.746c-29.448 0-58.665-7.477-84.493-21.622-.03-.016-.061-.032-.09-.049-43.555-23.82-95.546-23.809-139.091.039a4.079 4.079 0 0 1-.113.062c-25.803 14.109-54.984 21.567-84.394 21.568-29.449 0-58.667-7.478-84.495-21.623-43.554-23.852-95.539-23.865-139.089-.052-.03.018-.062.034-.092.051-25.83 14.146-55.048 21.623-84.497 21.623-29.423 0-58.613-7.463-84.425-21.584l-.077-.042c-43.572-23.863-95.596-23.862-139.164-.001l-.085.046c-25.809 14.117-55.001 21.581-84.418 21.581h-.001c-29.45-.001-58.669-7.479-84.498-21.625-43.534-23.845-95.513-23.863-139.063-.058l-.108.06c-25.829 14.146-55.047 21.623-84.496 21.623-29.398 0-58.566-7.451-84.362-21.551-.048-.024-.095-.05-.142-.075-43.568-23.863-95.593-23.863-139.163 0l-.081.043c-25.811 14.12-55.001 21.583-84.421 21.583-29.45 0-58.668-7.478-84.497-21.624-7.521-4.118-10.278-13.554-6.159-21.074s13.554-10.277 21.074-6.158c43.57 23.862 95.593 23.864 139.163 0l.098-.053c25.807-14.114 54.991-21.573 84.406-21.573 29.398 0 58.567 7.451 84.364 21.55l.14.076c43.534 23.843 95.508 23.864 139.056.059l.113-.063c25.828-14.145 55.049-21.622 84.496-21.622h.002c29.449 0 58.668 7.478 84.497 21.625 43.57 23.863 95.595 23.862 139.165.001.021-.013.043-.024.065-.036 25.813-14.124 55.011-21.591 84.438-21.591 29.42 0 58.61 7.463 84.421 21.582l.082.045c43.539 23.847 95.521 23.862 139.074.049l.096-.053c25.829-14.146 55.047-21.623 84.496-21.623s58.667 7.477 84.496 21.623c43.58 23.867 95.604 23.866 139.172.005l.118-.064c25.803-14.108 54.98-21.564 84.389-21.564 29.448-.001 58.666 7.476 84.494 21.62l.114.063c43.549 23.807 95.528 23.791 139.063-.051 7.52-4.121 16.955-1.361 21.073 6.159 4.119 7.521 1.361 16.955-6.159 21.073-25.828 14.146-55.045 21.622-84.492 21.622z'%3E%3CanimateTransform attributeName='transform' calcMode='linear' dur='1s' from='0 0' repeatCount='indefinite' to='312.5 0' type='translate'/%3E%3C/path%3E%3C/svg%3E\");\n mask-position: 0 50%;\n mask-repeat: repeat-x;\n mask-size: auto 100%;\n height: var(--height);\n top: 7px\n }\n\n :host::before {\n content: '{% set minutes = (value / 60) | int %}{% set seconds = (value - 60 * minutes)\n | int %}{{ minutes }}:{{ 0 if seconds \u003c 10 else \"\" }}{{ seconds | int }}';\n position: absolute;\n left: 0;\n bottom: 0;\n }\n :host::after {\n content: '{% set duration = state_attr(config.entity, \"media_duration\") %}{% set minutes = (duration / 60) | int %}{% set seconds = (duration - 60 * minutes)\n | int %}{{ minutes }}:{{ 0 if seconds \u003c 10 else \"\" }}{{ seconds | int }}';\n position: absolute;\n right: 0;\n bottom: 0;\n }\n value_from_hass_delay: 2000\ngrid_options:\n columns: 12\n rows: auto\nstyles: |-\n ha-card {\n overflow: hidden;\n --icon-size: 32px;\n --icon-color: #b3b3b3;\n --active-color: #1cb955;\n }\n ha-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: url(\"{{ state_attr(config.entity, 'entity_picture') }}\");\n background-size: cover;\n filter: blur(80px) brightness(80%);\n transform: scale(5);\n }\n\n remote-button:active {\n filter: brightness(80%);\n }\n @media (hover: hover) {\n remote-button:hover {\n transform: scale(1.02);\n --icon-color: white;\n }\n }\n\n remote-touchpad {\n pointer-events: none;\n }\nhaptics: false\n```\n\n\u003c/details\u003e\n\n## Example 15\n\nMultiple sliders for light color control.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Nerwyn/universal-remote-card/main/assets/color_controls.png\" width=\"500\"/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRemote Config\u003c/summary\u003e\n\n```yaml\ntype: custom:universal-remote-card\nrows:\n - - - brightness\n - light_toggle\n - color_temp\n - - hs_color\n - light_color\ncustom_actions:\n - type: slider\n vertical: true\n entity_id: light.sunroom_ceiling\n value_attribute: brightness\n range:\n - 0\n - 100\n step: 1\n tap_action:\n action: perform-action\n perform_action: light.turn_on\n data:\n brightness_pct: '{{ value | int }}'\n styles: |\n :host {\n height: 400px;\n border-radius: 4px;\n --height: 36px;\n --thumb-width: 18px;\n --thumb-border-radius: 4px;\n {% set rgb_color = state_attr(config.entity, \"rgb_color\") %}\n {% if rgb_color %}\n --color: rgb({{ rgb_color }});\n {% endif %}\n }\n .background {\n height: 24px;\n }\n name: brightness\n - type: slider\n vertical: true\n entity_id: light.sunroom_ceiling\n value_attribute: color_temp\n range:\n - '{{ state_attr(config.entity, \"min_mireds\") }}'\n - '{{ state_attr(config.entity, \"max_mireds\") }}'\n step: 1\n tap_action:\n action: perform-action\n data:\n color_temp: '{{ value | int }}'\n perform_action: light.turn_on\n styles: |-\n :host {\n height: 400px;\n --color: rgba(0, 0, 0, 0.2);\n --background: linear-gradient(-90deg, rgb(255, 167, 87), rgb(255, 255, 251));\n --thumb-box-shadow: none;\n }\n .icon {\n filter: invert(1);\n mix-blend-mode: difference;\n }\n .thumb .active {\n display: none;\n }\n name: color_temp\n icon: mdi:thermometer\n - type: slider\n range:\n - 0\n - 360\n value_attribute: hs_color.0\n tap_action:\n action: perform-action\n perform_action: light.turn_on\n data:\n hs_color:\n - '{{ value | int }}'\n - 100\n vertical: true\n step: 0.1\n icon: mdi:palette\n styles: |-\n :host {\n height: 400px;\n color: hsl({{ value | int }}, 100%, 50%);\n --color: rgba(0, 0, 0, 0.5);\n --background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 66%, #f0f 83%, #f00 100%);\n --thumb-box-shadow: none;\n }\n .thumb .active {\n display: none;\n }\n entity_id: light.sunroom_ceiling\n name: hs_color\n - type: button\n name: light_toggle\n entity_id: light.sunroom_ceiling\n tap_action:\n action: perform-action\n perform_action: light.toggle\n target:\n entity_id: light.sunroom_ceiling\n data: {}\n confirmation:\n exemptions: []\n icon: mdi:lightbulb\n haptics: true\n - type: button\n name: light_color\n entity_id: light.sunroom_ceiling\n tap_action:\n action: perform-action\n perform_action: light.turn_on\n target:\n entity_id: light.sunroom_ceiling\n data:\n color_name: red\n double_tap_action:\n action: perform-action\n perform_action: light.turn_on\n target:\n entity_id: light.sunroom_ceiling\n data:\n color_name: green\n hold_action:\n action: perform-action\n perform_action: light.turn_on\n target:\n entity_id: light.sunroom_ceiling\n data:\n color_name: blue\n icon: mdi:palette\n styles: |-\n .icon {\n color: rgb({{ value }});\n }\n value_attribute: rgb_color\nstyles: |-\n .column {\n flex: 0;\n }\n remote-slider {\n align-self: center;\n }\n```\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnerwyn%2Funiversal-remote-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnerwyn%2Funiversal-remote-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnerwyn%2Funiversal-remote-card/lists"}