4.2.2 - Dropdowns

Dropdowns

Changes in 4.2.2

• Change CSS class name used by dropdown option div to prevent style collision when option is selected.

New Feature - Dropdowns

With this release comes the final card feature that exists as a default card feature but not a custom one - dropdowns! Use dropdowns to select from multiple items in a list and call a different service with each one. Like selectors, it works best with select or input_select entities but can really be used with anything. Unlike selectors each dropdown option can only call one action.

Patch version Changes

• Dropdown RTL fixes.
• Change CSS class name used by dropdown option div to prevent style collision when option is selected.

Full Changelog: 4.1.1...4.2.2

4.2.1 - Dropdowns

Dropdowns

Changes in 4.2.1

• Dropdown RTL fixes.

New Feature - Dropdowns

With this release comes the final card feature that exists as a default card feature but not a custom one - dropdowns! Use dropdowns to select from multiple items in a list and call a different service with each one. Like selectors, it works best with select or input_select entities but can really be used with anything. Unlike selectors each dropdown option can only call one action.

Patch version Changes

• Dropdown RTL fixes.

Full Changelog: 4.1.1...4.2.1

4.2.0 - Dropdowns

Dropdowns

New Feature - Dropdowns

With this release comes the final card feature that exists as a default card feature but not a custom one - dropdowns! Use dropdowns to select from multiple items in a list and call a different service with each one. Like selectors, it works best with select or input_select entities but can really be used with anything. Unlike selectors each dropdown option can only call one action.

Full Changelog: 4.1.1...4.2.0

4.1.1 - Templating Overhaul and A New Action

Templating Overhaul and A New Action

Changes in 4.1.1

• Add parent card stateObj to template context.

Templating Overhaul

Technical Info Dump

Home Assistant's templating is powered by jinja2, a templating engine for Python. Traditional frontend templates in Home Assistant are sent from the frontend to the backend core, where they are processed and then sent back to the frontend. This entire process can take up to a second or more, which can cause frontend elements to appear incorrect for few seconds on page load or when entities change. If you use templates in card-mod styles on other cards or themes you've probably experienced this.

To eliminate the latency of templates being processed in the backend, I developed ha-nunjucks - an alternate synchronous instantaneous frontend only templating system for Home Assistant. Nunjucks is a templating engine for JavaScript maintained by Mozilla that is heavily inspired by jinja2 and shares the same syntax with very few exceptions. With ha-nunjucks templates can be processed instantaneously before your dashboard renders! But there's a catch - all Home Assistant template extensions had to be reimplemented in ha-nunjucks. When I initially developed ha-nunjucks, I only included a handful of extensions like states and attributes, leading to many questions from users as to why things like datetime functions weren't working.

Parity With Backend Templates

As of ha-nunjucks 1.3.0 I've reimplemented almost all of the template extensions listed on the Home Assistant templating page. This includes datetime extensions, courtesy of ts-py-datetime. All but a few obscure templating extensions have been reimplemented in ha-nunjucks. See the ha-nunjucks documentation for more information on how to use all of the new template extensions. While the syntax is mostly the same, there were some limitations I had to work around which may cause slightly different behavior for some of the extensions.

New Action - Evaluate JS #50

You can now execute JavaScript as an action using Evaluate JS. This action calls the eval function on a code string you write, and can be used to execute blocks of JavaScript code.

⚠️ Warning ⚠️. Executing JavaScript from a string in browser is considered extremely insecure. While this shouldn't be an issue for Home Assistant, I'm trusting that users are not going to use this in a public facing context where someone can modify custom features to execute arbitrary code.

Other Changes

• RTL language slider and spinbox render fixes #49.
• Add Update after action delay to selector.
• Confirmation failure triggers a value and render update, which helps reset styles on action cancellation #53.
• Haptics default is false and is now correctly referenced in GUI editor.
• Select and spinbox buttons should now inherit their overall haptics toggle setting.
• Confirmation haptics now fire when box appears.

Patch Version Changes

• Add parent card stateObj to template context.

Full Changelog: 4.0.11...4.1.1

4.1.0 - Templating Overhaul and A New Action

Templating Overhaul and A New Action

Templating Overhaul

Technical Info Dump

