Creating my ideal Lovelace UI (WIP)

Share your Projects!
,
#1

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:

Button Card
Card Mod
Gap Card
Horizontal Stack Card
Layout Card
Markdown Card
Swipe Card
Vertical Stack Card

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.

day_theme
day_theme2732×2048 412 KB

The interface at night using the clear dark theme.

night_theme
night_theme2732×2048 480 KB

The top home row is static, while the bottom room row can be changed by swiping.

room_scroll
room_scroll2732×2048 469 KB

The mobile version looks and functions the same.

night_theme_mobile
night_theme_mobile1125×2436 367 KB

14 Likes
#2

Nice work! Pls share your config.

Thanks ! :slight_smile:

#3

Thanks! The config isn’t at a spot that I’m ready to share it, but I’m happy to answer any questions.

#4

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.

Many ways to skin a cat, great job!

1 Like
#5

Looks fantastic!

Can’t wait until you get it to a spot when you’re ready to share.

#6

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!

#7

Thank you! I’m hoping to do some posts on how it’s all constructed as I think that’s more helpful then just sharing the completed interface.

#8

I know you’re not ready to share yet, but I’m curious how you did the header (date/time, weather etc.)?

Thanks

1 Like
#9

That’ll be great! I’ve spent a good chunk of the last two weeks racking my head trying to implement some of Mattias’ awesome UI from his github.

And you’re right, some “how to” guides are much more helpful, but take your time :+1:

#10

Any news on the tutorial? :slight_smile:

#11
#12

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.

#13

Yes, here, interest :smiley: :smiley: :smiley:

I’m just in the process of refining my tablet stations, and yours look beautiful! :slight_smile:

1 Like
#14

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)
              • Button Card
              • Button Card
1 Like