Sprucing up my Home Assistant

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

Related Posts