Home Assistant's templating is powered by jinja2, a templating engine for Python. Traditional frontend templates in Home Assistant are sent from the frontend to the backend core, where they are processed and then sent back to the frontend. This entire process can take up to a second or more, which can cause frontend elements to appear incorrect for few seconds on page load or when entities change. If you use templates in card-mod styles on other cards or themes you've probably experienced this.

To eliminate the latency of templates being processed in the backend, I developed ha-nunjucks - an alternate synchronous instantaneous frontend only templating system for Home Assistant. Nunjucks is a templating engine for JavaScript maintained by Mozilla that is heavily inspired by jinja2 and shares the same syntax with very few exceptions. With ha-nunjucks templates can be processed instantaneously before your dashboard renders! But there's a catch - all Home Assistant template extensions had to be reimplemented in ha-nunjucks. When I initially developed ha-nunjucks, I only included a handful of extensions like states and attributes, leading to many questions from users as to why things like datetime functions weren't working.

Parity With Backend Templates

As of ha-nunjucks 1.3.0 I've reimplemented almost all of the template extensions listed on the Home Assistant templating page. This includes datetime extensions, courtesy of ts-py-datetime. All but a few obscure templating extensions have been reimplemented in ha-nunjucks. See the ha-nunjucks documentation for more information on how to use all of the new template extensions. While the syntax is mostly the same, there were some limitations I had to work around which may cause slightly different behavior for some of the extensions.

New Action - Evaluate JS #50

You can now execute JavaScript as an action using Evaluate JS. This action calls the eval function on a code string you write, and can be used to execute blocks of JavaScript code.

⚠️ Warning ⚠️. Executing JavaScript from a string in browser is considered extremely insecure. While this shouldn't be an issue for Home Assistant, I'm trusting that users are not going to use this in a public facing context where someone can modify custom features to execute arbitrary code.

Other Changes

• RTL language slider and spinbox render fixes #49.
• Add Update after action delay to selector.
• Confirmation failure triggers a value and render update, which helps reset styles on action cancellation #53.
• Haptics default is false and is now correctly referenced in GUI editor.
• Select and spinbox buttons should now inherit their overall haptics toggle setting.
• Confirmation haptics now fire when box appears.

Full Changelog: 4.0.11...4.1.0

4.0.11 - Configuration UI and Rebrand

Changes in 4.0.11

• 2024.10 configuration UI fixes
  • Do not render if config is not defined
  • Only autofill default fields on config changed

Custom Features for Home Assistant Cards

⚠️ BREAKING CHANGES ⚠️

Auto-filling of entity IDs and actions is now set in the UI, and all styles are now set using CSS Styles fields which accepts pure CSS with templates. The new configuration UI will update deprecated fields if you do the following:

1. Open the card editor.
2. Open the top level editor of the custom features row configuration UI (each custom feature row, you do not have to open each individual sub-feature).
3. Click the update old config button.
4. Repeat for each custom features row.
5. Save the changes.

You may have to adjust old styles if they do not update correctly. Sorry for the inconvenience.

Setup (Almost) Entirely Through the UI

Version 4 of this project introduces a fully functional configuration user interface! No more poring over the README and digging through the out of date Home Assistant community thread to figure out how to use this card! Well, sort of. You'll still have to use YAML to do some templating in fields that don't normally accept text like range and step, and to learn about CSS style options. Still you should now be able to do the vast majority of custom features setup just through the user interface.

Rebranding to Reflect Expanded Functionality

When this project first started, it was just for buttons that could be used to call services via tap actions. Since then it has greatly expanded to support several different feature types with several different action methods and many different action types. Because of the greatly expanded scope of this project since release, it is being rebranded as Custom Features for Home Assistant Cards.

What's Changed

• Fully functional configuration UI.
• Rebranded to Custom Features.
• [BREAKING] All deprecated key updates are now done by the configuration UI and saved to the YAML configuration.
• Adjust icons size and ripple to better match Home Assistant default card features #32.
• Webpack efficiency improvements to reduce bundle size (pre addition of configuration UI).
• Fix Firefox slider styles #34.
• Add 2024.8 compatibility by @piitaya in #37

New Contributors

• @piitaya made their first contribution in #37

Patch Version Changes

