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:
Are you using dark sky for your custom buttons with weather? What will you go to after? I’ve been trying AccuWeather and open weather map and the default one, and they all suck!
I too am in a similar boat as you. I saw Mattias’s UI and I was floored! So I embarked a very long road to fight through understanding his stuff, coming up with my own by dumbing it down for myself. Deciding on the components, and look and feel… Wow I was a mess.
Yeah I’m using dark sky. I’m not sure what I’ll go to next, I’m pushing it off until I have to think about it haha. I was so sad to hear that announcement.
Do you have any pictures of your interface? I’d love to see what you’ve come up with!
I really dropped the ball on coming back to this. Life has been pretty busy and it’s just not something I’ve had time for. If there’s still an interest I can try and put something together in the next month or so.
Since an update to the Layout Card required me to make some changes, I thought I’d share a breakdown of the view while this is fresh in my mind.
The whole view consists of two sections in a Vertical Stack. The top section is the “header” (greeting, weather, etc) and the bottom is the “body” (controls).
I’m now heavily using the Layout Card’s grid option for the header cards which makes placement/arrangement a lot easier.
I think a bulleted list is the easiest way to explain my setup. I’m happy to answer any questions or share snippets of code if you get stuck creating your own layout!
Vertical Stack (Panel Mode)
Layout Card Grid (Header)
Markdown (Greeting)
Layout Card Grid (Weather)
Markdown (Today)
Markdown (Tomorrow)
Markdown (Tomorrow + 1)
Horizontal Stack (Status Icons)
Entity Card
Entity Card
Entity Card
Entity Card
Button Card
Button Card
Layout Card Grid (Consumables)
Button Card
Button Card
Button Card
Layout Card Grid (Quick Actions)
Button Card
Button Card
Button Card
Vertical Stack (Body)
Markdown (Home title)
Layout Card Horizontal, Max Columns = 3 (Home controls)
Horizontal Stack (Repeat as needed)
Button Card
Button Card
Horizontal Stack (Repeat as needed)
Button Card
Button Card
Horizontal Stack (Used when there’s an odd number of buttons)
Button Card
Gap Card
Swipe Card (Room controls)
Vertical Stack (Room 1 - Repeat as needed)
Markdown (Room Title)
Layout Card Horizontal, Max Columns = 3 (Room controls)
Horizontal Stack (Repeat as needed - like the Home controls)
Button Card
Button Card
Vertical Stack (Room 2 - Repeat as needed)
Markdown (Room Title)
Layout Card Horizontal, Max Columns = 3 (Room controls)
Horizontal Stack (Repeat as needed - like the Home controls)
I was using Mattias’s dashboard too. I really like it but later freezes my tablet and long load times. Needed lightweight also good looking dashboard like yours . My tablet ram is 1gb
. My tablet ram is 1gb 