We’ve had a tablet on the wall for the past couple of years displaying our Home Assistant interface and while it was functional, I never really loved how it looked. After seeing @Mattias_Persson’s awesome UI, I decided to try and make my own. I borrowed elements and concepts from his and some inspiration from HQ (which I think is backended by HA). I also had the following goals in mind:
- The ability to use lovelace themes
- Responsive/Mobile friendly so that I don’t have to maintain a second interface for our small screen devices
- Show important information first with easy access to secondary information
- Easy to use so my wife is happy (she really just wants to control the AC)
While it’s not complete, I thought I’d share the progress I’ve made over the past week.
I dabble in development and I’m not a designer, so using the picture entity card like Mattias did was hard for me. It offered too much flexibility and it was a real struggle to get things to look the way I wanted. I was able to get great results using a combination of the following:
The interface during the day using the clear theme. Clicking on the controls brings up more information and options. I’ll share those at a later date.
The interface at night using the clear dark theme.
The top home row is static, while the bottom room row can be changed by swiping.
The mobile version looks and functions the same.