• Fix slider internal thumb width (used for tooltip offset calculation) when thumb type is not round.
• Fix selector option comparison for numbers and booleans #38 #39.
• Remove z-indexes and move tooltip after slider in DOM to fix layering issues with default card features. #38.
• Fix support for older devices that do not support negative lookbehind regex.
• Spinbox custom button style fixes.
• Add toggle action #42.
• Reorder actions to match default cards.
• Improve tooltip transform-y to use slider and tooltip heights in calculation.
• 2024.8 Updates
  • Change action call-service to perform-action and field service to perform_action.
    • Old configs with action call-service and service field will continue to work, but cannot be edited through the configuration UI until they are updated.
    • Deprecated config update logic will updated existing configs that are edited to use new fields.
  • Change border radius to use new custom property --feature-border-radius, which is 12px.
  • Replace all references to custom property --tile-color to --feature-color.
  • Update slider default thumb style to work better with new feature height of 42px.
  • Rename configuration UI Actions panel to Interactions.
  • Rename action fields in configuration UI to behavior.
  • Replace editor paper-tabs with mwc-tabs.
• Change configuration UI capitalization to match style of default card's configuration UI (capitalize first letter only).
• Fix selector option comparison error when option is undefined.
• Fix selector option held down active styles on mobile.
• Add entry/option copy button.
• Deprecated config update is now handled by a button.
• Only render attribute selector if entity ID is valid.
• Editor selector improvements.
• Render hold_time if hold_action exists rather than not none for use with double_tap_window.
• Editor action code boxes now have cache.
• Editor style/layout fixes.
• 2024.10 configuration UI fixes
  • Do not render if config is not defined
  • Only autofill default fields on config changed

Full Changelog: 3.3.8...4.0.11

4.0.10 - Configuration UI and Rebrand

Changes in 4.0.10

• Add entry/option copy button.
• Deprecated config update is now handled by a button.
• Only render attribute selector if entity ID is valid.
• Editor selector improvements.
• Render hold_time if hold_action exists rather than not none for use with double_tap_window.
• Editor action code boxes now have cache.
• Editor style/layout fixes.

Custom Features for Home Assistant Cards

⚠️ BREAKING CHANGES ⚠️

Auto-filling of entity IDs and actions is now set in the UI, and all styles are now set using CSS Styles fields which accepts pure CSS with templates. The new configuration UI will update deprecated fields if you do the following:

1. Open the card editor.
2. Open the top level editor of the custom features row configuration UI (each custom feature row, you do not have to open each individual sub-feature).
3. Click the update old config button.
4. Repeat for each custom features row.
5. Save the changes.

You may have to adjust old styles if they do not update correctly. Sorry for the inconvenience.

Setup (Almost) Entirely Through the UI

Version 4 of this project introduces a fully functional configuration user interface! No more poring over the README and digging through the out of date Home Assistant community thread to figure out how to use this card! Well, sort of. You'll still have to use YAML to do some templating in fields that don't normally accept text like range and step, and to learn about CSS style options. Still you should now be able to do the vast majority of custom features setup just through the user interface.

Rebranding to Reflect Expanded Functionality

When this project first started, it was just for buttons that could be used to call services via tap actions. Since then it has greatly expanded to support several different feature types with several different action methods and many different action types. Because of the greatly expanded scope of this project since release, it is being rebranded as Custom Features for Home Assistant Cards.

What's Changed

• Fully functional configuration UI.
• Rebranded to Custom Features.
• [BREAKING] All deprecated key updates are now done by the configuration UI and saved to the YAML configuration.
• Adjust icons size and ripple to better match Home Assistant default card features #32.
• Webpack efficiency improvements to reduce bundle size (pre addition of configuration UI).
• Fix Firefox slider styles #34.
• Add 2024.8 compatibility by @piitaya in #37

New Contributors

• @piitaya made their first contribution in #37

Patch Version Changes

• Fix slider internal thumb width (used for tooltip offset calculation) when thumb type is not round.
• Fix selector option comparison for numbers and booleans #38 #39.
• Remove z-indexes and move tooltip after slider in DOM to fix layering issues with default card features. #38.
• Fix support for older devices that do not support negative lookbehind regex.
• Spinbox custom button style fixes.
• Add toggle action #42.
• Reorder actions to match default cards.
• Improve tooltip transform-y to use slider and tooltip heights in calculation.
• 2024.8 Updates
  • Change action call-service to perform-action and field service to perform_action.
    • Old configs with action call-service and service field will continue to work, but cannot be edited through the configuration UI until they are updated.
    • Deprecated config update logic will updated existing configs that are edited to use new fields.
  • Change border radius to use new custom property --feature-border-radius, which is 12px.
  • Replace all references to custom property --tile-color to --feature-color.
  • Update slider default thumb style to work better with new feature height of 42px.
  • Rename configuration UI Actions panel to Interactions.
  • Rename action fields in configuration UI to behavior.
  • Replace editor paper-tabs with mwc-tabs.
