3.9.0 - Better Keyboards

Better Keyboards #55

Better Keyboards

A Whole New Interface

All three keyboard modes now have a unified user interface - a modal dialog. Activating any of these actions will create a text dialog which follows your theme styles. While this dialog is functionally similar to the prompt previously used for textbox and search (but way prettier), it allows you to better view what you've typed in seamless keyboard mode as long as the dialog remains open.

Do note that there is no way to retrieve the on platform text for most all integrations, and that closing the dialog will lose your text history (you can still backspace away anything on your Android TV or other platform device safely). Also, trying to edit any text that is in the middle of what you have typed or erasing more than one character at a time can result in undesirable behavior, as we can only remove one character for most platforms. Because of this, the seamless keyboard dialog will attempt to force the cursor to the end your text if you try to move it backwards.

Call From Anywhere

Keyboards are now actions! You can now use keyboard, textbox or search as an action for any button or touchpad (or slider if you really want to) action. You can also configure and include keyboards for multiple different platforms on one card using the platform (formerly keyboard_mode), keyboard_id, remote_id, and media_player_id fields on a custom action. These fields can still be set globally, but will be overridden if set explicitly for a custom action.

platform: ANDROID TV # formerly keyboard_mode, still defaults to ANDROID TV
keyboard_id: remote.google_tv_adb
custom_actions:
  kodi_keyboard:
    icon: mdi:kodi
    tap_action:
      action: keyboard # you can include keyboard, textbox, and search as actions anywhere now
      platform: KODI # platform and keyboard ID can be set here and will override the global value
      keyboard_id: remote.kodi
      keyboard_prompt: This is the Kodi keyboard # Replace the placeholder text of the dialog text area
rows:
  - - keyboard
    - search # uses the global platform and keyboard_id
    - kodi_keyboard

Improved Performance (thanks to the Home Assistant developers)

Thanks to a recent feature implemented by the Home Assistant developers, the ADB integration now also exposes a remote entity. Making ADB calls through this entity is faster than doing so through the old media player entity, including those used for sending characters. This card now supports this new remote entity, and by switching your remote keyboard_id to it you'll experience a noticeable improvement to Android and Fire TV keyboard performance!

Seamless Kodi Keyboard Support

As a side effect of the new keyboard dialog, seamless mode now works for Kodi keyboards. It even performs better than the other platforms as you can edit the middle of your input and safely move the cursor around.

Button and Ripple Upgrades

Buttons have been updated to no longer use the Home Assistant icon button element. This allows us to upgrade the ripple effects for both buttons and the touchpad. In addition to this newer ripple effect being less prone to being stuck, I've added some more render logic on top of it so that ripples should now no longer get stuck in an on state (I hope)!

Other Changes

• Added sources and icons for Filmplus, NPO Start, KIJK #104, and Jellyfin #110.
• Build pipeline improvements to greatly reduce file size and match the ES versions used by Home Assistant frontend.
  • As a side of effect of this, this card may have stopped working with older devices.
• Reduced button swipe scroll sensitivity.

What's Changed

• Add jellyfin icon and action by @jsamr in #110

New Contributors

• @jsamr made their first contribution in #110

Full Changelog: 3.8.2...3.9.0

3.8.2 - New Slider Features, Special Button Grids, Custom Action Templates, and Row/Column Styles

Changes in 3.8.2

• Fix template custom actions where action is not set.

Vertical Sliders and Slider Icons #25

NOTE: Some slider default styles have changed to better support these new features. New slider style fields have been exposed to users so you can tweak slider styles as needed.

Sliders can now be vertical! Just set vertical: true in the slider custom action. The tooltip's transform function will also be automatically adjusted to appear to the left of the slider thumb. As part of the style changes made to simplify slider styling and make it possible to create vertical sliders, --height and --border-radius have been removed. These values can now be set directly instead using height and border-radius.

Sliders can also now have an icon! This icon behaves the same as button icons. By default it follows the slider thumb, but this behavior can be changed using the new style options. See the README for more.

custom_actions:
  slider:
    vertical: true
    icon: mdi:music

Special Button Grids #88

This project previously had a shortcut for direction buttons, which would just create the direction and center buttons using basic rows. You can now also build these buttons using a grid of consistent width to ensure that button horizontal spacing will remain consistent regardless of screen size using dpad. Additionally new button pad shortcuts have been added for number and game buttons, numpad, xpad, and npad. The old direction pad can still be recreated using nav_buttons.

Custom Actions Templates #91

