A different take on designing a Lovelace UI

I am new to HA and spent a week setting up my system and after seeing this. I know nothing and understand even less. That’s incredible work :sob:. I have so many questions but don’t even know where to start. Well done again.

4 Likes

To be honest: Thats is by far the best Lovelace-Ui that I’ve seen ! Good work! Will try to copy something here :smiley:

2 Likes

Very nice work!! I looking to copy some of the ideas… How did you get rid of the Home Assistant UI sidebar and title bar? I searched your ui-lovelace.yaml and didn’t see anything obvious, mind you it’s over 3000 lines.

Anyway, thanks for sharing your work!

1 Like

He @gwww you need this: https://github.com/maykar/custom-header
To get tid of the sidebar and header/title-bar

1 Like

Hey Mattias. I’ve had a deep dive into your code and it’s given me lots of ideas on how I want to approach my UI.

One question though, if you’re running HA on RPI, how do you then get the command line sensors for your iMac to show up? Or, is this only when you view the UI on your iMac?

With shell commands, check out the secrets.yaml.

Thanks, I’ll see if I can work it out.

What is the hui-vertical-stack-card - I can’t find it anywhere…

It’s simply the built in vertical-stack card.

Calling it custom:hui-vertical-stack-card allows you to make is an element in picture elements or a row in entities cards.

Same trick can be used to nest other cards.

1 Like

Great ui!
i would like to create a light button like yours with toggle on/off and hold that pop up a window with dimmslider, temperature och color, could you post the code for that?
i have all the plugins that you have but i cant seem to get i to work :frowning: i don´t know what i´m missing

Did you place the javascript url’s in the ui-lovelace.yaml?

resources:
  - type: js
    url: /local/community/bar-card/bar-card.js
  - type: module
    url: /local/community/button-entity-row/button-entity-row.js
  - type: module
    url: /local/community/circle-sensor-card/circle-sensor-card.js
  - type: js
    url: /local/community/light-entity-card/light-entity-card.js
  - type: module
    url: /local/community/lovelace-card-mod/card-mod.js
  - type: module
    url: /local/community/lovelace-layout-card/layout-card.js
  - type: module
    url: /local/community/mini-graph-card/mini-graph-card-bundle.js
  - type: module
    url: /local/community/mini-media-player/mini-media-player-bundle.js
  - type: js
    url: /local/community/vertical-stack-in-card/vertical-stack-in-card.js
  - type: css
    url: 'https://sf.abarba.me/font.css'
  - url: /local/community/compact-custom-header.js
    type: module
  - type: js
    url: /local/community/light-slider-card.js
  - type: module
    url: /local/community/popup-backdrop-filter.js
  - type: js
    url: /local/community/upcoming-media-card.js
title: Huis

I’m also implementing this wonderfull design and the components work like a charm, and i’m learning basic swedish

3 Likes

Yes. As per Custom Component: HACS

I’m also implementing this wonderfull design and the components work like a charm, and i’m learning basic swedish

:joy:

https://github.com/matt8707/hass-config/issues/2

The dimmer unfortunately doesn’t work on mobile if thats what you mean.

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

6 Likes

@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?

1 Like

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?