• Change configuration UI capitalization to match style of default card's configuration UI (capitalize first letter only).
• Fix selector option comparison error when option is undefined.
• Fix selector option held down active styles on mobile.
• Add entry/option copy button.
• Deprecated config update is now handled by a button.
• Only render attribute selector if entity ID is valid.
• Editor selector improvements.
• Render hold_time if hold_action exists rather than not none for use with double_tap_window.
• Editor action code boxes now have cache.
• Editor style/layout fixes.

Full Changelog: 3.3.8...4.0.10

4.0.9 - Configuration UI and Rebrand

Changes in 4.0.9

• Fix selector option held down active styles on mobile.

Custom Features for Home Assistant Cards

⚠️ BREAKING CHANGES ⚠️

Auto-filling of entity IDs and actions is now set in the UI, and all styles are now set using CSS Styles fields which accepts pure CSS with templates. The new configuration UI will attempt to update deprecated style fields if you do the following:

1. Open the card editor.
2. Open the top level editor of the custom features row configuration UI (each custom feature row, you do not have to open each individual sub-feature).
3. Wait a few seconds, and then slowly toggle between visual and code editors using the toggle to the right of the text Feature editor until the style changes are updated in the preview and/or the code editor. If the preview does not update, a good indicator that the changes applied is the presence of a styles key and the old style options being deleted from your configuration. I'm not sure why the changes aren't applied immediately, but since this should be a one time upgrade just bear with me.
4. Repeat for each custom features row.
5. Save the changes.

You may have to adjust old styles if they do not update correctly. Sorry for the inconvenience.

Setup (Almost) Entirely Through the UI

Version 4 of this project introduces a fully functional configuration user interface! No more poring over the README and digging through the out of date Home Assistant community thread to figure out how to use this card! Well, sort of. You'll still have to use YAML to do some templating in fields that don't normally accept text like range and step, and to learn about CSS style options. Still you should now be able to do the vast majority of custom features setup just through the user interface.

Rebranding to Reflect Expanded Functionality

When this project first started, it was just for buttons that could be used to call services via tap actions. Since then it has greatly expanded to support several different feature types with several different action methods and many different action types. Because of the greatly expanded scope of this project since release, it is being rebranded as Custom Features for Home Assistant Cards.

What's Changed

• Fully functional configuration UI.
• Rebranded to Custom Features.
• [BREAKING] All deprecated key updates are now done by the configuration UI and saved to the YAML configuration.
• Adjust icons size and ripple to better match Home Assistant default card features #32.
• Webpack efficiency improvements to reduce bundle size (pre addition of configuration UI).
• Fix Firefox slider styles #34.
• Add 2024.8 compatibility by @piitaya in #37

New Contributors

• @piitaya made their first contribution in #37

Patch Version Changes

• Fix slider internal thumb width (used for tooltip offset calculation) when thumb type is not round.
• Fix selector option comparison for numbers and booleans #38 #39.
• Remove z-indexes and move tooltip after slider in DOM to fix layering issues with default card features. #38.
• Fix support for older devices that do not support negative lookbehind regex.
• Spinbox custom button style fixes.
• Add toggle action #42.
• Reorder actions to match default cards.
• Improve tooltip transform-y to use slider and tooltip heights in calculation.
• 2024.8 Updates
  • Change action call-service to perform-action and field service to perform_action.
    • Old configs with action call-service and service field will continue to work, but cannot be edited through the configuration UI until they are updated.
    • Deprecated config update logic will updated existing configs that are edited to use new fields.
  • Change border radius to use new custom property --feature-border-radius, which is 12px.
  • Replace all references to custom property --tile-color to --feature-color.
  • Update slider default thumb style to work better with new feature height of 42px.
  • Rename configuration UI Actions panel to Interactions.
  • Rename action fields in configuration UI to behavior.
  • Replace editor paper-tabs with mwc-tabs.
• Change configuration UI capitalization to match style of default card's configuration UI (capitalize first letter only).
• Fix selector option comparison error when option is undefined.
• Fix selector option held down active styles on mobile.

