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%
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