Let’s start making your Home Assistant setup looking a bit more friendly. By default you will just have one page showing all the active sensors and integrations not in any particular order.
You can choose to manually manage the front end interface – known as the Lovelace UI – and for the most part you can configure this through the interface itself via the three vertical dots in the top right corner.
When you first select ‘Configure UI’ it will warn you that entities would be automatically placed as they are discovered and integrated, but once you manually start to control the UI you will have to add new entities and elements when and where you want them.
You’ll want to take a moment to think about how you want to interact with your home automation system and even how you want to layout your interface. Do you want a panel per floor of the house or per room? Do you want an overview page that summarises the status of the house? Do you want all that and more?
It is recommended to have a bit of a play to work out how you want to laydown the UI elements. Lovelace UI breaks items into ‘tabs’ which can have ‘badges’ and ‘cards’.
You can add as many tabs as you like and tabs can have multiple badges and cards within, you can even place cards inside of other cards such as the horizontal and vertical stack cards. You can also include custom cards that you have installed through HACS.
Conditional cards are really handy to show cards only when certain conditions are true or false. For example, you can setup your Chromecast to only show when powered or playing:
card:
entity: media_player.cc
type: media-control
conditions:
- entity: media_player.cc
state_not: 'off'
- entity: media_player.cc
state_not: unavailable
type: conditional
The above card will show the control card for the ‘media_player.cc’ entity but only when it is not ‘off’ or ‘unavailable’.
The Android IP Webcam that was previously added to the Home Assistant can be directly viewed through a Picture Entity card and the sensors and switches managed through an entities card:
entities:
- entity: sensor.cam_1_battery_level
name: Cam Battery
- entity: sensor.cam_1_battery_temperature
name: Cam Temperature
- entity: switch.cam_1_torch
name: Cam Torch
- entity: switch.cam_1_video_recording
name: Cam Video Recording
type: entities
The above entities card will show the battery and temperature levels and provide toggle switches for the torch and option to video record.
You can also use Glance cards to have a quick overview of a selection of entities. Remember all these elements can be used within horizontal and vertical stack cards for ultimate layout control.
entities:
- entity: binary_sensor.motion_sensor_1_sensor
name: Motion
- entity: sun.sun
- entity: sensor.moon
- entity: sensor.phone_battery
name: Phone
- entity: sensor.tablet_battery
name: Tablet
title: Overview
type: glance
All of the above code views of the Lovelace UI layout cards are just for demonstration purposes as these are all cards available directly through the interface configuration and can be added visually with drop down selections and manually edited if wished.
Don’t forget to add a card for controlling the dimmer switch and cards to view the temperature and/or luminance of the sensor.
Next: Step 10: Detail via Footstep 4: Floor