Using Home Assistant and the Lovelace UI, I created an interface based on the floorplan of my house. And it looks awesome!

Bit of reseach

Before I started, I did a quick research of current home automation solutions and their UI’s. I tried out a couple of them, but in the end I think Home Assistant’s Lovelace is still the more flexible of all.

New Floorplan UI in Home Assistant

So I renewed my Home Assistant setup to create a UI interface inspired by a floorplan example I found from Luke Vink. See his inspiring video, github repo and Home Assistant post. Also this video from Will Surridge Tech was very helpfull.

Based on the floorplan drawings of my house, I was able to create a 3D drawing in SweetHome3D in just half a day. Then, rendering all images for all lights took a couple of days, but meanwhile I created the UI in Home Assistant Lovelace based on Luke’s example and Will’s video.

After doing a quick proof of concept, I recommend to quickly start using templating with custom extensions like the declutter-card or the layout-card. This helps to stay consistant , saves lots of duplicate code and helps to adjust small details (like icon, color, etc) of many items at the same time.

Switch to camera view on motion

Based on motion sensors I wanted to display video from a camera. First I added the video on the room, or at the front door, where the camera’s are. This can be achieved using the conditional card and position the camera view at the right position on the UI. It worked, but the camera view was just too small in the UI, so I decided for another option: switch view tab on motion so the camera would be full screen.

For this I use the browser_mod HACS interation. This is a really nice integration which not only allows you to control the navigation of the browser, but also provides a way to play sounds in the browser. So now, whenever there is motion, a short ‘ping’ is played, and the view switches to the full screen camera view. This is a simple view with just a ‘picture-entity’ card. After 1 minute of no movement, the view switches back to the floorplan. The switching is achieve via very simple automations.
Nice! Now, even without looking, we can hear when one of the kids gets out of bed :-P

Used extensions

I ended up using these custom extensions which have all been installed via HACS:

• config-template-card - base of the floorplan view. Allow tracking of entity states so element on the ui change when the entity state changes.
• declutter-card - used for templating all the room images. Based on the state the opacity is changed.
• layout-card - used for other views to nicely position and size cards on a view.
• button-card - used for most icons on the floorplan because it supports templating and allows you to modify the image or style based on the entity state. E.g. for temperature icons, it changes the background color based on whether the temperature is higher or lower then the current thermostat setting.
• text-element - to position texts on the floorplan.
• auto-entities - Add multiple entities to any card based on include/exclude filtering.
• browser_mod HACS interation - to control browser navigation based on states and play sounds.