3.8.0-beta.009 - 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! Set vertical: true in their custom action. You also have to explicitly set style.height to a value like 200px. 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
    style:
      height: 175px

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-beta.009

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

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

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.

Full Changelog: 3.5.2...3.6.0

3.5.2 - Slider Improvements

Changes in 3.5.2

• Slider value_attribute can now use attributes that are arrays, like hs_color[0].
• Service call data can now include VALUE and templates in array data.

Slider Tooltip

Sliders now show a tooltip with the current value when held down on, similar to Home Assistant tile sliders. You can disable this by setting tooltip to false in a custom action for the slider.

The slider has also been refactored so it should perform a bit better, and shouldn't prematurely update it's value right after it sends an action, causing it to rubber band between the old and new values. The logic for turning the slider on and off has also been improved so it should update faster.

As part of standardizing the slider in this project with my other custom tile feature project, some slider related fields have been deprecated and moved to a slider custom action (old remote configs should continue to work).

• slider_range -> custom_actions.slider.range.
• slider_style -> custom_actions.slider.style.
• slider_attribute -> custom_actions.slider.value_attribute.
• enable_slider_feedback -> custom_actions.slider.haptics.

You can now also set the slider step value in a custom action for the slider.

Haptics

You can now enable or disable haptics for specific buttons by setting haptics to true or false within their custom actions.

The following fields have been renamed:

• enable_button_feedback -> button_haptics .
• enable_touchpad_feedback -> touchpad_haptics.

custom_actions:
  slider:
    range:
      - 0.5
      - 1
    step: 0.1
    value_attribute: brightness # defaults to volume_level
    tooltip: true # defaults to true so you don't really need this line
    haptics: false # defaults to true
    style:
      '--border-radius': 4px

Other Changes

• Fixed slider ID logic bug which would cause multiple sliders in different copies of the same card to use the same slider ID or not work at all #67.
  • And another issue where default actions were being overwritten in one copy of this card and those changes showing up in another.

Patch Version Changes

• Mouse and touch event handlers are now always added to the element to fix support on environments such as the MacOS Home Assistant app (which says it has touch event handlers even if the devices does not have a touch screen) and tablets with desktop browsers.
• Prevent context menu from appearing when using touch hold actions on desktop browsers.
• Prevent touchpad center action from firing at the end of a multi touch action.
• Slider value_attribute can now use attributes that are arrays, like hs_color[0].
• Service call data can now include VALUE and templates in array data.

Full Changelog: 3.4.0...3.5.2

3.5.1 - Slider Improvements

Changes in 3.5.1

• Mouse and touch event handlers are now always added to the element to fix support on environments such as the MacOS Home Assistant app (which says it has touch event handlers even if the devices does not have a touch screen) and tablets with desktop browsers #70.
• Prevent context menu from appearing when using touch hold actions on desktop browsers.
• Prevent touchpad center action from firing at the end of a multi touch action.

Slider Tooltip

Sliders now show a tooltip with the current value when held down on, similar to Home Assistant tile sliders. You can disable this by setting tooltip to false in a custom action for the slider.

The slider has also been refactored so it should perform a bit better, and shouldn't prematurely update it's value right after it sends an action, causing it to rubber band between the old and new values. The logic for turning the slider on and off has also been improved so it should update faster.

As part of standardizing the slider in this project with my other custom tile feature project, some slider related fields have been deprecated and moved to a slider custom action (old remote configs should continue to work).

• slider_range -> custom_actions.slider.range.
• slider_style -> custom_actions.slider.style.
• slider_attribute -> custom_actions.slider.value_attribute.
• enable_slider_feedback -> custom_actions.slider.haptics.

You can now also set the slider step value in a custom action for the slider.

Haptics

You can now enable or disable haptics for specific buttons by setting haptics to true or false within their custom actions.

The following fields have been renamed:

• enable_button_feedback -> button_haptics .
• enable_touchpad_feedback -> touchpad_haptics.

custom_actions:
  slider:
    range:
      - 0.5
      - 1
    step: 0.1
    value_attribute: brightness # defaults to volume_level
    tooltip: true # defaults to true so you don't really need this line
    haptics: false # defaults to true
    style:
      '--border-radius': 4px

Other Changes

• Fixed slider ID logic bug which would cause multiple sliders in different copies of the same card to use the same slider ID or not work at all #67.
  • And another issue where default actions were being overwritten in one copy of this card and those changes showing up in another.

Patch Version Changes

• Mouse and touch event handlers are now always added to the element to fix support on environments such as the MacOS Home Assistant app (which says it has touch event handlers even if the devices does not have a touch screen) and tablets with desktop browsers.
• Prevent context menu from appearing when using touch hold actions on desktop browsers.
• Prevent touchpad center action from firing at the end of a multi touch action.

Full Changelog: 3.4.0...3.5.1