Custom actions have a new field template (not to be confused with jinja2/nunjucks templates). Any default or custom action can now be used as a template for another custom action by setting template to the name of the first action. All fields in the custom action will be merged on top of the template action.

custom_actions:
 webostv:
    tap_action:
      action: call-service
      service: webostv.button
      target:
        entity_id: media_player.lg_smart_tv
  left:
    template: webostv
    tap_action:
      data:
        command: LEFT
  right:
    template: webostv
    tap_action:
      data:
        command: RIGHT

Row and Column Styles #88

You can now apply styles to rows and columns using the row_styles field. Use keys rows or columns to apply styles to all rows or columns, or identify which rows you want to modify using your browsers developer tools (or just guess until you find the right one) to style an individual row or column.

row_styles
  rows:
    color: blue
  column-1:
    background: grey
    border-radius: 500px

Other Changes

• Remove default precision.
• Adjust how default slider range is set.
• Include template render function in template context for users to use to recursively render templates.
• Fix legacy string interpolation when multiple variables are used.
• Include slider context in more templates.
• Slider tooltip and icon use the same offset value that accounts for thumb width, and transform calculation is performed entirely in CSS.
• Removed slider --tooltip-offset field, doesn't make sense for users to change.
• Fix slider when only slider_id is provided #92.

Patch Version Changes

• Added default source for Paramount Plus #94.
• Fix template custom actions where action is not set.

Full Changelog: 3.7.4...3.8.2

3.8.1 - New Slider Features, Special Button Grids, Custom Action Templates, and Row/Column Styles

Changes in 3.8.1

• Added default source for Paramount Plus #94.

Vertical Sliders and Slider Icons #25

NOTE: Some slider default styles have changed to better support these new features. New slider style fields have been exposed to users so you can tweak slider styles as needed.

Sliders can now be vertical! Just set vertical: true in the slider custom action. The tooltip's transform function will also be automatically adjusted to appear to the left of the slider thumb. As part of the style changes made to simplify slider styling and make it possible to create vertical sliders, --height and --border-radius have been removed. These values can now be set directly instead using height and border-radius.

Sliders can also now have an icon! This icon behaves the same as button icons. By default it follows the slider thumb, but this behavior can be changed using the new style options. See the README for more.

custom_actions:
  slider:
    vertical: true
    icon: mdi:music

Special Button Grids #88

This project previously had a shortcut for direction buttons, which would just create the direction and center buttons using basic rows. You can now also build these buttons using a grid of consistent width to ensure that button horizontal spacing will remain consistent regardless of screen size using dpad. Additionally new button pad shortcuts have been added for number and game buttons, numpad, xpad, and npad. The old direction pad can still be recreated using nav_buttons.

Custom Actions Templates #91

Custom actions have a new field template (not to be confused with jinja2/nunjucks templates). Any default or custom action can now be used as a template for another custom action by setting template to the name of the first action. All fields in the custom action will be merged on top of the template action.

custom_actions:
 webostv:
    tap_action:
      action: call-service
      service: webostv.button
      target:
        entity_id: media_player.lg_smart_tv
  left:
    template: webostv
    tap_action:
      data:
        command: LEFT
  right:
    template: webostv
    tap_action:
      data:
        command: RIGHT

Row and Column Styles #88

You can now apply styles to rows and columns using the row_styles field. Use keys rows or columns to apply styles to all rows or columns, or identify which rows you want to modify using your browsers developer tools (or just guess until you find the right one) to style an individual row or column.

row_styles
  rows:
    color: blue
  column-1:
    background: grey
    border-radius: 500px

Other Changes

• Remove default precision.
• Adjust how default slider range is set.
• Include template render function in template context for users to use to recursively render templates.
• Fix legacy string interpolation when multiple variables are used.
• Include slider context in more templates.
• Slider tooltip and icon use the same offset value that accounts for thumb width, and transform calculation is performed entirely in CSS.
• Removed slider --tooltip-offset field, doesn't make sense for users to change.
• Fix slider when only slider_id is provided #92.

Patch Version Changes

• Added default source for Paramount Plus #94.

Full Changelog: 3.7.4...3.8.1

3.8.0 - New Slider Features, Special Button Grids, Custom Action Templates, and Row/Column Styles

Vertical Sliders and Slider Icons #25

NOTE: Some slider default styles have changed to better support these new features. New slider style fields have been exposed to users so you can tweak slider styles as needed.

