Since I started using Home Assistant I’ve been using the basic display options in the front end. It’s been fine – it’s simple and a good starting point. Home Assistant, though, is far more flexible than that. There are a wealth of themes and custom controls that allow you to configure the user interface to your taste. I decided to experiment.
A great starting point is Awesome Home Assistant, a website of curated resources for Home Assistant. It was there that I found the custom button card that has formed the basis of my experiments so far. The custom card goes way beyond the default options. When combined with the horizontal and vertical stack elements already built in to Home Assistant, it allows you to create a really clean and compact interface.
Lights are a good example. I originally used an entity list to control my lights:
It does the job. There’s a switch to control the lights, the icon shows the current colour of the light, and a tap or click on the line brings up the full control options. With a lot of lights, though, it takes up a fair amount of space on screen.
With the custom button card, I can save that space:
A single tap on each icon toggles the light and a long press brings up the full control options.
The buttons are configured in the UI using a custom card. I used the horizontal and vertical stack cards to group the lights, and a custom button using the template feature for each light. The manual card configuration is:
cards:
- cards:
- entity: light.lounge
icon: 'mdi:ceiling-light'
name: Lounge
template: light
type: 'custom:button-card'
- entity: light.lounge_lamp
icon: 'mdi:floor-lamp'
name: Lounge
template: light
type: 'custom:button-card'
type: horizontal-stack
- cards:
- entity: light.dining_room
icon: 'mdi:ceiling-light'
template: light
type: 'custom:button-card'
- entity: light.dining_room_lamp
icon: 'mdi:lamp'
name: Dining Room
template: light
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
I’ve only shown the first two entries in each row here for brevity. The light template goes into the main UI configuration YAML. The documentation refers to using the file ui-lovelace.yaml, but you can access it via the triple dot menus in the front end – first click “Configure UI” and then “Raw configuration editor” from the same menu when in editing mode. The template allows you to set some defaults for the buttons:
button_card_templates:
light:
aspect_ratio: 1/1
color: auto-no-temperature
color_type: card
tap_action:
action: toggle
hold_action:
action: more-info
show_icon: true
show_name: true
styles:
card:
- font-size: 90%
That’s just the start. The configuration goes further, allowing snippets of Javascript to control elements of the button styling. I used the feature to display my temperature sensors with a background colour that changes according to the temperature:
temperature:
aspect_ratio: 1/1
color_type: icon
tap_action:
action: more-info
show_icon: true
show_name: true
show_state: true
styles:
card:
- font-size: 90%
- background-color: >
[[[ if(entity.state > 30) return 'darkred'; if(entity.state > 25)
return 'crimson'; if(entity.state > 20) return 'orange';
if(entity.state > 10) return 'seagreen'; if(entity.state > 0)
return 'steelblue'; return 'darkblue'; ]]]
The result is a card that tells me at a glance how hot it is:
The ability to change the colours and even icons is particularly useful for sensors that show important information. The basic entity list for my sensors was adequate:
The custom button version really highlights what I need to know:
I’ve only just started scratching the surface of customising the Home Assistant front end, but I’m impressed. Even though the customisations often require writing snippets of YAML, there’s no need to dig into configuration files. It can all be done through the front end, and that’s a testament to how far Home Assistant has come since I first started using it.
Better designers than me have worked on themes and designs for their Home Assistant interfaces, and there are plenty of great examples to draw on for inspiration. I’ve definitely got more exploring to do to continue my customisations.
in Home Automation
I like what you did there, and I would love to have an tutorial for getting UI things, like buttons, in to “template” files (yaml-files?) and how to reference them in all the ways necessary
Most of the UI elements can be added through the UI editor in the web front end, which you get to by selecting “Edit dashboard” from the three dot menu to the right of the title bar.
To add a custom button card, you can add an element and then use the code editor to type in the YAML configuration. My example above is a set of horizontal stacks nested within a vertical stack. You could also use a grid, but I think that was added after I’d set it up my way.
There are lots of examples on the github page for the custom button card (the link is above)
The template elements can be added by adding them to the top of the configuration in the raw configuration editor – when editing the UI, select the three dot menu again and select “Raw configuration editor”