Hi
I wanted to share my lovelace config with you since I myself had some trouble finding good examples of configurations that are mobile friendly.
I’ve built my home automation to be as automated as possible, this leaves the GUI being more of a “information” place and some overrides if the automations aren’t suited for what I’m doing at that moment.
I’ve used alot of custom cards, probably 95% of my configuration are utilizing custom cards, and mainly it’s the button-card and the pop-up card.
I did a small recording of browsing the GUI from my phone, and I’ll attach some screenshots aswell!
Since I’m living in Sweden I’m using swedish words everywhere, but I’m guessing you’ll understand what’s actually showing, and for some pictures I’ve added some explanations
The first thing I wanted to to was minimize the use of different views as much as possible to not have “browse” my gui. So the main view contains alot of button-cards at the top, each of them are then configured with a pop-up card that gives me more information or options to execute things (like starting the xiaomi robot cleaner or checking for how long my lawn mower has been out.
The button-cards are also configured with different icons and colors to give me quick information of what’s happening.
The first and second row are always visible, giving me information the following (in the specific order:
Row 1:
Current “time” :(morning, day, afternoon, evening, night) which is used as conditions for automations
Alarm: Red = disarmed, Green = armed, Yellow = armed home. (popup to do it manually)
Motion top floor: white = No motion, Yellow = Motion (Popup shows details per motion sensor)
Doors: White = none openeded, Yellow = one ore more opened (Popup shows details)
Garage Doors: White = Closed, Yellow = Opened (Popop with controls and details of all sensors)
Error Information: This is used to show me information if there’s any device that’s not working
Row 2
Basically the same as above with addition of 2 lock sensors (xiaomi door sensors modified)
Row 3
This row is only shown if one of the “sensors” are active, I wanted to hide it to not have to much information shown at all times. Here are things like washing machines, vacuum cleaner, lawn mower and HVAC.
Then there are some temperature graphs together with a power usage graph. Each has their popup with more details.
After that is 3 buttons to control my lights, “Off”, “On” and “Cosy lights”.
And then comes most of our rooms, each slider controls the lights in the room, and on each room there is a popup configured which gives us control of all things in that room, and information about all sensors.
Here’s an example of my bedroom which has controls for the lights, curtains, shows me the status of temperature, doors/windows and motion. And if available a media controller (most cases google home mini’s).
Information view
Since I’m using alot of popup-cards and button-cards, I am missing the option to check history graphs on alot of items, therefore I created this page to gather all my devices for more granular information.
I created rooms here as well, and there’s also templates running in node-red to check if all devices in a room is “online”. If there are any issues with a device the template will change and it will be shown on the main page through the “Error Information” button-card.
Power View
A view to gather all my Sonoff’s/blitzwolf plugs which are measuring power usage on my utilities.
Here I also create some measurement to show me the usage and the cost for the latest hour, day, week, month and year.
Server Information
And the latest one is some information about my servers, network and UPS’s.
Link to my lovelace configuration: https://github.com/martikainen87/Home-Automation/tree/master/lovelace
I’m using lovelace-gen to use !include" since my config is pretty big. But if you’re used to lovelace and HA you’ll understand how it’s all connected
I hope this might be to use for someone to get some inspiration.