Sliders can now be vertical! Just set vertical: true in the slider custom action. The tooltip's transform function will also be automatically adjusted to appear to the left of the slider thumb. As part of the style changes made to simplify slider styling and make it possible to create vertical sliders, --height and --border-radius have been removed. These values can now be set directly instead using height and border-radius.

Sliders can also now have an icon! This icon behaves the same as button icons. By default it follows the slider thumb, but this behavior can be changed using the new style options. See the README for more.

custom_actions:
  slider:
    vertical: true
    icon: mdi:music

Special Button Grids #88

This project previously had a shortcut for direction buttons, which would just create the direction and center buttons using basic rows. You can now also build these buttons using a grid of consistent width to ensure that button horizontal spacing will remain consistent regardless of screen size using dpad. Additionally new button pad shortcuts have been added for number and game buttons, numpad, xpad, and npad. The old direction pad can still be recreated using nav_buttons.

Custom Actions Templates #91

Custom actions have a new field template (not to be confused with jinja2/nunjucks templates). Any default or custom action can now be used as a template for another custom action by setting template to the name of the first action. All fields in the custom action will be merged on top of the template action.

custom_actions:
 webostv:
    tap_action:
      action: call-service
      service: webostv.button
      target:
        entity_id: media_player.lg_smart_tv
  left:
    template: webostv
    tap_action:
      data:
        command: LEFT
  right:
    template: webostv
    tap_action:
      data:
        command: RIGHT

Row and Column Styles #88

You can now apply styles to rows and columns using the row_styles field. Use keys rows or columns to apply styles to all rows or columns, or identify which rows you want to modify using your browsers developer tools (or just guess until you find the right one) to style an individual row or column.

row_styles
  rows:
    color: blue
  column-1:
    background: grey
    border-radius: 500px

Other Changes

• Remove default precision.
• Adjust how default slider range is set.
• Include template render function in template context for users to use to recursively render templates.
• Fix legacy string interpolation when multiple variables are used.
• Include slider context in more templates.
• Slider tooltip and icon use the same offset value that accounts for thumb width, and transform calculation is performed entirely in CSS.
• Removed slider --tooltip-offset field, doesn't make sense for users to change.
• Fix slider when only slider_id is provided #92.

Full Changelog: 3.7.4...3.8.0

3.7.4 - Roku Keyboard Support

Changes in 3.7.4

• Fix non-legacy string interpolation values being replaced.
• Make template variables available as lower case (value, hold_secs, and offset) and update README to use lowercase template variables.
• Do not run legacy string interpolation code when template is detected.
• Default source and icon Stremio #90.

Roku Keyboard Support

Adds Roku support for all three keyboard modes.

• keyboard_mode must be set to ROKU.
• Seamless and bulk text are sent using the Roku remote entity, while global search uses the media player entity. Either the Roku remote or media player entity IDs can be provided as the remote ID, but in order to use both text input and global search the other ID must be included using the remote_id or media_player_id fields.

type: custom:android-tv-card
keyboard_mode: ROKU
keyboard_id: remote.roku
media_player_id: media_player.roku
rows:
  - - keyboard
    - textbox
    - search

Other Changes

• Only render keyboard mode and ID templates on render rather than every time an event is fired.

Patch Version Changes

• Update ha-nunjucks to 1.2.3.
  • Numbers and numerical strings are no longer cast to numbers by templates, which broke precision.
• Add special value_attribute logic for elapsed when the entity domain is timer similar to media_position.
• Setting a slider's tap_action.action to none makes it read only.
• Include config/entry in template context as config, including rendered entity ID as entity.
  • Does not work recursively, so other values that are templates will not display correctly.
• Change slider off logic to check entity state instead of assuming the device is off when it's value is 0.
• Decrease flat thumb slider thumb thickness so it looks better when at range minimum value.
• Add Star+ icon and default source (thanks @felipecrs).
• Update Disney+ icon.
• Add DAZN to default icons.
• Fix slider default value attribute.
• Default Max button now opens to max app info page instead of doing nothing.
• Fix non-legacy string interpolation values being replaced.
• Make template variables available as lower case (value, hold_secs, and offset) and update README to use lowercase template variables.
• Do not run legacy string interpolation code when template is detected.
• Default source and icon Stremio #90.

NOTE: I do not have a Roku and this release was tested by users. If you run into issues with the Roku keyboard, please reach out on the community forum and the GitHub page.

Full Changelog: 3.6.1...3.7.4

3.7.3- Roku Keyboard Support

Changes in 3.7.3

