Add this repo as a custom frontend lovelace repository in HACS and then you will able to add service call and action buttons, dropdowns, selectors, sliders, and spinboxes to any tile card, like this!
See the README for more.
Note for new users
The discussions and YAML configs found in this thread are likely out of date, as the format of these features configuration YAMLs has changed several times to better support newer features. Your best bet on learning how to use this card are via the configuration UI and the README.
If you’re going to use it for a remote I want to also shamelessly plug my other project android-tv-card, which has remappable touchpad and keyboard support and other users have adapted for alternate media platforms like Kodi and Apple TV.
You could submit a PR to include it in the core frontend repository.
I’m going to put that off since developing a custom card is a lot less involved than contributing to Home Assistant proper, and I started this project less than a day ago.
Support for scripts. Scripts are services but do not act on an entity.
You can call any script by entering it as the service! I’m currently doing so in this card:
If a script has an icon associated with it, use that in the button. So it does not have to be specified in the card.
That’s going to be difficult since I don’t think Home Assistant has a good way to read an entities default icon programmatically, especially via the REST API.
Ability to change the icon colour instead of or in addition to the tile colour
Already done! Use the icon_color option.
Ability to add a tile description.
Sounds reasonable, I’ll get started on that now.
Edit: labels and label color added in v1.1.0
I was able to finally achieve some items on my to-do list.
Both cards below have the Service Call buttons at the top that allow me to flip between each card (living room / bedroom) using the state-switch integration with transitions.
Customized card for my Dyson Hot + Cool Fan that combines the Cooling / Heating controls + the Fan control and now allows me to set the Auto / Normal mode all in one card reducing dashboard clutter.
Customized A/C card that combines controls at the bottom for a separate Fan reducing dashboard clutter
I hope one day that the Home Assistant team allow us to hide the top content section (icon/title/secondary info) in Tile Cards so that I can start using these Service Call Button’s in the Tile Card to replace more of the Custom Button cards
Oooh, mind sharing the yaml for the Dyson one? Looks really nice and exactly what I was looking for. It’s true that with most of the current cards it’s missing a combination of both the climate and fan entities, usually it’s one or the other. Yours seems to very nicely combine them indeed.
I’ve made some changes to it since the last screenshot and it’s still a WIP but here it is.
I realized I can shove a Mushroom slider in the Features section via the code editor and the Tile card took it but the Buttons for the Auto / Normal mode are still the Service Call button’s.
Still trying to figure out how to create a fan slider that accepts any input using the service fan.set_percentage, if anyone figures that out and wants to share, would be grateful. So far I can use the service call to set a specific % but anytime you try to move the slider it throws an error.
Also while in Heat Mode the orange in the mushroom slider is a bit off from the Tile’s button which uses #ff6f22 i believe. Still need to add that to my theme. There is a bit of card mod at the bottom to add the temp sensor at the top and another that changes the mushroom slider color based on cool / heat mode.
I realized I can shove a Mushroom slider in the Features section via the code editor
Huh. I played around a bit and it turns out you can add any custom (but not native) card as a Home Assistant tile feature. This doesn’t go the other way around and you can’t put tile features (native or custom) in regular cards. If you use a custom grouping card like layout card you can put native Home Assistant cards into that and they render correctly, albeit with the same background as the tile card so you can only see them by their icons…
I do not know if this is a bug or a feature but it makes this project less necessary. At least my service call buttons look like the native tile features buttons ?
I’m hoping its a glimpse into the future of the Tile card and being able to add more features or cards to it. I originally had the mushroom fan slider combined with stack-in-card then tried to put it in the feature’s just to see what it would do and was surprised it took it.
I also tried to take the fan-speed feature from the Tile card with a fan entity and put it in the features for the Tile Climate card and that didn’t show up. It didn’t throw an error in the editor, it just doesn’t show up and says “Not Compatible”.
Awesome, thanks for sharing! I could practically take this over as is Very nice catch on the custom cards that seem to work within the tile card!
Not sure I’m understanding that issue, for me the current mushroom fan slider seems to just work with my pure+cool. I don’t seem to get any errors there.
With regards to the colours, it guess there should be a way to get the color applied for the tile, which for the heating button is:
However it does not seem to work just replacing the orange with those colors (or just one of them). But that’s more due to my lack of CSS and card-mod knowledge than anything else
I also still need to check if I can remove the border around the mushroom fan card that i have in dark mode:
But again, many thanks for sharing this, very happy with it as it already is. I’m starting to get to a point where I can move away from the button-cards as well.
For the service fan.set_percentage, I was trying to use this service call originally with the button before I tried the Mushroom Fan Slider, the below service call sets the fan speed to a specific %, however if you set percentage: 28 to null or empty it throws up an error because it’s expecting a specific % value.
I was hoping that if I could set the % to null or empty it would then accept any value and make a working fan slider via a service call.
Error
Failed to call service fan/set_percentage. expected int for dictionary value @ data['percentage']
At first glance it looked like a slider but I believe it is a button. The button sets the Fan % to the number 28, and if you try to “slide” it just keeps setting it to 28 again since it’s a button
@Nerwyn is there anyway to also add a slider along side the Service Call button? Like a Service Call Slider. I’m not sure if it’s feasible but if it is it would be a great addition in case they end up removing the ability to add custom cards to the features area of the Tile Card.
@bollewolle for that extra border around the Mushroom Card. I get it too sometimes in light mode. If i clear cookies and cache it usually clears it and in stubborn cases if I go back and change this value under the Mushroom Card back to false then true again then hit save it usually sticks fill_container: true and merges the card back into the stack without the border.
I believe this is a bug on top of the existing (potential) bug of being able to allow the mushroom card into the Features area. Hopefully if this “bug” is intentional they fix the border issue as well.
This is what it looks like for me if I set this option to fill_container: false
Is there anyway to also add a slider along side the Service Call button? Like a Service Call Slider. I’m not sure if it’s feasible but if it is it would be a great addition in case they end up removing the ability to add custom cards to the features area of the Tile Card.
I can try! No promises since a slider is more complicated than a button.
I added sliders @xvlw. Here’s v2.0.0. It’s a massive refactor that’ll make it easier to add more tile features in the future. I want to add the modes selector next since I have a good use case for it in my dashboard.
Is there any way to get the slider to work with fan settings like fan.set_percentage or any alternative that would allow you to set the fan speed % as you move the slider?
That would achieve my last last use case. It works beautiful for lights though!
I’m working through the new options and documentation. Is there a way to tie the color or background_color to an entities state or use a template (maybe i’m not using the template correctly)
I have this existing template that worked out for the mushroom fan slider.
--rgb-state-fan: {{ 'var(--rgb-deep-orange)' if is_state('climate.pure_hot_cool','heat') else 'var(--rgb-blue)' }}
So I tried this instead since I’m no longer using the mushroom card without luck. The template works in the developer tools template tester.
I wasn’t able to figure out how to get templates to work in custom cards when developing this but it would be really useful and better than my hacky string interpolation system. I’m not sure if it is even possible since templates are not supported in many Home Assistant default cards despite being such a powerful feature.
I was able to get it to work using card_mod! You can set a variable for the color using card_mod and then reference it in the config, like this:
?
Very nice catch on the custom cards that seem to work within the tile card!
