Using Home Assistant and the Lovelace UI, I created an interface based on the floorplan of my house. And it looks awesome!
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.
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.
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
I ended up using these custom extensions which have all been installed via HACS: