Not to mention == vs === is pretty much meaningless with strings that aren’t numbers.
Another vote for button-card from me, the damn thing is so configurable its scary!
It changes icons and their colours, calls appropriate more-info.
I had to create an internal template sensor to get required state string from generic_thermostat:
- platform: template
sensors:
thermostat_current_state_and_temp:
value_template: >
{% set state_object = states.climate.thermostat %}
{{ state_object.attributes.hvac_action}} {{state_object.attributes.current_temperature}} °C
and here is the button-card in entities card:
type: entities
entities:
- type: 'custom:button-card'
style: |
ha-card {
box-shadow: none
}
entity: sensor.thermostat_current_state_and_temp
tap_action:
action: more-info
entity: climate.thermostat
name: |
[[[
return states["climate.thermostat"].attributes.friendly_name;
]]]
label: |
[[[
return states["climate.thermostat"].state + ' ' + states["climate.thermostat"].attributes.temperature + '°C'
]]]
show_state: true
show_label: true
size: 60%
state:
- operator: template
value: |
[[[
return entity.state.startsWith('off');
]]]
icon: 'mdi:power-off'
color: gray
- operator: template
value: |
[[[
return entity.state.startsWith('idle');
]]]
icon: 'mdi:sleep'
color: black
- operator: template
value: |
[[[
return entity.state.startsWith('heat');
]]]
icon: 'mdi:fire'
color: red
styles:
grid:
- grid-template-areas: '"i n s" "i l s"'
- grid-template-columns: 14% auto auto 10px
card:
- font-size: 14px
name:
- justify-self: start
- text-transform: capitalize
label:
- justify-self: start
- text-transform: capitalize
- color: var(--secondary-text-color)
- font-weight: 300
state:
- justify-self: end
- text-transform: capitalize
That’s my first button-card so obviously it can be done better, I just wanted to see if it’s possible to make a functional one.
All in all it is possible, button-card is a very powerful thing.
2 Likes
I appreciate the example you shared. However, the difference in complexity between what you posted and what I currently do to achieve the same effect, has led me to decide that I will continue using Custom-UI.
Hopefully, by the time I absolutely must discard Custom-UI, there will exist a compact way in Lovelace to achieve my modest requirements.
Agree, I wish it could be easier… on the other hand, I added some new functionality to it (on/off by hold) and it’s literally a couple of strings so that’s the core config that takes the most time and space.
It’s definitely possible to avoid creating additional sensors (using custom_fields) so it looks better but the whole thing is almost 100 lines… that’s the price for flexibility (as it’s really flexible in terms of what is configurable and where we can place it on the card but requires some JS knowledge - grid etc).
for individual buttons this can be a pain, but when you have a set of identical buttons for lights/switches what have you, you can create a button-card-template, or a decluttering template, or even use Lovelace_gen to cut code lines drastically.
Still no replacement for custom-ui, (to get back to topic) but very nice indeed.
FYI: Custom-ui for HA 110+ is here
Not all options designed for state cards are supported by Lovelace, but many still are, and of course icon_color templates work again. Thanks to all who helped me create this.
And of course, to Andrey! Where ever you may be, hope you fare well.
That’s good… i have some questions about it.
What to do with the old configs? Actually i have this in the frontend.yaml:
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/custom-weather-animated.html
- /local/hass-bha-icons.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
- /local/custom_ui/custom-weather-animated.html
And now i have only the custom-ui.js inside /www/custom-ui/ and added the entry inside resources.yaml.
Can i delete the old folder and the options inside frontend?
BTW I reload resources and cleared cache but still have the old custom ui in the infos…
for custom-ui: custom-ui/README.md at master · Mariusthvdb/custom-ui · GitHub
es5 can probably be taken out completely since that is for older devices. Unless you have older devices of course 
the animated weather card has long been replaced by a Lovelace variant.
the icons, I dont know. But, extra_html_url imports are soon to be deprecated, so best find a substitute.
depending on the card (does is start and end with ), you might want to test the same technique.
Ok, thanks… now after many clear cache i see the new adapted version.
Got this error after restarting:
2020-05-28 22:51:22 ERROR (MainThread) [frontend.js.latest.202005195] https://192.168.1.24:8123/local/custom-ui/custom-ui.js?v=20200528:31:8908 Uncaught TypeError: e.push is not a function
One thing… i still can see in the customization of the entities, voices regarding the old custom UI. How to delete them (i already disabled all the old entries about it)?
One more way of integration, probably the most “modern” considering the way HA is moving to 
There is no need to modify any config files, especially usefull if no resources.yaml is used in your
config yet.
Ensure you have enabled Adavnced mode for your user. And then:
1 Like
must confess I don’t have a clue what you are saying here…
What i mean is the following:
when i go to the customization ui and want to change the attributes for an entity i can see between other options the following:
That, i think, is related to the old custom_ui or am i wrong? In case it is, how to delete those entries as i don’t have anymore nothing related in the various configs?
Hope to be clear now… 
must confess I have never used the configuration option for customization at /config/customize
as I have stated in the readme, there will be remnants of states ui.
You seem to ask everything I described in the Repo…
Yes, you’re right and please pardon me…
How we will be informed about updates?
‘Watch’ the repo…