The Home Assistant developers gave us the ability to create custom tile features. Why is no one else taking advantage of it? And why isn’t something like a generic service call tile button already in Home Assistant? I don’t know but here it is.
Add this repo as a custom frontend lovelace repository in HACS and then you will able to add service call and action buttons, sliders, selectors, and spinboxes to any tile card, like this!
See the README for more.
This is a very good question.
Your custom repository almost fixes the main reason why I have not changed my dashboard from using the custom button card to tiles.
Suggestions:
Before:
After:
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:
type: tile
entity: input_select.lounge_tv_theater_mode
name: Viewing Mode
show_entity_picture: false
vertical: false
features:
- type: custom:service-call
buttons:
- service: script.theater_mode_on
icon: mdi:movie
- service: script.theater_mode_dark
icon: mdi:movie-outline
- service: script.theater_mode_off
icon: mdi:movie-off-outline
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
Thank you for this card!
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.
type: tile
name: Living Room
entity: climate.pure_hot_cool
icon: mdi:home-thermometer
vertical: false
show_entity_picture: false
features:
- type: custom:service-call
buttons:
- service: input_select.select_option
icon: mdi:sofa
data:
option: Living Room
target:
entity_id: input_select.climate
- service: input_select.select_option
icon: mdi:bed
data:
option: Bedroom
target:
entity_id: input_select.climate
- type: climate-hvac-modes
hvac_modes:
- 'off'
- cool
- heat
- type: target-temperature
- type: custom:service-call
buttons:
- service: fan.set_preset_mode
icon: mdi:fan
data:
preset_mode: Normal
entity_id: fan.pure_hot_cool
- service: fan.set_preset_mode
icon: mdi:fan-auto
data:
preset_mode: Auto
entity_id: fan.pure_hot_cool
- type: custom:mushroom-fan-card
entity: fan.pure_hot_cool
primary_info: none
show_percentage_control: true
layout: horizontal
secondary_info: none
icon_type: none
icon_animation: false
fill_container: true
show_oscillate_control: false
collapsible_controls: false
card_mod:
style: |
ha-card {
margin: 0px 0px 0px 0px;
--rgb-state-fan: {{ 'var(--rgb-deep-orange)' if is_state('climate.pure_hot_cool','heat') else 'var(--rgb-blue)' }}
}
card_mod:
style:
ha-tile-info$: |
.secondary:after {
visibility: visible;
content: " - {{ states('sensor.pure_hot_cool_temperature') | round(0) }}°C";
}
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”.
Example
type: tile
entity: climate.pure_hot_cool
features:
- type: climate-hvac-modes
hvac_modes:
- 'off'
- cool
- heat
- type: target-temperature
- type: fan-speed
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:
--tile-color: var(--state-climate-heat-color, var(--state-climate-active-color, var(--state-active-color)));
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']
Service Call
service: fan.set_percentage
data:
percentage: 28
target:
device_id: f5a3330da8062de1bc077784c0b9c1c2
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
type: tile
entity: climate.pure_hot_cool
features:
- type: climate-hvac-modes
hvac_modes:
- 'off'
- cool
- heat
- type: target-temperature
- type: custom:service-call
buttons:
- service: fan.set_percentage
data:
percentage: 28
target:
device_id: f5a3330da8062de1bc077784c0b9c1c2
@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.
That’s from the default Tile Card for my A/C through the Midea AC LAN integration.
Within the Tile Card the Feature is climate-preset-modes with the style set to icons.
- type: climate-preset-modes
style: icons
preset_modes:
- none
- comfort
- eco
- boost
- sleep
- away
Here is the full card
type: tile
entity: climate.bedroom_a_c
name: Bedroom
features:
- type: custom:service-call
buttons:
- service: input_select.select_option
icon: mdi:bed
data:
option: Bedroom
target:
entity_id: input_select.climate
- service: input_select.select_option
icon: mdi:sofa
data:
option: Living Room
target:
entity_id: input_select.climate
- type: climate-hvac-modes
hvac_modes:
- 'off'
- auto
- cool
- dry
- fan_only
- type: climate-preset-modes
style: icons
preset_modes:
- none
- comfort
- eco
- boost
- sleep
- away
- type: target-temperature
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.
This is beautiful.
Updating now and giving it a try
Thank you for your effort!
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!
Along the same lines as the Mushroom Fan Card : https://github.com/piitaya/lovelace-mushroom/blob/256fa703548974df2c9090af6d38afeba1708d79/docs/cards/fan.md
This works on my fan (although I prefer up/down buttons since it has set speeds):
type: custom:service-call
entries:
- type: slider
service: fan.set_percentage
value_attribute: percentage
data:
entity_id: fan.lounge_ceiling
percentage: VALUE
Quick question
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.
color: {{ 'rgb(255, 111, 34)' if is_state('climate.pure_hot_cool','heat') else 'rgb(33, 150, 243)' }}
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:
features:
- type: slider
color: var(--rgb-state-fan)
...
card_mod:
style: |
:host {
--rgb-state-fan: {{ 'var(--rgb-deep-orange)' if is_state('climate.pure_hot_cool','heat') else 'var(--rgb-blue)' }}
}
Weird when I try this it makes the slider disappear
type: tile
name: Living Room
entity: climate.pure_hot_cool
icon: mdi:home-thermometer
vertical: false
show_entity_picture: false
features:
- type: climate-hvac-modes
hvac_modes:
- 'off'
- cool
- heat
- type: custom:service-call
entries:
- type: slider
service: fan.set_percentage
value_attribute: percentage
thumb: default
label_color: white
label: ATTRIBUTE[percentage]%
color: var(--rgb-state-fan)
data:
entity_id: fan.pure_hot_cool
percentage: VALUE
card_mod:
style: |
:host {
--rgb-state-fan: {{ 'var(--rgb-deep-orange)' if is_state('climate.pure_hot_cool','heat') else 'var(--rgb-blue)' }}
}