• Default Max button now opens to max app info page instead of doing nothing.

Roku Keyboard Support

Adds Roku support for all three keyboard modes.

• keyboard_mode must be set to ROKU.
• Seamless and bulk text are sent using the Roku remote entity, while global search uses the media player entity. Either the Roku remote or media player entity IDs can be provided as the remote ID, but in order to use both text input and global search the other ID must be included using the remote_id or media_player_id fields.

type: custom:android-tv-card
keyboard_mode: ROKU
keyboard_id: remote.roku
media_player_id: media_player.roku
rows:
  - - keyboard
    - textbox
    - search

Other Changes

• Only render keyboard mode and ID templates on render rather than every time an event is fired.

Patch Version Changes

• Update ha-nunjucks to 1.2.3.
  • Numbers and numerical strings are no longer cast to numbers by templates, which broke precision.
• Add special value_attribute logic for elapsed when the entity domain is timer similar to media_position.
• Setting a slider's tap_action.action to none makes it read only.
• Include config/entry in template context as config, including rendered entity ID as entity.
  • Does not work recursively, so other values that are templates will not display correctly.
• Change slider off logic to check entity state instead of assuming the device is off when it's value is 0.
• Decrease flat thumb slider thumb thickness so it looks better when at range minimum value.
• Add Star+ icon and default source (thanks @felipecrs).
• Update Disney+ icon.
• Add DAZN to default icons.
• Fix slider default value attribute.
• Default Max button now opens to max app info page instead of doing nothing.

NOTE: I do not have a Roku and this release was tested by users. If you run into issues with the Roku keyboard, please reach out on the community forum and the GitHub page.

Full Changelog: 3.6.1...3.7.3

3.7.2- Roku Keyboard Support

Changes in 3.7.2

• Fix slider default value attribute.

Roku Keyboard Support

Adds Roku support for all three keyboard modes.

• keyboard_mode must be set to ROKU.
• Seamless and bulk text are sent using the Roku remote entity, while global search uses the media player entity. Either the Roku remote or media player entity IDs can be provided as the remote ID, but in order to use both text input and global search the other ID must be included using the remote_id or media_player_id fields.

type: custom:android-tv-card
keyboard_mode: ROKU
keyboard_id: remote.roku
media_player_id: media_player.roku
rows:
  - - keyboard
    - textbox
    - search

Other Changes

• Only render keyboard mode and ID templates on render rather than every time an event is fired.

Patch Version Changes

• Update ha-nunjucks to 1.2.3.
  • Numbers and numerical strings are no longer cast to numbers by templates, which broke precision.
• Add special value_attribute logic for elapsed when the entity domain is timer similar to media_position.
• Setting a slider's tap_action.action to none makes it read only.
• Include config/entry in template context as config, including rendered entity ID as entity.
  • Does not work recursively, so other values that are templates will not display correctly.
• Change slider off logic to check entity state instead of assuming the device is off when it's value is 0.
• Decrease flat thumb slider thumb thickness so it looks better when at range minimum value.
• Add Star+ icon and default source (thanks @felipecrs).
• Update Disney+ icon.
• Add DAZN to default icons.
• Fix slider default value attribute.

NOTE: I do not have a Roku and this release was tested by users. If you run into issues with the Roku keyboard, please reach out on the community forum and the GitHub page.

Full Changelog: 3.6.1...3.7.2

3.7.1- Roku Keyboard Support

Changes in 3.7.1

• Update ha-nunjucks to 1.2.3.
  • Numbers and numerical strings are no longer cast to numbers by templates, which broke precision.
• Add special value_attribute logic for elapsed when the entity domain is timer similar to media_position.
• Setting a slider's tap_action.action to none makes it read only.
• Include config/entry in template context as config, including rendered entity ID as entity.
  • Does not work recursively, so other values that are templates will not display correctly.
• Change slider off logic to check entity state instead of assuming the device is off when it's value is 0.
• Decrease flat thumb slider thumb thickness so it looks better when at range minimum value.
• Add Star+ icon and default source (thanks @felipecrs).
• Update Disney+ icon.
• Add DAZN to default icons.

Roku Keyboard Support

Adds Roku support for all three keyboard modes.

• keyboard_mode must be set to ROKU.
• Seamless and bulk text are sent using the Roku remote entity, while global search uses the media player entity. Either the Roku remote or media player entity IDs can be provided as the remote ID, but in order to use both text input and global search the other ID must be included using the remote_id or media_player_id fields.

