A different take on designing a Lovelace UI

You have inspired me to (again) redesign my control panel, this time using the browser control popup and notifications. Still got some polishing to do to make it shine like yours, but thank you for providing config for others to learn from


@Mattias_Persson How does this scale on a vertical phone screen?

Not very well.

Interesting thanks. Do you plan to make your Lovelace UI responsive to different screen sizes?

This…is…the most beautiful UI i’ve ever seen. Great work. Do you plan to add additional “pages” for cameras or further sensors?

And like the question before: Any chance to get something like this visible on a vertical screen?


Have you seen HKI?

My I ask how you got the pop-up with the three sections side by side by side?

My I ask how you got the pop-up with the three sections side by side by side?

Yeah, looks great!

I think I will use a combination of HKI (which I’m already using) for the phone and your take on lovelace for the tablet. I really like your clever approach to this, thanks a lot for sharing your code. Highly appreciated!

1 Like

I don’t plan to no. I like the one page layout.

Since it’s made for a specific tablet resolution, no. You could make one page for tablet and one for mobile. An other option is to design for mobile first. But the homekit app is sufficent for me.

WOW so nice !!! This show how flexible HA code can be!! I gonna try to rebuild my WebUI with those nice settings… Gonna inspect your GitHub how you did it !!!

1 Like

@Mattias_Persson nice UI! What are your ideas with the alarm panel card? :slight_smile: i wonder if you have any sketch/ideas for that too :smiley:

I did 2 wget action to get 2 files from your GitHub. But now get 2 errors on those files:


2020-02-03 10:54:33 ERROR (MainThread) [frontend.js.latest.202001082] Uncaught SyntaxError: Unexpected token '<'
2020-02-03 10:54:34 ERROR (MainThread) [frontend.js.latest.202001082] Uncaught SyntaxError: Unexpected token '<'

what can I do to solve this?

Hi really great work you have done. I am working in Lovelace raw editor and having some issues implementing this. I have taken the part of DATORLAMPA and used my own entities but it keeps giving me error when implementing in manual card. Can you post an example of this on how to implement in manual card?

What do you mean by “manual card”? Just the slider/dimmer would be something like

- color_temp: true
  entity: light.datorlampa
  header: false
  persist_features: true
  type: 'custom:light-slider-card'

Never had this issue. What happens if you install them through hacs?

I didn’t find them in hacs ''s…

popup-backdrop-filter has to be added to hacs

maykar/compact-custom-header is replaced by custom-header

1 Like

Make sure you download the raw files from github.