Full Changelog: 3.3.8...4.0.9

4.0.8 - Configuration UI and Rebrand

Changes in 4.0.8

• 2024.8 Updates
  • Change action call-service to perform-action and field service to perform_action.
    • Old configs with action call-service and service field will continue to work, but cannot be edited through the configuration UI until they are updated.
    • Deprecated config update logic will update existing configs that are edited to use new fields.
  • Change border radius to use new custom property --feature-border-radius, which is 12px.
  • Replace all references to custom property --tile-color to --feature-color.
  • Update slider default thumb style to work better with new feature height of 42px.
  • Rename configuration UI Actions panel to Interactions.
  • Rename action fields in configuration UI to behavior.
  • Replace editor paper-tabs with mwc-tabs.
• Change configuration UI capitalization to match style of default card's configuration UI (capitalize first letter only).
• Fix selector option comparison error when option is undefined.

Custom Features for Home Assistant Cards

⚠️ BREAKING CHANGES ⚠️

Auto-filling of entity IDs and actions is now set in the UI, and all styles are now set using CSS Styles fields which accepts pure CSS with templates. The new configuration UI will attempt to update deprecated style fields if you do the following:

1. Open the card editor.
2. Open the top level editor of the custom features row configuration UI (each custom feature row, you do not have to open each individual sub-feature).
3. Wait a few seconds, and then slowly toggle between visual and code editors using the toggle to the right of the text Feature editor until the style changes are updated in the preview and/or the code editor. If the preview does not update, a good indicator that the changes applied is the presence of a styles key and the old style options being deleted from your configuration. I'm not sure why the changes aren't applied immediately, but since this should be a one time upgrade just bear with me.
4. Repeat for each custom features row.
5. Save the changes.

You may have to adjust old styles if they do not update correctly. Sorry for the inconvenience.

Setup (Almost) Entirely Through the UI

Version 4 of this project introduces a fully functional configuration user interface! No more poring over the README and digging through the out of date Home Assistant community thread to figure out how to use this card! Well, sort of. You'll still have to use YAML to do some templating in fields that don't normally accept text like range and step, and to learn about CSS style options. Still you should now be able to do the vast majority of custom features setup just through the user interface.

Rebranding to Reflect Expanded Functionality

When this project first started, it was just for buttons that could be used to call services via tap actions. Since then it has greatly expanded to support several different feature types with several different action methods and many different action types. Because of the greatly expanded scope of this project since release, it is being rebranded as Custom Features for Home Assistant Cards.

What's Changed

• Fully functional configuration UI.
• Rebranded to Custom Features.
• [BREAKING] All deprecated key updates are now done by the configuration UI and saved to the YAML configuration.
• Adjust icons size and ripple to better match Home Assistant default card features #32.
• Webpack efficiency improvements to reduce bundle size (pre addition of configuration UI).
• Fix Firefox slider styles #34.
• Add 2024.8 compatibility by @piitaya in #37

New Contributors

• @piitaya made their first contribution in #37

Patch Version Changes

• Fix slider internal thumb width (used for tooltip offset calculation) when thumb type is not round.
• Fix selector option comparison for numbers and booleans #38 #39.
• Remove z-indexes and move tooltip after slider in DOM to fix layering issues with default card features. #38.
• Fix support for older devices that do not support negative lookbehind regex.
• Spinbox custom button style fixes.
• Add toggle action #42.
• Reorder actions to match default cards.
• Improve tooltip transform-y to use slider and tooltip heights in calculation.
• 2024.8 Updates
  • Change action call-service to perform-action and field service to perform_action.
    • Old configs with action call-service and service field will continue to work, but cannot be edited through the configuration UI until they are updated.
    • Deprecated config update logic will updated existing configs that are edited to use new fields.
  • Change border radius to use new custom property --feature-border-radius, which is 12px.
  • Replace all references to custom property --tile-color to --feature-color.
  • Update slider default thumb style to work better with new feature height of 42px.
  • Rename configuration UI Actions panel to Interactions.
  • Rename action fields in configuration UI to behavior.
  • Replace editor paper-tabs with mwc-tabs.
• Change configuration UI capitalization to match style of default card's configuration UI (capitalize first letter only).
• Fix selector option comparison error when option is undefined.

Full Changelog: 3.3.8...4.0.8