type: custom:android-tv-card
keyboard_mode: ROKU
keyboard_id: remote.roku
media_player_id: media_player.roku
rows:
  - - keyboard
    - textbox
    - search

Other Changes

• Only render keyboard mode and ID templates on render rather than every time an event is fired.

Patch Version Changes

• Update ha-nunjucks to 1.2.3.
  • Numbers and numerical strings are no longer cast to numbers by templates, which broke precision.
• Add special value_attribute logic for elapsed when the entity domain is timer similar to media_position.
• Setting a slider's tap_action.action to none makes it read only.
• Include config/entry in template context as config, including rendered entity ID as entity.
  • Does not work recursively, so other values that are templates will not display correctly.
• Change slider off logic to check entity state instead of assuming the device is off when it's value is 0.
• Decrease flat thumb slider thumb thickness so it looks better when at range minimum value.
• Add Star+ icon and default source (thanks @felipecrs).
• Update Disney+ icon.
• Add DAZN to default icons.

NOTE: I do not have a Roku and this release was tested by users. If you run into issues with the Roku keyboard, please reach out on the community forum and the GitHub page.

Full Changelog: 3.6.1...3.7.1

3.7.0 - Roku Keyboard Support

Roku Keyboard Support

Adds Roku support for all three keyboard modes.

• keyboard_mode must be set to ROKU.
• Seamless and bulk text are sent using the Roku remote entity, while global search uses the media player entity. Either the Roku remote or media player entity IDs can be provided as the remote ID, but in order to use both text input and global search the other ID must be included using the remote_id or media_player_id fields.

type: custom:android-tv-card
keyboard_mode: ROKU
keyboard_id: remote.roku
media_player_id: media_player.roku
rows:
  - - keyboard
    - textbox
    - search

Other Changes

• Only render keyboard mode and ID templates on render rather than every time an event is fired.

NOTE: I do not have a Roku and this release was tested by users. If you run into issues with the Roku keyboard, please reach out on the community forum and the GitHub page.

Full Changelog: 3.6.1...3.7.0

3.6.1 - Popup Support, Tooltip Styles, Autofill Targets, and Row/Column IDs

Changes in 3.6.1

• Fixed missing context from haptic event renderTemplate call.
• Improvements to slider value when value attribute is media_position.
• Fixed issue where slider animation interval was not clearing.
• Slider entity ID is now cached after rendering.
• Other refactors to avoid null value errors.

New Action - fire-dom-event

You can now fire DOM events as an action! This is useful for opening browser mod popup cards. See the README for a quick example and the browser mod documentation for more information.

More Tooltip Options #74

You can now customize the tooltips label, offset, transform function, and display using these slider CSS properties:

• --tooltip-label, defaults to {{ VALUE }}.
  • VALUE corresponds to the current slider value.
• --tooltip-offset, defaults to {{ OFFSET }}px.
  • OFFSET corresponds to the tooltip x offset from center in pixels.
• --tooltip-transform, defaults to translateX(var(--tooltip-offset)).
• --tooltip-display, defaults to initial.
  • Deprecated field tooltip will also set this property.

Autofill Remote and Media Player IDs in Service Calls #73

The media_player_id field has been restored and a new field autofill_entity_id has been added. If the latter is enabled, any service call actions that do not have a target ID (entity, device, or area) will have their entity ID fields autopopulated if their service call domains are remote or media_player and the corresponding remote_id or media_player_id fields are populated. media_player_id will also work as slider_id if the latter is not provided and autofill for kodi and denonavr domain service calls.

Row and Column IDs for Card-Mod Styling #63

All rows and columns now have a unique ID that can be used for styling using card-mod. See this comment for an example.

Other Changes

• Even more slider performance and render improvements.
• Sliders will now properly update if their value is changed by something else after the user has touched them.
• VALUE and HOLD_SECS can be used in most templates that do not apply to the root remote element.
• Deprecated tooltip in favor of style options.
• Change the amount of time slider waits before allowing for value updates from Home Assistant after using it using value_from_hass_delay (defaults to 1000ms).
• Slider will update once per second if it's value attribute is media_position.
• Keyboard buttons should no longer erroneously trigger and error due to regular button action handlers.

Patch Version Changes

• Fixed missing context from haptic event renderTemplate call.
• Improvements to slider value when value attribute is media_position.
• Fixed issue where slider animation interval was not clearing.
• Slider entity ID is now cached after rendering.
• Other refactors to avoid null value errors.

Full Changelog: 3.5.2...3.6.1