Hello there and welcome back! It's been a while since we've mentioned Home Assistant (HA), let alone knocked up a post so please accept my most humbled apologies, shits been busy recently. However now I've got some time, let's get back into Home Assistant and have a goose at the Lovelace UI.
If you haven't already, check out my previous post which goes into HA, which sensors I plan to use and where.
Today I thought I'd go over the UI I've managed to setup so far whilst I'm still building/buying the remaining sensors! I won't go balls deep into some of the integrations and setups in this post but aiming to knock up something in the future so keep an eye out!
If you haven't read up, forgotten or confused, Lovelace is the name for the UI used in Home Assistant to display and customise all your elements. In HA you have the option to use the in-built configurator to build your pages and elements or use YAML Mode which allows you write outside of the UI, giving you more control (and a lot more hassle!). More on YAML mode here. I've chosen to go the YAML mode route as I can create a file/folder structure of my own choosing and cleverly (and simply) comment out bits I do not wish to include. Making sense?
So, how does this all come together? To display all the sensors and other bits in HA, I've broken down my home automation into 5 categories and created separate pages to manage them.
- Home: This is the landing page for HA and will show a high level overview of HA and also more personalised elements such as presence detection.
- Sensors: The Sensors page will manage all the lighting and also display temperature/humidity and light exposure levels.
- Security: This page will cover all the security aspects such as PIR, door/window, fire/smoke, water leak sensors and CCTV.
- Media: All of the media components will be displayed here as well as remote panels to control things such as IR commands for TVs and PS4.
- System: This page is to provide a detail overview of the current system including the Raspberry Pi host machine, Hassio OS and other key integrations/devices (media players, network status etc)
Still with me? Good stuff ...
As Home Assistant is constantly being updated and new integrations/add-ons are being added, its hard to pin down a 'final design' as there is always something new to install or setup! With that being said, and whilst I have the time, I'm going to go over two pages which I have managed to get into a sort of 'completed' state, Home and Sensors.
Like you've seen in the screenshot above, this is the Home page where you're first landed to when opening HA. I've gone for a three column approach which you'll find across all of the other pages. So let's break down the elements on this page ...
- Weather (custom:weather-card)
Simple enough, this card displays the weather for my home location.
- Travel (Waze Travel Time and UK Transport)
This card has two elements, Waze Travel Card and UK Transport Card. Waze provides an estimated car journey time to certain locations I've designed whilst UK Transport shows real-time bus timetables for the closest stop to home. These were a bit of a pain to setup so I'll be creating a separate post around their setup in the near future.
- Shopping List (Shopping List)
It's a shopping list. Pretty simple, may need sprucing up.
- Calendar (custom:atomic-calendar)
This provides a view of my Google Calendar although it still needs setting up Google side so it looks pretty dull at the moment.
- Picture Entities (Picture Entity)
These switch between photos of us either at home (sleeping) or away (on holiday) depending on if the phones are connected to the home WiFi.
- Icons (custom:button-card)
These icons change colour depending on entities state e.g. phones connected to WiFi, cats are home (cat flap trigger) and car is parked (distance sensor).
- Map (Map, OwnTracks)
Although zoomed out to hide home location, this map provides a view of my phone location (via OwnTracks) and designated zones (home, work).
- IP Camera (custom:swipe-card)
This card allows you to swipe and view other configured live camera view saving you valuable UI space.
- Lights (custom:button-card)
These buttons are setup to enable/disable all the lights in a given room e.g. Living Room lights off.
- Scenes (custom:button-card)
These buttons to enable a preconfigured scene e.g. Netflix - Turn on TV, turn off main lighting, change RGB colour to Red.
- Status (custom:button-card)
These icons change state depending on element status e.g. smoke detector triggered > Flash red.
This will no doubtingly change in the near future but for now it serves a purpose.
The Sensors page (may be renamed at a later date) is to display all of the heat/humidity sensors as well as manage the lighting around the house. Similar to the Home page, I've gone for a 3/4 column approach, in this case having the ground floor lights and temperature on the left, and first and second on the right (merged the two as I 6 columns didn't look right). I won't go over each element as this only uses three types of cards to display all of the sensory goodness ...
- RGB Light Cards (custom:rgb-light-card)
Quite a nice card to use with RGB lighting. I've created custom icons to represent different effects or colours
- Custom Mini Graph Card (custom:mini-graph-card)
Again a nice card for displaying temperature or any metric available. In the screenshot above I've used sensor:cpu_temperature and sensor:processor_use as placeholders whilst I build the sensors.
- Custom Button Card (custom:button-card)
Although this card is mainly for buttons (and a good one!), I've used it to create banners/titles above certain elements.
Here is a little preview of the remaining cards that still need building/perfecting (Security, Media, System and Test). You can also find my HA code hosted on GitHub here if you want to delve in deeper. Once I've setup a few more pages I'll drop another update but between that keep an eye out for my next post around the integrations I've used/setup/tested!