Custom Features for Home Assistant Cards - Buttons, Sliders, Selectors, and Spinboxes

I was going to say use templates to change the service call data, but this is actually closer to what I do with selectors - an input select with an automation that calls scripts for each option.

1 Like

I am proud to announce that version 4 of this project has been released!

This project has been rebranded to Custom Features for Home Assistant Cards to reflect it’s expanded functionality and scope. It also now has a configuration UI! No more dealing with complicated and confusing YAML, the vast majority of configuration outside of more complicated templating can be done entirely through the user interface.

:warning: BREAKING CHANGES :warning:

Styles are now handled via pure CSS, and deprecated fields are updated by the configuration UI and saved to the YAML configuration if detected. To update your old configs, open each row in the configuration UI and slowly toggle between GUI and YAML modes until the configuration has updated itself.

8 Likes

Is it still possible somehow to use the custom element in YAML mode in version 4, or do I have to downgrade to version 3?

You can always edit dashboard components manually in YAML mode, if you switch the edit mode to code mode, or do I misunderstand your question?

My whole UI is in YAML. When I click on “Edit dashboard” I get this message:
image
In YAML mode I simply get the message, that the custom component doesn’t exists:
image
That’s the issue I want to solve.

I think that your problem is not because the 4.x version of the Custom Tile Features plugin, at least because in my case there are no such problems…

Check this screencast:

Screencast from 2024-07-27 21-42-04

2 Likes

I have a top down/bottom up window shade, with two separate entities to control top and bottom. I’ve been on the hunt for a card where I can have two independent sliders to be able to control both sides of the cover in a single tile. I don’t see this as a current option with this project, so just curious if this is something that could be feasibly done?

You should still be able to edit this and any custom or built in card in YAML, but I haven’t seen that edit UI not available error before. I was having issues with getting my projects to work on my old dev iPhone and wonder if it’s related to me raising the TypeScript JS target version. I’m going to try lowering it down to ES5 or ES6.

Edit: it didn’t work. I have no idea why 3.3.8 works on old devices but 4.0.0 does not. It’s not due to the configuration UI as the issue also affects my other project Android TV Card.

I don’t know if it helps but I’m seeing the same issue as gerliczky, but only on FireFox… Chrome appears as expected.

Are you guys on older devices or older versions of the browser? Are there any errors in the browser developer tools console? I’m having trouble figuring out how to fix this as I only have an iPhone SE that’s not working, but my older and newer Android and desktop devices are working.

Is the option of hide / conditional custom-card not available anymore after the update?

It’s deprecated. You can use the CSS styles codeboxes at the row or individual feature level to set display: none using a template.

:host {
  {% if is_state("light.sunroom_ceiling", "off") %}
  display: none;
  {% endif %}
}
1 Like

@gerliczky @Didgeridrew can you guys try 4.0.3? I finally figured out what was causing the custom element doesn’t exist error on my old dev iPhone. Hopefully it should fix it for y’all as well.

I tried it and now it works. Also in iPhone 12 in recent Chrome version and also on the recent desktop version of Chrome.
But the solution for me was to use the right URL in my yaml configuration as suggested on the HACS page:
image

1 Like

New fix for this issue of making the slider look and behave like the original tile cover slider with the latest version:

            styles: |-
              :host {
                direction: rtl;
                --tooltip-transform: translate(calc(var(--thumb-offset) * -1), -35px);

1 Like

@gerliczky finally I could upload my screencast for my previous post, so check what I get on the UI for your corresponding goal:

1 Like

Thanks a lot Tamás!

2 Likes

You should be able to create a separate custom slider feature for each entity easily.

Yeah I was more so thinking something sort of similar to a thermostat, where you have 2 separate sliders on a single track. I figured I could create two entirely separate slider features.

image

When I try the spin box with flex-flow, the words don’t fit. How can I fix that? There is only a limited square space for the icon and label which side, how can I increase that space, if makes sense. Thank you!

              styles: |-
                :host {
                  flex-flow: row;
                }